/* font-family: Ubuntu, Century Gothic, Roboto, Tahoma, Helvetica, Droid Sans, Lato, Montserrat; */ 

/*
for smooth scrolling use - scroll-behavior: smooth;
font-size: calc(9px + 0.3vw);
Blue - #0088FF
light grey - color: #D0D0D0;
-webkit-font-smoothing: antialiased; 

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

// 1. linear gradient on text //

background: linear-gradient(90deg, #ff9900, #ff0000);
-webkit-background-clip: text;
color: transparent;
display: inline-block;

// 2. linear gradient on text//

background: linear-gradient(90deg, #ff9900, #ff0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

*/

/* Small Screen Size Template ~

/*@media screen and (min-width: 320px) and (max-width: 599px) {}
/*@media screen and (min-width: 600px) and (max-width: 732px) {} /* 600 */
/*@media screen and (min-width: 733px) and (max-width: 767px) {} /* 732 */
/*@media screen and (min-width: 768px) and (max-width: 799px) {} /* 768 */
/*@media screen and (min-width: 800px) and (max-width: 800px) {} /* 800 */
/*@media screen and (min-width: 801px) and (max-width: 824px) {} /* 823 */
/*@media screen and (min-width: 825px) and (max-width: 960px) {} /* 854 + 960 */
/*@media screen and (min-width: 961px) and (max-width: 991px) {} /* 990 */
/*@media screen and (min-width: 992px) and (max-width: 1023px){} 
/*@media screen and (min-width: 1024px) and (max-width: 1024px){}
/*@media screen and (min-width: 1025px) {} */

html {  
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
    border: 0;
    outline: none;
    background-color: #111111;
}
body {
    margin: 0;
    padding: 0;
    color: #FFF;
    outline: none;
    font-family: 'Montserrat', sans-serif;
    -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 1024px) { /* slightly darker for devices */

    body {
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) { /* slightly lighter for laptops and desktops  */

    body {
        background-color: #111111;
    }
}

/* //////////////////// CUSTOM SCROLL BAR //////////////////// */

body::-webkit-scrollbar {
    border-radius: 6px;
    width: 12px;
    background-color: rgba(0,0,0);
}
body::-webkit-scrollbar-button {
    border-radius: 5px;
    background-color: #000;
}
body::-webkit-scrollbar-thumb {
    border: 2px solid #000;
    border-radius: 5px;
    background-color: #222;
}

/* ///// Firefox ///// */

html {
    overflow-y: scroll;
    scrollbar-width: thin !important;
    scrollbar-color: #222222 #000000 !important;
}

/* ///// IE 10+ ///// */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    
    body {
        -ms-overflow-style: none;
        -ms-overflow-scrolling: touch;

        /* IE styles for custom scrollbar */
        scrollbar-base-color: #000;
        scrollbar-face-color: #222;
        scrollbar-3dlight-color: #000;
        scrollbar-highlight-color: #000;
        scrollbar-track-color: #000;
        scrollbar-arrow-color: black;
        scrollbar-shadow-color: #000;
        scrollbar-dark-shadow-color: #000;
    }
}

/* //////////////////// END - CUSTOM SCROLL BAR //////////////////// */

video {
    outline: none;
}
source {
    outline: none;
}
a {
    color: #FF9900;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: 0;
}
a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}
h1 {
    margin: 0;
    padding: 0;
    font-size: 20px;
    color: #FFF;
}
h2 {
    font-size: 20px;
    width: 100%;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;
    margin-left: 5px;
    margin-top: 80px;
    padding: 10px;
    text-align: left; 
}
h3 {
    font-size: 12px;
    color: #FFF;
}
h4 {
    width: 100%;
    margin: 11px 0 10px 0;
    padding: 9px 9px 8px 9px;
    font-size: 18px;
    text-align: center;
}
h5 {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
}
h6 {
    font-size: 18px;
    color: #FFF;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #FF0000;
    margin-left: 5px;
    margin-top: 180px;
    padding: 12px 10px 12px 10px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.3);
}
label {
    font-size: 12px;
    color: #fff;
}
form-control:focus,
input:focus,
select:focus,
button:focus {
    outline: none;
}
select:focus{
    cursor: pointer;
    text-overflow: scroll;
    outline: none;
}
textarea {
    outline: none;
}
ul li{
    list-style-type: none;
}

/* /// Italic font in placeholders /// */
::-webkit-input-placeholder {
   font-style: italic;
}

#spacer {
    margin: 0;
    padding: 0;
}

/* /// Admin Nav /// */

#adminNavPledgeButt {
    margin-left: 0;
    border: none; 
}
#adminNavUL1 {
    margin-left: 63px; 
    display: inline-flex;
    border: none; 
}
.adminNavEditButt {
    margin: 25px 5px 0 0; 
    font-size: 12px;
}
.adminNavListItem1 {
    margin: 25px 0 0 0; 
    font-size: 12px;
}
#adminNavMicroAvatar {
    margin:-15px 5px 0 0;
}
.adminNavButtText {
    margin:-16px 0 0 35px;
}
#adminNavAriaButt2 {
    border: none;
    background-color: rgba(0, 0, 0, 0); 
}
#adminNavUL2 {
    border: none; 
    display: inline-flex;
}

/* //// Custom Headings //// */

@media screen and (min-width: 320px) and (max-width: 1023px) { /* fat */

    .goldHeadingLogIn {
        width: 100%;
        margin: 0;
        padding: 8px 10px 9px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goldHeading {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goldHeading2 {
        margin: 0 0 15px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goldHeading4 {
        margin: 0 0 7px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .nextGigHeading {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
    }
    .relatedArtistheading {
        margin: 0 0 15px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;         
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* fat */

    .goldHeadingLogIn {
        width: 100%;
        margin: 0;
        padding: 8px 10px 9px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goldHeading {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goldHeading2 {
        margin: 0 0 15px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goldHeading4 {
        margin: 0 0 7px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .nextGigHeading {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
    }
    .relatedArtistheading {
        margin: 0 0 15px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;         
    }
}
@media screen and (min-width: 1025px) { /* skinny */

    .goldHeadingLogIn {
        width: 100%;
        margin: 0;
        padding: 8px 10px 9px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333; 
        background-color: #111;
    }
    .goldHeading {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
    }
    .goldHeading2 {
        margin: 0 0 15px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
    }
    .goldHeading4 {
        margin: 0 0 7px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
    }
    .nextGigHeading {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
    }
    .relatedArtistheading {
        margin: 0 0 15px 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;         
    }
}

.goldHeading3 {
    margin: 15px -15px 10px -15px;
    padding: 9px 9px 10px 9px;
    color: #ff9900; 
    text-shadow: 0 0 0 #ff9900;
    font-size: 14px; 
    background-color: #111; 
    border: 2px solid #ff9900;
}

.goldHeadingPR {
    margin: 250px 0 0 0;
    padding: 10px 10px 9px 10px;
    font-size: 14px;
    color: #ff9900;
    text-align: center;
    background-color: #111; 
    border: 2px solid #333;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    .goldHeadingPRF {
        margin: 0 0 10px 0;
        padding: 9px 0 10px 0;
        color: #ff9900; 
        font-size: 14px;
        text-align: center;
        border-radius: 6px; 
        border: 2px solid #ff9900;
        background-color: #111;
    }
}
@media screen and (min-width: 768px) and  and (max-width: 1024px) {
        
    .goldHeadingPRF {
        margin: 10px 15px 10px 15px;
        padding: 9px 0 10px 0;
        color: #ff9900; 
        font-size: 14px; 
        text-align: center;
        border-radius: 6px; 
        border: 2px solid #ff9900;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) {
        
    .goldHeadingPRF {
        margin: 10px 15px 10px 15px;
        padding: 9px 0 10px 0;
        color: #ff9900; 
        font-size: 14px; 
        text-align: center;
        border-radius: 6px; 
        border: 2px solid #ff9900;
        background-color: #111;
    }
}

.goldHeadingJava {
    margin: 250px 0 0 0;
    color: #ff9900; 
    font-size: calc(12px + 0.3vw); 
    text-align: center;
    background-color: #111; 
    border: 2px solid #ff9900;    
}
.greyHeading {
    margin-bottom: 8px; 
    border: 2px solid #333; 
    color: #666; 
    font-weight: 600;
    font-size: calc(12px + 0.3vw); 
    text-align: center;
    background-color: #111; 
}


@media screen and (min-width: 320px) and (max-width: 1024px) { /* fat */

    .goldHeadingPH {
        margin-bottom: 8px; 
        color: #ff9900;
        font-size: 14px; 
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .greyHeadingPH {
        margin-bottom: 8px;
        color: #777;
        font-size: 14px; 
        text-align: center;     
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
}
@media screen and (min-width: 1025px) { /* skinny */

    .goldHeadingPH {
        margin-bottom: 8px; 
        color: #ff9900;
        font-size: 14px; 
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111; 
    }
    .greyHeadingPH {
        margin-bottom: 8px;
        color: #777;
        font-size: 14px; 
        text-align: center;     
        border-radius: 8px;
        border: 2px solid #333; 
        background-color: #111; 
    }
}
.greyHeadingSA {
    margin: 0 0 8px 0; 
    color: #ff9900;
    font-size: 14px; 
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111; 
}
.galleryHeading {
    margin: 8px 0 8px 4px; 
    padding: 0;
    color: #999;
    font-weight: 600;
    font-size: 12px;
    text-align: left;
}
.noContentHeading {
    width: 85%;
    margin: 8px 0 -1px 0;
    padding: 8px 9px 9px 9px; 
    color: #ff0000; 
    font-size: 12px;
    text-align: center;
    border: 2px solid #333;
    border-radius: 6px;
    background-color: #111; 
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .postHistoryHeadingSm {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .postHistoryHeadingLg {
        display: none;
    }
    .eventHistoryHeadingSm {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventHistoryHeadingLg {
        display: none;        
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .postHistoryHeadingSm {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .postHistoryHeadingLg {
        display: none;
    }
    .eventHistoryHeadingSm {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventHistoryHeadingLg {
        display: none;        
    }
}
@media screen and (min-width: 1025px) {
    
    .postHistoryHeadingSm {
        display: none;
    }
    .postHistoryHeadingLg {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
    } 
    .eventHistoryHeadingSm {
        display: none;
    }
    .eventHistoryHeadingLg {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
    }
}

.noScriptHeading {
    margin: 250px 0 0 0;
    color: #ff9900; 
    font-size: calc(12px + 0.3vw); 
    text-align: center;
    background-color: #111; 
    border: 2px solid #ff9900;    
}

/* //// Confirmation Notifications //// */

.infoBubble {
    display: none; /* Initially hidden */
    position: absolute;
    height: 32px;
    width: 200px;
    top: 10px; /* Adjust to position above Viewlivebutton2 */
    left: 50%; /* Center the bubble horizontally */
    transform: translateX(-50%);
    padding: 5.5px 10px 6.5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #0088FF;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #222;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}
.infoBubble:after {
    content: "";
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #222 transparent transparent transparent; /* Creates arrow */
}
.closeBubble1 {
    float: right;
    width: 10px;
    margin-top: 1px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
}
.closeBubble2 {
    float: right;
    width: 10px;
    margin-top: 1px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
}
.closeBubble3 {
    float: right;
    width: 10px;
    margin-top: 1px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
}
.closeBubble4 {
    float: right;
    width: 10px;
    margin-top: 1px;
    color: #0088FF;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
}
.saveInfoBubble {
    display: none; /* Initially hidden */
    position: absolute;
    height: 32px;
    width: 200px;
    bottom: 112px; /* Adjust to position above Viewlivebutton2 */
    left: 50%; /* Center the bubble horizontally */
    transform: translateX(-50%);
    padding: 6px 10px 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #0088FF;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #222;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}
.saveInfoBubble:after {
    content: "";
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #222 transparent transparent transparent; /* Creates arrow */
}
.closeBubble5 {
    float: right;
    width: 10px;
    margin-top: 0.5px;
    color: #0088FF;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
}
.closeBubble6 {
    float: right;
    width: 10px;
    margin-top: 0.5px;
    color: #0088FF;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
}
#cancelNotificationContainer {
    margin: 100px 0 0 0; 
    padding-left: auto; 
    padding-right: auto; 
    vertical-align: center;
}
#cancelNotificationWrapper {
    margin: 100px auto 40px auto; 
    padding: 20px 20px 16px 20px; 
    background-color: #000; 
    border: 2px solid #333; 
    border-radius: 8px;
}
#ADACcontainer {
    margin: 30px 0 0 0; 
    padding-left: auto; 
    padding-right: auto; 
    vertical-align: center;
}
#ADACinner {
    margin: 40px auto 40px auto; 
    padding: 20px; 
    background-color: #000; 
    border: 2px solid #333; 
    border-radius: 6px;
}
#AuthChekLoggedOut {
    margin: 200px 0 5px 0;
    padding: 10px;
    font-size: calc(11px + 0.3vw);
    border: 2px solid #0088FF;
    background-color: rgb(0, 136, 255, 0.1);
}

/* ============================================== */

/* ///////////// START -LOADER GIFS ///////////// */

/* ///////////// Loading 3 Dots gif ///////////// */

.loading {
    position: fixed;
    margin-top: 50px; 
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 8888;
}
.loading > div {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -30px;
}
.loading > div > div {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #ff8c00;
    top: 10px;
    left: 10px;
    transform-origin: 20px 20px;
    border-radius: 8px;
    animation: spin-a 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loading > div > .c2 {
    top: 10px;
    left: auto;
    right: 10px;
    transform-origin: -4px 20px;
    animation: spin-b 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loading > div > .c3 {
    top: auto;
    left: auto;
    right: 10px;
    bottom: 10px;
    transform-origin: -4px -4px;
    animation: spin-c 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loading > div > .c4 {
    top: auto;
    bottom: 10px;
    transform-origin: 20px -4px;
    animation: spin-d 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes spin-a {
  0%   { transform: rotate(90deg); }
  0%   { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-b {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  25%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-c {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  50%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-d {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  75%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
.loading > span {
    position: absolute;
    width: 120px;
    height: 30px;
    top: 50%;
    left: 50%;    
    margin-top: -25px;
    margin-left: -60px;
    color: #ff8c00;
    font-size: 13px;
    text-align: center;
    text-shadow: 0 0 0 #ff9900;
}

/* ///////////// Loading 3 Dots gif - load more Posts ///////////// */

.loadingPosts {
    position: relative;
    margin-top: 90px;
    z-index: 8888;
}
.loadingPosts > div {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -30px;
}
.loadingPosts > div > div {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #ff9900;
    top: 10px;
    left: 10px;
    transform-origin: 20px 20px;
    border-radius: 8px;
    animation: spin-a 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loadingPosts > div > .c2 {
    top: 10px;
    left: auto;
    right: 10px;
    transform-origin: -4px 20px;
    animation: spin-b 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loadingPosts > div > .c3 {
    top: auto;
    left: auto;
    right: 10px;
    bottom: 10px;
    transform-origin: -4px -4px;
    animation: spin-c 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
.loadingPosts > div > .c4 {
    top: auto;
    bottom: 10px;
    transform-origin: 20px -4px;
    animation: spin-d 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes spin-a {
  0%   { transform: rotate(90deg); }
  0%   { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
  0%, 100% { opacity: 1;} 50% {opacity: 0.2;}
}
@keyframes spin-b {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  25%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-c {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  50%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
  0%, 100% { opacity: 1;} 50% {opacity: 0.4;} 
}
@keyframes spin-d {
  0%   { transform: rotate(90deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  75%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }  
  
}
.loadingPosts > span {
    position: absolute;
    width: 120px;
    height: 30px;
    top: 50%;
    left: 50%;    
    margin-top: -25px;
    margin-left: -55px;
    color: #ff8c00;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* /// Round clock loading gif - audio player /// */

.loader {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background: #0f0f0f url("http://www.mvgen.com/loader.gif") no-repeat scroll center center / 60px 60px;
    opacity: 0.5;
    z-index: 1000;
}
/* ////// START - SQUARE 9 DOTS - loading gif ///// */

/* artist rego page */

.ARloadGridPosiiton { 
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0; 
    padding: 0;
}
.ARloadGridPosiiton span {
    margin-top: 5px;
    color: #777; 
    font-size: 18px;
}

/* Posts Upload + Delete & Post History Delete */

.YPloadGridPosiiton,
.YPDloadGridPosiiton,
.PHDloadGridPosiiton {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.EVloadGridPosiiton,    /* Events */
.ETloadGridPosiiton,    /* Event Ticketing */
.ECTloadGridPosiiton,   /* Event Create Tickets */
.EVDloadGridPosiiton,   /* Event Delete */
.EHDloadGridPosiiton,   /* Event History Delete */
.EHDAloadGridPosiiton { /* Event History Delete All */
    position: absolute;
    height: 100%;
    width: 100%;
    margin: -35px 0 0 0;    
    padding: 0;    
}
.EVPloadGridPosiiton {  /* Event Preview */
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;        
    padding: 0;    
}

/* Upload Causes + Delete */

.UCDloadGridPosiiton { 
    position: absolute;
    height: 100%;
    width: 100%;
    margin: -25px 0 0 4px;    
    padding: 0;    
}

/* Notification History */

.NHDloadGridPosiiton,
.NHDAloadGridPosiiton {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* All Other Pages */

.YPloadGridPosiiton,
.loadGridPosiiton {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: -35px 0 0 0;    
    padding: 0;    
}
.lds-grid {
    position: relative;
    display: inline-block;
    width: 74px;
    height: 70px;
    margin-top: -90px;
}
.lds-grid div {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;  
    background: #ff9900;
    animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
    top: 6px;
    left: 4px;
    animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
    top: 6px;
    left: 24px;
    animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
    top: 6px;
    left: 44px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
    top: 26px;
    left: 4px;
    animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
    top: 26px;
    left: 24px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
    top: 26px;
    left: 44px;
    animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
    top: 46px;
    left: 4px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
    top: 46px;
    left: 24px;
    animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
    top: 46px;
    left: 44px;
    animation-delay: -1.6s;
}
@keyframes lds-grid { 
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* //// loading gif Page Margins //// */

/*//// Artist Pages ////*/

#LdsGridTop,    /* general */
#ARLdsGridTop,  /* artist rego */
#EPLdsGridTop,  /* edit profile */
#CILdsGridTop,  /* crop index */
#MusLdsGridTop, /* upload music */
#GalLdsGridTop, /* upload gallery */
#YPLdsGridTop,  /* your posts */
#PHLdsGridTop,  /* posts history */
#ESMLdsGridTop, /* events */
#ETLdsGridTop,  /* event ticketing */
#ECTLdsGridTop, /* event create tickets */
#EHLdsGridTop,  /* event history */
#UVLdsGridTop,  /* upload video */
#CausdsGridTop, /* upload causes */
#NotLdsGridTop, /* notifications */ 
#NHLdsGridTop { /* notifications H */ 
    margin: -90px 0 0 10px;
}
#NEPLdsGridTop, /* notifications EP */ {
    margin-top: -52px;
}
#EPSLdsGridTop  /* edit pledge select */ {
    margin-top: -52px;
    margin-left: 10px;
}
#EVPLdsGridTop  /* events Preview */ {
    margin: -52px 0 0 10px;
}

/*//// Pledgsta Pages ////*/

#CIPLdsGridTop, /* crop image pledgsta */
#PRPLdsGridTop  /* pledgsta reset password */ {
    margin: -90px 0 0 6px;
}
#PEPLdsGridTop /* pledgsta edit profile */ {
    margin: -55px 0 0 6px;
}
#SPLdsGridTop, /* stripe payment */ 
#UDSLdsGridTop /* update card select */ {
    margin: -45px 0 0 6px;
}

/* ////// END - SQUARE 9 DOTS - loading gif /////// */

/* ///// START - % PROGRESS BAR - loading gif ///// */

#cancelButtHolder {
    text-align: center;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    .progressContainerAR,
    .progressContainerPR { 
        position: fixed;
        margin-top: -14px;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.850);
        z-index: 8888;
    } 
    .progressContainer,
    .progressContainerEP,
    .progressContainerUM,
    .progressContainerG,
    .progressContainerGD,
    .progressContainerYP,
    .progressContainerYPD,
    .progressContainerPHD,
    .progressContainerEV,
    .progressContainerECT,
    .progressContainerET,
    .progressContainerEVP,
    .progressContainerEVD,
    .progressContainerEHD,  
    .progressContainerEHDA,
    .progressContainerSP,
    .progressContainerUC,
    .progressContainerEPS,
    .progressContainerUCD,
    .progressContainerEC,  
    .progressContainerNE,
    .progressContainerNEP,
    .progressContainerNHD,
    .progressContainerNHDA,
    .progressContainerPRP,
    .progressContainerARP {   
        position: fixed;
        margin-top: 50px;
        bottom: 0;
        width: 100%;
        height: 105%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 8888;
    }
    
    /* // Pledgsta Pages // */

    .progressContainerPEP,
    .progressContainerCIP { 
        position: fixed;
        margin-top: 50px;
        bottom: 0;
        width: 100%;
        height: 105%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 8888;
    } 
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    
    .progressContainerAR,
    .progressContainerPR { 
        position: fixed;
        margin-top: -14px;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.850);
        z-index: 8888;
    } 
    .progressContainer,
    .progressContainerEP,
    .progressContainerUM,
    .progressContainerG,
    .progressContainerGD,
    .progressContainerYP,
    .progressContainerYPD,
    .progressContainerPHD,
    .progressContainerEV,
    .progressContainerET,
    .progressContainerECT,
    .progressContainerEVP,
    .progressContainerEVD,
    .progressContainerEHD,
    .progressContainerEHDA,
    .progressContainerSP,   
    .progressContainerUC,
    .progressContainerEPS,
    .progressContainerUCD,
    .progressContainerEC,    
    .progressContainerNE,
    .progressContainerNEP,
    .progressContainerNHD,
    .progressContainerNHDA,
    .progressContainerPRP,
    .progressContainerARP { 
        position: fixed;
        margin-top: 50px;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.850);
        z-index: 8888;
    }
    
    /* // Pledgsta Pages // */

    .progressContainerPEP,
    .progressContainerCIP { 
        position: fixed;
        margin-top: 50px;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.850);
        z-index: 8888;
    }  
}
@media screen and (min-width: 1200px) {
    
    .progressContainerAR,
    .progressContainerPR { 
        position: fixed;
        margin-top: -14px;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.850);
        z-index: 8888;
    } 
    .progressContainer,
    .progressContainerEP,
    .progressContainerUM,
    .progressContainerG,
    .progressContainerGD,
    .progressContainerYP,
    .progressContainerYPD,
    .progressContainerPHD,
    .progressContainerEV,
    .progressContainerET,
    .progressContainerECT,
    .progressContainerEVP,
    .progressContainerEVD,
    .progressContainerEHD,
    .progressContainerEHDA,
    .progressContainerSP,   
    .progressContainerUC,
    .progressContainerEPS,
    .progressContainerUCD,
    .progressContainerEC,    
    .progressContainerNE,
    .progressContainerNEP,
    .progressContainerNHD,
    .progressContainerNHDA,
    .progressContainerPRP,
    .progressContainerARP { 
        position: fixed;
        margin-top: -50px;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.850);
        z-index: 8888;
    }

    /* // Pledgsta Pages // */

    .progressContainerPEP,
    .progressContainerCIP { 
        position: fixed;
        margin-top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.850);
        z-index: 8888;
    }    
}

.progressContainer span,
.progressContainerAR span,
.progressContainerEP span,
.progressContainerUM span,
.progressContainerG span,
.progressContainerGD span,
.progressContainerYP span,
.progressContainerYPD span,
.progressContainerPHD span,
.progressContainerEV span,
.progressContainerET span,
.progressContainerECT span,
.progressContainerEVP span,
.progressContainerEVD span,
.progressContainerEHD span,
.progressContainerEHDA span,
.progressContainerSP span,
.progressContainerUC span,
.progressContainerEPS span,
.progressContainerUCD span,
.progressContainerEC span,
.progressContainerNE span,
.progressContainerNEP span,
.progressContainerNHD span,
.progressContainerNHDA span,
.progressContainerPEP span,
.progressContainerCIP span,
.progressContainerPRP span,
.progressContainerARP span,
.progressContainerPR span {   
    margin-top: -10px;
    padding: 0 0 0 8px;
    font-size: 13px;
    font-weight: 600; 
    text-align: center;
    color: #ff9900;
}

/* ////// Default /////*/

.progressContainerInner {
    position: absolute;
    height: 68px;
    width: 152px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -75px;
}
.progressContainerInner span { /* // info text // */
    display: flex;
    margin-top: 8px;
    margin-left: -7px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progress2 { /* // grey percent bar // */    
    width: 100%;
    height: 2px;   
    margin: 5px 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progress2 { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progress2 span { /* // percent read out // */
    position: relative;
    top: -34px;
    color: #ff9900;
}

/* ///// ARTIST PAGES ////// */

/* ////// Artist Rego ////// */

.progressContainerInnerAR {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerAR span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressAR { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    color: #000;
    text-align: center;
    background-color: #333;
}
.progressAR { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressAR span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}

/* ////// Edit Profile /////*/

.progressContainerInnerEP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerEP span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressEP { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    color: #000;
    text-align: center;
    background-color: #333;
}
.progressEP { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressEP span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}

/* /////// Crop Avatar /////// */

.progressContainerInnerCA {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerCA span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressCA { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressCA { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressCA span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}

/* ///////// Upload Music //////// */

.progressContainerInnerUM {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerUM span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressUM { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressUM { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressUM span { /* // percent read out // */
    position: relative;
    top: -32px;
    left: 0;
    color: #ff9900;
}
.progressContainerInnerUM #cancelButtHolder { 
    margin-left: 0;
}

/* ///////// Upload - Gallery //////// */

.progressContainerInnerG {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerG span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressG { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressG { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressG span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}
.progressContainerInnerG #cancelButtHolder { 
    margin-left: 0;
}

/* /// Gallery Delete /// */

.progressContainerInnerGD {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerGD span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* /// Your Posts /// */

.progressContainerInnerYP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerYPD {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
/* post history delete */
.progressContainerInnerPHD {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -75px;
}
.progressContainerInnerYP span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerYPD span { /* // info text // */
    display: flex;
    margin: -5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* post history delete */
.progressContainerInnerPHD span { /* // info text // */
    display: flex;
    margin: -5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressYP { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressYP { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressYP span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}
.progressContainerInnerYPD .progress { 
    margin-top: -8px;
}
/* post history delete */
.progressContainerInnerPHD .progress { 
    margin-top: 27px;
}
.progressContainerInnerYP #cancelButtHolder { 
    margin-left: 0;
}

/* /////// Events /////// */

.progressContainerInnerEV {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerEVD {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
/* event history delete */
.progressContainerInnerEHD {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -75px;
}
/* event history delete all */
.progressContainerInnerEHDA {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -75px;
}
.progressContainerInnerEV span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerEVD span { /* // info text // */
    display: flex;
    margin: -5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* event history delete */
.progressContainerInnerEHD span { /* // info text // */
    display: flex;
    margin: -5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* event history delete */
.progressContainerInnerEHDA span { /* // info text // */
    display: flex;
    margin: -5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressEV { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressEV { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressEV span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}
.progressContainerInnerEVD .progress { 
    margin-top: -8px;
}
/* event history delete */
.progressContainerInnerEHD .progress { 
    margin-top: 27px;
}
/* event history delete */
.progressContainerInnerEHDA .progress { 
    margin-top: 27px;
}
.progressContainerInnerEV #cancelButtHolder { 
    margin-left: 0;
}

/* ////// Event Ticketing //// */

.progressContainerInnerET {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerET span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressET { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressET { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressET span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}
.progressContainerInnerET #cancelButtHolder { 
    margin-left: 0;
}

/* ////// Event Create Tickets //// */

.progressContainerInnerECT {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerECT span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressECT { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressECT { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressECT span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}
.progressContainerInnerECT #cancelButtHolder { 
    margin-left: 0;
}

/* ////// Events Preview ///// */

.progressContainerInnerEVP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -75px;
}
.progressContainerInnerEVP span {
    display: flex;
    margin: -7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerEVP .progress { 
    margin-top: 27px;
}
.progressContainerInnerEVP #cancelButtHolder {
    margin-left: 0;
}
.percentage { /* sending emails bar */
    position: relative; 
    color: #ff9900;
}

/* ////// Upload Causes/Edit Cause ////// */

.progressContainerInnerUCause,
.progressContainerInnerUCD,
.progressContainerInnerEC {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerUCD span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;   
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerUCause span,
.progressContainerInnerEC span { /* // info text // */
    display: flex;
    margin: 7.5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressUC,
#progressUCD,
#progressEC { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressUC,
.progressUCD,
.progressEC { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressUC span,
#progressUCD span,
#progressEC span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}
.progressContainerInnerUCause #cancelButtHolder,
.progressContainerInnerEC #cancelButtHolder { 
    margin-left: -9px;
}

/* ///// Notifications ///// */

.progressContainerInnerN {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
/* Notifications history delete */
.progressContainerInnerNHD {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -75px;
}
/* Notifications history delete all */
.progressContainerInnerNHDA {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -75px;
}
.progressContainerInnerN > span { /* // info text // */
    margin: 7.5px 0 0 0;
    padding: 0;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* Notifications history delete */
.progressContainerInnerNHD span { /* // info text // */
    display: flex;
    margin: -5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* Notifications history delete all */
.progressContainerInnerNHDA span { /* // info text // */
    display: flex;
    margin: -5px 0 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progress2N { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progress2N { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progress2N > span { /* // percent read out // */
    position: relative;
    top: -32px;    
    color: #ff9900;
}
/* Notifications history delete */
.progressContainerInnerNHD .progress { 
    margin-top: 27px;
}
/* Notifications history delete all */
.progressContainerInnerNHDA .progress { 
    margin-top: 27px;
}
.progressContainerInnerN #cancelButtHolder { 
    margin-left: -9px;
}

/* ///// Notifications Email Preview ///// */

.progressContainerInnerNEP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerNEP span {
    margin: 7.5px 0 0 0;   
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerNEP .progress { 
    margin-left: -15px;
}
.progressContainerInnerNEP #cancelButtHolder { 
    margin-left: -15px;
}
.percentage { /* sending emails bar */
    position: relative; 
    color: #ff9900;
}

/* //// Password Reset //// */

#PRLdsGridTop {
    margin-top: -90px;
}
.progressContainerInnerPR {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerPR span {
    margin: 7.5px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerPR .progress { 
    margin-left: -15px;
}
#progressPR { /* // grey percent bar // */
    width: 100%;
    height: 2px;  
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}

/* //// Artist Reset Password //// */

#ARPLdsGridTop  {
    margin-top: -90px;
}
.progressContainerInnerARP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerARP span {
    margin: 7.5px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerARP .progress { 
    margin-left: -15px;
}
#progressARP {  /* // grey percent bar // */
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}

/* /////// PLEDGSTA PAGES //////// */

/* //// Pledgsta Edit Profile //// */

.progressContainerInnerPEP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerPEP span { /* // info text // */
    margin: 7.5px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressPEP { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressPEP { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressPEP span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}

/* //// Crop Image Pledgsta //// */

.progressContainerInnerCIP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerCIP span {
    margin: 7.5px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressCIP { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;   
    margin: 0;
    text-align: center;
    color: #000;
    background-color: #333;
}
.progressCIP { /* // gold progress bar // */ 
    width: 0%;
    height: 2px;
    margin: 0;
    text-align: center;
    background-color: #ff9900;
}
#progressCIP span { /* // percent read out // */
    position: relative;
    top: -32px;
    color: #ff9900;
}

/* //// Pledgsta Reset Password //// */

.progressContainerInnerPRP {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerPRP span {
    margin: 7.5px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#progressPRP { /* // grey percent bar // */ 
    width: 100%;
    height: 2px;  
    margin: 0;
    color: #000;
    text-align: center;
    background-color: #333;
}
.progressContainerInnerPRP .progress { 
    margin-left: -15px;
}

/* ///// UNIVERSAL PAGES ////// */

/* /// Edit Pledge Select ///// */

.progressContainerInnerEPS { /* border: 1px solid blue; */
    position: absolute;
    height: 68px;    
    width: 150px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
}
.progressContainerInnerEPS span { /* // info text // border: 1px solid red;*/
    margin: 7.5px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.progressContainerInnerEPS .progress {
    margin-left: 0;
}

/* //// Update Card Select //// */

.progressContainerInnerUC {
    position: absolute;
    height: 68px;
    width: 150px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
    text-align: center;
}
.progressContainerInnerUC span {
    margin: -8px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/*.progressContainerInnerUC .progress {
    margin-left: -9px;
}*/

/* ////// Stripe Payment ///// */
/* // grey percent bar // */
/*#progress2SP { 
    width: 100%;
    height: 2px;   
    margin: 5px 0;
    text-align: center;
    color: #000;
    background-color: #ff9900;
}*/
/* // percent read out // */
/*#progress2SP span { 
    position: relative;
    top: -32px;
    color: #ff9900;
}*/

.progressContainerInnerSP {
    position: absolute;
    height: 68px;
    width: 160px;   
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -75px;
    text-align: center;
}
.progressContainerInnerSP span {
    margin: -8px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/*.progressContainerInnerSP .progress {
    margin-left: -2px;
}*/


/* /////// END- % PROGRESS BAR - loading gif ////// */

/* /////////////// END - LOADER GIFS ////////////// */

/* ================================================ */

/* ////////////// START - ERROR ALERTS //////////// */

/* ///////// START - RED POP-UP JS ALERTS ///////// */

@media screen and (min-width: 320px) and (max-width: 359px) {
    
    #confirm {
        position: fixed;   
        height: 150px;
        width: 84%;
        padding: 0;
        top: 35%;
        left: 8%;
        right: 8%;
        color: #999;    
        text-align: center;
        border-radius: 16px;
        border: 1px solid #ff0000;
/*        border-radius: 12px;
        border: 2px solid #ff0000;*/
        background-color: #111;    
        z-index: 9999;
    }
    #errorExclamation {
        margin-top: 10px;
        color: #ff0000;
        font-size: 20px;   
    }    
    .message {
        padding: 9px 10px 7px 10px;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 360px) and (max-width: 374px) {
    
    #confirm {
        position: fixed;   
        height: 147.5px;
        width: 76%;
        padding: 0;
        top: 35%;
        left: 12%;
        right: 12%;
        color: #999;    
        text-align: center;
        border-radius: 16px;
        border: 1px solid #ff0000;
/*        border-radius: 12px;
        border: 2px solid #ff0000;*/
        background-color: #111;    
        z-index: 9999;
    }
    #errorExclamation {
        margin-top: 8px;
        color: #ff0000;
        font-size: 20px;   
    }    
    .message {
        padding: 9px 10px 7px 10px;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 375px) and (max-width: 413px) {
    
    #confirm {
        position: fixed;   
        height: 147px;
        width: 74%;
        padding: 0;
        top: 35%;
        left: 13%;
        right: 13%;
        color: #999;    
        text-align: center;
        border-radius: 16px;
        border: 1px solid #ff0000;
/*        border-radius: 12px;
        border: 2px solid #ff0000;*/
        background-color: #111;    
        z-index: 9999;
    }
    #errorExclamation {
        margin-top: 8px;
        color: #ff0000;
        font-size: 20px;   
    }
    .message {
        padding: 9px 10px 7px 10px;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 414px) and (max-width: 740px) {
    
    #confirm {
        position: fixed;   
        height: 146.5px;
        width: 70%;
        padding: 0;
        top: 35%;
        left: 15%;
        right: 15%;
        color: #999;    
        text-align: center;
        border-radius: 16px;
        border: 1px solid #ff0000;
/*        border-radius: 12px;
        border: 2px solid #ff0000;*/
        background-color: #111;    
        z-index: 9999;
    }    
    #errorExclamation {
        margin-top: 12px;
        color: #ff0000;
        font-size: 20px;   
    }    
    .message {
        margin: 0 0 0 0;
        padding: 9px 20px 7px 20px;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 741px) and (max-width: 767px) {
    
    #confirm {
        position: fixed;   
        height: 146.5px;
        width: 60%;
        padding: 0;
        top: 35%;
        left: 20%;
        right: 20%;
        color: #999;    
        text-align: center;
        border-radius: 16px;
        border: 1px solid #ff0000;
/*        border-radius: 12px;
        border: 2px solid #ff0000;*/
        background-color: #111;    
        z-index: 9999;
    }    
    #errorExclamation {
        margin-top: 12px;
        color: #ff0000;
        font-size: 20px;   
    }    
    .message {
        margin: 0;
        padding: 9px 20px 7px 20px;
        font-size: 12px;
        word-break: break-word;
    }
}

/* ////////////////// Red Pop-Up Error Alert ///////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .AlertContainer,
    .extAlertContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 105%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    }    
    #confirm button {
        float: right;
        width: 60px;
        padding: 6px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 1px solid #ff0000;
        /* border-radius: 6px;       
        border: 2px solid #ff0000;*/
        background-color: #111;    
        cursor: pointer;
    }
    #confirmEP {
        position: fixed;   
        height: 135px;
        width: 94%;
        padding: 0;
        top: 35%;
        left: 3%;
        right: 3%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        z-index: 9999;
    }
    #confirmEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmPEP {
        position: fixed;   
        height: 135px;
        width: 66%;
        padding: 0;
        top: 20%;
        left: 17%;
        right: 17%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
    }
    #confirmPEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    .redOverlay {
        margin-top: 0;
        height: 163px;
        border-radius: 6px;
        background-color: rgba(255, 0, 0, 0.1);
    }
    .pledgsta {
        text-align: left;
        margin: 0;
        padding: 10px 0 0 10px;
        font-size: 13px;
    }
    .messageContainer {
        margin-top: 5px;
        margin-bottom: 6px;
        padding: 0;
        text-align: center;
    }
    .yes {
        margin-bottom: 0;
        /*margin-bottom: 10px;  */
    }
}
@media screen and (min-width: 768px) and (max-width: 855px) {
    
    #AlertContainer {
        margin: -5px 0 -10px 0;
        padding: 0;
    }
    .AlertContainer,
    .extAlertContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    } 
    #confirm {
        position: fixed;   
        height: 138px;
        width: 66%;
        padding: 0;
        top: 40%;
        left: 17%;
        right: 17%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 12px;
        background-color: #111;    
    }
    #confirm button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmEP {
        position: fixed;   
        height: 140px;
        width: 520px;
        padding: 0;
        top: 20%;
        left: 17%;
        right: 17%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
    }
    #confirmEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmPEP {
        position: fixed;   
        height: 140px;
        width: 66%;
        padding: 0;
        top: 20%;
        left: 17%;
        right: 17%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
    }
    #confirmPEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }    
    .redOverlay {
        margin-top: 0;
        height: 138px;
        border-radius: 6px;
        background-color: rgba(255, 0, 0, 0.2);
    }
    .pledgsta {
        text-align: left;
        margin: 0;
        padding: 10px 0 0 10px;
        font-size: 14px;
    }
    .messageContainer {
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 0;
        text-align: center;
    }
    #errorExclamation {
        margin-top: 5px;
        color: #ff0000;
        font-size: 22px;   
    }
    .message {
        margin: 0;
        padding: 5px 0 0 0;
        font-size: 13px;
    }
    .yes {
        margin-bottom: 10px;  
    }
}
@media screen and (min-width: 856px) and (max-width: 1023px) {
    
    #AlertContainer {
        margin: -5px 0 -10px 0;
        padding: 0;
    }
    .AlertContainer,
    .extAlertContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    } 
    #confirm {
        position: fixed;   
        height: 138px;
        width: 54%;
        padding: 0;
        top: 40%;
        left: 23%;
        right: 23%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 12px;
        background-color: #111;    
    }
    #confirm button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmEP {
        position: fixed;   
        height: 140px;
        width: 520px;
        padding: 0;
        top: 20%;
        left: 17%;
        right: 17%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
    }
    #confirmEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmPEP {
        position: fixed;   
        height: 140px;
        width: 66%;
        padding: 0;
        top: 20%;
        left: 17%;
        right: 17%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
    }
    #confirmPEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }    
    .redOverlay {
        margin-top: 0;
        height: 138px;
        border-radius: 6px;
        background-color: rgba(255, 0, 0, 0.2);
    }
    .pledgsta {
        margin: 0;
        padding: 10px 0 0 10px;
        font-size: 14px;
        text-align: left;
    }
    .messageContainer {
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 0;
        text-align: center;
    }
    #errorExclamation {
        margin-top: 5px;
        color: #ff0000;
        font-size: 22px;   
    }
    .message {
        margin: 0;
        padding: 5px 0 0 0;
        font-size: 13px;
    }
    .yes {
        margin-bottom: 10px;  
    }
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    
    #AlertContainer {
        margin: -12px 0 -2px 0;
        padding: 0;
    }
    .AlertContainer,
    .extAlertContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    } 
    #confirm {
        position: fixed;   
        height: 140px;
        width: 44%;
        padding: 0;
        top: 40%;
        left: 28%;
        right: 28%;
        color: #999;    
        text-align: center;
        border-radius: 12px;
        border: 2px solid #ff0000;
        background-color: #111;    
    }
    #confirm button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmEP {
        position: fixed;   
        height: 140px;
        width: 520px;
        padding: 0;
        top: 30%;
        left: 26%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
    }
    #confirmEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmPEP {
        position: fixed;   
        height: 160px;
        width: 520px;
        padding: 0;
        top: 30%;
        left: 32%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 8px;
        background-color: #111;    
    }
    #confirmPEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }    
    .redOverlay {
        margin-top: 0;
        height: 138px;
        border-radius: 6px;
        background-color: rgba(255, 0, 0, 0.2);
    }
    .pledgsta {
        margin: 0;
        padding: 10px 0 0 10px;
        color: #999;
        font-size: 15px;
        text-align: left;
    }
    .pledgstaPEP {
        margin: 0;
        padding: 10px 0 0 10px;
        color: #999;
        text-align: left;
    }    
    .messageContainer {
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 0;
        text-align: center;
    }
    .messageContainerPEP {
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 0 40px 0 40px;
        text-align: center;
    }    
    #errorExclamation {
        margin-top: 5px;
        color: #ff0000;
        font-size: 22px;   
    }
    .message {
        margin: 0;
        padding: 5px 0 0 0;
        color: #999;
        font-size: 14px;
    }
    .yes {
        margin-bottom: 10px;  
    }
}
@media screen and (min-width: 1181px) {

    .extAlertContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);/**/
        z-index: 10001;
    }    
    #AlertContainer {
        margin: -12px 0 -2px 0;
        padding: 0;
    }      
    .AlertContainer {
        display: none;
        position: fixed;
        margin-top: -50px;
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    }
    #confirm {
        position: fixed;   
        height: 140px;
        width: 34%;
        padding: 0;
        top: 40%;
        left: 33%;
        right: 33%;
        color: #999;    
        text-align: center;
        border-radius: 12px;
        border: 2px solid #ff0000;
        background-color: #111;    
    }
    #confirm button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirm button:hover {
        cursor: pointer;
        background-color: #1b1b1b;
    }    
    #confirmEP {
        position: fixed;   
        height: 140px;
        width: 520px;
        padding: 0;
        top: 30%;
        left: 26%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
    }
    #confirmEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }
    #confirmPEP {
        position: fixed;   
        height: 160px;
        width: 520px;
        padding: 0;
        top: 30%;
        left: 32%;
        color: #999;    
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 8px;
        background-color: #111;    
    }
    #confirmPEP button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #999;
        margin-right:10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border: 2px solid #ff0000;
        border-radius: 6px;
        background-color: #111;    
        cursor: pointer;
    }    
    .redOverlay {
        margin-top: 0;
        height: 138px;
        border-radius: 6px;
        background-color: rgba(255, 0, 0, 0.2);
    }
    .pledgsta {
        margin: 0;
        padding: 10px 0 0 10px;
        color: #999;
        font-size: 15px;
        text-align: left;
    }
    .pledgstaPEP {
        margin: 0;
        padding: 10px 0 0 10px;
        color: #999;
        text-align: left;
    }    
    .messageContainer {
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 0;
        text-align: center;
    }
    .messageContainerPEP {
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 0 40px 0 40px;
        text-align: center;
    }    
    #errorExclamation {
        margin-top: 5px;
        color: #ff0000;
        font-size: 22px;   
    }
    .message {
        margin: 0;
        padding: 5px 0 0 0;
        color: #999;
        font-size: 14px;
    }
    .yes {
        margin-bottom: 10px;  
    }
}

/* //////////////// END - Red Pop-Up Error Alert /////////////// */

/* ============================================================= */

/* /////////////////// Gold Pop-Up Complete Profile ////////////////// */

@media screen and (min-width: 320px) and (max-width: 359px) {
      
    #confirmMain {
        position: fixed;
        height: 168px;   
        width: 84%;
        padding: 0;
        top: 35%;
        left: 8%;
        right: 8%;    
        text-align: center;
        border-radius: 12px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/    
        z-index: 9999;
    }
    #risingSun {
        margin-top: 4px; 
        margin-bottom: 11px; 
        color: #ff9900;
        font-size: 20px;   
    }    
    .confirmText {
        padding: 9px 10px 7px 10px;
        color: #ff9900;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 360px) and (max-width: 374px) {
  
    #confirmMain {
        position: fixed; 
        height: 168px;
        width: 76%;
        padding: 0;
        top: 30%;
        left: 12%;
        right: 12%;   
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/  
        z-index: 9999;
    }
    #risingSun {
        margin-top: 4px; 
        margin-bottom: 11px; 
        color: #ff9900;
        font-size: 20px; 
    }    
    .confirmText {
        padding: 9px 10px 7px 10px;
        color: #ff9900;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 375px) and (max-width: 453px) {
  
    #confirmMain {
        position: fixed;   
        height: 168px;
        width: 74%;
        padding: 0;
        top: 30%;
        left: 13%;
        right: 13%;   
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/    
        z-index: 9999;
    }
    #risingSun {
        margin-top: 4px; 
        margin-bottom: 11px; 
        color: #ff9900;
        font-size: 20px;  
    }
    .confirmText {
        padding: 9px 10px 7px 10px;
        color: #ff9900;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 454px) and (max-width: 740px) {
      
    #confirmMain {
        position: fixed;   
        height: 158px;
        width: 70%;
        padding: 0;
        top: 30%;
        left: 15%;
        right: 15%;    
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/   
        z-index: 9999;
    }    
    #risingSun {
        margin-top: 0; 
        margin-bottom: 17px; 
        color: #ff9900;
        font-size: 22px;  
    }    
    .confirmText {
        margin: 0;
        padding: 0 20px 0 20px;
        color: #ff9900;
        font-size: 14px;
        word-break: break-word;
    }
}
@media screen and (min-width: 741px) and (max-width: 767px) {

    #confirmMain {
        position: fixed;   
        height: 158px;
        width: 60%;
        padding: 0;
        top: 30%;
        left: 20%;
        right: 20%;  
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/  
        z-index: 9999;
    }    
    #risingSun {
        margin-top: 0; 
        margin-bottom: 17px; 
        color: #ff9900;
        font-size: 22px;  
    }    
    .confirmText {
        margin: 0;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }
}

/* ////////////////////////////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    .confirmProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 105%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    } 
    .confirmPreProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 105%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
    }    
    #confirmMain button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #555;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.2s linear;
    }
    #confirmMain button:hover {
        cursor: pointer;
        color: #666;
        border: 2px solid #333;
        background-color: #111;
    }
    .linkToLiveProfile { /* preview profile */
        position: relative;
        width: 130px;
        margin: 34px 0 0 0;
        padding: 4.5px 10px 4.5px 10px;
        color: #777;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .linkToLiveProfile:hover {
        cursor: pointer;
        color: rgba(255, 153, 0, 0.9);
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #1e1e1e;
    }
    .headSpace {
        height: 18px;
        text-align: left;
        margin: 0;
        padding: 10px 0 0 10px;
        font-size: 15px;
    }
    .confirmationContainer {
        margin-top: 8px;
        margin-bottom: 31.5px;
        padding: 0;
        text-align: center;
    }
}
@media screen and (min-width: 768px) and (max-width: 855px) {

    .confirmProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    }
    .confirmPreProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
    }
    #confirmMain {
        position: fixed;   
        height: 158px;
        width: 66%;
        padding: 0;
        top: 35%;
        left: 17%;
        right: 17%;    
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #confirmMain button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #555;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.2s linear;
    }
    #confirmMain button:hover {
        cursor: pointer;
        color: #666;
        border: 2px solid #333;
        background-color: #111;
    }
    .linkToLiveProfile { /* preview profile */
        position: relative;
        width: 130px;
        margin: 34px 0 0 0;
        padding: 4.5px 10px 4.5px 10px;
        color: #777;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .linkToLiveProfile:hover {
        cursor: pointer;
        color: rgba(255, 153, 0, 0.9);
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #1e1e1e;
    }
    .headSpace {
        height: 18px;
        text-align: left;
        margin: 0;
        padding: 10px 0 0 10px;
        font-size: 15px;
    }
    .confirmationContainer {
        margin-top: 8px;
        margin-bottom: 31.5px;
        padding: 0;
        text-align: center;
    }
    #risingSun {
        margin-top: 0; 
        margin-bottom: 17px; 
        color: #ff9900;
        font-size: 22px;  
    }
    .confirmText {
        margin: 0;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }
}
@media screen and (min-width: 856px) and (max-width: 1023px) {

    .confirmProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    }
    .confirmPreProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
    }
    #confirmMain {
        position: fixed;
        height: 160px;
        width: 54%;
        padding: 0;
        top: 35%;
        left: 23%;
        right: 23%;    
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/  
    }
    #confirmMain button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #555;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.2s linear;
    }
    #confirmMain button:hover {
        cursor: pointer;
        color: #666;
        border: 2px solid #333;
        background-color: #111;
    }
    .linkToLiveProfile { /* preview profile */
        position: relative;
        width: 130px;
        margin: 34px 0 0 0;
        padding: 4.5px 10px 4.5px 10px;
        color: #777;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .linkToLiveProfile:hover {
        cursor: pointer;
        color: rgba(255, 153, 0, 0.9);
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #1e1e1e;
    }
    .headSpace {
        height: 20px;
        margin: 0;
        padding: 10px 0 0 10px;
        font-size: 15px;
        text-align: left;
    }
    .confirmationContainer {
        margin-top: 8px;
        margin-bottom: 31.5px;
        padding: 0;
        text-align: center;
    }
    #risingSun {
        margin-top: 0; 
        margin-bottom: 17px; 
        color: #ff9900;
        font-size: 22px;  
    }
    .confirmText {
        margin: 0;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024px */
    
    .confirmProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    }
    .confirmPreProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
    }
    #confirmMain {
        position: fixed;   
        height: 160px;
        width: 44%;
        padding: 0;
        top: 35%;
        left: 28%;
        right: 28%;   
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/    
    }
    #confirmMain button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #555;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.2s linear;
    }
    #confirmMain button:hover {
        cursor: pointer;
        color: #666;
        border: 2px solid #333;
        background-color: #111;
    }
    .linkToLiveProfile { /* preview profile */
        position: relative;
        width: 130px;
        margin: 34px 0 0 0;
        padding: 4.5px 10px 4.5px 10px;
        color: #777;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .linkToLiveProfile:hover {
        cursor: pointer;
        color: rgba(255, 153, 0, 0.9);
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #1e1e1e;
    }
    .headSpace {
        height: 20px;
        margin: 0;
        padding: 10px 0 0 10px;
        color: #999;
        font-size: 15px;
        text-align: left;
    }  
    .confirmationContainer {
        margin-top: 8px;
        margin-bottom: 31.5px;
        padding: 0;
        text-align: center;
    }   
    #risingSun {
        margin-top: 0; 
        margin-bottom: 17px; 
        color: #ff9900;
        font-size: 22px;  
    }
    .confirmText {
        margin: 0;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1180px) {
    
    .confirmProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    }
    .confirmPreProfileContainer {
        display: none;
        position: fixed;
        margin-top: 50px;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
    }
    #confirmMain {
        position: fixed;   
        height: 160px;
        width: 44%;
        padding: 0;
        top: 35%;
        left: 28%;
        right: 28%;   
        text-align: center;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #111;    
    }
    #confirmMain button {
        float: right;
        width: 60px;
        padding: 5px;
        color: #555;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.2s linear;
    }
    #confirmMain button:hover {
        cursor: pointer;
        color: #888;
        border: 2px solid #444;
        background-color: #1e1e1e;
    }
    .linkToLiveProfile { /* preview profile */
        position: relative;
        width: 130px;
        margin: 34px 0 0 0;
        padding: 4.5px 10px 4.5px 10px;
        color: #777;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .linkToLiveProfile:hover {
        cursor: pointer;
        color: rgba(255, 153, 0, 0.9);
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #1e1e1e;
    }    
    .headSpace {
        height: 20px;
        margin: 0;
        padding: 10px 0 0 10px;
        color: #999;
        font-size: 15px;
        text-align: left;
    }  
    .confirmationContainer {
        margin-top: 8px;
        margin-bottom: 31.5px;
        padding: 0;
        text-align: center;
    }   
    #risingSun {
        margin-top: 0; 
        margin-bottom: 17px; 
        color: #ff9900;
        font-size: 22px;  
    }
    .confirmText {
        margin: 0;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }
}
@media screen and (min-width: 1181px) {

    .confirmProfileContainer { /* edit profile + upload music */
        display: none;
        position: fixed;
        margin-top: -50px;
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 8888;
    }
    .confirmPreProfileContainer { /* preview profile */
        display: none;
        position: fixed;
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;    
    }
    #confirmMain {  
        position: fixed;   
        height: 160px;
        width: 34%;
        padding: 0;
        top: 35%;
        left: 33%;
        right: 33%;
        border-radius: 16px;
        border: 2px solid #ff9900;
        background-color: #111;    
    }
    #confirmMain button { 
        float: right;
        width: 60px;
        margin-right: 10.5px;        
        padding: 5px;
        color: #555;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    #confirmMain button:hover {
        cursor: pointer;
        color: #ff0000;
        border: 2px solid #ff0000;
        background-color: #1e1e1e;
    }
    .linkToLiveProfile { /* preview profile */
        position: relative;
        width: 130px;
        margin: 34px 0 0 0;
        padding: 4.5px 10px 4.5px 10px;
        color: #777;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .linkToLiveProfile:hover {
        cursor: pointer;
        color: rgba(255, 153, 0, 0.9);
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #1e1e1e;
    }
    .headSpace {
        height: 20px;
        margin: 0;
        padding: 10px 0 0 10px;
        color: #999;
        font-size: 15px;
        text-align: left;
    }  
    .confirmationContainer {
        margin-top: 8px;
        margin-bottom: 32.5px;
        padding: 0;
        text-align: center;
    } 
    #risingSun {
        margin-top: 0; 
        margin-bottom: 17px; 
        color: #ff9900;
        font-size: 22px;   
    }
    .confirmText {
        margin: 0;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }
}

/* ///////////// END - Gold Pop-Up Complete Profile //////////// */

/* ============================================================= */

/* ///// Gold Pop-Up yes/no edit-profile (complete pledge) ///// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #QpledgeOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #QpledgeDialogBox {
        display: block;
        position: fixed;
        width: auto;
        top: 25%;
        left: 15px;
        right: 15px;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #QpledgeDialogBox > div {
        width: auto;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 14px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 10px;
        text-align: right;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #0088FF;
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 10px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #444;
    }
    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    }    
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    #QpledgeOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #QpledgeDialogBox {
        display: block;
        position: fixed;
        width: auto;
        top: 20%;
        left: 20%;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #QpledgeDialogBox > div {
        width: 462px;
        margin: 0;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 10px;
        text-align: right;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #0088FF;
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }

    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #999;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #444;
    }

    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #QpledgeOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #QpledgeDialogBox {
        display: inline-flex;
        position: fixed;
        width: 550px;
        top: 30%;
        left: 23%;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #QpledgeDialogBox > div {
        width: 550px;
        margin: 0;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid rgba(0, 136, 255, 0.6);
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #444;
    }

    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    }     
}
@media screen and (min-width: 1025px) {

    #QpledgeOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        z-index: 8888;        
    }
    #QpledgeDialogBox {
        display: inline-flex;
        position: fixed;
        width: 550px;
        margin: 90px 0 0 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 9999;
    }
    #QpledgeDialogBox > div {
        width: 550px;
        margin: 0;
        border: 2px solid #ff9900;
        border-radius: 16px;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid #ff9900;
    }

    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #QpledgeDialogBox > div > #QpledgeDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #ff0000;
    }
/*    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    } */
}

/* // END - Gold Pop-Up yes/no edit-profile (complete pledge) // */

/* ============================================================= */

/* ////////// Gold Pop-Up yes/no your-posts (schedule) ///////// */

#scheduleOverlay,
#scheduleDialogBox {
    display: none;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #scheduleOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #scheduleDialogBox {
        display: block;
        position: fixed;
        width: auto;
        top: 25%;
        left: 15px;
        right: 15px;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #scheduleDialogBox > div {
        width: auto;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 14px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 10px;
        text-align: right;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #0088FF;
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 10px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #444;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    #scheduleOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #scheduleDialogBox {
        display: block;
        position: fixed;
        width: auto;
        top: 20%;
        left: 20%;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #scheduleDialogBox > div {
        width: 462px;
        margin: 0;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 10px;
        text-align: right;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #0088FF;
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }

    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #999;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #444;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #scheduleOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #scheduleDialogBox {
        display: inline-flex;
        position: fixed;
        width: 550px;
        top: 30%;
        left: 23%;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #scheduleDialogBox > div {
        width: 550px;
        margin: 0;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid rgba(0, 136, 255, 0.6);
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #444;
    }
}
@media screen and (min-width: 1025px) {

    #scheduleOverlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        z-index: 8888;        
    }
    #scheduleDialogBox {
        display: inline-flex;
        position: fixed;
        width: 550px;
        margin: 90px 0 0 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 9999;
    }
    #scheduleDialogBox > div {
        width: 550px;
        margin: 0;
        border: 2px solid #ff9900;
        border-radius: 16px;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxHead {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxBody {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .ConfirmButton:hover {
        border: 2px solid #ff9900;
    }

    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #scheduleDialogBox > div > #scheduleDialogBoxFoot > .CancelButton:hover {
        border: 2px solid #ff0000;
    }
}

/* /////// END - Gold Pop-Up yes/no your-posts schedule //////// */

/* ============================================================= */

/* //////////// Blue Pop-Up Confirm/Cancel Message ///////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #dialog-overlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #dialog-box {
        display: block;
        position: fixed;
        width: auto;
        top: 25%;
        left: 15px;
        right: 15px;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #dialog-box > div {
        width: auto;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #dialog-box > div > #dialog-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 14px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialog-box > div > #dialog-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #dialog-box > div > #dialog-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 10px;
        text-align: right;
    }
    #dialog-box > div > #dialog-box-foot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #0088FF;
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialog-box > div > #dialog-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialog-box > div > #dialog-box-foot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 10px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialog-box > div > #dialog-box-foot > .CancelButton:hover {
        border: 2px solid #444;
    }
    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    }    
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    #dialog-overlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #dialog-box {
        display: block;
        position: fixed;
        width: auto;
        top: 20%;
        left: 20%;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #dialog-box > div {
        width: 462px;
        margin: 0;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #dialog-box > div > #dialog-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialog-box > div > #dialog-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialog-box > div > #dialog-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 10px;
        text-align: right;
    }
    #dialog-box > div > #dialog-box-foot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #0088FF;
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialog-box > div > #dialog-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }

    #dialog-box > div > #dialog-box-foot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #999;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialog-box > div > #dialog-box-foot > .CancelButton:hover {
        border: 2px solid #444;
    }

    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #dialog-overlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #dialog-box {
        display: inline-flex;
        position: fixed;
        width: 550px;
        top: 30%;
        left: 23%;
        background-color: #111;
        border-radius: 16px;
        z-index: 9999;
    }
    #dialog-box > div {
        width: 550px;
        margin: 0;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #dialog-box > div > #dialog-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialog-box > div > #dialog-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialog-box > div > #dialog-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialog-box > div > #dialog-box-foot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        
        border-radius: 8px;
        border: 2px solid rgba(0, 136, 255, 0.6);
        background-color: rgba(0, 136, 255, 0.1);    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialog-box > div > #dialog-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialog-box > div > #dialog-box-foot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialog-box > div > #dialog-box-foot > .CancelButton:hover {
        border: 2px solid #444;
    }

    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    }     
}
@media screen and (min-width: 1025px) {

    #dialog-overlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;       
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        z-index: 8888;        
    }
    #dialog-box {
        display: inline-flex;
        position: fixed;
        width: 550px;
/*        top: 35%;
        left: 31%;*/
        margin: 45px 0 0 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 9999;
    }
    #dialog-box > div {
        width: 550px;
        margin: 0;
        border: 2px solid rgba(0, 136, 255, 0.6);
        border-radius: 16px;
    }
    #dialog-box > div > #dialog-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialog-box > div > #dialog-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialog-box > div > #dialog-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialog-box > div > #dialog-box-foot > .ConfirmButton {
        width: 88px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;         
        /*border: 2px solid rgba(0, 136, 255, 0.6);
        background-color: rgba(0, 136, 255, 0.1);*/    
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialog-box > div > #dialog-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(0, 136, 255, 0.6);
    }

    #dialog-box > div > #dialog-box-foot > .CancelButton {
        width: 68px;
        padding: 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialog-box > div > #dialog-box-foot > .CancelButton:hover {
        border: 2px solid #555;
    }
    #Confirmfeather { 
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 22px; 
    } 
}

/* ////////// END - Blue Pop-Up Confirm/Cancel Message ///////// */

/* ============================================================= */

/* //////////////// RED Pop-Up Confirm Message ///////////////// */

/* //// EVENT HISTORY //// */

/* //// Small Screen Sizes //// */

#dialogEH-container {
    position: fixed;
    width: 100%; 
    margin: 0; 
    padding: 0; 
    z-index: 8888;
}

@media screen and (min-width: 320px) and (max-width: 747px) {
    
    #dialogEH-box {
        margin: 0 10% 0 10%;
    }
}
@media screen and (min-width: 748px) and (max-width: 767px) {
    
    #dialogEH-box {
        margin: 0 15% 0 15%;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #dialogEH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #dialogEH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 9999;
    }
    #dialogEH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogEH-box > div > #dialogEH-box-head {
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
        font-size: 14px;
        text-align: center;        
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background-color: #111;
    }
    #dialogEH-box > div > #dialogEH-box-body {
        padding: 20px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
        background-color: #111;
    }
    #dialogEH-box > div > #dialogEH-box-foot {
        padding: 10px;
        text-align: right;        
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        background-color: #111;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}

/* //// Medium Screen Sizes //// */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    #dialogEH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 7777;       
    }
    #dialogEH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        margin: 0 20% 0 20%;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 8888;
    }
    #dialogEH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogEH-box > div > #dialogEH-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialogEH-box > div > #dialogEH-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialogEH-box > div > #dialogEH-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}

/* //// Large Screen Sizes //// */

@media screen and (min-width: 1024px) and (max-width: 1199px) {

    #dialogEH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 7777;       
    }
    #dialogEH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        margin: 0 28% 0 28%;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 8888;
    }
    #dialogEH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogEH-box > div > #dialogEH-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialogEH-box > div > #dialogEH-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialogEH-box > div > #dialogEH-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}
@media screen and (min-width: 1200px) {

    #dialogEH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 7777;       
    }
    #dialogEH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        margin: 0 34% 0 34%;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 8888;
    }
    #dialogEH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogEH-box > div > #dialogEH-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialogEH-box > div > #dialogEH-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialogEH-box > div > #dialogEH-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogEH-box > div > #dialogEH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogEH-box > div > #dialogEH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}

/* //// NOTIFICATION HISTORY //// */

/* //// Small Screen Sizes //// */

#dialognH-container {
    position: fixed;
    width: 100%; 
    margin: 0; 
    padding: 0; 
    z-index: 8888;
}

@media screen and (min-width: 320px) and (max-width: 747px) {
    
    #dialogNH-box {
        margin: 0 10% 0 10%;
    }
}
@media screen and (min-width: 748px) and (max-width: 767px) {
    
    #dialogEH-box {
        margin: 0 15% 0 15%;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #dialogNH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 8888;        
    }
    #dialogNH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 9999;
    }
    #dialogNH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogNH-box > div > #dialogNH-box-head {
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
        font-size: 14px;
        text-align: center;        
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background-color: #111;
    }
    #dialogNH-box > div > #dialogNH-box-body {
        padding: 20px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
        background-color: #111;
    }
    #dialogNH-box > div > #dialogNH-box-foot {
        padding: 10px;
        text-align: right;        
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        background-color: #111;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}

/* //// Medium Screen Sizes //// */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    #dialogNH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 7777;       
    }
    #dialogNH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        margin: 0 20% 0 20%;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 8888;
    }
    #dialogNH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogNH-box > div > #dialogNH-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialogNH-box > div > #dialogNH-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialogNH-box > div > #dialogNH-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}

/* //// Large Screen Sizes //// */

@media screen and (min-width: 1024px) and (max-width: 1199px) {

    #dialogNH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 120%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 7777;       
    }
    #dialogNH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        margin: 0 28% 0 28%;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 8888;
    }
    #dialogNH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogNH-box > div > #dialogNH-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialogNH-box > div > #dialogNH-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialogNH-box > div > #dialogNH-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}
@media screen and (min-width: 1200px) {

    #dialogNH-overlay {
        display: inline-flex;
        position: fixed;        
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 7777;       
    }
    #dialogNH-box {
        display: inline-flex;
        position: relative;
        width: auto;
        margin: 0 34% 0 34%;
        padding: 0;
        border-radius: 16px;
        background-color: #111;
        z-index: 8888;
    }
    #dialogNH-box > div {
        width: auto;
        border: 2px solid rgba(255, 0, 0, 0.8);
        border-radius: 16px;
    }
    #dialogNH-box > div > #dialogNH-box-head {
        background-color: #111;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px 5px 10px;
        color: #D0D0D0;
    }
    #dialogNH-box > div > #dialogNH-box-body {
        background-color: #111;
        padding: 20px;
        color: #D0D0D0;
        text-align: center;
    }
    #dialogNH-box > div > #dialogNH-box-foot {
        background-color: #111;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;        
        padding: 10px;
        text-align: right;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton {
        width: 78px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 4px;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
        cursor: pointer;
        transition: all 0.3s linear;
    } 
    #dialogNH-box > div > #dialogNH-box-foot > .ConfirmButton:hover {
        border: 2px solid rgba(255, 0, 0, 0.8);
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton {
        width: 76px;
        padding: 7px 5px 8px 5px;
        color: #D0D0D0;
        margin-right: 0;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        cursor: pointer;
        transition: all 0.3s linear;
    }
    #dialogNH-box > div > #dialogNH-box-foot > .CancelButton:hover {
        border: 2px solid #555;  
    }
}


/* /////// END - RED Pop-Up Confirm Message ////// */

/* ///////// START - UPLOAD MUSIC - ALERTS //////// */

.WarningTextStyle {
    font-size: 12px;
    margin: 0 0 5px 0; 
    padding: 0 0 10px 0; 
    border: 2px solid red;
}
#alertTriangleStyle {
    font-size: 15px;
    margin-top: 10px;
    margin-right: 5px;
}

/* ////////// END - UPLOAD MUSIC - ALERTS ///////// */

/* //////////////// END- ERROR ALERTS ///////////// */

/* ================================================ */

/* ///////// START - TEMP CONSTRUCTION PAGE /////// */

@media screen and (max-width: 767px) {
    
    #underConstruct {
        position: absolute;
        font-size: 26px;
        font-style: italic;
        color: #fff;
        margin: 18% 0px 0px 13%;
        z-index: 999;
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.4);
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #underConstruct {
        position: absolute;
        font-size: 52px;
        font-style: italic;
        margin: 10% 0px 0px 17%;
        z-index: 999;
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.4);
    }
}
@media screen and (min-width: 1024px) {
    
    #underConstruct {
        position: absolute;
        font-size: 52px;
        font-style: italic;
        margin: 18% 0px 0px 30%;
        z-index: 999;
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.4);
    }
}

/*////////// END - TEMP CONSTRUCTION PAGE /////////*/

/* ///////// START - INDEX PAGE /////// */

/* // search bar // */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #indexSearchContainer {
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .indexSearchTitle {
        color: #777;
        font-size: 26px;
    } 
    .indexPageSearch { /* form */
        position: relative;
        z-index: 6;
        width: 300px;
        margin: 20px 0 0 0;
        padding: 0 10px 0 10px;
    }
    #indexBodyContainer {
        width: 100%;
        margin: 40px 0 80px 0; 
        padding: 0 10px 0 10px;
    }    
}
@media screen and (min-width: 768px) {
    
    #indexSearchContainer {
        display: flex;
        width: 100%;
        margin: 80px 0 0 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }   
    .indexSearchTitle {
        color: #ff9900;
        font-size: 36px;
    }      
    .indexPageSearch { /* form */
        position: relative;
        z-index: 6;
        width: 500px;
        margin: 20px 0 0 0;
        padding: 0;
    }
    #indexBodyContainer {
        width: 100%;
        margin: 100px 0 300px 0; 
    }
}

/* //// Drop down Indexed Search Bar //// */

#indexAddonHolder {
    margin-top: 0;
    padding: 0;
    border-radius: 12px;
    /*box-shadow: 3px 3px 10px #000000, 0 0 0;*/
}

#indexSearchInput {
    display: block;
    resize: none;
    height: 46px;
    width: 100%;
    padding: 10px 10px 10px 10px;
    color: #999;
    line-height: 1.4;
    vertical-align: middle;
    transition: all 0.3s linear;/**/
}
#indexSearchInput:hover {
    cursor: text;
}
#indexSearchAddon {
    height: 46px;    
    margin: 0;    
    padding: 2px 6px 0 10px;
    color: #999;
    transition: all 0.3s linear;/**/
}
#indexviewBox {
    margin-top: 0;
    margin-right: 0;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #indexSearchInput {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        border-right: none;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #indexSearchAddon {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-left: none;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #indexviewBox {
        stroke: #222222;
    }
}
@media screen and (min-width: 1025px) {

    #indexSearchInput {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        border-right: none;
        background-color: #111;
    }
    #indexSearchAddon {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
        background-color: #111;
    }
    #indexviewBox {
        stroke: #333333;
    }
}
.indexDisplayHolder {
    height: 0;
    width: 100%;
    margin: 3px 0 0 0;
    padding: 0;    
}
#indexDisplay {
    position: relative;
    height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 10000;
}

/*/ 
indexDisplayContainer element is nested inside the display element on the top nav bars.
The actual element can be found on components/search.php 
/*/

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .navbarDisplayContainer {
        margin: 0;
        padding: 5px 0 14px 5px;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 768px) and (max-width: 1367px) {
    
    .navbarDisplayContainer {
        position: relative;
        margin: 0;
        padding: 5px 0 14px 5px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;       
        z-index: 8;
    }
}
@media screen and (min-width: 1368px) {
    
    .navbarDisplayContainer {
        position: relative;
        margin: 0;
        padding: 5px 0 14px 5px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        /*box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;*/
        z-index: 8;
    }
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .indexDisplayContainer {
        margin: 3px 0 0 0;
        padding: 5px 0 14px 5px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #111;
    } 
}
@media screen and (min-width: 1025px) {
    
    .indexDisplayContainer {
        margin: 3px 0 0 0;
        padding: 5px 5px 14px 5px;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
    } 
}

.navbarDisplay_box {
    height: 35px;
    width: auto;
    margin: 6px 0 -6px 0;
    padding: 6px 6px 0 6px;
    color: #fff;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.indexDisplay_box {
    height: 63.5px;
    width: auto;
    margin: 6px 0 6px 0;
    padding: 6px 6px 12px 6px;
    color: #fff;
    font-size: 12px;
    text-align: left;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s linear;
}
.indexDisplay_box:hover {
    cursor: pointer;
    border-radius: 8px;
    background-color: #1d1d1d;
}
.indexDisplayText {
    margin: 0;
    padding: 18px 0 20px 0;
}
.indexSearchResultAvatar {
    float: left;
    width: 52px;
    height: 52px;
    margin-top: 0;
    margin-right: 10px;
    border-radius: 6px;
}

/*////////// END - INDEX PAGE /////////*/

/* ============================================== */

/* ///////// START - DISCOVER PAGE /////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    /* // Discover page // */
    
    .middleNavBarDiscoverSmall {
        position: absolute;
        height: 45px;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: rgba(0, 0, 0, 0.7);
        border-bottom: 2px solid #333;        
        z-index: 5 !important;
    }
    .middleNavBarDiscoverLarge {
        display: none;
    }

    /* // Index page // */    
    
    .middleNavBarIndexSmall {
        position: absolute;
        height: 20px;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 5 !important;
    }
    .middleNavBarIndexLarge {
        display: none;         
    }    
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    
    /* // Discover page // */
    .middleNavBarDiscoverSmall {
        display: none;        
    }    
    .middleNavBarDiscoverLarge {
        position: absolute;
        margin: 28px 0 0 0;
        padding: 0;
        width: 100%;
        height: 65px;
        background-color: rgba(0, 0, 0, 0.7);
        border-bottom: 2px solid #333;
        z-index: 5 !important;
    }

    /* // Index page // */
    .middleNavBarIndexSmall {
        display: none;         
    }
    .middleNavBarIndexLarge {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 65px;
        background-color: rgba(0, 0, 0, 0.7);
        border-bottom: 2px solid #333;
        z-index: 5 !important;
    }
}
@media screen and (min-width: 992px)  {

    /* // Discover page // */
    
    .middleNavBarDiscoverSmall {
        display: none;        
    }     
    .middleNavBarDiscoverLarge {
        position: absolute;
        margin: -50px 0;
        padding: 0;
        width: 100%;
        /*height: 65px;*/
        height: 50px;
        background-color: rgba(0, 0, 0, 0.7);
        border-bottom: 2px solid #333;
        z-index: 5 !important;
    }

    /* // Index page // */
    
    .middleNavBarIndexSmall {
        display: none;         
    }    
    .middleNavBarIndexLarge {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 65px;
        background-color: rgba(0, 0, 0, 0.7);
        border-bottom: 2px solid #333;
        z-index: 5 !important;
    }
}
#ppheaderContainer {
    padding: 0;

}

/* ///////////////////////////////////////////////////// */

#discoverIndexContainer {
    box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.85);
    background: linear-gradient(145deg, #191919 35%, #111111) border-box; 
}
#titleIndex { 
    color: #D0D0D0;
    font-style: italic;
}

@media screen and (min-width: 320px) and (max-width: 384px) {

    #discoverContainer {
        width: 100%; 
        margin: 0 0 330px 0; 
        padding: 0;
    }
    #discoverIndexContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #titleIndex {
        margin: 0;
        padding: 53px 0 0 0;
        font-size: 23px;
    }
}
@media screen and (min-width: 385px) and (max-width: 767px) {

    #discoverContainer {
        width: 100%; 
        margin: 0 0 330px 0; 
        padding: 0;
    }
    #discoverIndexContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #titleIndex {
        margin: 0;
        padding: 53px 0 0 0;
        font-size: 25px;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #discoverContainer {
        width: 100%; 
        margin: 0 0 330px 0; 
        padding: 0;
    }    
    #discoverIndexContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #titleIndex {
        margin: 0;
        padding: 43px 0 0 0;
        font-size: 32px;
    }
}
@media screen and (min-width: 823px) and (max-width: 1024px) {
    
    #discoverContainer {
        width: 100%; 
        margin: 0 0 330px 0; 
        padding: 0;
    }          
    #discoverIndexContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #titleIndex {
        margin: 0;
        padding: 43px 0 0 0;
        font-size: 32px;
    }
}
@media screen and (min-width: 1025px) {
    
    #discoverContainer {
        width: 100%; 
        margin: 0 0 330px 0; 
        padding: 0;
    }       
    #discoverIndexContainer {
        display: flex;
        height: 110px;
        margin: 45px 0 36px 0;
        padding: 0 0 0 103px;
    }
    #titleIndex {
        position: relative;
        margin: 42px 0 0 0;     
        font-size: 32px;
        z-index: 6;
    }
}

/* //// START PUBLIC-CARD //// */

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #profileCardOutterContainer {
        margin: 0; 
        padding: 4px 10% 0 10%;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #profileCardOutterContainer {
        margin: 0; 
        padding: 5px 10% 0 10%;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #profileCardOutterContainer {
        margin: 0; 
        padding: 0 20% 0 20%;
    }  
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #profileCardOutterContainer {
        margin: 0;
        padding: 0 5% 0 5%;
    }
}
@media screen and (min-width: 1025px) {

    #profileCardOutterContainer {
        margin: 0; 
        padding: 0 85px 0 85px;
    }    
}

/* ///// Body ///// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #profileCardContainer { 
        margin: 20px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
        border-radius: 12px;
        border: 1px solid transparent;
        background-image: linear-gradient(to right, #0a0a0a, #2a2a2a, #0a0a0a);
        /*background-image: linear-gradient(to right, #0d0d0d, #2a2a2a, #0d0d0d);*/
    }
    #profileCardContainerInner {
        width: 100%;
        margin: -30px 0 -10px 0;
        padding: 0 10px 0 10px;
        background: transparent;
    }

    .profileCardPublic {
        display: inline-block;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }  
    .small2-profile-avatar {
        max-height: 45px;
        min-height: 45px;
        max-width: 45px;
        min-width: 45px;
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
        border-radius: 5px;
        border: 2px solid #222;
    }
    .profileCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .profileCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .noOfPledges {
        margin: 30px 0 0 0;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);        
    }
    .ppBottomDetsHolder {
        display: inline-flex;
        margin: 4px 0 0 0;
        justify-content: space-between;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

    #profileCardContainer {
        width: 100%;
        margin: 25px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;         
        border-radius: 12px;
        border: 1px solid transparent;
        background-image: linear-gradient(to right, #0a0a0a, #2a2a2a, #0a0a0a);
        /*background-image: linear-gradient(to right, #0d0d0d, #2a2a2a, #0d0d0d);*/
    }
    #profileCardContainerInner {
        width: 100%;
        margin: -12px 0 -10px 0;
        padding: 0;
        background: transparent;
    }
    .profileCardPublic {
        display: inline-block;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }  
    .small2-profile-avatar {
        max-height: 45px;
        min-height: 45px;
        max-width: 45px;
        min-width: 45px;
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
        border-radius: 5px;
        border: 2px solid #222;
    }
    .profileCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .profileCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .noOfPledges {
        margin: 30px 0 0 0;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);        
    }
    .ppBottomDetsHolder {
        display: inline-flex;
        margin: 4px 0 0 0;
        justify-content: space-between;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #profileCardContainer {
        width: 100%;
        margin: 0;
        padding: 6px 0 6px 0;
        border-radius: 12px;
        background-image: radial-gradient(#2a2a2a, #0a0a0a 67%);
    }
    #profileCardContainerInner { }
    .profileCardPublic {
        position: relative; 
        z-index: 1000;
        display: inline-block;
        height: 80px;
        width: 100%;
        margin: 0;
        padding: 0;
        bottom: 0;
        border-radius: 6px;
    }  
    .small2-profile-avatar {
        max-height: 58px;
        min-height: 58px;
        max-width: 58px;
        min-width: 58px;
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
        border-radius: 8px;
        border: 2px solid #222;
    }
    .profileCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .profileCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 14px;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .noOfPledges {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);        
    }
    .ppBottomDetsHolder {
        display: inline-flex;
        margin: 30px 0 0 0;
        justify-content: space-between;
    }
}
@media screen and (min-width: 1025px) {

    #profileCardContainer {
        width: 100%;
        margin: 0;
        padding: 6px 0 6px 0;
        border-radius: 12px;
        background-image: radial-gradient(#2a2a2a, #111111 67%);
    }
    #profileCardContainerInner { }
    .profileCardPublic {
        position: relative; 
        z-index: 1000;
        display: inline-block;
        height: 80px;
        width: 100%;
        margin: 0;
        padding: 0;
        bottom: 0;
        border-radius: 6px;
    }  
    .small2-profile-avatar {
        max-height: 58px;
        min-height: 58px;
        max-width: 58px;
        min-width: 58px;
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
        border-radius: 8px;
        border: 2px solid #222;
    }
    .profileCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .profileCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 14px;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    }
    .noOfPledges {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);        
    }
    .ppBottomDetsHolder {
        display: inline-flex;
        margin: 30px 0 0 0;
        justify-content: space-between;
    }
}


#cardheadphones {
    margin: 0;
    padding: 0 0 0 3px;
    color: #E9E9E9;
    font-size: 18px;
    text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    text-align: left;
}
.fa-headphones {
    filter: drop-shadow(1px 1px 1px rgba(0,0,0, 0.8));
}
#cardCampaign {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
    text-align: right;
}

.profile-card {
    display: block;
    border: 2px solid #111;
    border-radius: 6px;
    margin: 10px 0 10px 0;
    padding: 4px 0 35px 5px;
    background-color: #000;
    transition: 1.0s ease-out; 
}
.profile-card:hover {
    border: 2px solid #333;
    background-color: #111;
}
.profile-card hr {
    border-style: solid;
    border-color: #333;
}
.profile-card h1 {
    margin: 15px 0 -15px 0;
}
.profile-card h3 {
    margin-top: 0;
}
.totalPledges {
    float: right;  
    margin: -13px 10px 0 0;   
}
.profile-card-name {
    margin-left: 5px;
    color: #FF9900;
    font-weight: 500;
    font-size: 23px;
}
.profile-card-name {
    margin-left: 5px;
    color: #FF9900;
    font-weight: 500;
    font-size: 23px;
}

/* //// END PUBLIC-CARD //// */

/* ////////// END PUBLIC-PROFILES PAGE ////////// */

/* ============================================== */

/* //////////////// LOG-IN PAGE ///////////////// */


@media screen and (min-width: 411px) and (max-width: 479px) {

    #loginWrapper {
        padding-left: 10%; 
        padding-right: 10%;      
    }
}
@media screen and (min-width: 480px) and (max-width: 599px) {

    #loginWrapper {
        padding-left: 13%; 
        padding-right: 13%;      
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #loginWrapper {
        padding-left: 20%; 
        padding-right: 20%;      
    }
}
@media screen and (min-width: 768px) {

    #loginWrapper {
        padding-left: 0; 
        padding-right: 0;     
    }
}
#loginContainer {
    border-radius: 34px;
    /*border-radius: 16px;*/
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #loginContainer {
        margin: 100px 0 60px 0;
        padding: 10px 25px 10px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #LoginLogo {
        height: 40px; 
        width: auto;
        margin: 10px 0 25px 0;
    }    
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #loginContainer {
        width: 400px;
        margin: 70px 0 60px 26%;
        padding: 10px 30px 10px 30px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #LoginLogo {
        height: 40px; 
        width: auto;
        margin: 10px 0 25px 0;
        padding: 0;
    }
}
@media screen and (min-width: 824px) and (max-width: 1024px) {
    
    #loginContainer {
        min-width: 400px;
        margin: 100px auto 60px auto;
        padding: 10px 35px 10px 35px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #LoginLogo {
        height: 40px; 
        width: auto;
        margin: 10px 0 25px 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {
    
    #loginContainer {
        min-width: 380px;
        margin: 100px 0 60px 0;
        padding: 10px 35px 10px 35px;
        border: 2px solid #333;
        background-color: #111;
    }
    #LoginLogo {
        height: 40px; 
        width: auto;
        margin: 10px 0 25px 0;
        padding: 0;
    }
}
.loginLogoHolder {
    text-align: center;
}
#loginForm {
    margin: 0;
    padding: 0;
}
.FormlabelLogin {
    margin: 0 0 0 1px; 
    padding: 0 0 0 0;
    font-size: 14px; 
    font-weight: 600;        
    color: #999;
}
#loginFormGroupEmail {
    height: 74px; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0;
}
#loginFormGroupPass {
    height: 80px; 
    margin: 0; 
    padding: 0 0 0 0;
}
.loginPassHolder {
    display: inline-flex;
    width: 100%; 
    margin: 0 0 5px 0; 
    padding: 0; 
}

/* // login Button // */

#loginButtHolder {
    text-align: center;
}
.logInButt {
    width: 100%;
    margin: 0;
    padding: 12px 0 12px 0;
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s linear;
}

/* // login C // */

#loginButtHolderC {
    text-align: center;
}
.logInButtC {
    width: 100%;
    margin: 0;
    padding: 12px 0 12px 0;
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s linear;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #loginButtHolder {
        margin: 30px 0 10px 0;
        padding: 0;
        border-radius: 12px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .logInButt {
        color: #FF9900;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .logInButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
    
    /* // login C // */

    #loginButtHolderC {
        margin: 30px 10px 10px 10px;
        padding: 0;
        border-radius: 14px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .logInButtC {
        color: #FF9900;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .logInButtC:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
}
@media screen and (min-width: 1025px) {

    #loginButtHolder {
        margin: 30px 0 12px 0;
        padding: 0 0 0 0;
        border-radius: 12px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .logInButt {
        color: #FF9900;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .logInButt:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 153, 0, 0.8);   
    }

    /* // login C // */

    #loginButtHolderC {
        margin: 30px 0 12px 0;
        padding: 0;
        border-radius: 12px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .logInButtC {
        color: #FF9900;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .logInButtC:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 153, 0, 0.8);   
    }  
}

/* // Login - Show / Hide eye //  */

@media screen and (min-width: 320px) and (max-width: 1023px) {  

    #logIneye.fa-eye {
        position: relative;
        height: 29.5px;
        width: 29px;
        margin: 12.5px 0 0 -34px;
        padding: 0 5px 0 3px;
        color: #333;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #logIneye.fa-eye-slash {
        position: relative;
        height: 29.5px;
        width: 29px;
        margin: 12.5px 0 0 -34px;
        padding: 0 3.75px 0 1.75px;
        color: #333;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #logIneye:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {  

    #logIneye.fa-eye {
        position: relative;
        height: 29.5px;
        width: 29px;
        margin: 12.75px 0 0 -34px;
        padding: 0 5px 0 3px;
        color: #333;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #logIneye.fa-eye-slash {
        position: relative;
        height: 29.5px;
        width: 29px;
        margin: 12.75px 0 0 -34px;
        padding: 0 3.75px 0 1.75px;
        color: #333;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #logIneye:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1025px) {  
    
    #logIneye {
        position: relative;
        z-index: 8;
    }    
    #logIneye:hover {
        cursor: pointer;
    }

    #logIneye.fa-eye {
        height: 28.5px;
        width: 28px;        
        margin: 12px 0 0 -33px;
        padding: 0 5px 0 3px;
        color: #444;
        border-radius: 8px;
        background-color: #111;
    }
    #logIneye.fa-eye-slash {
        height: 28.5px;
        width: 28px; 
        margin: 12px 0 0 -33px;
        padding: 0 3.75px 0 1.75px;
        color: #444;
        border-radius: 8px;
        background-color: #111;
    }

/*    #logIneye {
        position: relative;
        z-index: 8;
    }    
    #logIneye:hover {
        cursor: pointer;
    }
    #logIneye.fa-eye {
        height: 28.5px;
        width: 28px;       
        margin: 12px 0 0 -33px;
        padding: 0 5px 0 3px;
        color: #444;
        border-radius: 8px;
        background-color: #111;
    }
    #logIneye.fa-eye-slash {
        height: 28.5px;
        width: 28px; 
        margin: 12px 0 0 -33px;
        padding: 0 3.75px 0 1.75px;
        color: #444;
        border-radius: 8px;
        background-color: #111;
    }*/



/*    #logIneye {
        position: relative;
        z-index: 8;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        height: 30px;
        width: 30px;
        border-radius: 8px;
        background-color: #111;
    }
    #logIneye:hover {
        cursor: pointer;
    }*/
    /* Use a combined selector for better specificity */
/*    #logIneye.fa-eye {
        height: 21.5px;
        width: 21px; 
        margin: 11px 0 0 -42px;
        padding: 0 3px 0 3px;
        color: #444;
    }
    #logIneye.fa-eye-slash {
        height: 21.5px;
        width: 21px; 
        margin: 11px 0 0 -42px;
        padding: 0 3px 0 3px;
        color: #444;
    }*/


/*    #logIneye.svg-inline--fa.fa-eye.fa-w-18 {
        height: 21.5px;
        width: 21px;         
        margin: 11px 0 0 -42px;
        padding: 0 3px 0 3px;
        color: #444;
    }
    #logIneye.svg-inline--fa.fa-eye-slash.fa-w-20 {
        height: 21.5px;
        width: 21px; 
        margin: 11px 0 0 -42px;
        padding: 0 3px 0 3px;
        color: #444;
    }*/

    /* You might also need to style the path within the SVG */
    /*#logIneye svg path {*/
        /* Example: you might need to adjust fill or stroke if that's what's causing issues */
    /*}*/

}

.forgotPassLinkholder {
    margin: 5px 0 10px 0;
    padding: 0;
    text-align: center;
}
.forgotPasswordLink {
    margin: 0;
    padding: 0;
    color: #ff9900;
    font-size: 12px;
    text-decoration: none;
}

/* //// PHP errors and alerts ////  */

.loginErrorHolder {
    height: 60px;
    margin: 0;
    padding: 10px 0 0 0;
}
#validEmailAlert {
    margin: 0; 
    padding: 0 20px 0 20px; 
    font-size: 12px; 
    color: #ff0000; 
    line-height: 1.4;
    word-break: break-word;
    background: none; 
    border: none;
}

#PassAlert {
    margin: 0; 
    padding: 13px 20px 0 20px; 
    font-size: 12px; 
    color: #ff0000;
    line-height: 1.4;
    word-break: break-word;
    background: none; 
    border: none;
}
#CAAalertError {
    padding: 0 10px 0 10px;
    color: #ff0000;
    font-size: 12px;
    text-align: center; 
    letter-spacing: 1.4px; 
}
#accountCancelAlert {
    margin: 0; 
    padding: 6px 20px 0 20px; 
    font-size: 12px; 
    color: #ff0000; 
    line-height: 1.4;
    word-break: break-word;
    background: none; 
    border: none;    
}
#NotInDatabaseAlert {
    margin: 0; 
    padding: 6px 20px 0 20px; 
    font-size: 12px; 
    color: #ff0000; 
    line-height: 1.4;
    word-break: break-word;
    background: none; 
    border: none;
}
#CapslockMsg {
    display: none; 
    margin: 0 2px 0 1px; 
    font-size: 12px; 
    color: #ff0000;
}
#CapslockTriangle {
    margin: 0 5px 0 0;
    font-size: 14px;
}
#ErrorAlertTriangle { /* use for other alerts */
    margin: 0 0 5px 0; 
    font-size: 18px; 
}
#ErrorPassAlertTriangle {
    margin: 0 0 6px 0; 
    font-size: 14px; 
}
#ErrorPassword {
    margin: -5px 0;
    padding: 0 5px 10px 0;
    color: #ff0000;
    font-size: 12px;
    text-align: center;   
}
#SuccessPassword {
    margin: -8px 0;
    padding: 0 5px 10px 0;
    color: #0088FF;
    font-size: 12px;
    text-align: center;   
}
#SuccessAlertSun {
    margin: 0 0 6px 0;
    font-size: 20px; 
}

/* //// JS errors ////  */

#EmptyPasswordError,
#ValidPasswordError {
    line-height: 1.4;
    margin: 3px 2px 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;
    text-align: justify;        
}

/* ///////////// END - LOG-IN PAGE ////////////// */

/* ============================================== */

/* /////////// FORGOT PASSWORD PAGES //////////// */

#FPcontainerInner {
    margin: 0;
    padding: 20px 30px 20px 30px;
    border: 2px solid #333;
    border-radius: 8px;
    background-color: #111;
    box-shadow: 9px 9px 14px #000000, -1px -1px 10px #1b1b1b;
}
.FPalertContainer {
    height: 70px;
    margin: 15px 0 5px 0;
}
.FPNoEmailAlert { /* red */
    width: 100%;
    margin: 0; 
    padding: 10px; 
    color: #ff0000; 
    font-size: 12px;
    text-align: center;
    border-radius: 6px; 
    background-color: #111;
}
.FPverifyEmailAlert { /* red */
    width: 100%;
    margin: 0 0 10px 0; 
    padding: 9px 25px 10px 25px;
    color: #ff0000; 
    font-size: 12px;
    text-align: center;
    border-radius: 6px; 
    background-color: #111;
    transition: all 0.4s linear;
}
.FPverifyEmailAlert:hover {
    cursor: pointer;
}
.FPpledgstaEmailVerified { /* blue */
    width: 100%; 
    margin: 0 0 10px 0; 
    padding: 9px 25px 10px 25px; 
    color: #0088FF;
    font-size: 12px;
    text-align: center;
    border-radius: 6px; 
    background-color: #111;
}
.FPpledgstaSentVerifyEmail {  /* gold */
    width: 100%; 
    margin: 0 0 10px 0; 
    padding: 9px 25px 10px 25px; 
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 6px; 
    background-color: #111;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #FPcontainerOuter {
        margin: 80px 0 100px 0; 
        padding: 0;
    }
    .FPintructText {
        margin: 0 auto 0 auto; 
        padding: 0; 
        color: #999;
        font-size: 12px; 
        text-align: center;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #FPcontainerOuter {
        margin: 80px 0 0 0; 
        padding: 0 150px 0 150px;
    }
}
@media screen and (min-width: 1024px) {

    #FPcontainerOuter {
        margin: 80px 0 20px 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 768px) {
    
    .FPintructText {
        margin: 0 auto 0 auto; 
        padding: 0; 
        color: #999;
        font-size: 14px; 
        text-align: center;
    }
}
#FPemailContainer {
    margin: 30px 0 50px 0; 
    padding: 0 10px 10px 10px;
} 
.FPemailAlertHolder {
    height: 60px;
    margin: 0; 
    padding: 0;
}
.form-control-FP {
    box-shadow: none;
    display: block;
    width: 100%;
    height: 32px;
    margin: 5px 0 0 0; 
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 6px; 
    transition: all 0.3s linear;
}
.form-control-FP:hover {
    cursor: text;
    background-color: #111;
    border: 2px solid #555;
}
.Reset {  
    width: 100%;
    height: 33px;
    margin: 7px 0 0 0; 
    padding: 6px 0 0 0;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;
    transition: all 0.4s linear;
}
.Reset:hover {
    cursor: pointer;
    border: 2px solid #555;
    /*background-color: #111;*/
}
.FPResetButt {  
    width: 100%;
    height: 33px;
    margin: 7px 0 0 0; 
    padding: 0;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;
    transition: all 0.4s linear;
}
.FPResetButt:hover {
    cursor: pointer;
    border: 2px solid #555;
    background-color: #111;
}

/* //////////// FP-EMAIL CONFIRM PAGE /////////// */

#FPEmailConfirmContainer {
    margin-top: 250px;
}
#FPEmailConfirmInner {
    margin: 0 0 200px 0; 
    padding: 0;
}
#FPEmailCMessageHolder {
    margin: 0;
    padding: 10px 30px 10px 30px;  
    border: 2px solid #333; 
    border-radius: 8px;
    background-color: #000;
}

/* //////// END - FORGOT PASSWORD PAGES ///////// */

/* ============================================== */

/* ///////// ARTIST RESET PASSWORD PAGE ///////// */
/* ////////               +              //////// */
/* //////// PLEDGSTA RESET PASSWORD PAGE ///////// */


#RPcurrentPassOuter {
    height: 90px;
    margin: 0;
    padding: 0;
}
#RPnewPassOuter {
    height: 105px;
    margin: 0;
    padding: 0;
}
#RPconfNewPassOuter {
    height: 90px;
    margin: 0;
    padding: 0;
}

#RPinner { 
    border-radius: 16px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
} 

/* /// Main divs Sizes /// */

@media screen and (min-width: 320px) and (max-width: 599px) {

    #RPcontainer {
        margin: 0 0 100px 0; 
        padding: 0;
    }
    #RPouter {
        margin: 0 0 15px 0; 
        padding: 0 auto 0 auto;
    }    
    #RPinner {
        margin: 75px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    .RPpasswordInfo {
        margin: 15px 0 10px 0; 
        padding: 0 5px 0 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        border: none;
    }   
}
@media screen and (min-width: 600px) and (max-width: 767px) { /* 600 + 732 */

    #RPcontainer {
        width: 80%;
        margin-bottom: 100px;
    } 
    #RPouter {
        margin: 0 0 15px 0; 
        padding: 0 auto 0 auto;
    }
    #RPinner {
        margin: 75px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    .RPpasswordInfo {
        margin: 10px 0 10px 0; 
        padding: 0 5px 0 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background-color: #0d0d0d;
        border: none;
    }   
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */

    #RPcontainer {
        width: 70%;
        margin-bottom: 100px;
    }
    #RPouter {
        margin: 0 0 15px 0; 
        padding: 0 auto 0 auto;
    }    
    #RPinner {
        margin: 65px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .RPpasswordInfo {
        margin: 10px 0 10px 0;
        padding: 0 40px 0 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        border: none;
    } 
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #RPcontainer {
        width: 65%;
        margin-bottom: 100px;
    }
    #RPouter {
        margin: 0 0 15px 0; 
        padding: 0 auto 0 auto;
    }    
    #RPinner {
        margin: 65px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    .RPpasswordInfo {
        margin: 10px 0 10px 0;
        padding: 0 40px 0 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        border: none;
    } 
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 800 */

    #RPcontainer {
        width: 65%;
        margin-bottom: 100px;
    }
    #RPouter {
        margin: 0 0 15px 0; 
        padding: 0;
    }    
    #RPinner {
        margin: 65px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }   
    .RPpasswordInfo {
        margin: 10px 0 10px 0; 
        padding: 0 24px 0 0;        
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
        border: none;
    }  
}

@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 */

    #RPcontainer {
        width: 58%;
        margin-bottom: 100px;
    }
    #RPouter {
        margin: 0 0 15px 0; 
        padding: 0;
    }    
    #RPinner {
        margin: 65px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }   
    .RPpasswordInfo {
        margin: 10px 0 10px 0; 
        padding: 0 24px 0 0;        
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
        border: none;
    } 
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #RPcontainer {
        width: 50%;
        margin-bottom: 100px;
    }    
    #RPouter {
        margin: 0 10px 15px 21px; 
        padding: 0;
    }    
    #RPinner {
        margin: 65px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }   
    .RPpasswordInfo {
        margin: 10px 0 10px 0; 
        padding: 0 24px 0 0;        
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        border: none;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #RPcontainer {
        margin: 0 0 100px 0; 
        padding: 0;
    }    
    #RPouter {
        margin: 0 10px 15px 21px; 
        padding: 0;
    }    
    #RPinner {
        margin: 66px 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }     
  
    .RPpasswordInfo {
        margin: 10px 0 10px 0; 
        padding: 0 24px 0 0;        
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
        border: none; 
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
    
    #RPcontainer {
        margin: 66px 0 100px 0;
        padding: 0;
    }
    #RPouter {
        margin: 65px 10px 15px -25px; 
        padding: 0;
    }    
    #RPinner {
        margin: 0 0 0 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #333;
        background-color: #111;
    }      
    .RPpasswordInfo {
        margin: 10px 0 10px 0; 
        padding: 0 40px 0 0;        
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: #111; 
        border: none;    
    }
}
@media screen and (min-width: 1200px) {
    
    #RPcontainer {
        margin: 66px 0 100px 0;
        padding: 0;
    }
    #RPouter {
        margin: 0 10px 15px -25px; 
        padding: 0;
    }    
    #RPinner {
        margin: 0; 
        padding: 20px 20px 40px 20px;
        border: 2px solid #333;
        background-color: #111;
    }      
    .RPpasswordInfo {        
        margin: 10px 0 10px 0; 
        padding: 0 40px 0 0;        
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: #111; 
        border: none;    
    }
}

/* //////////////////////////////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #RPPassAlert {
        height: 70px;
        width: 100%;
        margin: 15px 0 5px 0;
        padding: 5px 0 0 0;
        font-size: 12px; 
        color: #ff0000; 
        line-height: 1.4;
        word-break: break-word;
        background: none; 
        border: none;
    }

    /* Success Alert */

    #PassSuccess {
        margin: 0; 
        padding: 7px 5px 10px 5px;
        text-align: center; 
        color: #0088FF; 
        font-size: 12px; 
    }
    #PassSuccessfeather {
        margin: 0 0 3px 0;
        font-size: 16px; 
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
      
    #RPPassAlert {
        height: 60px;
        width: 100%;
        margin: 12px 0 7px 0;
        padding: 5px 0 0 0;
        font-size: 12px; 
        color: #ff0000; 
        line-height: 1.4;
        word-break: break-word;
        background: none; 
        border: none;
    }
    
    /* Success Alert */

    #PassSuccess {
        margin: 0; 
        padding: 7px 5px 10px 5px;
        text-align: center; 
        color: #0088FF; 
        font-size: 14px; 
    }
    #PassSuccessfeather {
        margin: 0 0 6px 0;
        font-size: 16px; 
    }     
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
   
    #RPPassAlert {
        height: 60px;
        width: 100%;
        margin: 12px 0 7px 0;
        padding: 5px 0 0 0;
        font-size: 12px; 
        color: #ff0000; 
        line-height: 1.4;
        word-break: break-word;
        background: none; 
        border: none;
    }
    
    /* Success Alert */

    #PassSuccess {
        margin: 0; 
        padding: 7px 5px 10px 5px;
        text-align: center; 
        color: #0088FF; 
        font-size: 14px; 
    }
    #PassSuccessfeather {
        margin: 0 0 6px 0;
        font-size: 16px; 
    }     
}
@media screen and (min-width: 1025px) {
  
    #RPPassAlert {
        height: 60px;
        width: 100%;
        margin: 12px 0 7px 0;
        padding: 5px 0 0 0;
        font-size: 12px; 
        color: #ff0000; 
        line-height: 1.4;
        word-break: break-word;
        background: none; 
        border: none;
    }
    
    /* Success Alert */

    #PassSuccess {
        margin: 0; 
        padding: 7px 5px 10px 5px;
        text-align: center; 
        color: #0088FF; 
        font-size: 14px; 
    }
    #PassSuccessfeather {
        margin: 0 0 6px 0;
        font-size: 16px; 
    }     
}

/* /////////////////////////////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #RPcurrentPassContainer {
        height: auto;
        margin: 20px 0 0 0;
        padding: 0;
    }    
    #RPnewPassContainer {
        height: auto;
        margin: 0 0 5px 0;
        padding: 0;        
    }
    #RPconfNewPassContainer {
        height: auto;
        margin: 35px 0 5px 0;
        padding: 0;        
    }     
}
@media screen and (min-width: 768px) and (max-width: 800px) {
    
    #RPcurrentPassContainer {
        position: relative;
        height: 70px;
        margin-top: 20px;
        z-index: 1000;     
    }    
    #RPnewPassContainer {
        position: relative;
        height: 65px;
        margin: 30px 0 0 0;
        z-index: 1000;
    }    
    #RPconfNewPassContainer {
        position: relative;
        height: 65px;
        margin: 128px 0 30px 0;
        z-index: 1000;        
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) {
    
    #RPcurrentPassContainer {
        position: relative;
        height: 80px;
        margin-top: 0;
        z-index: 1000;     
    }    
    #RPnewPassContainer {
        position: relative;
        height: 65px;
        margin: 30px 0 0 0;
        z-index: 1000;
    }
    #RPconfNewPassContainer {
        position: relative;
        height: 65px;
        margin: 135px 0 30px 0;
        z-index: 1000;        
    }
}
@media screen and (min-width: 961px) {
    
    #RPcurrentPassContainer {
        position: relative;
        height: 65px;
        margin-top: 20px;
        z-index: 1000;     
    }    
    #RPnewPassContainer {
        position: relative;
        height: 65px;
        margin: 30px 0 0 0;
        z-index: 1000;
    }
    #RPconfNewPassContainer {
        position: relative;
        height: 65px;
        margin: 30px 0 30px 0;
        z-index: 1000;        
    }
}


.RPcurrentPassHolder {
    width: 100%; 
    margin: 0; 
    padding: 0; 
    display: inline-flex;
}
#current_PassWord {
    background: none;
}
.RPnewPassHolder {
    width: 100%; 
    margin: 0; 
    padding: 0; 
    display: inline-flex;
}
#new_PassWord {
    background: none;
}
.RPconfNewPassHolder {
    width: 100%; 
    margin:0; 
    padding:0; 
    display: inline-flex;
}
#confirm_new_PassWord {
    background: none;
}
#RPresetButtHolder {
    margin: 60px 0 0 0; 
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}



@media screen and (min-width: 320px) and (max-width: 1024px) {

    .passReset {
        /*height: 36px;*/
        width: 234px;
        margin: 0;
        padding: 14px 10px 13px 10px;
        color: #FF9900;  
        font-size: 14px;
        text-align: center;
        border-radius: 10px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.3s linear;   
    }
    .passReset:hover {
        cursor: pointer; 
        border: 2px solid #333;
        background-color: #111;      
    }
}
@media screen and (min-width: 1025px)  {

    .passReset {
        /*height: 36px;*/
        width: 234px;
        margin: 0;
        padding: 10px 10px 9px 10px;        
        color: #FF9900;  
        font-size: 14px;
        text-align: center;
        border-radius: 10px;   
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;   
    }
    .passReset:hover {
        cursor: pointer; 
        border: 2px solid #444;
        background-color: #151515;      
    }        
}

/* ////// END - ARTIST RESET PASSWORD PAGE ////// */

/* ============================================== */

/* /// ARTIST & PLEDGSTA RESET PASSWORD PAGES /// */

/* // Show / Hide eye // */

#eyea {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 8px 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #000;
    z-index: 8;
}
#eyea:hover {
    cursor: pointer;
}
#eyeb {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 8px 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #000;
    z-index: 8; 
}
#eyeb:hover {
    cursor: pointer;
}
#eyec {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 8px 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #000;
    z-index: 8;
}
#eyec:hover {
    cursor: pointer;
}

/* // Artist Reset password page - Show / Hide eye // */

@media screen and (min-width: 320px) and (max-width: 959px) { 

    /* // A // */
    #eyeaARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyeaARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyeaARP:hover {
        cursor: pointer;
    }
    /* // B // */
    #eyebARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8; 
    }
    #eyebARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyebARP:hover {
        cursor: pointer;
    }
    /* // C // */
    #eyecARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyecARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyecARP:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) { 

    /* // A // */
    #eyeaARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyeaARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyeaARP:hover {
        cursor: pointer;
    }
    /* // B // */
    #eyebARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8; 
    }
    #eyebARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyebARP:hover {
        cursor: pointer;
    }
    /* // C // */
    #eyecARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyecARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyecARP:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    /* // A // */
    #eyeaARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyeaARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyeaARP:hover {
        cursor: pointer;
    }
    /* // B // */
    #eyebARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8; 
    }
    #eyebARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyebARP:hover {
        cursor: pointer;
    }
    /* // C // */
    #eyecARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyecARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 13px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #eyecARP:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    /* // A // */
    #eyeaARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyeaARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyeaARP:hover {
        cursor: pointer;
    }
    /* // B // */
    #eyebARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8; 
    }
    #eyebARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyebARP:hover {
        cursor: pointer;
    }
    /* // C // */
    #eyecARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 4px; 
        background-color: #111;
        z-index: 8;
    }
    #eyecARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyecARP:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    /* // A // */
    #eyeaARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyeaARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyeaARP:hover {
        cursor: pointer;
    }
    /* // B // */
    #eyebARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8; 
    }
    #eyebARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyebARP:hover {
        cursor: pointer;
    }
    /* // C // */
    #eyecARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyecARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyecARP:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1200px) {

    /* // A // */
    #eyeaARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyeaARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyeaARP:hover {
        cursor: pointer;
    }
    /* // B // */
    #eyebARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8; 
    }
    #eyebARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyebARP:hover {
        cursor: pointer;
    }
    /* // C // */
    #eyecARP {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9px 0 0 -32px;
        padding: 0 7px 0 3px;
        text-align: center;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyecARP.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 29px;
        margin: 9.25px 0 0 -34.5px;    
        padding: 0 3.75px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eyecARP:hover {
        cursor: pointer;
    }
}



/* // forgot Reset password - Show / Hide eye // */

#eyebFRP {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 0 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #111;
    z-index: 8; 
}
#eyebFRP:hover {
    cursor: pointer;
}
#eyecFRP {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 0 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #111;
    z-index: 8;
}
#eyecFRP:hover {
    cursor: pointer;
}


/* //// JS errors //// */

#ValidPassword_N,
#ValidPassword_CN {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #0088FF;       
    word-break: break-word;    
    background-color: #111;
}
#ValidPasswordError_N,
#ValidPasswordError_CN {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;     
    background-color: #111;
}
#ValidPassword_CP {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #0088FF;       
    word-break: break-word;  
    background-color: #000;
}
#ValidPasswordInfo_CP,
#ValidPasswordInfo_N,
#ValidPasswordInfo_CN {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff9900;
    word-break: break-word;
    text-align: justify;        
    background-color: #000;
}
#ValidPasswordError_CP {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;     
    background-color: #000;
}

/* /// PHP Alerts /// */

.PasswordConfirm {
    margin: -5px 0 10px 0; 
    padding: 7px 0 11px 0; 
    font-size: calc(9px + 0.3vw); 
    border: 2px solid #0088FF; 
    background-color: rgb(0, 136, 255, 0.1);
}
.PasswordAlert {
    margin: -5px 0 10px 0;
    padding: 7px 0 11px 0; 
    font-size: calc(9px + 0.3vw);   
    border: 2px solid red;
}

/* END - ARTIST &  PLEDGSTA RESET PASSWORD PAGES  */

/* ============================================== */

/* /////// PLEDGSTA RESET PASSWORD PAGE ///////// */

#PRPcontainer {
    margin: 64px 0 100px 0; 
    padding: 0;
}
#PRPinner {
    margin: 0; 
    padding: 20px 30px 40px 30px; 
    border: 2px solid #333; 
    border-radius: 8px;
    box-shadow: 9px 9px 14px #000000, -1px -1px 10px #1b1b1b;
    background-color: #111;
}
.pledgePasswordInputHolder {
    width: 100%; 
    margin: 0; 
    padding: 0; 
    display: inline-flex;
}

/* // Pledgsta reset password - Show / Hide eye // */

#eyeaPRP {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 0 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #111;
    z-index: 8;
}
#eyeaPRP:hover {
    cursor: pointer;
}
#eyebPRP {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 0 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #111;
    z-index: 8; 
}
#eyebPRP:hover {
    cursor: pointer;
}
#eyecPRP {
    position: relative;
    height: 29px;
    width: 29px;
    margin: 9px 0 0 -32px;
    padding: 0 7px 0 3px;
    text-align: center;
    color: #444;
    border-radius: 4px; 
    background-color: #111;
    z-index: 8;
}
#eyecPRP:hover {
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 374px) {
    
    #PRPouter {
        margin: 0 10px 15px 10px; 
        padding: 0;
    }    
    #PRPNewCellHolder {
        height: 80px;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #PRPConNewCellHolder {
        height: 80px;
        margin: 30px 0 30px 0 ;
        padding: 0;
    }
}
@media screen and (min-width: 375px) and (max-width: 415px) {

    #PRPouter {
        margin: 0 10px 15px 10px; 
        padding: 0;
    }    
    #PRPNewCellHolder {
        height: 80px;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #PRPConNewCellHolder {
        height: 80px;
        margin: 30px 0 30px 0 ;
        padding: 0;        
    }
}
@media screen and (min-width: 416px) and (max-width: 599px) {

    #PRPouter {
        margin: 0 10px 15px 10px; 
        padding: 0;
    }    
    #PRPNewCellHolder {
        height: 95px;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #PRPConNewCellHolder {
        height: 95px;
        margin: 30px 0 30px 0 ;
        padding: 0;        
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #PRPouter {
        margin: 0 90px 15px 90px; 
        padding: 0;
    }
    #PRPNewCellHolder {
        height: 95px;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #PRPConNewCellHolder {
        height: 95px;
        margin: 30px 0 30px 0 ;
        padding: 0;        
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {

    #PRPouter {
        margin: 0 0 15px 0; 
        padding: 0 120px 0 140px;
    }
    #PRPNewCellHolder {
        height: 80px;
        margin: 30px 0 0 0;
    }
    #PRPConNewCellHolder {
        height: 80px;
        margin: 30px 0 30px 0 ;        
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #PRPouter {
        margin: 0 10px 15px 20px; 
        padding: 0;
    }    
    #PRPNewCellHolder {
        height: 80px;
        margin: 30px 0 5px 0;
    }
    #PRPConNewCellHolder {
        height: 80px;
        margin: 30px 0 30px 0 ;        
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #PRPouter {
        margin: 0 10px 15px 20px; 
        padding: 0;
    }    
    #PRPNewCellHolder {
        height: 70px;
        margin: 30px 0 5px 0;
    }
    #PRPConNewCellHolder {
        height: 70px;
        margin: 30px 0 30px 0 ;        
    }
}
@media screen and (min-width: 1025px) {
    
    #PRPouter {
        margin: 0 10px 15px -60px;
        padding: 0;
    }    
    #PRPNewCellHolder {
        position: relative;
        height: 65px;
        margin-top: 30px;
        z-index: 1000;     
    }
    #PRPConNewCellHolder {
        position: relative;
        height: 65px;
        margin: 30px 0 30px 0 ;
        z-index: 1000;         
    }
}

/* ///// END - PLEDGSTA RESET PASSWORD PAGE ///// */

/* ============================================== */

/* //////////////// START - MISC //////////////// */

.continueColumn {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
.continueColumnC { 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
#EPURLAddonHolder {
    margin-top: 15px;
    padding: 0;
}

#EPURL_addon {
    padding: 1px 1px 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
.EPinputURL {
    display: block;
    width: 100%;
    padding: 11px 10px 10px 0;
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border-left: none;
    transition: all 0.3s linear;
}
.EPinputURL:hover {
    cursor: text;
}

#EP_addon {
    padding: 1px 3px 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
.inputUserGoals {
    display: block;
    width: 100%;
    padding: 11px 10px 10px 2px;
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border-left: none;     
    transition: all 0.3s linear;
}
.inputUserGoals:hover {
    cursor: text;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    #EPURL_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .EPinputURL {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #EP_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;        
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .inputUserGoals {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}

@media screen and (min-width: 1025px) {
    
    #EPURL_addon {
        height: 33px;
        font-size: 12px;
        border-top: 2px solid #333333;
        border-left: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        background-color: #111;
    }
    .EPinputURL {
        height: 33px;
        font-size: 12px;
        border-top: 2px solid #333333;
        border-right: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: #111;
    }
    #EP_addon {
        height: 33px;
        font-size: 14px;
        border-top: 2px solid #333333;
        border-left: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        background-color: #111;
    }
    .inputUserGoals {
        height: 33px;
        font-size: 14px;
        border-top: 2px solid #333333;
        border-right: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: #111;
    }
}


.carousel-container {
    top: 0px;
}
.mySlides {
    display: none
}
.w3-left, .w3-right, .w3-badge {
    cursor: pointer
}
.w3-badge {
    height: 13px;
    width: 13px;
    padding: 0px;
}
.pledgsta-jumbotron {
    position: absolute;
    left: 10%;
    right: 10%;
    text-align: center; 
    padding-top: 165px;
    vertical-align: center;
}
.pledgsta-logo-big {
    position: absolute;
    text-align: center;
    margin-top: 165px;
    left: 20%;
    right: 20%;
    z-index: 900;
}
@media all and (min-width: 320px) and (max-width: 1999px){
    
    .pledgsta-logo-big {
        position: absolute;
        width: 70%;
        left: 15%;
        right: 15%;
        margin-top: 75px;
        z-index: 900;
    }
}


/* ////// Share buttons /////// */

.socialBox {
    margin: 0;
    padding: 0;    
}

@media screen and (max-width: 767px) {

    .shareBtnContainer {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        justify-content: space-between;
    }
}
@media screen and (min-width: 768px) {

    .shareBtnContainer {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        justify-content: space-between;
    }
}

/* /////////////////////////////////////// */

@media screen and (max-width: 1023px) {
    
    .shareBtnContainer a {
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
    }
    .shareBtnContainer a:hover {
        transform: scale(1.2);
        background-color: #000;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    
    .shareBtnContainer a {
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
    }
    .shareBtnContainer a:hover {
        transform: scale(1.2);
        background-color: #000;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
}
@media screen and (min-width: 1181px) {

    .shareBtnContainer a {
        transition: 500ms;
        text-decoration: none;
        background-color: #1c1c1c;
    }    
    .shareBtnContainer a:hover {
        transform: scale(1.2);
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
}

/* /// Icons /// */

/*.shareBtnContainer .fa-pinterest {
    margin: 0 10px 0 0;
    font-size: 24px;
    color: #bd081c;
}*/

.shareBtnContainer .fa-facebook {
    font-size: 24px;
    color: #3b5998;
}
.shareBtnContainer .fa-instagram {
    margin: -2px 10px 0 0;
    padding: 0;
    color: transparent;
    font-size: 28px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* For Safari */
}
.shareBtnContainer .fa-x-twitter {
    font-size: 25px;
    color: #D0D0D0;
}
.shareBtnContainer .fa-reddit {
    font-size: 23px;
    color: #ff4500;
}
.shareBtnContainer .fa-whatsapp {
    font-size: 28px;
    color: #25d366;
}

/* /// Buttons /// */

@media screen and (max-width: 1024px) {

    .facebookBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
    }
    .xBtn {
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #222;
    }
    .whatsappBtn {
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #222;
    }
    .redditBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {

    .facebookBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #333;
    }
    .xBtn {
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #333;
    }
    .whatsappBtn {
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #333;
    }
    .redditBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #333;
    }
}

/* ///////// End Share buttons ////////// */

/* -------------------------------------- */

/* ///////// On social gate pages /////// */

/* //// Button Container ///// */

@media screen and (max-width: 767px) {

    .scheduleBtnContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        /*display: flex;*/
        margin-top: -3px;
        padding: 0 10px 10px 10px;
        flex-direction: row;
    }
}
@media screen and (min-width: 768px) {

    .scheduleBtnContainer {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: row;
    }
}

/* /////////////////////////////////////// */

/* ////// click buttons ////// */

@media screen and (max-width: 1023px) {
    
    .scheduleBtnContainer a {
        color: #888;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .scheduleBtnContainer a:active {
        color: #888;
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .scheduleBtnContainer a {
        color: #888;
        transition: 500ms;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .scheduleBtnContainer a:hover {
        color: #888;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1180px) {
    
    .scheduleBtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .scheduleBtnContainer a:hover {
        color: #999;
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1181px) {

    .scheduleBtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }    
    .scheduleBtnContainer a:hover {
        color: #999;
        background-color: #1c1c1c;
    }

}

/* /// Icons /// */

.scheduleBtnContainer .fa-facebook {
    margin-bottom: 4px;
    font-size: 24px;
    color: #3b5998;
}
.scheduleBtnContainer .fa-instagram {
    margin: -2px 10px 0 0;
    padding: 0;
    color: transparent;
    font-size: 28px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* For Safari */
}
.scheduleBtnContainer .fa-reddit {
    margin-bottom: 4px;
    font-size: 23px;
    color: #ff4500;
}
.scheduleBtnContainer .fa-x-twitter {
    margin-bottom: 4px;
    font-size: 23px;
    /*color: #1da1f2; old twitter bird */
}

/* ////// Button Container /////// */

@media screen and (max-width: 767px) {

    .PCSbtnContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) {

    .PCSbtnContainer {
        display: flex;
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
        justify-content: space-between;
    }
}

/* ////// Scale buttons ////// */

@media screen and (max-width: 1023px) {
    
    .PCSbtnContainer a {
        color: #888;
        transition: 500ms;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .PCSbtnContainer a:active {
        color: #888;
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .PCSbtnContainer a {
        color: #888;
        transition: 500ms;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .PCSbtnContainer a:hover {
        color: #888;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1180px) {
    
    .PCSbtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .PCSbtnContainer a:hover {
        color: #999;
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1181px) {

    .PCSbtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }    
    .PCSbtnContainer a:hover {
        color: #999;
        background-color: #1c1c1c;
    }
}

/* /// Icons /// */

.PCSbtnContainer .fa-facebook {
    margin-bottom: 4px;
    font-size: 24px;
    color: #3b5998;
}
.PCSbtnContainer .fa-instagram {
    margin: -2px 0 4px 0;
    padding: 0;
    color: transparent;
    font-size: 28px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* For Safari */
}
.PCSbtnContainer .fa-x-twitter {
    margin-bottom: 4px;
    font-size: 25px;
    color: #D0D0D0;
}
.PCSbtnContainer .fa-reddit {
    margin-bottom: 4px;
    font-size: 23px;
    color: #ff4500;
}

/* /// Text /// */

.facebookText,
.instagramText,
.redditText,
.twitterXtext {
    margin-top: 2px;
}

/* /////// End - Schedule Social buttons //////// */

/* //////////////// END MISC //////////////////// */

/* ============================================== */

/* /////////// START - TOP NAV BAR ////////////// */

@media screen and (max-width: 767px) {

    #navbarHeader {
        margin-top: -45px;
    }    
    .navbar {  
        position: fixed;
        height: 60px;
        border: none;
        border-radius: 0;
        z-index: 11000;
    }

    /* //// NavBar //// */
    #NavBarTop { 
        height: 60px;
        padding-top: 2px;
        border: none;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    /* //// NavBar Shadow //// */
    #NavBarTopShadow {
        position: fixed;
        z-index: 9000;
        top: 0;
        height: 60px;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.8); /* straight-down drop shaddow */
    }
    /* //// NavBar //// */
    #NavBarTopNoshadow {
        height: 60px;
        padding-top: 2px;
        border: none;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/       
    }
    /* //// NavBar Timed Shadow //// */
    #NavBarShadow {
        position: fixed;
        z-index: 9000;
        top: -60px;
        height: 60px;
        transition: top 0.3s;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.8); /* straight-down drop shaddow */
    }

    #collapseNavbarLarge {
        display: none;
    }
    #collapseNavbarMed {
        display: none;
    }
    #pledgstaNavbarCollapse {
        margin-top: 3px;
        border: none;
        background-color: #0a0a0a;
        box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.8);
    } 
/*    #pledgstaNavbarCollapse a {
        transition: all 0.8s linear;
    } 
    #pledgstaNavbarCollapse a:hover {
        background-color: rgba(255, 153, 0, 0.8);
        color: #111;
    } */
    #pledgsta-navbar-collapse-1 {
        margin-top: 3px;
        border: none;
        background-color: #0a0a0a;
        box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.8);
    }
    #navContainer{
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* /////////////////////////////////// */

    #ConstructNavBarTop {
        border: none;
        background-color: transparent;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {

    #navbarHeader {
        margin-top: 5px;
    }
    .navbar {  
        position: fixed;
        height: 50px;
        border: none;
        border-radius: 0;
        z-index: 11000;
    }

    /* //// NavBar //// */
    #NavBarTop { 
        height: 50px;
        border: none;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    /* //// NavBar Shadow //// */
    #NavBarTopShadow {
        position: fixed;
        z-index: 9000;
        top: 0;
        height: 50px;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.8); /* straight-down drop shaddow */
    }
    /* //// NavBar //// */
    #NavBarTopNoshadow {
        height: 50px;
        border: none;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/       
    }
    /* //// NavBar Timed Shadow //// */
    #NavBarShadow {
        position: fixed;
        z-index: 9000;
        top: -50px;
        height: 50px;
        transition: top 0.3s;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.8); /* straight-down drop shaddow */
    }

    #collapseNavbarLarge {
        display: none;
    }
    #navContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
 
    /* /////////////////////////////////// */

    #ConstructNavBarTop {
        border: none;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .sidebarNavtabsA {
        display: none;
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {

    #navbarHeader {
        margin-top: 5px;
    }    
    .navbar {  
        position: fixed;
        height: 50px;
        border: none;
        border-radius: 0;
        z-index: 11000;
    }    
    #NavBarTop {
        height: 50px;
        border: none;
        background-color: #0a0a0a;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.7);
    }
    #NavBarShadow {
        position: fixed;
        z-index: 9000;
        top: -50px;
        height: 50px;
        transition: top 0.3s;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.8);      
    }
    #NavBarTopNoshadow {
        height: 50px;
        border: none;
        background-color: #0a0a0a;      
    }
    #collapseNavbarMed {
        display: none;
    }

    /* /////////////////////////////////// */

    #ConstructNavBarTop {
        display: inline-block;
        border: none;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .sidebarNavtabsA {
        display: none;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #navbarHeader {
        margin-top: 5px;
    }    
    .navbar {  
        position: fixed;
        height: 50px;
        border: none;
        border-radius: 0;
        z-index: 11000;
    }    
    #NavBarTop {
        height: 50px;
        border: none;
        background-color: #111;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.7);
    }
    #NavBarShadow {
        position: fixed;
        z-index: 9000;
        top: -50px;
        height: 50px;
        transition: top 0.3s;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.7);      
    }
    #NavBarTopNoshadow {
        height: 50px;
        border: none;
        background-color: #111;       
    }
    #collapseNavbarMed {
        display: none;
    }

    /* /////////////////////////////////// */

    #ConstructNavBarTop {
        display: inline-block;
        border: none;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .sidebarNavtabsA {
        display: none;
    }
}
@media screen and (min-width: 1200px) {

    #navbarHeader {
        margin-top: 5px;
    }    
    .navbar {  
        position: fixed;
        height: 50px;
        border: none;
        border-radius: 0;
        z-index: 11000;
    }    
    #NavBarTop {
        height: 50px;
        border: none;
        background-color: #111;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.7);
    }
    #NavBarShadow {
        position: fixed;
        z-index: 9000;
        top: -50px;
        height: 50px;
        transition: top 0.3s;
        box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.7);      
    }
    #NavBarTopNoshadow {
        height: 50px;
        border: none;
        background-color: #111;       
    }
    #collapseNavbarMed {
        display: none;
    }

    /* /////////////////////////////////// */

    #ConstructNavBarTop {
        display: inline-block;
        border: none;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .sidebarNavtabsA {
        display: none;
    }
}

/* //////////// END - TOP NAV BAR /////////////// */

/* ============================================== */

/* ///////// START - TOP NAV BUTTONS //////////// */

.navbar-brand {
    padding: 0;
    margin: 0;
    border: none;
}
.LogoStamp {
    height: 32px; 
    width: 32px;
    margin: 7px 0 0 15px; 
    padding: 0;
    border: 2px solid #333; 
    border-radius: 6px;
    transition: all 0.3s linear;
}
.LogoStamp:hover {
    cursor: pointer;
    border: 2px solid #FF9900;
}
.LogoStampLoggedIn {
    height: 40px; 
    width: 40px;
    margin: 9.5px 0 0 70px; 
    padding: 0;
    border: 2px solid #333; 
    border-radius: 8px;
    transition: all 0.3s linear;
}
.LogoStampLoggedIn:hover {
    cursor: pointer;
    border: 2px solid #FF9900;
}
#smallAvatarAjust1 {
    margin-right: 10px;
}
#collapseNavButtSmall {
    background-color: rgba(0, 0, 0, 0); 
    border: none;
}
#avatarLink {
    margin-top: 3px;
}

/* ////// Artist navbar ////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #pledgeLogoSmallAPSID1 {
        margin: 0;
    }
    #pledgeLogoSmallAPSID2 {
        display: none;        
    }    
    #pledgeLogoBigAPSID {
        display: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {

    #pledgeLogoSmallAPSID1 {
        display: none;        
    } 
    #pledgeLogoSmallAPSID2 {
        display: none;        
    }
    #pledgeLogoBigAPSID {
        margin-left: 70px;
    }
}
@media screen and (min-width: 961px) {
    
    #pledgeLogoSmallAPSID1 {
        display: none;        
    } 
    #pledgeLogoSmallAPSID2 {
        display: none;        
    }     
}

@media screen and (min-width: 320px) and (max-width: 960px) {
    
    #pledgeLogoSmall {
        margin: 3px 0 0 0;
    }
    #pledgeLogoBig {
        display: none;
    }
}
@media screen and (min-width: 961px) {       
    
    #pledgeLogoSmall {
        display: none;
    }
}

/* ////// Pledgsta navbar ////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #pledgeLogoSmallP {
        margin: 3px 0 0 0;
    }
    #pledgeLogoBigP {
        display: none;        
    }
}
@media screen and (min-width: 768px) {
    
    #pledgeLogoSmallP {
        display: none;
    }
}

/* ////// Both navbar ////// */

@media screen and (max-width: 767px) {
    
    .pledgstaLogoBeforeSml {
        height: 32px;
        width: auto;        
        /*height: auto;
        width: 94%;*/
        margin: 0;
        padding: 5px 0 0 44px;
    }
    .pledgstaLogoBeforeMed {
        display: none;
    }
    .pledgstaLogoBeforeLge {
        display: none;
    }

    .pledgsta-logo {        
        height: auto;
        width: 94%;
        margin: 0;
        padding: 4px 0 0 44px;
    }
    .pledgstaLogoSignUp {
        padding: 0;
        margin: 0;
        width: 50%;
        height: auto;
    }
    #ConstlogoBeforeLoginSmall {
        margin: 0 0 0 -38px; 
    }
    #ConstlogoBeforeLoginBig  {
        display: none;  
    }    
    #logoBeforeLoginSmall {
        margin: 5px 0 0 -30px; 
    }
    #logoBeforeLoginMed {
        display: none;    
    } 
    #logoBeforeLoginBig {
        display: none;    
    }    
    .loginLogo {
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;     
    }
    #smallAvatarAjust1 {
        margin-right: 5px;
    }

}

@media screen and (min-width: 768px) and (max-width: 800px) {
    
    .pledgstaLogoBeforeSml {
        display: none; 
    }
    .pledgstaLogoBeforeMed { /*border: 1px solid orange;*/
        height: 32px;
        width: auto;
        margin: 10px 0 0 0;
        padding: 0 0 0 10px;
    }    
    .pledgstaLogoBeforeLge {
        display: none; 
    }

    .pledgsta-logo { /*border: 1px solid orange;*/
        height: 32px;
        /*height: auto;*/
        width: auto;        
        margin-top: 10px;
        padding: 0;
    }
    .pledgstaLogoSignUp {
        height: auto;
        width: 90%;
        margin: 0;
        padding: 4px 0 0 44px;
    }
    #ConstlogoBeforeLoginSmall {
        display: none; 
    }
    #ConstlogoBeforeLoginBig  {
        margin: 0;   
    }    
    #logoBeforeLoginSmall {
        display: none;
    }
    #logoBeforeLoginMed {
        margin: 0;
        padding: 0;    
    } 
    #logoBeforeLoginBig { 
        display: none; 
    }
    #smallAvatarAjust1 {
        margin-right: 10px;
    }    
}
@media screen and (min-width: 801px) and (max-width: 960px) {
    
    .pledgstaLogoBeforeSml {
        display: none; 
    }
    .pledgstaLogoBeforeMed { /*border: 1px solid orange;*/
        height: 32px;
        width: auto;
        margin: 10px 0 0 0;
        padding: 0 0 0 10px;
        /*height: auto;
        width: 100%;
        margin: 0;
        padding: 10px 0 0 10px;*/
    }    
    .pledgstaLogoBeforeLge {
        display: none; 
    }

    .pledgsta-logo { /*border: 1px solid orange;*/
        height: 32px;
        /*height: auto;*/
        width: auto;        
        margin-top: 10px;
        padding: 0;
    }
    .pledgstaLogoSignUp {
        height: auto;
        width: 90%;
        margin: 0;
        padding: 4px 0 0 44px;
    }
    #ConstlogoBeforeLoginSmall {
        display: none; 
    }
    #ConstlogoBeforeLoginBig  {
        margin: 0;   
    }    
    #logoBeforeLoginSmall {
        display: none;
    }
    #logoBeforeLoginMed {
        margin: 0;
        padding: 0;    
    } 
    #logoBeforeLoginBig { 
        display: none; 
    }
    #smallAvatarAjust1 {
        margin-right: 10px;
    }    
}
@media screen and (min-width: 961px) {
    
    .pledgstaLogoBeforeSml {
        display: none;
    }
    .pledgstaLogoBeforeMed {
        display: none;
    }
    .pledgstaLogoBeforeLge {
        height: auto;
        width: 94%;
        margin: 0;
        padding: 5px 0 0 5px;
    }

    .pledgsta-logo {
        padding: 6px 0 0 6px;
        margin: 0;
        width: 90%;
        height: auto;
    }
    .pledgstaLogoSignUp {
        padding: 4px 0 0 44px;
        margin: 0;
        width: 90%;
        height: auto;
    }
    #ConstlogoBeforeLoginSmall {
        display: none; 
    }
    #ConstlogoBeforeLoginBig  {
        margin: 0;   
    }    
    #logoBeforeLoginSmall{
        display: none;
    }
    #logoBeforeLoginMed {
        display: none;
    } 
    #logoBeforeLoginBig { 
        margin: 0; 
    }
    #smallAvatarAjust1 {
        margin-right: 10px;
    }    
}

.searchAdmin {
    float: right;
    max-height: 34px;
    width: 100%; 
}
.searchAdmin.form-control {
    width: 100%;
    padding: 0 0 0 10px;
    margin: 8.5px 0 0 0;
    font-size: 12px;
    line-height: 1.428571429;
    color: #FFF;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 8px; 
}
.searchAdmin.form-control:hover, 
.searchAdmin.form-control:focus {
    cursor: text;
}

/* //////////// Small Searchbar ///////////// */

.viewBox {
    margin-top: 0;
    margin-right: 0;
}

/* Small */

#searchboxBLsml {
    display: block;
    resize: none;
    width: 100%;
    color: #FFF;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
    background-color: #111;
    transition: all 0.3s linear;
}
#searchboxBLsml:hover {
    cursor: text;   
}
#search_addonBLsml {
    color: #999;
    font-size: 12px;
    background-color: #111;
    transition: all 0.3s linear;
}

/* Large */

#searchboxBLlge {
    display: block;
    resize: none;
    width: 100%;
    color: #FFF;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
    background-color: #111;
    transition: all 0.3s linear;
}
#searchboxBLlge:hover {
    cursor: text;   
}
#search_addonBLlge {
    color: #999;
    font-size: 12px;
    background-color: #111;
    transition: all 0.3s linear;
}

/* /////////////// Before Login Search bar /////////////// */

/* ////////// Small Searchbar ////////// */

.LogoStampBeforeLogin {
    height: 40px; 
    width: 40px;
    margin: 9.5px 0 0 10px; 
    padding: 0;
    border-radius: 8px;
    border: 2px solid #333; 
    transition: all 0.3s linear;
}
.LogoStampBeforeLogin:hover {
    cursor: pointer;
    border: 2px solid #FF9900;
}

/* ////////// Small Searchbar ////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    /* Small */
    
    .searchInputBL {
        margin: 9px 22% 0 22%; 
        padding: 0; 
    }
    .BLsearch {
        height: 40px;
        width: auto;
        margin: 0;
        padding: 0;
    }
    #BLsearchAddonHolderSml {
        margin-top: 0;
        padding: 0;
    }
    #searchboxBLsml {
        height: 40px;
        width: 100%;
        margin: 0;
        padding: 11px 3px 10px 10px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        border-right: none;
    }    
    #search_addonBLsml {
        height: 40px;
        padding: 1px 6px 0 0;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
    }
    #displayBLS {
        position: relative;
        z-index: 10000;
        width: 100%;
        margin: 3px 0 0 0;
        padding: 0 0 10px 0;
    } 
    #searchtoggleSmallBL {
        margin: 10px 0 15px 0;
        padding: 10px 7px 10px 7px;
    }
    .smallNavLink {
        overflow: hidden;
    }
    #navLinksSmallBL {
        margin: 0;
        padding: 5px 20px 5px 20px;
        overflow: hidden;
    }
    #navLinksSmallBL a {
        margin: 0;
        padding: 14px 10px 14px 14px;
        color: #D0D0D0;
        font-size: 13px;
        border-radius: 12px;
        border: 2px solid #222;
        transition: all 0.3s linear; 
    }
    #navLinksSmallBL a:hover {
        /*border: 2px solid #444; */
        background-color: rgba(255, 153, 0, 0.8);
    }
    #navLinksSmallBLD {
        margin: 0;
        padding: 5px 20px 5px 20px;
        overflow: hidden;        
    }
    #navLinksSmallBLD a {
        margin: 0;
        padding: 14px 10px 14px 14px;
        color: #D0D0D0;
        font-size: 13px;
        border-radius: 12px;
        border: 2px solid #222;
        transition: all 0.1s linear; 
    }
    #navLinksSmallBLD a:hover {
        /*border: 2px solid #444; */
        background-color: rgba(255, 153, 0, 0.2);
    }

    /* Large */

    .BLsearchLge {
        display: none;
    }
    #BLsearchAddonHolderLge {
        display: none;
    }  
    #searchtoggleLargeBL {
        display: none;
    }  
    #searchboxBLlge {
        display: none;
    }
    #search_addonBLlge {
        display: none;
    }
    #displayBLL {
        display: none;
    }
}

/* ////////// Medium Searchbar ////////// */

@media screen and (min-width: 768px) and (max-width: 800px) {
    
    /* Small */
    
    .searchInputBL {
        display: none;
    }
    .BLsearch { 
        display: none;
    }
    #BLsearchAddonHolderSml {
        display: none;
    }
    #searchboxBLsml {
        display: none;
    }    
    #search_addonBLsml {
        display: none;
    }
    #displayBLS {
        display: none;
    }
    #searchtoggleSmallBL {
        display: none;
    }
    
    /* Large */

    #searchtoggleLargeBL {
        display: inline-flex;
        padding: 0 35px 0 0;
        border: none; 
    }
    #searchtoggleLargeBL a {
        margin: 7px 4px 7px 4px;
    } 
    .BLsearchLge {
        height: 32px;
        width: 90%;
        margin: 0;
        padding: 0;
    }
    #BLsearchAddonHolderLge {
        margin-top: 10px;
        padding: 0;
    }
    #searchboxBLlge {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 11px 3px 10px 10px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        border-right: none;
    }
    #search_addonBLlge {
        height: 32px;
        padding: 1px 6px 0 0;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
    }
    #displayBLL {
        width: 100%;
        margin: 3px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
}

/* ////////// Medium Searchbar ////////// */

@media screen and (min-width: 801px) and (max-width: 960px) {
    
    /* Small */
    
    .searchInputBL {
        display: none;
    }
    .BLsearch { 
        display: none;
    }
    #BLsearchAddonHolderSml {
        display: none;
    }
    #searchboxBLsml {
        display: none;
    }    
    #search_addonBLsml {
        display: none;
    }
    #displayBLS {
        display: none;
    }
    #searchtoggleSmallBL {
        display: none;
    }

    /* Large */

    #searchtoggleLargeBL {
        display: inline-flex;
        padding: 0 40px 0 0;
        border: none;
    }
    .BLsearchLge {
        height: 32px;
        width: 95%;
        margin: 0;
        padding: 0;
    }
    #BLsearchAddonHolderLge {
        margin-top: 10px;
        padding: 0;
    }
    #searchboxBLlge {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 11px 3px 10px 10px;
        
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        border-right: none;
    }
    #search_addonBLlge {
        height: 32px;
        padding: 1px 6px 0 0;
        
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
    }
    #displayBLL {
        width: 100%;
        margin: 3px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
}

/* ////////// Large Searchbar ////////// */

@media screen and (min-width: 961px) {  

    /* Small */
    
    .searchInputBL {
        display: none;
    }    
    .BLsearch {
        display: none;
    }    
    #BLsearchAddonHolderSml {
        display: none;
    }
    #searchboxBLsml {
        display: none;
    }    
    #search_addonBLsml {
        display: none;
    }
    #displayBLS {
        display: none;
    }
    #searchtoggleSmallBL {
        display: none;
    }

    /* Large */

    #searchtoggleLargeBL {
        display: inline-flex;
        border: none;

    }
    .BLsearchLge {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #BLsearchAddonHolderLge {
        margin-top: 10px;
        padding: 0;
    }
    #searchboxBLlge {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 11px 3px 10px 10px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        border-right: none;
    }
    #search_addonBLlge {
        height: 32px;
        padding: 1px 6px 0 0;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
    }
    #displayBLL {
        width: 100%;
        margin: 3px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
}

/* /////////////// End - Before-Login Search bar /////////////// */

/* //////////////////// Logged-in Searchbar //////////////////// */

/*.viewBox {
    margin-top: 0;
    margin-right: 0;
}*/

#searchboxSml,
#searchboxMed,
#searchboxLge {
    display: block;
    resize: none;
    width: 100%;
    color: #FFF;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
/*    background-color: #111;*/
    transition: all 0.3s linear;
}
#searchboxSml:hover,
#searchboxMed:hover,
#searchboxLge:hover {
    cursor: text;   
}
#search_addonSml,
#search_addonMed,
#search_addonLge {
    color: #999;
    font-size: 12px;
    background-color: #111;
    transition: all 0.3s linear;
}

/* ////////// Small Searchbar ////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #searchtoggleSmall {
        margin: 1px 10px 0 78px;
    }
    #searchtoggleLarge {
        display: none;
    }
   
    /* /// Searchbar field // */
    
    .FNsearch {
        height: 40px;        
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    #searchAddonHolderSml {
        width: 74%;
        margin-top: 9px;
        padding: 0;
    }
    #searchAddonHolderMed {
        display: none;
    }
    #searchAddonHolderLge {
        display: none;
    }
    #searchboxSml {
        height: 40px;
        width: 100%;
        margin: 0;
        padding: 11px 3px 10px 10px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0d0d0d;
        border-right: none;
    }
    #search_addonSml {
        height: 40px;
        padding: 1px 6px 0 0;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0d0d0d;
        border-left: none;
    }
    #searchboxMed {
        display: none;
    }
    #search_addonMed {
        display: none;
    }
    #searchboxLge {
        display: none;
    }
    #search_addonLge {
        display: none;
    }

    /* /// End - Searchbar field // */

    #avatarToggle {
        top: 10px;
        right: 49px;
        position: fixed;
        z-index: 9999;
    }
    #avatarLoggedIn {
        top: 18px;
        right: 13px;
        position: fixed;
    }
    #displayS {
        width: 74%;
        margin-top: 3px;
        margin-left: 0;
        padding-left: 0;
        border-radius: 8px;
    }
    .display_box {
        width: auto;
        text-align: left;
        color: #fff;
        padding: 6px;
        font-size: 12px;
        text-transform: capitalize;
        border-radius: 6px;
        border: 2px solid #222;
        background-color: rgba(0, 0, 0);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s linear;
    }
    .display_box:hover {
        border: 2px solid #FF9900;
        background-color: #111;    
    }
}

/* ////////// Medium Searchbar ////////// */

@media screen and (min-width: 768px) and (max-width: 960px) {
    
    #searchtoggleSmall {
        display: none;
    }    
    #searchtoggleLarge {
        display: inline-flex;
        border: none; 
    }    

    /* /// Searchbar field // */
    
    .FNsearch {
        height: 32px;        
        width: 100%;
        margin: 0;
        padding: 0;
    }    
    #searchAddonHolderSml {
        display: none;
    }
    #searchAddonHolderMed {
        width: 100%;
        margin-top: 11px;
        padding: 0;
    }   
    #searchAddonHolderLge {
        display: none;
    }      

    #searchboxSml {
        display: none;
    }
    #search_addonSml {
        display: none;
    }
    #searchboxMed {
        height: 32px;
        padding: 11px 3px 10px 6px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0d0d0d;
        border-right: none;
    }    
    #search_addonMed {
        height: 32px;
        padding: 2px 6px 0 4px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0d0d0d;
        border-left: none;
    }
    #searchboxLge {
        display: none;
    }
    #search_addonLge {
        display: none;
    }

    /*#searchAddonHolderLge #searchbox[type=text] {
        width: 100px;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
    }*/
    /* When the input field gets focus, change its width to 100% */
    /*#searchAddonHolderLge #searchbox[type=text]:focus {
        width: 200%;
    }*/

    /* /// end - Searchbar field // */

    #avatarLoggedIn {
        display: none;
    }    
    #displayM {
        width: 100%;
        margin: 3px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
    #displayM:hover {
        border: 2px solid #555;
    }
    .display_box {
        width: auto;
        color: #fff;
        padding: 6px;
        font-size: 12px;
        text-align: left;
        text-transform: capitalize;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: rgba(0, 0, 0, 0);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s linear;
    }
    .display_box:hover {
        border: 2px solid #FF9900;
        background-color: #111;    
    }
}

/* ////////// Large Searchbar ////////// */

@media screen and (min-width: 961px) and (max-width: 1024px)  {  
    
    #searchtoggleSmall {
        display: none;
    }    
    #searchtoggleLarge {
        display: inline-flex;
        border: none; 
    }    

    /* /// Searchbar field // */
    
    .FNsearch {
        height: 32px;        
        width: 100%;
        margin: 0;
        padding: 0;
    }    
    #searchAddonHolderSml {
        display: none;
    }
    #searchAddonHolderMed {
        display: none;
    } 
    #searchAddonHolderLge {
        width: 100%;
        margin-top: 11px;
        padding: 0;
    }
    #searchboxSml {
        display: none;
    }
    #search_addonSml {
        display: none;
    }
    #searchboxMed {
        display: none;
    }
    #search_addonMed {
        display: none;
    }    
    #searchboxLge {
        height: 32px;
        padding: 11px 3px 10px 8px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0d0d0d;
        border-right: none;
    }    
    #search_addonLge {
        height: 32px;
        padding: 2px 6px 0 4px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0d0d0d;
        border-left: none;
    }
    /*#searchAddonHolderLge #searchbox[type=text] {
        width: 155px;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
    }*/
    /* When the input field gets focus, change its width to 100% */
    /*#searchAddonHolderLge #searchbox[type=text]:focus {
        width: 185%;
    }*/

    /* /// end - Searchbar field // */

    #avatarLoggedIn {
        display: none;
    }
    #displayL {
        width: 100%;
        margin: 3px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
    /*#displayL:hover {
        border: 2px solid #555;
    }*/
    .display_box {
        width: auto;
        color: #fff;
        padding: 6px;
        font-size: 12px;
        text-align: left;
        text-transform: capitalize;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: rgba(0, 0, 0, 0);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s linear;
    }
    .display_box:hover {
        border: 2px solid #FF9900;
        background-color: #111;    
    }
}
@media screen and (min-width: 1025px) {  
    
    #searchtoggleSmall {
        display: none;
    }    
    #searchtoggleLarge {
        display: inline-flex;
        border: none; 
    }    

    /* /// Searchbar field // */
    
    .FNsearch {
        height: 32px;        
        width: 100%;
        margin: 0;
        padding: 0;
    }    
    #searchAddonHolderSml {
        display: none;
    }
    #searchAddonHolderMed {
        display: none;
    } 
    #searchAddonHolderLge {
        width: 100%;
        margin-top: 11px;
        padding: 0;
    }
    #searchboxSml {
        display: none;
    }
    #search_addonSml {
        display: none;
    }
    #searchboxMed {
        display: none;
    }
    #search_addonMed {
        display: none;
    }    
    #searchboxLge {
        height: 32px;
        padding: 11px 3px 10px 8px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
        border-right: none;
    }    
    #search_addonLge {
        height: 32px;
        padding: 2px 6px 0 4px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
        border-left: none;
    }
    /*#searchAddonHolderLge #searchbox[type=text] {
        width: 155px;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
    }*/
    /* When the input field gets focus, change its width to 100% */
    /*#searchAddonHolderLge #searchbox[type=text]:focus {
        width: 185%;
    }*/

    /* /// end - Searchbar field // */

    #avatarLoggedIn {
        display: none;
    }
    #displayL {
        width: 100%;
        margin: 3px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
    /*#displayL:hover {
        border: 2px solid #555;
    }*/
    .display_box {
        width: auto;
        color: #fff;
        padding: 6px;
        font-size: 12px;
        text-align: left;
        text-transform: capitalize;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: rgba(0, 0, 0, 0);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s linear;
    }
    .display_box:hover {
        border: 2px solid #FF9900;
        background-color: #111;    
    }
}

.navbar-default .navbar-nav > li > a {
    padding: 8px 12px 10px 12px;
    margin: 8px 0 0 20px;
    color: #FFF;
    font-size: 12px;
    transition: all 0.3s linear;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    cursor: pointer; 
    color: #D0D0D0;
}
.navbar-default .navbar-nav > li > a > form > input:hover,
.navbar-default .navbar-nav > li > a > form > input:focus {
    cursor: text;
}

/* ////////// END - Logged-in Searchbar ////////// */

/* /////////// END - TOP NAV BUTTONS ///////////// */

/* =============================================== */

/* ///////////// SEARCH RESULT PAGE ////////////// */

#noResultContainer {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;    
}

@media screen and (min-width: 320px) and (max-width: 350px) {

    #noResultHolder {
        margin: 50px 18px 450px 18px; 
        padding: 2px 7px 3px 7px; 
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b; 
    }
    .noResultText {
        font-size: 12px;
        /*color: #D0D0D0;*/
        color: #0088FF;
    }
}
@media screen and (min-width: 351px) and (max-width: 412px) {

    #noResultHolder {
        margin: 50px 18px 450px 18px; 
        padding: 2px 7px 3px 7px; 
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b; 
    }
    /*#noResultMoon {
        margin: 0 0 10px 0;
        font-size: 26px;
    }*/
    .noResultText {
        font-size: 13px;
        /*color: #D0D0D0;*/
        color: #0088FF;
    }
}
@media screen and (min-width: 413px) and (max-width: 599px) {

    #noResultHolder {
        margin: 50px 18px 450px 18px; 
        padding: 2px 7px 3px 7px; 
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b; 
    }
    /*#noResultMoon {
        margin: 0 0 10px 0;
        font-size: 26px;
    }*/
    .noResultText {
        font-size: 14px;
        /*color: #D0D0D0;*/
        color: #0088FF;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #noResultHolder {
        margin: 50px 10px 450px 10px; 
        padding: 2px 15px 3px 15px; 
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b; 
    }
    /*#noResultMoon {
        margin: 0 0 10px 0;
        font-size: 26px;
    }*/
    .noResultText {
        font-size: 18px;
        /*color: #D0D0D0;*/
        color: #0088FF;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px)  {

    #noResultHolder {
        width: 60%;
        margin: 180px 0 0 0; 
        padding: 4px 15px 6px 15px; 
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b; 
    }
    /*#noResultMoon {
        margin: 0 0 10px 0;
        font-size: 26px;
    }*/
    .noResultText {
        font-size: 22px;
        /*color: #D0D0D0;*/
        color: #0088FF;
    }
}
@media screen and (min-width: 1025px) {

    #noResultHolder {
        width: 60%;
        margin: 180px 0 0 0; 
        padding: 4px 0 5px 0; 
        text-align: center;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b; 
    }
    /*#noResultMoon {
        margin: 0 0 10px 0;
        font-size: 26px;
    }*/
    .noResultText {
        font-size: 22px;
        /*color: #D0D0D0;*/
        color: #0088FF;
    }
}


@media screen and (min-width: 320px) and (max-width: 767px) {    
    
    #searchMainContainer {
        margin: 0;
        padding: 0;
    }
    #searchResultContainer {
        width: 100%;
        margin: 0;
        padding: 10px 10% 0 10%;
        /*padding-top: 10px;*/
    }
    #searchResultInner {
        margin: 0; 
        padding: 0;
    }
    #sarchTotalContainer {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .searchResultHeading {
        width: 244px;
        margin: 70px 0 0 0;
        padding: 10px 20px 9.5px 20px;
        color: #0088FF;
        /*color: #D0D0D0;
        text-shadow: 2px 2px 2px #111111;*/
        text-align: center;        
        font-size: 14px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }

    /* profileCards */

    #profileCardContainer1to3 {
        width: 100%;
        margin: 20px 0 0 0;
        padding: 0;
        border-radius: 12px;
        border: 1px solid transparent;
    }
    #profileCardContainer4up { 
        margin: 20px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
        border-radius: 12px;
        border: 1px solid transparent;
        background-image: linear-gradient(to right, #0d0d0d, #2a2a2a, #0d0d0d);
    }
    #profileCardContainerInnerSR {
        width: 100%;
        margin: -50px 0 -10px 0;
        padding: 0;
        background: transparent;
    }
    
    /* END - profileCards */

    #artistTableTitleHolder {
        margin: 20px 0 5px 0;
        padding: 0;
    }
    #SearchResultTableHolder {
        margin: 120px 0 0 0;
        padding: 0;        
    }
    .searchArtistBack {
        height: 68px;
        border: 2px solid #000; 
        border-radius: 6px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        transition: all 0.3s linear;
    }
    .searchArtistBack:hover {
        cursor: pointer;
        border: 2px solid #444;
    }
    .searchDetsHolder {
        display: inline-flex;
        border-radius: 6px;
        background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0) 45%);
    }     
    .searchTextHolder {
        margin-top: 0;
    }
    #artistSearchResult {
        height: auto;
        margin: 0;
        padding: 0;
    }      
    #eventSearchResult {
        height: auto;
        margin: 0; 
        padding: 0;
    }    
    #page-nav1 {
        margin: 20px 0 -90px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {   
    
    #searchMainContainer { /* border: 1px solid red; */
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;  
    }       
    #searchResultContainer { /*border: 1px solid aquamarine; */
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0 20% 0 20%;
    }
    #searchResultInner {
        margin: 0; 
        padding: 0;
    }
    #sarchTotalContainer {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .searchResultHeading {
        margin: 80px 0 0 0;
        padding: 10px 20px 9.5px 20px;
        color: #0088FF;
        /*text-shadow: 2px 2px 2px #111111;
        color: #D0D0D0;
        text-shadow: 2px 2px 2px #111111;*/
        font-size: 18px;
        text-align: center;        
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    
    /* Search Result Page */

    #profileCardContainer1to3 { 
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
        border-radius: 12px;
        border: 1px solid transparent;
        /*background-image: linear-gradient(to right, #0d0d0d, #2a2a2a, #0d0d0d);*/
    }
    #profileCardContainer4up { /*border: 1px solid orange;*/
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;         
        border-radius: 12px;
        border: 1px solid transparent;/**/
        background-image: linear-gradient(to right, #0d0d0d, #2a2a2a, #0d0d0d);
    }
    #profileCardContainerInnerSR { /*border: 1px solid red;*/
        width: 100%;
        margin: -30px 0 -10px 0;
        padding: 0;
        background: transparent;
    }

    /* END - Search Result Page */

    #artistTableTitleHolder {
        margin: 0 0 5px 0;
        padding: 0;
    }
    #SearchResultTableHolder {
        margin: 0;
        padding: 0;        
    }
    .searchArtistBack {
        height: 80px;
        border: 2px solid #000; 
        border-radius: 6px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        transition: all 0.4s linear;
    }
    .searchArtistBack:hover {
        cursor: pointer;
    }
    .searchDetsHolder {
        display: inline-flex;
        border-radius: 6px;
        background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 45%);/**/
    }    
    .searchTextHolder {
        margin-top: 5px;
    }
    #artistSearchResult {
        height: auto;
        /*height: 200px;*/
        margin: 0;
        padding: 0;
    }    
    #eventSearchResult {
        height: 265px;
        margin: 0; 
        padding: 0;
    }
    #page-nav1 {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1024px) {    
    
    #searchMainContainer { /*border: 1px solid orange; */
        width: 100%;
        margin: 0;
        padding: 0;        
    }       
    #searchResultContainer { /*border: 1px solid red;  */
        width: 100%;
        margin: 0;
        padding: 0 5% 0 5%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #searchResultInner {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #sarchTotalContainer { /*border: 1px solid orange;  */
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .searchResultHeading {
        margin: 90px 0 25px 0;
        padding: 10px 20px 9.5px 20px;
        color: #0088FF;
        /*text-shadow: 2px 2px 2px #111111;
        color: #D0D0D0;
        text-shadow: 2px 2px 2px #111111;*/
        font-size: 18px;
        text-align: center;        
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }

    /* profileCard */

    #profileCardContainer1to3 {
        width: 100%;
        margin: 0;
        padding: 6px 0 6px 0;
        border-radius: 12px;
    }
    #profileCardContainer4up { /*border: 1px solid red;  */
        width: 100%;
        margin: 15px 0 0 0;
        padding: 6px 0 6px 0;
        border-radius: 12px;
        background-image: radial-gradient(#2a2a2a, #0d0d0d 67%);
    }
    #profileCardContainerInnerSR { /*border: 1px solid red;*/
        width: 100%;
        margin: -30px 0 -10px 0;
        padding: 0;
        background: transparent;
    }

    /* END - profileCard */

    #artistTableTitleHolder {
        margin: 0 0 5px 0;
        padding: 0;
    }
    #SearchResultTableHolder {
        margin: 0;
        padding: 0;        
    }
    .searchArtistBack {
        height: 80px;
        border: 2px solid #000; 
        border-radius: 6px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        transition: all 0.4s linear;
    }
    .searchArtistBack:hover {
        cursor: pointer;
    }
    .searchDetsHolder {
        display: inline-flex;
        border-radius: 6px;
        background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 45%);/**/
    }    
    .searchTextHolder {
        margin-top: 5px;
    }
    #artistSearchResult {
        height: auto;
        /*height: 200px;*/
        margin: 0;
        padding: 0;
    }    
    #eventSearchResult {
        height: 265px;
        margin: 0; 
        padding: 0;
    }
    #page-nav1 {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}
@media screen and (min-width: 1025px) {    
    
    #searchMainContainer {
        width: 100%;
        margin: 0;
        padding: 0;        
    }       
    #searchResultContainer {
        width: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #searchResultInner {
        margin: 0; 
        padding: 0;
    }
    #sarchTotalContainer {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .searchResultHeading {
        margin: 125px 0 25px 0;
        padding: 10px 20px 9.5px 20px;
        color: #0088FF;
        /*text-shadow: 2px 2px 2px #111111;
        color: #D0D0D0;
        text-shadow: 2px 2px 2px #111111;*/
        font-size: 22px;
        text-align: center;        
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }

    /* Search Result Page */

    #profileCardContainer1to3 {
        width: 100%;
        margin: 0;
        padding: 6px 0 6px 0;
        border-radius: 12px;
    }
    #profileCardContainer4up {
        width: 100%;
        margin: 0;
        padding: 6px 0 6px 0;
        border-radius: 12px;
        background-image: radial-gradient(#2a2a2a, #111111 67%);
    }
    #profileCardContainerInnerSR { }

    /* END - Search Result Page */

    #artistTableTitleHolder {
        margin: 0 0 5px 0;
        padding: 0;
    }
    #SearchResultTableHolder {
        margin: 0;
        padding: 0;        
    }
    .searchArtistBack {
        height: 80px;
        border: 2px solid #000; 
        border-radius: 6px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        align-items: center;
        justify-content: center;
        transition: all 0.4s linear;
    }
    .searchArtistBack:hover {
        cursor: pointer;
    }
    .searchDetsHolder {
        display: inline-flex;
        border-radius: 6px;
        background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 45%);/**/
    }    
    .searchTextHolder {
        margin-top: 5px;
    }
    #artistSearchResult {
        height: auto;
        /*height: 200px;*/
        margin: 0;
        padding: 0;
    }    
    #eventSearchResult {
        height: 265px;
        margin: 0; 
        padding: 0;
    }
    #page-nav1 {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

#searchResulColumn {
    padding: 5px;
}
#searchTableFrame {
    width: 100%;
    padding: 10px 0 10px 0;
    border: 2px solid #333;
    border-radius: 6px;
    background-color: #000;    
}
#artistResultHolder1 {
    width: 100%;
    margin: 0;
    padding: 10px 15px 15px 15px; 
    border: 2px solid #333;  
    border-radius: 8px;
    background-color: #000;
}
#artistResultHolder {
    width: 100%;
    margin: 0;
    padding: 10px 10px 15px 10px;
} 
#resultHolder {
    width: 100%;
    margin: 0;
    padding: 10px;
}
#artistTableTitleHolder1 {
    margin: 0 0 5px -6px;
    padding: 0;
}
#tableTitleHolder {
    margin: 0 0 0 -3px;
    padding: 0;
}
#tableTitle {
    margin: 8px;
    float: left;
    color: #ff9900;
    font-size: 20px;
    font-weight: 500;  
}
#columnName {
    font-weight: 600; 
    font-size: 11px;
}
#searchGig {
    margin: 0;
    padding: 0 5px 0 5px;
}
.artistTitle {
    margin: 20px 0 20px ; 
    padding: 0;
    color: #D0D0D0;
    font-size: 28px;
    word-break: break-word;
}
#artistAvatar {
    padding: 10px 0 10px 20px;
}
#artistName {
    padding-left: 10px;
}
#artistGenre {
    padding-top: 20px;
    padding-left: 10px;
}
#artistPledges {
    padding-top: 20px;
    padding-right: 20px; 
    text-align: center; 
}
.searchArtistTotalPledges {
    float: right;  
    margin: -24px 10px 0 0;   
}
.searchArtistPledges {
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
}
#searchAvatar {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 10px 0 0; 
    border: 2px solid #333;
    border-radius: 4px;
}
.searchEventPoster {
    float: left;
    height: 94px;
    width: 75px;
    margin: 1px 14px 0 5px;
    padding: 0;
    border: 2px solid #222;
    border-radius: 6px; 
    object-position: 50% 50%;
    object-fit: cover;
}
#SearchDisplay {
    margin: 0;
    padding: 0;    
}
#searchDisplayCradle {
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    border-radius: 6px;
    background-color: #111;
    overflow-y: scroll;
    overflow-x: hidden;
}
#searchDisplayCradle {
    height: 289px;
    margin: 0; 
    padding: 5px;
    border-right: 2px solid #333;
}
.searchEventData {
    height: 100%;
    margin: 0 0 0 0;
    padding: 7px 0 0 0;    
    border-radius: 6px 0 0 6px;
}


.noResultSign {
    width: 80%;
    font-size: 12px;
    color: red;  
    background-color: #111; 
    border: 2px solid #333; 
}
#page-nav {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.searchGreyline {
    margin-left: 5px;
    margin-right: 5px;
    border-top: 2px solid #333;
}

/* ///////// END - SEARCH RESULT PAGE /////////// */

/* ============================================== */

/* ////////////////  ADMIN PAGES //////////////// */

/* // Admin Dashboard Page // */

#menuContainer {
    margin: 30px 0 0 82px; 
    padding: 0;
}
#menuContainerInner {
    margin: 50px 0 20px 0;
    padding: 10px;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 8px;
}

/* // Marketing Page // */

#AMOutterContianer {
    margin-top: 0;
    padding-bottom: 30px;  
    border: 2px solid #333; 
    border-radius: 8px;
    background-color: #000; 
}
#MarketingHeading {
    padding-top: 9px;
    color: #ff9900; 
    font-size: 14px;
    border: 2px solid #333;
    background-color: #111;
}
#MSearchButt {
    margin: 10px 0 0 0;
    padding: 0;
}
#MAInnerContainer {
    width: 100%; 
    padding: 10px 0 10px 0;
    border: 2px solid #333; 
    border-radius: 8px;
    background-color: #000;  
}
#inputCell {
    padding: 0 5px 0 5px;
}
#SRTData {
    color: #00C9FF;
    padding-top: 18px;
}
#PMOutterContianer {
    margin-top: 80px;
    padding-bottom: 30px;
    border: 2px solid #333;
    border-radius: 8px;
    background-color: #000; 
}
#countContainer {
    width: 20%;
    padding: 10px 0 10px 0;
    border: 2px solid #333; 
    border-radius: 8px; 
    background-color: #000;
}
#totalTitle {
    text-align: center; 
    font-size: 14px;
}
#totalResultsText {
    padding-top: 20px;
    text-align: center; 
    font-size: 14px;
    font-style: italic; 
    font-weight: 600;'
}

/* ////////////// END - ADMIN PAGES ///////////// */

/* ============================================== */

/* ///////// START - BUTTONS & LINKS //////////// */

/* //// ARTIST-SIGN-ON BUTTON //// */

.artist-sign-on {
    width: 195px;   
    height: 30px;
    margin-top: 9px; 
    margin-left: 0;
    margin-right: 0;
    border-radius: 6px;
    border: 2px solid #666; 
    background-color: #FF9900;  
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    color: #000; 
    transition: all 0.3s linear;     
}
.artist-sign-on:hover {
    cursor: pointer;  
    color: #FFF;
    background-color: #111;
    border: 2px solid #333;
}   

/* //// LOG-IN BUTTONS //// */

/*.log-in {
    width: 80px;
    height: 32px;
    margin: 9px 0 0 0;
    padding-top: 0;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;
    color: #FFF;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-font-smoothing: antialiased;
}
.log-in:hover {
    cursor: pointer;
    border: 2px solid #FF9900;
    color: #FF9900;
} 
.log-in2 {
    width: 100%;
    height: 42px;
    margin: 9px 0 0 0;
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #FF9900;
    background-color: #000;
    color: #FF9900;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    text-shadow: 0px 0px 0px #ff9900;
    transition: all 0.3s linear;
}
.log-in2:hover {
    cursor: pointer;
    border: 2px solid #FF9900;
    color: #FF9900;       
    background-color: #111;
}*/

/* ////// SOCIAL LINKS ////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #socialLinksContainer {
        margin-bottom: 0;
        font-size: 2.5em;
        color: #333;
    }
    .socialLinks {
        margin: 0 2px 0 2px;
        color: #333;
        font-size: 30px;
        transition: ease-in-out 1.0s;
    }
    .socialLinks:hover {
        cursor: pointer;
        color: #FF9900;
    }
    .socialLinksFot{
        margin: 0 2px 0 2px;
        color: #666;
        transition: ease-in-out 1.0s;
    }
    .socialLinksFot:hover {
        cursor: pointer;
        color: #FFF;
    }
    #socialLinks {
        -webkit-transition-timing-function: ease-in-out;
    }
}
@media screen and (min-width: 768px) {
    
    #socialLinksContainer {
        margin-bottom: 5px;
        margin-top: -20px;
        font-size: 2.5em;
        color: #333;
    }
    .socialLinks {
        color: #333;
        font-size: 30px;
        transition: ease-in-out 1.0s ;
    }
    .socialLinks:hover {
        cursor: pointer;
        color: #FFF;
    }
    .socialLinksFot{
        margin: 0px 4px 0px 0px;
        color: #666;
        transition: ease-in-out 1.0s ;
    }
    .socialLinksFot:hover {
        cursor: pointer;
        color: #fff;
    }
    #socialLinks {
        -webkit-transition-timing-function: ease-in-out;
    }
}

/* ////// SIDE NAV BUTTONS ////// */

@media screen and (min-width: 320px) and (max-width: 960px) {
    
    /* pledgsta sidebar */

    .pledgeMenuItems {
        height: auto;
        width: 165px;
        margin: 0 0 11px 2px;
        padding: 9px 0 8px 10px;
        color: #D0D0D0;        
        font-size: 12px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #222;
/*        transition: all 0.1s linear;*/
    }
    /*.pledgeMenuItems:hover {
        cursor: pointer;
        background: linear-gradient(145deg, #ff9900, #ff0000, #0d0d0d 70%);
        border: 2px solid transparent;
        background: linear-gradient(#0d0d0d, #0d0d0d) padding-box, 
                    linear-gradient(145deg, #ff9900, #ff0000, #222 50%) border-box;    
    }*/

    /* artist sidebar */

    .homeMenuItems {
        height: auto;
        width: 165px;
        margin: 0 0 11px 27px;
        padding: 9px 0 8px 10px;
        color: #888;
        font-size: 13px;
        text-align: left;
        border-radius: 8px;
        transition: all 0.1s linear;
    }
    .homeMenuItems:hover {
        background-color: rgba(255, 153, 0, 0.8);
        color: #111;
    }
    .homeMenuItemsNoVerify {
        height: auto;
        width: 165px;
        margin: 0 0 11px 27px;
        padding: 9px 0 8px 8px;
        color: #ff0000;
        font-size: 13px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #0d0d0d;
        transition: all 0.3s linear;
    }
    .homeMenuItemsNoVerify:hover {
        cursor: default;      
        border: 2px solid #333;
        background-color: #111;
    }
    .homeMenuItemsNoVerifyEP {
        height: auto;
        width: 165px;
        margin: 0 0 11px 27px;
        padding: 9px 0 8px 8px;
        color: #ff0000;
        font-size: 13px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #0d0d0d;
        transition: all 0.3s linear;
    }
    .homeMenuItemsNoVerifyEP:hover {
        cursor: default;      
        border: 2px solid #333;
        background-color: #111;
    } 
    .cropMenuItems {
        height: auto;
        width: 100%;
        margin: 0 0 11px 27px;
        padding: 9px 0 8px 10px;
        color: #888;
        font-size: 13px;
        text-align: left;
        border-radius: 8px;
        transition: all 0.1s linear;
    }
    .homeMenuItems:hover {
        background-color: rgba(255, 153, 0, 0.8);
        color: #111;
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
    
    #topNavLinks {
        display: none;
    }
    .pledgeMenuItems {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 10px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #222;
    }
    .pledgeMenuItems:hover {
        cursor: pointer;
    }
    .homeMenuItems {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 10px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #0d0d0d;
        transition: all 0.4s linear;
    }
    .homeMenuItems:hover {
        cursor: pointer;
        border: 2px solid #333;
    }
    .homeMenuItemsNoVerify {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 8px;
        color: #ff0000;
        font-size: 12px;
        text-align: left;        
        border-radius: 8px;
        border: 2px solid #0d0d0d;
        transition: all 0.4s linear;
    }
    .homeMenuItemsNoVerify:hover {
        cursor: pointer;      
        border: 2px solid #333;
        background-color: #111;
    }
    .homeMenuItemsNoVerifyEP {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 8px;
        color: #ff0000;
        font-size: 12px;
        text-align: left;        
        border-radius: 8px;
        border: 2px solid #0d0d0d;
        transition: all 0.4s linear;
    }
    .homeMenuItemsNoVerifyEP:hover {
        cursor: default;      
        border: 2px solid #333;
        background-color: #111;
    }       
    .cropMenuItems {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 8px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;        
        border-radius: 8px;
        border: 2px solid #0d0d0d;
        transition: all 0.4s linear;
    }
    .cropMenuItems:hover {
        cursor: pointer;
        border: 2px solid #333;
    }
}
@media screen and (min-width: 1025px) {
    
    #topNavLinks {
        display: none;
    }
    .pledgeMenuItems {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 10px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #333;
    }
    .pledgeMenuItems:hover {
        cursor: pointer;
    }
    .homeMenuItems {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 10px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #111;
        transition: all 0.4s linear;
    }
    .homeMenuItems:hover {
        cursor: pointer;
        border: 2px solid #333;
    }
    .homeMenuItemsNoVerify {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 10px;
        color: #ff0000;
        font-size: 12px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid #333;
        transition: all 0.4s linear;
    }
    .homeMenuItemsNoVerify:hover {
        cursor: pointer;      
        border: 2px solid #333;
    }
    .homeMenuItemsNoVerifyEP {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 9px;
        color: #ff0000;
        font-size: 12px;
        text-align: left;        
        border-radius: 8px;
        border: 2px solid #111;
        transition: all 0.4s linear;
    }
    .homeMenuItemsNoVerifyEP:hover {
        cursor: default;      
        border: 2px solid #333;
    }
    .cropMenuItems {
        height: 38px;
        width: 165px;
        margin: 5px 0 0 0;
        padding: 9px 10px 0 10px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;        
        border-radius: 8px;
        border: 2px solid #111;
        transition: all 0.4s linear;
    }
    .cropMenuItems:hover {
        cursor: pointer;
        border: 2px solid #333;
    }
}


.homeMenuItemsSmall {
    height: 40px;
    width: 100%;
    margin: 14px 0 0 0;
    padding: 9px 0 0 0;
    color: #D0D0D0;
    font-weight: 500;
    font-size: 12px;
    text-align: center;    
    border-radius: 8px;
    border: 2px solid #000;
    transition: all 0.4s linear;
}
.homeMenuItemsSmall:hover {
    cursor: pointer;
    color: #FF9900;
    border: 2px solid #222;
    background-color: #111;
}
.homeMenuItemsG {
    height: 40px;
    width: 100%;
    margin: 14px 0 0 0;
    padding: 9px 0 0 0;
    color: #D0D0D0;
    font-weight: 500;
    font-size: 12px;
    text-align: center;    
    border-radius: 8px;
    border: 2px solid #000;
    transition: all 0.4s linear;
}
.homeMenuItemsG:hover {
    cursor: pointer;
    border: 2px solid #222;
    color: #FF9900;       
    background-color: #111;
}
#homeMenuItemsG {
    height: 50px;
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    color: #D0D0D0;
    font-weight: 500;
    font-size: 16px;
    text-align: center;    
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;
}
.homeMenuItemsA {
    height: 38px;
    width: 165;
    margin: 5px 0 0 26px;
    padding: 8px 0 0 0;
    color: #D0D0D0;
    font-weight: 500;
    font-size: 12px;
    text-align: center;    
    border-radius: 8px;
    border: 2px solid #000;
    transition: all 0.4s linear;
}
.homeMenuItemsA:hover {
    cursor: pointer;
    border: 2px solid #222;
    color: #D0D0D0;       
    background-color: #111;
}
.uploadMore {
    height: 40px;
    margin-top: 11px;
    padding: 8px 5px 5px 5px;
    color: #ff9900;
    border-radius: 8px;
    border: 2px solid #333;
    transition: all 0.4s linear;
}
.uploadMore:hover {
    cursor: pointer;
    border: 2px solid #ff9900;
    background-color: #111;
}
.postMore {
    height: 40px;
    margin: 0 10px 10px 10px;
    padding: 8px 5px 5px 5px;
    color: #ff9900;
    border-radius: 8px;
    border: 2px solid #ff9900;
    background-color: #111;
    transition: all 0.4s linear;
}
.postMore:hover {
    cursor: pointer;
    border: 2px solid #ff9900;
    background-color: #222;
}

/* //// LOG-OUT BUTTON //// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .logOutButton {
        height: 32px;
        margin: 9px 0 0 0;        
        color: #FFF;
        font-size: 10px;
        text-align: center;
        padding: 5px 12px 0 12px;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .logOutButton:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    .logOutButton {
        height: 32px;
        margin: -6px -10px 0 0;
        padding: 4px 12px 0 12px;        
        color: #FFF;
        font-size: 12px;
        text-align: center;        
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .logOutButton:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) {
    
    .logOutButton {
        height: 32px;
        margin: -6px -10px 0 0;
        padding: 4px 12px 0 12px;        
        color: #FFF;
        font-size: 12px;
        text-align: center;        
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .logOutButton:hover {
        cursor: pointer;
        border: 2px solid #555;
    }
}

/* /////////// END - BUTTONS & LINKS ///////////// */

/* =============================================== */

/* /////////// START - DROP DOWN MENU //////////// */

.small-profile-top-right {
    margin-top: 16.5px; 
    float: right;
}
.dropdown-list {
    position: relative;
    margin-right: 10px;
    margin-left: 5px;
    color: #FF9900;
}
.dropdown-toggle:focus {
    outline: 0;
}
.dropdown-list-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    list-style: none;
    margin-top: 30px;
    margin-left: -10px;
    width: 180px;
    background-color: #000;
}
.dropdown-list-menu > li > a {
    display: block;
    padding: 20px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #FF9900;
    white-space: nowrap;
}
.dropdown-list-menu > li > a:hover,
.dropdown-list-menu > li > a:focus {
    text-decoration: none;
    color: #FFF;
    background-color: #FF9900;
}
.open > .dropdown-list-menu {
  display: block;
}

/* //////////// END - DROP DOWN MENU ///////////// */

.logged-in ul {
    float: left;
}
.logged-in li {     
    display: inline-flex;
    padding: 8px 0px  0px  0px;
    margin-left: 40px;
    font-size: 13px;
    font-weight: lighter;
    color: #FFFFFF;
}
.profile-dropdown {
    display: inline-flex;
    margin-top: 9px;
    margin-left: 7px;
    margin-right: 10px;
    padding: 0px;
}

/*//////////// END - BUTTONS & LINKS //////////// */

/* ============================================== */

/* /////////// START - MAIN CONTAINERS ////////// */

.backgroundPicture {
    max-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 320px) and (max-width: 410px) {
    
    .backgroundpicture {
        height: 460px;
        width: 100%;      
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }
    #MainContainer {
        height: auto;
        width: 100%;
        margin: -200px 0 0 0; /* for profile preview */
        padding: 0;
    }
    /*#MainContainer {
        width: 100%;    
        margin: -210px 0 0 0;
        padding: 0;
    }*/
}
@media screen and (min-width: 411px) and (max-width: 599px) {
    
    .backgroundpicture {
        height: 460px;
        width: 100%;      
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }
    #MainContainer {
        height: auto;
        width: 100%;
        margin: -200px 0 0 0; /* for profile preview */
        padding: 0;
    }
    /*#MainContainer {
        width: 100%;    
        margin: -210px 0 0 0;
        padding: 0;
    }*/
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    .backgroundpicture {
        height: 460px;
        width: 100%;    
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }
    #MainContainer {
        height: auto;
        width: 100%;
        margin: -200px 0 0 0; /* for profile preview */
        padding: 0;
    }
    /*#MainContainer {
        width: 100%;    
        margin: -205px 0 0 0;
        padding: 0;
    }*/
}
@media screen and (min-width: 768px) and (max-width: 823px) {

    .backgroundpicture {
        height: 460px;
        width: 100%; 
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }
    /*.backgroundpicture {        
        height: auto;
        max-height: 300px; 
        width: 100%;
        margin-top: 50px;
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }*/

    #MainContainer { /*border: 1px solid red;*/
        height: auto;
        width: 100%;
        margin: -147px 0 0 0; /* for profile preview */
        padding: 0;
    }    
    /*#MainContainer {    
        width: 100%;    
        margin: -145px 0 0 0;
        padding: 0;
    }*/
}
@media screen and (min-width: 824px) and (max-width: 960px) {

    .backgroundpicture {
        height: 460px;
        width: 100%; 
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }
    /*.backgroundpicture {
        height: auto;
        width: 100%;
        margin-top: 0;
        overflow: hidden;        
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }*/
    #MainContainer {
        height: auto;
        width: 100%;
        margin: -85px 0 0 0;/* for profile preview */
        padding: 0;
    }      
    /*#MainContainer {
        width: 100%;    
        margin: 0;
        padding: 0;
    }*/
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    .backgroundpicture {
        height: 460px;
        width: 100%; 
        top: 0;
        bottom: 0;
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }
    #MainContainer {
        height: auto;
        width: 100%;
        margin: -85px 0 0 0; /* for profile preview */
        padding: 0;
    }      
    /*#MainContainer {
        width: 100%;    
        margin: 0;
        padding: 0;
    }*/
}
@media screen and (min-width: 1024px) {

    .backgroundpicture {
        height: 460px;
        width: 100%;
        top: 0;
        bottom: 0;
        overflow: hidden;        
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -10;
    }
    
    #MainContainer {
        height: auto;
        width: 100%;
        margin: -1px 0 0 0; /* for profile preview */
        padding: 0;
    } 
    /*#MainContainer {
        width: 100%;    
        margin: 0;
        padding: 0;
    }*/
}

/* //////////// END - MAIN CONTAINERS /////////// */

/* ============================================== */

/* ///////////// START PROFILE-PAGE ///////////// */

/* ////////// START - AVATAR AND TITLE ////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .avatar-masthead-profile {
        display: inline-flex;
        margin-top: 110px;
        margin-bottom: -15px;
        padding: 0;
        width: auto;
        height: auto;
        text-align: left;
        color: #FFF;
        z-index: 8888 !important;
    }
    .profile-avatar {
        margin: 0 20px 0 20px;
        max-height: 80px;
        max-width: 80px;
        min-width: 80px;   
        border-radius: 8px;
        border: 2px solid #D0D0D0;
    }
    .PledgenameInfo {
        margin-bottom: 0;
        margin-top: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    .avatar-masthead-profile {
        display: inline-flex;
        margin-top: -15px;
        margin-bottom: 80px;
        padding: 0px;
        width: auto;
        text-align: left;
        color: #FFF;
        z-index: 8888 !important;
    }
    .profile-avatar {
        margin: 0 20px 0 75px;
        padding: 0;
        max-height: 145px;
        max-width: 145px;
        min-width: 145px;
        border-radius: 12px;
        border: 2px solid #D0D0D0;
    }
    .PledgenameInfo {
        margin-bottom: 0;
        margin-top: 0;
        padding: 0;
    }
}
@media screen and (min-width: 824px) {
    
    .avatar-masthead-profile {
        display: inline-flex;
        margin: -275px 0 0 0;
        padding: 0;
        width: 100%;
        color: #FFF;
    }
    .profile-avatar {
        margin: 0 20px 0 0;
        max-height: 195px;
        max-width: 195px;
        min-width: 195px;
        border-radius: 12px;
        border: 2px solid #D0D0D0;
    }
    .PledgenameInfo {
        margin: 0 0 25px 0;
        padding: 0;        
        text-align: left;
    }    
    .PledgenameInfo h4 {
        margin: 0;
        padding: 0;        
        text-align: left;
        font-size: calc(24px + 0.3vmax);
    } 
}
.name-info h3 {
    color: #FFF;
    margin-top: 2px;
    text-align: left; 
    padding-left: 12px;
    font-weight: normal;
    font-style: italic;
    font-size: 34px;
    font-size: 2.2vmax;
}

/* /////////// END - AVATAR AND TITLE /////////// */

/* ============================================== */

/* /////////// START - ARTIST NAV BAR /////////// */

/* /////// START - (SMALL) ARTIST NAV BAR /////// */

/* //////////// Nav Tab Buttons Small /////////// */

#navTabsSmallOverflow {
    margin: 0; 
    padding: 0; 
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    
    #navTabsSmallOverflow {
        position: relative;
        z-index: 5;
    }
}

.smallpanel {
    content: "";
    position: absolute;
    width: 100%;
    margin-top: 52px;    
    curser: pointer;
    background-color: transparent;
    z-index: 1;
}
.smallpanelInner {
    width: 64px;
    border-bottom: 2px solid #ff9900;
    background-color: transparent;
}

@media screen and (max-width: 767px) {

    #navTabsSmallContainer {
        width: 100%;
        margin: 0;
        padding: 0 18px 0 18px;
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;        
        background-color: #0d0d0d;
    }    
    #navTabsSmall {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    #navTabsSmall ul {
        padding: 10px 0 12px 0;
        display: flex;
        justify-content: space-between;
    }
    #navTabsSmall li { 
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
}
@media screen and (min-width: 768px) {
    
    #navTabsSmallContainer {
        display: none;
    }
}

/* //// ripple effects //// */

.startedripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 153, 0, 0.2);
    transform: scale(0);
    position: absolute;
    opacity: 1;
}
.startedrippleEffect {
    animation: startedrippleDrop .7s linear;
}
@keyframes startedrippleDrop {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* stripe butt ripple */

.stripeButtRipple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 153, 0, 0.2);
    transform: scale(0);
    position: absolute;
    opacity: 1;
}
.stripeButtRippleEffect {
    animation: stripeButtRippleDrop .7s linear;
}
@keyframes stripeButtRippleDrop {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.navripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 153, 0, 0.2);
    transform: scale(0);
    position: absolute;
    opacity: 1;
}
.nrippleEffect {
    animation: navrippleDrop .5s linear;
}
@keyframes navrippleDrop {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 153, 0, 0.1);
    transform: scale(0);
    position: absolute;
    opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
}
@keyframes rippleDrop {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* //////// End - Nav Tab Buttons Small ////////  */

@media screen and (min-width: 320px) and (max-width: 767px) {
       
    .artist-nav-bar-profile-large {
        display: none;
    }
    .artist-nav-bar-profile-small {
        position: fixed;        
        height: auto;
        width: 100%;
        bottom: -1px;
        text-align: center;
        z-index: 9000!important;
    }
    #buttonContainerSmall {
        margin: 0;
        padding: 18px 17px 22px 17px;
        background-color: #0d0d0d;
    }
    .pledgeButt {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;        
        margin: 0;
        padding: 14px 0 14px 0;        
        color: #999;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        border-radius: 14px;
        border: 2px solid rgba(255, 0, 0, 0.8);
        background-color: rgba(255, 0, 0, 0.1);
        transition: all 0.9s ease-in;
        z-index: 9000!important;
    }
    .pledgeButt:hover {
        background-color: rgba(255, 0, 0, 0.3);
        cursor: pointer;    
    }
    .accountSuspendButt {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 44px;
        width: 100%;        
        margin: 0;
        padding: 8px 0 10px 0;        
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        border: none;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: ease-in-out 400ms;
        z-index: 9000!important;
    }
    .accountSuspendButt:hover {
        cursor: pointer;
        background-color: #111;    
    }
    #pledgeSign {
        margin: 1px 0 10px 0;
        padding: 10px 0 10px 0;
        color: #D0D0D0;
        font-size: calc(11px + 0.3vw);
        text-align: center; 
        border: 2px solid #333;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.3);
    } 
    .artist-nav-buttons {
        padding: 0;
        margin: 0;
    }
    .artist-nav-buttons ul {
        margin: 0;
        padding: 0;
    }
    .artist-nav-buttons li {
        width: 100%;
        font-size: calc(11px + 0.3vw);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; 
    }
    #artistIndex {
        position: relative;
        margin: 48px 0 40px 0;        
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }
}

/* //====// END - (SMALL) ARTIST NAV BAR //====// */

/* ============================================== */

/* //===// START - (LARGE) ARTIST NAV BAR //===// */

@media screen and (min-width: 768px) and (max-width: 823px) {

    .navTabsSmall {
        display: none;        
    }
    .artist-nav-bar-profile-small {
        display: none;
    }
    .artist-nav-bar-profile-large {
        position: absolute;
        height: 65px;
        width: 100%;
        margin: -35px 0 0 0;
        padding: 0;
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 8000;
    }
    #buttonContainerLarge {
        padding: 0; 
    }
    #artistIndex {
        position: relative;
        margin: 42px 0 44px 0;
        padding: 0;       
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }
    .pledgeButt {
        float: left;
        width: 100%;
        margin: 11px 0 5px 5px;
        padding: 7px 0 7px 0;
        color: #D0D0D0;     
        font-size: 14px;
        text-align: center;
        border: 2px solid red;
        border-radius: 8px;
        background-color: rgba(255, 0, 0, 0.1);
        transition: all 0.9s ease-in;
    }
    .pledgeButt:hover {
        background-color: rgba(255, 0, 0, 0.3);
        cursor: pointer;    
    }
    .accountSuspendButt {
        float: left;
        height: 40px;
        width: 100%;    
        margin: 11px 0 5px 5px;
        padding: 6px 0 7px 0;        
        color: #ff0000;
        font-size: 9.5px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: ease-in-out 400ms;
    }
    .accountSuspendButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
    #pledgeSign {        
        margin: 14px 0 0 0; 
        padding: 10px 0 10px 0;
        color: #D0D0D0;
        font-size: 11px;
        text-align: center;
        border: 2px solid #333;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .artist-nav-buttons {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .artist-nav-buttons ul {
        margin: 0;
        padding: 0;
    }
    .artist-nav-buttons li {
        width: 100%;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; 
    }
    #artistNavButtonsPreview{
        margin-top: 15px
    }    
    #artistNavButtonsInner {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 824px) and (max-width: 960px) {

    .navTabsSmall {
        display: none;        
    }
    .artist-nav-bar-profile-small {
        display: none;
    }
    .artist-nav-bar-profile-large {
        position: absolute;
        height: 65px;
        width: 100%;
        margin: -65px 0 0 0;
        padding: 0;
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 8000 !important;
    }
    #buttonContainerLarge {
        width: 100%;
        padding: 0; 
    }
    #artistIndex {
        position: relative;
        margin: 42px 0 44px 0;
        padding: 0;       
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }
    .pledgeButt {
        float: left;
        width: 100%;
        margin: 11.5px 10px 5px 28px;
        padding: 9px 0 9px 0;
        color: #D0D0D0;        
        font-size: 14px;
        text-align: center;
        border: 2px solid red;
        border-radius: 12px;
        background-color: rgba(255, 0, 0, 0.1);
        transition: all 0.9s ease-in;
    }
    .pledgeButt:hover {
        background-color: rgba(255, 0, 0, 0.3);
        cursor: pointer;    
    }
    .accountSuspendButt {
        float: left;
        height: 40px;
        width: 100%;
        margin: 11px 10px 5px 28px;
        padding: 9px 0 9px 0;        
        color: #ff0000;
        font-size: 10px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: ease-in-out 400ms;
        z-index: 9000!important;
    }
    .accountSuspendButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
    #pledgeSign {        
        margin: 12px 0 0 0; 
        padding: 10px 0 10px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border: 2px solid #333;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .artist-nav-buttons {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .artist-nav-buttons ul {
        margin: 0;
        padding: 0;
    }
    .artist-nav-buttons li {
        width: 100%;
        font-size: calc(11px + 0.3vw);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; 
    }
    #artistNavButtonsPreview {
        margin-top: 0
    }
    #artistNavButtonsInner {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {

    .navTabsSmall {
        display: none;        
    }
    .artist-nav-bar-profile-small {
        display: none;
    }
    .artist-nav-bar-profile-large {
        position: absolute;
        height: 65px;
        width: 100%;
        margin: -65px 0 0 0;
        padding: 0;
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 8000 !important;
    }
    #buttonContainerLarge {
        width: 100%;
        padding: 0; 
    }
    #artistIndex {
        position: relative;
        margin: 42px 0 44px 0;
        padding: 0;       
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }
    .pledgeButt {
        float: left;
        width: 100%;
        margin: 11.5px 10px 5px 28px;
        padding: 9px 0 9px 0;
        color: #D0D0D0;        
        font-size: 14px;
        text-align: center;
        border: 2px solid red;
        border-radius: 12px;
        background-color: rgba(255, 0, 0, 0.1);
        transition: all 0.9s ease-in;
    }
    .pledgeButt:hover {
        background-color: rgba(255, 0, 0, 0.3);
        cursor: pointer;    
    }
    .accountSuspendButt {
        float: left;
        height: 40px;
        width: 100%;
        margin: 12px 10px 5px 28px;
        padding: 11px 0 10px 0;        
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: ease-in-out 400ms;
        z-index: 9000!important;
    }
    .accountSuspendButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
    #pledgeSign {        
        margin: 12px 0 0 0; 
        padding: 10px 0 10px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border: 2px solid #333;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .artist-nav-buttons {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .artist-nav-buttons ul {
        margin: 0;
        padding: 0;
    }
    .artist-nav-buttons li {
        width: 100%;
        font-size: calc(11px + 0.3vw);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; 
    }
    #artistNavButtonsPreview {
        margin-top: 0
    }
    #artistNavButtonsInner {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1180px) {
    
    #artistIndex {
        position: relative;
        margin: 42px 0 44px 0;
        padding: 0;       
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }
    .navTabsSmall {
        display: none;        
    }
    .artist-nav-bar-profile-small {
        display: none;
    }
    .artist-nav-bar-profile-large {
        position: absolute;
        height: 65px;
        width: 100%;
        margin: -65px 0 0 0;
        padding: 0;
        border-bottom: 2px solid #333;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 8000 !important;
    }
    #buttonContainerLarge {
        padding: 0;
    }
    #artistIndex {
        position: relative;
        margin: 42px 0 44px 0;
        padding: 0;       
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }    
    .pledgeButt {
        float: left;
        width: 100%;
        margin: 11.5px 10px 5px 0;
        padding: 7.5px 0 7px 0;
        color: #D0D0D0;        
        font-size: 16px;
        text-align: center;
        border: 2px solid red;
        border-radius: 12px;
        background-color: rgba(255, 0, 0, 0.1);
        transition: all 0.9s ease-in;
    }
    .pledgeButt:hover {
        background-color: rgba(255, 0, 0, 0.3);
        cursor: pointer;    
    }
    .accountSuspendButt {
        float: left;
        height: 40px;
        width: 100%;
        margin: 11px 10px 5px 0;
        padding: 8px 0 9px 0;
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #000;
        transition: ease-in-out 400ms;
        z-index: 9000!important;
    }
    .accountSuspendButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #111;
    }
    #pledgeSign {        
        margin: 12px 0 0 0; 
        padding: 10px 0 10px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border: 2px solid #333;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .artist-nav-buttons {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .artist-nav-buttons ul {
        margin: 0;
        padding: 0;
    }
    .artist-nav-buttons li {
        width: 100%;
        font-size: calc(11px + 0.3vw);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; 
    }
    #artistNavButtonsInner {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1181px) {
    
    #artistIndex {
        position: relative;
        margin: 42px 0 44px 0;
        padding: 0;       
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }
    .navTabsSmall {
        display: none;        
    }
    .artist-nav-bar-profile-small {
        display: none;
    }
    .artist-nav-bar-profile-large {
        position: absolute;
        height: 65px;
        width: 100%;
        margin: -65px 0 0 0;
        padding: 0;
        border-bottom: 2px solid #333;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 8000 !important;
    }
    #buttonContainerLarge {
        padding: 0;
    }
    #artistIndex {
        position: relative;
        margin: 42px 0 44px 0;
        padding: 0;       
        font-size: 18px;
        color: #D0D0D0;
        z-index: 6 !important;
    }    
    .pledgeButt {
        float: left;
        width: 100%;
        margin: 9px 10px 5px 0;
        padding: 7.75px 0 7.75px 0;
        color: #D0D0D0;        
        font-size: 16px;
        text-align: center;
        border: 2px solid #ff0000;
        border-radius: 12px;
        background-color: rgba(255, 0, 0, 0.1);
        transition: all 0.9s ease-in;
    }
    .pledgeButt:hover {
        background-color: rgba(255, 0, 0, 0.3);
        cursor: pointer;    
    }
    .accountSuspendButt {
        float: left;
        height: 40px;
        width: 100%;
        margin: 11px 10px 5px 0;
        padding: 8px 0 9px 0;
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #000;
        transition: ease-in-out 400ms;
        z-index: 9000!important;
    }
    .accountSuspendButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #111;
    }
    #pledgeSign {        
        margin: 12px 0 0 0; 
        padding: 10px 0 10px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border-radius: 12px;
        box-sizing: border-box;
        border: 2px solid transparent;
        background: linear-gradient(#0d0d0d, #0d0d0d) padding-box,
        linear-gradient( 145deg, #ff9900, #ff0000, #333333 50%) border-box;
        /*border: 2px solid #333;
        background-color: rgba(0, 0, 0, 0.3);*/
    }
    .artist-nav-buttons {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .artist-nav-buttons ul {
        margin: 0;
        padding: 0;
    }
    .artist-nav-buttons li {
        width: 100%;
        font-size: calc(11px + 0.3vw);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; 
    }
    #artistNavButtonsInner {
        margin: 0; 
        padding: 0;
    }
}

/* ////////////// NavTabs ////////////// */

#pledgeDetailCell { /*border: 1px solid red;*/
    margin: 0; 
    padding: 0;
}

.panel {
    content: "";
    position: absolute;
    width: 100%;
    curser: pointer;
    background-color: transparent;
    z-index: -1;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
          
    .panel {
        display: none;
    }    
}
@media screen and (min-width: 768px) and (max-width: 822px) {
           
    .panel {
        margin-top: 50px;
    }      
}
@media screen and (min-width: 823px) and (max-width: 1023px) {
       
    .panel {
        margin-top: 50px;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1025px) {
       
    .panel {
        margin-top: 50px;
    } 
}
@media screen and (min-width: 1026px) and (max-width: 1180px) {
   
    .panel {
        margin-top: 51px;
    } 
}
@media screen and (min-width: 1181px) {
      
    .panel {
        margin-top: 51.5px;
    } 
}

.panelInner {
    width: 78px;
    border-bottom: 2px solid #ff9900;
    background-color: transparent;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #midNavTabs {
        margin-left: 0;
    }
    #pledgeColumnB {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {

    #midNavTabsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex;
    }

    /*  ////// General Tabs ////// */    
    
    #buttonColumn {
        width: 350px;
        margin: 0;
        padding: 0 5.5% 0 0;
    }
    #pledgeColumnB {
        display: none;
    }
    #midNavTabsContainerInner {
        width: 100%;
        margin: 0 15px 0 0;
        padding: 0;
    }
    #midNavTabs {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between; 
    } 

    /* ////// Own Profile Tabs ////// */
    
    #midNavTabsOwn {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between;/**/
    }
}
@media screen and (min-width: 824px) and (max-width: 960px) {
    
    #midNavTabsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex;
    }

    /*  ////// General Tabs ////// */    
    
    #buttonColumn {
        width: 400px;
        margin: 0;
        padding: 0 6.5% 0 0;
    }
    #pledgeColumnB {
        display: none;
    }
    #midNavTabsContainerInner {
        width: 100%;
        margin: 0 30px 0 0;
        padding: 0;
    }
    #midNavTabs {
        padding: 12px 0 0 0;
        display: flex;
        justify-content: space-between; 
    } 

    /* ////// Own Profile Tabs ////// */
    
    #midNavTabsOwn {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between;
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {
    
    #midNavTabsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex;
    }

    /*  ////// General Tabs ////// */    
    
    #buttonColumn {
        width: 400px;
        margin: 0;
        padding: 0 6.5% 0 0;
    }
    #pledgeColumnB {
        display: none;
    }
    #midNavTabsContainerInner {
        width: 100%;
        margin: 0 30px 0 0;
        padding: 0;
    }
    #midNavTabs {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between; 
    } 

    /* ////// Own Profile Tabs ////// */
    
    #midNavTabsOwn {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1025px) {
    
    #midNavTabsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex;/**/;
    }

    /*  ////// General Tabs ////// */    
    
    #buttonColumn {
        width: 427px;
        margin: 0;
        padding: 0 6.5% 0 0;
    }
    #pledgeColumnB {
        display: none;
    }
    #midNavTabsContainerInner {
        width: 100%;
        margin: 0 30px 0 0;
        padding: 0;
    }
    #midNavTabs {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between; 
    } 

    /* ////// Own Profile Tabs ////// */
    
    #midNavTabsOwn {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between;/**/
    }
}
@media screen and (min-width: 1026px) and (max-width: 1180px) {
    
    #midNavTabsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex;
    }

    /*  ////// General Tabs ////// */    
    
    #buttonColumn {
        width: 417px;
        margin: 0;
        padding: 0 6.5% 0 0;
    }
    #pledgeColumnB {
        display: none;
    }
    #midNavTabsContainerInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #midNavTabs {
        padding: 13px 0 0 0;
        display: flex;
        justify-content: space-between; 
    } 

    /* ////// Own Profile Tabs ////// */
    
    #midNavTabsOwn {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between;/**/
    }
}
@media screen and (min-width: 1181px) {
    
    #midNavTabsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex;
    }

    /*  ////// General Tabs ////// */    
    
    #buttonColumn { /*border: 1px solid orange;*/
        width: 510px;
        margin: 0;
        padding: 2px 80px 0 0;
    }
    #pledgeColumnB {
        display: none;
    }
    #midNavTabsContainerInner { /*border: 1px solid blueviolet;*/
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #midNavTabs {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between; 
    } 

    /* ////// Own Profile Tabs ////// */
    
    #midNavTabsOwn {
        padding: 11px 0 0 0;
        display: flex;
        justify-content: space-between;
    }
}



/* //////// END - (LARGE) ARTIST NAV BAR //////// */

/* //////////// END - ARTIST NAV BAR //////////// */

/* ============================================== */

/* ////////////// START - PANEL BODY //////////// */

/* /// Panel Container /// */

@media screen and (max-width: 767px) {
   
    #profilePanelContainer {
        margin-top: -10px;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #profilePanelContainer {
        margin-top: 30px;
        padding: 0;
    }
}
@media screen and (min-width: 824px) and (max-width: 959px) {
    
    #profilePanelContainer {
        margin-top: 1px;
        padding: 0;
    }    
}
@media screen and (min-width: 960px) and (max-width: 1023px) {
    
    #profilePanelContainer {
        margin-top: 1px;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #profilePanelContainer {
        position: relative;
        z-index: 0;        
        margin-top: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1370px) {
    
    #profilePanelContainer {
        position: relative;
        z-index: 0;
        width: 90%;
        margin-top: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1371px) {

    #profilePanelContainer {
        margin-top: 0;
        padding: 0;
    }
}

/* /// End Panel Container /// */

/* /// Panel Body /// */

/* /// Small Screens /// */

@media screen and (min-width: 320px) and (max-width: 376px) {
    
    .panelBody {
        width: 100%;
        margin: 0;
        padding-left: 3px;
        padding-right: 3px;
    }
}
@media screen and (min-width: 377px) and (max-width: 410px) {
    
    .panelBody {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;        
    }
}
@media screen and (min-width: 411px) and (max-width: 534px) {
    
    .panelBody {
        width: 100%;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
/*        padding-left: 9%;
        padding-right: 9%;
*/    }
}
@media screen and (min-width: 535px) and (max-width: 599px) {
    
    .panelBody {
        width: 100%;
        margin: 0;
        padding-left: 15%;
        padding-right: 15%;
    }
}
@media screen and (min-width: 600px) and (max-width: 666px) {
    
    .panelBody {
        min-width: 100%;
        margin: 0;
        padding: 0 10% 0 10%;       
    }
}
@media screen and (min-width: 667px) and (max-width: 767px) {
    
    .panelBody {
        min-width: 100%;
        margin: 0;
        padding: 0 10% 0 10%;       
    }
}

/* /// Large Screens /// */

@media screen and (min-width: 768px) and (max-width: 811px) {
    
    .panelBody { 
        min-width: 100%;
        margin: 0;
        padding: 0 20% 0 20%;    
    }
}
@media screen and (min-width: 812px) and (max-width: 823px) {
    
    .panelBody {
        min-width: 100%;
        margin: 0;
        padding: 0 20% 0 20%;  
    }
}

@media screen and (min-width: 824px) and (max-width: 959px) {
    
    .panelBody {
        min-width: 100%;
        margin: 0;
        padding: 0 20% 0 20%;
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {
    
    .panelBody {
        min-width: 100%;
        margin: 0;
        padding: 0 12% 0 12%;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .panelBody {
        display: inline;
        min-width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1370px) {
    
    .panelBody {
        min-width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
    }
}

@media screen and (min-width: 1371px) {
    
    .panelBody {
        display: inline;
        min-width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* /// PledgeNumColumn /// */

/* /// Small Screens /// */

@media screen and (min-width: 320px) and (max-width: 599px) {

    #pledgeNumColumn {
        margin: 25px 0 0 0;
        padding: 0; 
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #pledgeNumColumn {
        margin: 25px 0 0 0;
        padding: 0; 
    }
}

/* /// Large Screens /// */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    #pledgeNumColumn {
        margin: 14px 0 0 0;
        padding: 0; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledgeNumColumn {
        min-width: 200px;
        margin: 0;
        padding: 0;
        background: transparent;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1181px) {

    #pledgeNumColumn {
        margin: 0;
        padding: 0; 
        background: transparent;
    }
}
@media screen and (min-width: 1182px) and (max-width: 1370px) {

    #pledgeNumColumn {
        margin: 0;
        padding: 0; 
        background: transparent;
    }
}
@media screen and (min-width: 1371px) {

    #pledgeNumColumn {
        min-width: 270px;
        margin: 0;
        padding: 0; 

    }
}

@media screen and (min-width: 320px) and (max-width: 823px) {
    
    #pubProfilesContainerLarge {
        margin: -20px 0 0 0;
        padding: 0;
        
    }    
    #pubProfilesContainerSmall {
        margin-top: -20px;
        padding: 0;
    }
}
@media screen and (min-width: 824px)  {
    
    #pubProfilesContainerLarge {
        margin: 0;
        padding: 0;
    }    
    #pubProfilesContainerSmall {
        margin-top: 0;
        padding: 0;
    }
}

/* ////// LEFT COLUMN ////// */

#pledgeNumColumnInner {
    margin: 10px 0 0 0;
    padding: 15px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #pledgeOptionContainer {
        display: none;
    }
    #pledgeNumColumnInner {
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .pledgenum {
       margin: 0;
       padding: 0;
    }
    .totalPledgeContainer {
        display: inline-flex;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 7px 12px 9px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .perMonthContainer {
        display: inline-flex;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 7px 12px 9px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .campaignContainerGoal {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #222;   
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .campaignTitle {
        margin: 0 0 7px 0;
        font-size: 16px; 
    }
    .campaignTextbox {
        color: #D0D0D0;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify;
    }
    .campaignContainerPercent {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .goalreadout {
        margin: 2px 0 10px 1px;
        font-size: 16px; 
    }
    .outer {
        overflow: hidden;
        height: 26px; 
        width: auto;
        margin: 0 0 4px 0; 
        border: 2px solid #222; 
        border-radius: 8px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .inner {
        height: 22px;
        border-radius: 4px;
        background-color: #FF9900;
        margin-left: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #pledgeOptionContainer {
        margin: 0; 
        padding: 0 40px 0 40px;
    }
    #pledgeNumColumnInner {
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .pledgenum {
        margin: -20px 0 10px 0;
        padding: 20px 0 0 0;
    }
    .totalPledgeContainer {
        display: inline-flex;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .perMonthContainer {
        display: inline-flex;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .campaignContainerGoal {
        margin: 0 0 10px 0;
        padding: 10px 7px 7px 10px;
        border-radius: 12px;
        border: 2px solid #222;   
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .campaignTitle {
        margin: 0 0 7px 0;
        font-size: 16px;
    }
    .campaignTextbox {
        color: #D0D0D0;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify;
    }
    .campaignContainerPercent {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .goalreadout {
        margin: 2px 0 10px 1px;
        font-size: 14px; 
    }
    .outer {
        overflow: hidden;
        height: 26px; 
        width: auto;
        margin: 0 0 4px 0; 
        border: 2px solid #222; 
        border-radius: 8px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .inner {
        height: 22px;
        border-radius: 4px;
        background-color: #FF9900;
        margin-left: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #pledgeOptionContainer {
        margin: 0; 
        padding: 0;
    }
    #pledgeNumColumnInner {
        border-radius: 16px;
        border: 2px solid #222;
        background: transparent;
    }   
   .pledgenum {
        margin: 0;
        padding: 0;
        background: transparent;
    }
    .totalPledgeContainer {
        display: inline-flex;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .perMonthContainer {
        display: inline-flex;/**/
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .campaignContainerGoal {
        margin: 0 0 10px 0;
        padding: 10px 12px 7px 10px;
        border-radius: 12px;
        border: 2px solid #222;   
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .campaignTitle {
        margin: 0 0 7px 0;
        font-size: 16px;
    }
    .campaignTextbox {
        color: #D0D0D0;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify;
    }
    .campaignContainerPercent {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .goalreadout {
        margin: 2px 0 10px 1px;
        font-size: 14px; 
    }
    .outer {
        overflow: hidden;
        height: 26px; 
        width: auto;
        margin: 0 0 4px 0; 
        border: 2px solid #222; 
        border-radius: 8px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .inner {
        height: 22px;
        border-radius: 4px;
        background-color: #FF9900;
        margin-left: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1370px) {
    
    #pledgeOptionContainer {
        margin: 0; 
        padding: 0;
    }
    #pledgeNumColumnInner {
        border-radius: 16px;
        border: 2px solid #333;
        background: transparent;
    }   
   .pledgenum {
        margin: 0;
        padding: 0;
        background: transparent;
    }
    .totalPledgeContainer {
        display: inline-flex;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #333; 
        background-color: #111;
    }
    .perMonthContainer {
        display: inline-flex;/**/
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #333;  
        background-color: #111;
    }
    .campaignContainerGoal {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #333;   
        background-color: #111;
    }
    .campaignTitle {
        margin: 0 0 7px 0;
        font-size: 16px;
    }
    .campaignTextbox {
        color: #D0D0D0;
        line-height: 1.4;
    }
    .campaignContainerPercent {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #333; 
        background-color: #111;
    }
    .goalreadout {
        margin: 2px 0 10px 1px;
        font-size: 16px; 
    }
    .outer {
        overflow: hidden;
        height: 20px; 
        width: auto;
        margin: 0 0 4px 0;
        border-radius: 8px; 
        border: 2px solid #333; 
        background-color: #111;
    }
    .inner {
        height: 16px; 
        border-radius: 4px;
        background-color: #FF9900;
        margin-left: 0;
    }
}
@media screen and (min-width: 1371px) {
    
    #pledgeOptionContainer {
        margin: 0; 
        padding: 0;
    }
    #pledgeNumColumnInner {
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }   
   .pledgenum {
        margin: 0;
        padding: 0;
    }
    .totalPledgeContainer {
        display: inline-flex;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #333; 
        background-color: #111;
    }
    .perMonthContainer {
        display: inline-flex;/**/
        width: 100%;
        margin: 0 0 10px 0;
        padding: 7px 7px 7px 9px;
        border-radius: 12px;
        border: 2px solid #333;  
        background-color: #111;
    }
    .campaignContainerGoal {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #333;   
        background-color: #111;
    }
    .campaignTitle {
        margin: 0 0 7px 0;
        font-size: 16px;
    }
    .campaignTextbox {
        color: #D0D0D0;
        line-height: 1.4;
    }
    .campaignContainerPercent {
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 12px;
        border: 2px solid #333; 
        background-color: #111;
    }
    .goalreadout {
        margin: 2px 0 10px 1px;
        font-size: 16px; 
    }
    .outer {
        overflow: hidden;
        height: 20px; 
        width: auto;
        margin: 0 0 4px 0;
        border-radius: 8px; 
        border: 2px solid #333; 
        background-color: #111;
    }
    .inner {
        height: 16px; 
        border-radius: 4px;
        background-color: #FF9900;
        margin-left: 0;
    }
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .pledgenumNum { /* number */
        margin: 0 5px 0 0;
        padding: 0;
        font-size: 21.5px;
        font-style: normal;  
    }
    .pledgenumText { /* pledges */
        margin: 0;
        padding: 4.75px 0 3px 0;
        color: #D0D0D0;
        font-size: 16px;
        text-align: left;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .pledgenumNum { /* number */
        margin: 0 5px 0 0;
        padding: 3px 0 0 0;
        font-size: 20px;
        font-style: normal;  
    }
    .pledgenumText { /* pledges */
        margin: 0;
        padding: 4.75px 0 3px 0;
        color: #D0D0D0;
        font-size: 16px;
        text-align: left;
    }    
}
@media screen and (min-width: 1025px) {

    .pledgenumNum { /* number */
        margin: 0 5px 0 0;
        padding: 0;
        font-size: 21.5px;
        font-style: normal;  
    }
    .pledgenumText { /* pledges */
        margin: 0;
        padding: 4.75px 0 3px 0;
        color: #D0D0D0;
        font-size: 16px;
        text-align: left;
    }
}








/*.pledgenum h1 {
    display: inline-flex;
    margin-top: -10px;
    padding: 0;
    font-size: 14px;
    text-align: left;
    color: #FFF;
}*/



#selectWrapperP {
    width: 100%; 
    height: 12px;
    margin: 5px 0 20px 0;
    border-bottom: 2px solid #333; 
    text-align: center;
}
#linedSelectP {
    margin: 0; 
    padding: 0 10px 10px 10px; 
    color: #999; 
    font-size: 16px; 
    font-weight: 600;
    background-color: #000;
}
#orWrapperP {
    width: 100%; 
    height: 11px;
    margin: 20px 0 10px 0;
    border-bottom: 2px solid #333; 
    text-align: center;
}
#linedORP {
    margin: 0; 
    padding: 0 10px 10px 10px; 
    color: #999; 
    font-size: 14px; 
    font-weight: 600;
    background-color: #000;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
        
    #ChooseTextProfile {
        margin: 20px 0 15px 0; 
        font-size: 16px; 
        font-weight: 600; 
        color: #999; 
        text-align: center;
    }    
    #selectedAmountContainer {
        display: flex; 
        justify-content: center;
    }    
    #selectedAmtWrapProfile {
        width: 170px;
        margin: 0; 
        padding: 0 7px 0 7px;
        text-align: center;
    }
    #SelAmtErrContainer {
        display: flex; 
        justify-content: center;        
        height: 30px; 
        margin: 5px 0 10px 0; 
        padding: 0;
    }
    .PledgeSAButtContainer {
        margin-top: -10px;
        text-align: center;
    }
}
@media screen and (min-width: 768px) {    

    .FormlabelSelectAmtProfile {
        margin: 0 0 10px 0; 
        padding: 0 12px 0 12px; 
        font-size: 11px;
        text-align: center;
    }
    .otherpledgesContainer {
        margin: 15px 0 25px 0;
    }
    .otherpledgesInner {
        text-align: center;
    }
    .FormlabelPledge5Profile {
        margin: 5px 0 10px 0; 
        padding: 0 12px 0 12px; 
        font-size: 11px;
        text-align: center;        
    }
    .FormlabelPledge2Profile {
        margin: 10px 0 10px 0;
        padding: 0 12px 0 12px; 
        font-size: 11px;
        text-align: center;        
    }
    .selectedAmtProfile {
        display: block;
        width: 100%;
        height: 32px;
        padding: 10px 10px 10px 5px;
        font-size: 12px;
        line-height: 1.4;
        color: #FFF;
        vertical-align: middle;
        resize: none;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
        background: transparent; 
        transition: all 0.3s linear;
    }
    .selectedAmtProfile:hover {
        cursor: text;
    }
}
@media screen and (min-width: 1024px) {
    
    #ChooseTextProfile {
        margin: 10px 0 15px 0; 
        font-size: 16px; 
        font-weight: 600; 
        color: #999; 
        text-align: center;
    }       
    #selectedAmtWrapProfile {
        margin: 0; 
        padding: 0;
        text-align: center;
    }
    #SelAmtErrContainer {
        height: 30px; 
        margin: 0 0 10px 0; 
        padding: 0;
    }
    .PledgeSAButtContainer {
        text-align: center;
    }
}
@media screen and (max-width: 799px) {    
    
    #ValidAmountPro {
        line-height: 1.4;
        margin: 0;
        font-size: 12px;
        color: #0088FF;       
        word-break: break-word;
        background-color: #000;
    }
    #ValidAmountErrorPro {
        line-height: 1.4;
        margin: 0;
        font-size: 11px;
        color: #ff0000;
        word-break: break-word;    
        background-color: #000;
    }
}
@media screen and (min-width: 800px) {
    
    #ValidAmountPro {
        line-height: 1.4;
        margin: 12px 0 0 6px;
        font-size: 11px;
        color: #0088FF;
        text-shadow: 0 0 0 #0088FF;
        word-break: break-word;
        background-color: #000;
    }
    #ValidAmountErrorPro {
        line-height: 1.4;
        margin: 12px 0 0 6px;
        font-size: 11px;
        color: #ff0000;
        word-break: break-word;    
        background-color: #000;
    }
}

.PledgeAmtButt2 { /* /// Basic /// */
    width: 100%;
    height: 42px;
    margin: 20px 10px 0 10px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    transition: all 0.4s linear;
}
.PledgeAmtButt2:hover {
    cursor: pointer;
    color: #999;
    border: 2px solid #555;     
    background-color: #111;
}
.PledgeSAButt { /* /// AAA /// */
    width: 100%;
    height: 42px;
    margin: 0 10px 0 10px;
    padding-bottom: 2px;
    color: #ff9900;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: 2px solid #333;
    border-radius: 8px;    
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    transition: all 0.4s linear;
}
.PledgeSAButt:hover {
    cursor: pointer;
    border: 2px solid #555;    
    background-color: #111;
}
.PledgeAmtButt5 { /* /// VIP /// */
    width: 100%;
    height: 42px;
    margin: 20px 10px 0 10px;
    padding-bottom: 2px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border: 2px solid #333;
    border-radius: 8px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    transition: all 0.4s linear;
}
.PledgeAmtButt5:hover {
    cursor: pointer;
    color: #999;
    border: 2px solid #555;     
    background-color: #111;
}

/* /// END - LEFT COLUMN /// */

/* //// MIDDLE COLUMN ////// */

#middleColumnWContainer {
    margin: 0; 
    padding: 0;
}
#emptySpreaderColumn {
    width: 100%;
    margin: 0;
    padding: 0; 
}

/* /// Audio Player /// */
    
.audioPlayerEmpty {
    width: 100%;
    margin: 9px 80px 0 0;
    padding: 32px 0 31.5px 0;
    color: #666;
    font-size: 14px;
    text-align: center;
    border-radius: 12px;
    border: 2px solid #333;
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 992px)  {
       
    #AudioPlayerColumn {
        margin: 0;
        padding: 0; 
    }
}
@media screen and (min-width: 993px) {
       
    #AudioPlayerColumn {
        margin: 0;
        padding: 0 10px 0 10px; 
    }
}

@media screen and (min-width: 320px) and (max-width: 410px)  {
       
    #PPAudioPlayerColumn {
        margin: 0;
        padding: 0 3px 0 3px; 
    }
}
@media screen and (min-width: 411px) and (max-width: 1023px) {
       
    #PPAudioPlayerColumn {
        margin: 0;
        padding: 0; 
    }
}
@media screen and (min-width: 1024px) {
       
    #PPAudioPlayerColumn {
        margin: 0;
        padding: 0 10px 0 10px; 
    }
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .videoPostsPublic {
        width: auto;    
        margin: 9px 0 2px 0;
        padding: 0 15px 20px 15px;
        color: #FF9900;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;                       
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
}
@media screen and (min-width: 1025px) {

    .videoPostsPublic {
        width: auto;    
        margin: 9px 0 2px 0;
        padding: 0 15px 20px 15px;
        color: #FF9900;
        border-radius: 16px;
        border: 2px solid #333;                       
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
}

/* //// Overlay before track upload //// */

.uploadTrackpreview {
    position: relative;
    height: auto;
    min-height: 350px;
    width: 100%;    
    margin: 10px 0 0 0;
    padding: 0;
    color: #D0D0D0;
    border-radius: 16px;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;   
    transition: all 0.3s linear;
}
.uploadTrackpreview:hover {
    cursor: pointer;
    border: 2px solid #555;
    background-color: #101010;
}
.containerPlayer {
    margin: 0;
    padding: 10px 10px 7px 10px;
}
.playerTitle {
    margin: 0 0 7px 0;
    font-size: 16px;
}
.overlayPlayer {
    opacity: 0;
    position: absolute;
    z-index: 4;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #D0D0D0;
    font-size: 16px;
    text-align: center;
    border-radius: 16px;
    background-color: rgba(16, 16, 16, 0.9 );
    transition: all 0.3s linear;
}
.overlayPlayer:hover {
    opacity: 1;
}

/* //// Overlay after track upload //// */

.uploadTrackAfter {
    position: relative;
    height: 48px;
    width: 100%;    
    margin: 15px 0 0 0;
    padding: 0;
    color: #D0D0D0;
    border-radius: 12px;
    /*box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;*/ 
    transition: all 0.3s linear;
}
.uploadTrackAfter:hover {
    cursor: pointer;
    border: 2px solid #555;
    background-color: #101010;
}
.containerPlayerAfter {
    margin: 0;
    padding: 10px 10px 7px 10px;
}
.playerTitleAfter {
    margin: 0;
    padding: 1px 0 0 0;
    /*color: #0088FF;*/
    color: #D0D0D0;
    font-size: 16px;
    text-align: center;
}
.overlayPlayerAfter {
    opacity: 0;
    position: absolute;
    z-index: 4;
    height: 44px;
    width: 100%;
    top: 0;
    bottom: 0;
    /*color: #0088FF;*/
    color: #D0D0D0;
    font-size: 16px;
    text-align: center;
    border-radius: 12px;
    background-color: rgba(16, 16, 16, 0.9 );
    transition: all 0.3s linear;
}
.overlayPlayerAfter:hover {
    opacity: 1;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .uploadTrackpreview {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .overlayPlayer {
        padding: 160px 0 0 0;
    }
    .uploadTrackAfter {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .overlayPlayerAfter {
        padding: 12.5px 0 0 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 959px) {

    .uploadTrackpreview {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .overlayPlayer {
        padding: 35% 0 0 0;
    }
    .uploadTrackAfter {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .overlayPlayerAfter {
        padding: 12.5px 0 0 0;
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {

    .uploadTrackpreview {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .overlayPlayer {
        padding: 29% 0 0 0;
    }
    .uploadTrackAfter {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .overlayPlayerAfter {
        padding: 12.5px 0 0 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .uploadTrackpreview {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .overlayPlayer {
        padding: 34.5% 0 0 0;
    }
    .uploadTrackAfter {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .overlayPlayerAfter {
        padding: 12.5px 0 0 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    .uploadTrackpreview {
        border: 2px solid #333;
        background-color: #111;
    }
    .overlayPlayer {
        z-index: 0;
        padding: 34.5% 0 0 0;
    }
    .uploadTrackAfter {
        border: 2px solid #333;
        background-color: #111;
    }    
    .overlayPlayerAfter {
        z-index: 0;
        padding: 12.5px 0 0 0;
    }
}
@media screen and (min-width: 1200px) {

    .uploadTrackpreview {
        border: 2px solid #333;
        background-color: #111;
    }
    .overlayPlayer {
        padding: 28.5% 0 0 0;
    }
    .uploadTrackAfter {
        border: 2px solid #333;
        background-color: #111;
    }    
    .overlayPlayerAfter {
        padding: 11px 0 0 0;
    }   
}


#my-player {
    outline: none;
}
#my-player-preview {
     outline: none;
}
span {
    outline: 0;
}

/* // Posts Display // */

#postsDisplayContainer {
    margin: 0;
    padding: 0 0 100px 0;
}
.emptyPosts {
    padding: 20px 10px 20px 10px;
    color: #666;
    font-size: 14px;
    border-radius: 16px;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .emptyPosts {
        margin: 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) {
    
    .emptyPosts {
        margin: 0;
        border: 2px solid #333;
        background-color: #111;
    }
}

@media screen and (min-width: 320px) and (max-width: 410px) {
    
    .postsTitle {
        color: #D0D0D0;
        font-size: 14px;
        margin: -10px 0 14px 0;
        background-color: #000;
        border: 2px solid #333;
    }
    #emptyPostsHolder {
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }    
    #postsDisplayP {
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsDisplay1 {
        min-height: 262px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #postsDisplay2 {
        min-height: 524px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #thirdWheelSmall {
        margin: 10px 0 2px 0; 
        padding: 0;
    }
    #thirdWheelLarge {
        display: none;    
    }    
}
@media screen and (min-width: 411px) and (max-width: 767px) {
    
    .postsTitle {
        color: #D0D0D0;
        font-size: 14px;
        margin: -10px 0 14px 0;
        background-color: #000;
        border: 2px solid #333;
    }
    #emptyPostsHolder {
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }    
    #postsDisplayP {
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsDisplay1 {
        min-height: 262px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #postsDisplay2 {
        min-height: 524px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #thirdWheelSmall {
        margin: 10px 0 2px 0; 
        padding: 0;
    }
    #thirdWheelLarge {
        display: none;    
    }    
}
@media screen and (min-width: 768px) and (max-width: 823px) {

    .postsTitle {
        color: #D0D0D0;
        font-size: 14px;
        margin: -10px 0 10px 0;
        background-color: #000;
        border: 2px solid #333;
    }
    #emptyPostsHolder {
        min-height: 0; 
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }   
    #postsDisplayP {
        min-height: 0; 
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsDisplay1 {
        min-height: 442px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #postsDisplay2 {
        min-height: 880px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #thirdWheelSmall {
        margin: 11px 0 0 0; 
        padding: 0;
    }
    #thirdWheelLarge {
        display: none;    
    }
}
@media screen and (min-width: 824px) and (max-width: 855px) {
    
    .postsTitle {
        display: none;
    }    
    #emptyPostsHolder {
        margin: 15px 0 0 0;
        padding: 0 0 100px 0;
    }  
    #postsDisplayP {
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }    
    #postsDisplay1 {
        min-height: 442px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #postsDisplay2 {
        min-height: 882px;
        margin: 10px 0 0 0;
        padding: 0 0 40px 0;
    }
    #thirdWheelSmall {        
        margin: 0; 
        padding: 0;
    }    
    #thirdWheelLarge {
        display: none; 
    }
}
@media screen and (min-width: 856px) and (max-width: 1023px) {
    
    .postsTitle {
        display: none;
    }  
    #emptyPostsHolder {
        margin: 15px 0 0 0;
        padding: 0 0 100px 0;
    }  
    #postsDisplayP {
        margin: 10px 0 0 0;
        padding: 0 0 100px 0;
    }      
    #postsDisplay1 {
        min-height: 442px;
        margin: 10px 0 0 0;
        padding: 0 10px 40px 10px;
    }    
    #postsDisplay2 {
        min-height: 882px;
        margin: 10px 0 0 0;
        padding: 0 10px 40px 10px;
    }
    #thirdWheelSmall {        
        margin: 0; 
        padding: 0;
    }      
    #thirdWheelLarge {
        display: none;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .postsTitle {
        display: none;
    }
    #emptyPostsHolder {
        margin: 8px 0 0 0;
        padding: 0 10px 100px 10px;
    }  
    #postsDisplayP {
        margin: 8px 0 0 0;
        padding: 0 10px 100px 10px;
    }
    #postsDisplay1 {
        margin: 10px 0 0 0;
        padding: 0 10px 40px 10px;
    }
    #postsDisplay2 {
        margin: 10px 0 0 0;
        padding: 0 10px 40px 10px;
    }    
    #thirdWheelSmall {       
        display: none;
    }      
    #thirdWheelLarge {
        margin: 0; 
        padding: 0;        
    }
}
@media screen and (min-width: 1025px) {
    
    .postsTitle {
        display: none;
    }
    #emptyPostsHolder {
        margin: 9px 0 0 0;
        padding: 0 10px 100px 10px;
    }  
    #postsDisplayP {
        margin: 8px 0 0 0;
        padding: 0 10px 100px 10px;
    }
    #postsDisplay1 {
        margin: 10px 0 0 0;
        padding: 0 10px 40px 10px;
    }
    #postsDisplay2 {
        margin: 10px 0 0 0;
        padding: 0 10px 40px 10px;
    }    
    #thirdWheelSmall {       
        display: none;
    }      
    #thirdWheelLarge {
        margin: 0; 
        padding: 0;        
    }
}
.profilePosts { 
    position: relative;
    float: left;
    min-height: 1px;
    width: 100%;
/*    margin: 0 0 10px 0;
    padding: 10px 10px 7px 10px;
    border-radius: 12px;
    border: 2px solid #333;
    background-color: #0d0d0d;*/
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .profilePosts { 
/*        position: relative;
        float: left;
        min-height: 1px;
        width: 100%;*/
        margin: 0 0 10px 0;
        padding: 12px 15px 7px 15px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
/*        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;*/
    }
}
@media screen and (min-width: 1025px) {
    
    .profilePosts { 
/*        position: relative;
        float: left;
        min-height: 1px;
        width: 100%;*/
        margin: 0 0 10px 0;
        padding: 10px 10px 7px 10px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
/*        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;*/
    }
}


.emptySpreader {
    margin: 0 150px 0 150px;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .contentLocker { 
        height: 250px;
        width: 100%;
        margin: 10px 0 -11px 0;
        border: 2px solid #222;
        border-radius: 16px;
        background: linear-gradient(145deg, #0f0f0f 35%, #000000);
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
    }
    .pledgeOverlayLabel {
        position: absolute;
        margin: -20px 0 0 0;
        padding: 0;
        color: #fff;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    }
    .pledgeOverlayLabelSUSP {
        position: absolute;
        margin: -20px 0 0 0;
        padding: 0;
        color: #fff;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    }
    .pledgeoverlayLogo {
        height: auto;
        width: auto;
        max-width: 32px;
        margin: 0;
        padding: 0;
    }
    #lockIconPubPosts {
        margin: 70px 0 10px 0;
        font-size: 32px;
        color: #ff9900;
    }
    .PubPostsPledgeAccessVIP {
        margin-top: 10px;
        color: #999;
        font-size: 19px;
    }
    .PubPostsPledgeAccessAAA {
        margin-top: 10px;
        color: #ff9900; 
        font-size: 19px;
    }    
    .PubPostsPledgeAmountText {
        margin: 10px 0 0 0;
        font-size: 14px;
        /*color: #D0D0D0;*/
    }
    .PubPostsPledgeAccessSUSP {
        margin-top: 10px;
        color: #ff0000;
        font-size: 16px;
    }        
    .PubPostsPledgeAmountTextSUSP {
        margin: 10px 0 0 0;
        padding: 0 10px 0 10px;
        color: #ff0000;
        font-size: 9px;
    }    
    #suspendTriangle {
        margin-bottom: 5px;
        color: red; 
        font-size: 20px; 
    }
}
@media screen and (min-width: 768px) {

    .contentLocker {
        height: 350px;
        width: 100%;
        margin: 10px 0 10px 0;
        border: 2px solid #333;
        border-radius: 12px;
        background: linear-gradient(145deg, #191919 35%, #111111) border-box;
        overflow: hidden;
    }
    .pledgeOverlayLabel {
        position: absolute;
        height: auto;
        width: 100%;
        margin: 110px 0 0 -12px;
        padding: 0;
        color: #fff;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    }
    .pledgeOverlayLabelSUSP {
        position: absolute;
        height: auto;
        width: 100%;
        margin: 110px 0 0 -12px;
        padding: 0;
        color: #fff;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    }     
    .pledgeoverlayLogo {
        height: auto;
        width: auto;
        max-width: 32px;
        margin: 0;
        padding: 0;
    }
    #lockIconPubPosts {
        margin: 70px 0 10px 0;
        font-size: 32px;
        color: #ff9900;
    }
    .PubPostsPledgeAccessVIP {
        margin-top: 10px;
        color: #999;
        font-size: 24px;
    }
    .PubPostsPledgeAccessAAA {
        margin-top: 10px;
        color: #ff9900; 
        font-size: 24px;
    }    
    .PubPostsPledgeAmountText {
        margin: 10px 0 0 0;
        font-size: 17px;
        /*color: #D0D0D0;*/
    }
    .PubPostsPledgeAccessSUSP {
        margin-top: 10px;
        color: #ff0000;
        font-size: 23px;
    }     
    .PubPostsPledgeAmountTextSUSP {
        margin: 10px 0 0 0;
        padding: 0 10px 0 10px;
        color: #ff0000;
        font-size: 13px;
    }     
    #suspendTriangle {
        margin-bottom: 5px;
        color: red; 
        font-size: 28px; 
    }
}
.pledgeoverlay5 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url("https://pledgsta.com/assets/img/Content-Locker-Background-2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(20px);
}   
.pledgeOverlayShade5 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.8);
    object-fit: cover;
}
.pledgeoverlay10 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url("https://pledgsta.com/assets/img/Content-Locker-Background-1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(20px);
}
.pledgeOverlayShade10 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.7);
    object-fit: cover;
}

/* // Scroll to top button 1 - Profile // */

#button1 {
    position: relative;
    height: 50px; 
    width: 100%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    z-index: 8888;
}
#button1:hover {
    cursor: pointer;
}
#button1::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 1.8em;
    line-height: 50px;
    color: #ff9900;
    padding: 10px 9px 7px 10px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;
}
#button1.show {
    opacity: 1;
    visibility: visible;
}

/* // Scroll to top button - Gallery // */

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #buttonGal {
        display: none;
    }
}
@media screen and (min-width: 1025px) {

    /* // Scroll to top button - Event History // */

    #buttonGal {
        position: fixed;
        display: inline-block;
        height: 50px;
        width: 50px;
        bottom: 30px;
        right: 30px;
        padding: 0 5.5px 0 6.5px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #444;
        background-color: #000;        
        opacity: 0;
        visibility: hidden;
        z-index: 1000;        
        transition: border .8s,
                    background-color .1s, 
                    opacity .8s, 
                    visibility .9s;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;        
    }
    #buttonGal::after {
        font-family: 'FontAwesome';
        content: "\f077";
        font-weight: normal;
        font-style: normal;
        font-size: 2em;
        line-height: 50px;
        color: #ff9900;   
    }   
    #buttonGal:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
    }
    #buttonGal:active {
        background-color: #111;
    }
    #buttonGal.show {
        opacity: 1;
        visibility: visible;
    }
}

/* // Scroll to top button - Gigs // */

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #buttonGig {
        display: none;
    }
}
@media screen and (min-width: 1025px) {

    #buttonGig {
        position: fixed;
        display: inline-block;
        height: 50px;
        width: 50px;
        bottom: 30px;
        right: 30px;
        padding: 0 5.5px 0 6.5px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #444;
        background-color: #000;        
        opacity: 0;
        visibility: hidden;
        z-index: 1000;        
        transition: border .8s,
                    background-color .1s, 
                    opacity .8s, 
                    visibility .9s;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;        
    }
    #buttonGig::after {
        content: "\f077";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        font-size: 2em;
        line-height: 50px;
        color: #ff9900;
    }
    #buttonGig:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
    }
    #buttonGig:active {
        background-color: #111;
    }
    #buttonGig.show {
        opacity: 1;
        visibility: visible;
    }
}

/* // Scroll to top button - Causes // */

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #buttonCause {
        display: none;
    }
}
@media screen and (min-width: 1025px) {

    #buttonCause {
        display: inline-block;
        position: fixed;
        height: 50px;
        width: 50px;
        bottom: 30px;
        right: 30px;
        padding: 0 5.5px 0 6.5px;    
        text-align: center;
        border-radius: 12px;        
        border: 2px solid #444;
        background-color: #000;;
        opacity: 0;
        visibility: hidden;
        z-index: 1000;        
        transition: border .8s,
                    background-color .1s, 
                    opacity .8s, 
                    visibility .9s;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #buttonCause::after {
        content: "\f077";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        font-size: 2em;
        line-height: 50px;
        color: #ff9900;
    }
    #buttonCause:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
    }
    #buttonCause:active {
        background-color: #111;
    }
    #buttonCause.show {
        opacity: 1;
        visibility: visible;
    }
}
/* // END - MIDDLE COLUMN // */

/* ///// RIGHT COLUMN ////// */

#supportedArtist {
    margin: 0;
    padding: 0; 
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #NextGig {
        margin: 0;
        padding: 0;    
    }    
    
    .supported {
        margin: 14px 0 13px 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) {
    
    #NextGig {
        margin: 0;
        padding: 0;    
    } 
    .supported {
        margin: 15px 0 15px 0;
        padding: 0;
    }    
}



@media screen and (min-width: 320px) and (max-width: 1024px) {

    #pledgingToColumn {
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
}
@media screen and (min-width: 1025px) {

    #pledgingToColumn {
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .supportedTitle {
        margin: 0;
        padding: 15px 0 15px 0;
        color: #D0D0D0;
        font-size: 16px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .supportedTitle {
        margin: 0;
        padding: 14px 7px 13.5px 7px;
        color: #D0D0D0;
        font-size: 16px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {

    .supportedTitle {
        margin: 0;
        padding: 14px 7px 13.5px 7px;
        color: #D0D0D0;
        font-size: 16px;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
    }
}

.pledgingToColumnInner {
    margin: 0;
    padding: 0 0 5px 0;    
}


/* /// Next gig cell /// */

.profileCardEvent {
    display: flex;
    border-radius: 12px;
    transition: all 0.3s linear;
    /*transition: 900ms;*/ 
}
.profileCardEvent:hover {
    background-color: #000;  
    /*transform: scale(1.1);
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;*/
}
.smallEventPoster {
    width: 55px;
    margin: 0 12px 0 0;
    padding: 0;
    object-position: 50% 50%;
    object-fit: cover;
    float: left; 
    border-radius: 6px;    
}
.NexteventArtist {
    margin: 0 0 3px 0; 
    padding: 0;
    color: #888;
    font-size: 12px;
    word-break: break-word;
}
.NexteventTitle {
    margin: 0; 
    padding: 0;
    font-size: 12px;
    word-break: break-word;
}
.NextEventVenue {
    margin: 9px 0 0 0; 
    padding: 0;
    color: #D0D0D0;
    font-size: 10px;
}
.NextEventDate {
    margin: 7px 0 0 0; 
    padding: 0;
    color: #D0D0D0;
    font-size: 10px;
}
.nextGigTimeCode {
    margin: 3px 0 0 0;
    font-size: 9px; 
    color: #777;
} 

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .profileCardEvent {
        margin: 5px 0 15px 0;
        padding: 8px 0 8.5px 9px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .smallEventPoster {
        height: auto;  
    }
    .NexteventData {
        margin: 2px 9px 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .profileCardEvent {
        margin: 5px 0 15px 0;
        padding: 8px 0 8.5px 9px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .smallEventPoster {
        height: auto;    
    }
    .NexteventData {
        margin: 1px 9px 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {

    .profileCardEvent {
        margin: 5px 0 15px 0;
        padding: 9px 0 9.5px 9px;
        border: 2px solid #333;
        background-color: #111;
    }
    .smallEventPoster {
        height: auto;  
    }
    .NexteventData {
        margin: 1px 0;
        padding: 0;
    }
}


/* /// Suported Artists Cell /// */

@media screen and (max-width: 1024px) {

    .profileCardPledging {
        display: block;    
        margin: 10px 0 10px 0;
        padding: 8px 0 35px 10px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #111;
        transition: all 0.3s linear; 
    }
    .profileCardPledging:hover {
        border: 2px solid #333;
        background-color: #000;
    }
}
@media screen and (min-width: 1025px) {

    .profileCardPledging {
        display: block;    
        margin: 10px 0 10px 0;
        padding: 8px 0 35px 10px;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear; 
    }
    .profileCardPledging:hover {
        border: 2px solid #333;
        background-color: #000;
    }
}

.profileCardPledging h1 {
    margin: 11px 0 -15px 10px;
    padding: 0;
    font-size: 12px;
}
.profileCardPledging h3 {
    margin-top: 0;
}
.smallSupportedAvatar {
    width: 35px;
    height: 35px;
    margin: 0 10px 0 0;
    float: left; 
    border-radius: 4px;
}

/* ///////////// END - RIGHT COLUMN ////////////// */

/* ///////////// END - PROFILE-PAGE ////////////// */

/* =============================================== */

/* //////// START - PROFILE-PREVIEW PAGE ///////// */

/* ////// Profile Preview error Overlays ///////// */

.PPcampaignContainerGoal {
    position: relative;
    height: auto;
    min-height: 230px;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0;
    color: #D0D0D0;
    border-radius: 12px;
    border: 2px solid #333;   
    background-color: #111;
    transition: all 0.3s linear;
}
.PPcampaignContainerGoal:hover  {
    cursor: pointer;
    color: #D0D0D0;
    border: 2px solid #555;
    background-color: #101010;
}
.containerGoal {
    margin: 0;
    padding: 10px 10px 7px 10px;
}
.overlayGoal {
    opacity: 0;
    position: absolute;
    z-index: 4;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #D0D0D0;
    font-size: 16px;
    text-align: center;
    border-radius: 12px;
    background-color: rgba(16, 16, 16, 0.9 );
    transition: all 0.3s linear;
}
.overlayGoal:hover {
    opacity: 1;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    .overlayGoal {
        padding: 100px 0 0 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 959px) {

    .overlayGoal {
        padding: 24% 0 0 0;
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {

    .overlayGoal {
        padding: 19.5% 0 0 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .overlayGoal {
        padding: 48% 0 0 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    .overlayGoal {
        padding: 97px 0 0 0;
    }
}
@media screen and (min-width: 1200px) {

    .overlayGoal {
        padding: 39% 0 0 0;
    }     
}


.PPcampaignContainerPercent {
    position: relative;
    height: auto;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0;
    color: #D0D0D0;
    border-radius: 12px;
    border: 2px solid #333;   
    background-color: #111;
    transition: all 0.3s linear;
}
.PPcampaignContainerPercent:hover  {
    cursor: pointer;
    color: #D0D0D0;
    border: 2px solid #555;
    background-color: #101010;
}
.containerPercent {
    margin: 0;
    padding: 10px 10px 7px 10px;
}
.overlayPercent {
    opacity: 0;
    position: absolute;
    z-index: 4;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #D0D0D0;
    font-size: 14px;
    text-align: center;
    border-radius: 12px;
    background-color: rgba(16, 16, 16, 0.9 );
    transition: all 0.3s linear;
}
.overlayPercent:hover {
    opacity: 1;
}
.PPbackgroundError {
    position: relative; 
    margin: 0; 
    padding: 10px 0 10px 0;
    color: #ff0000;
    font-size: 11.5px;
    font-weight: 500;
    border: 2px solid red;
    border-radius: 12px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;/**/    
}
.PPavatarError {
    position: relative;
    padding: 10px 0 10px 0;
    color: #ff0000;  
    font-size: 11.5px;   
    border-radius: 12px;
    border: 2px solid red; 
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;      
    z-index: 1;/**/
}
@media screen and (min-width: 320px) and (max-width: 410px) {

    .PPbackgroundError { 
        width: 64%;
    }
    .PPavatarError {
        width: 165px;
    }
}
@media screen and (min-width: 411px) and (max-width: 599px) {

    .PPbackgroundError { 
        width: 64%;
    }
    .PPavatarError {
        width: 165px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    .PPbackgroundError { 
        width: 54%;
    }
    .PPavatarError {
        width: 185px;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    .PPbackgroundError {
        width: 37%;
    }
    .PPavatarError {
        width: 185px;
    }
}
@media screen and (min-width: 824px) and (max-width: 960px) {

    .PPbackgroundError { 
        width: 37%;
    }
    .PPavatarError {
        width: 185px;
    }     
}
@media screen and (min-width: 961px) {

    .PPbackgroundError { 
        width: 37%;
    }
    .PPavatarError {
        width: 195px;
    }     
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .PPcampaignContainerGoal,
    .PPcampaignContainerPercent {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .overlayPercent {
        padding: 28px 0 0 0;
    }
    .PPavatarError {
        margin: 0;
    }
    .PPbackgroundDiscError {
        display: none;        
    }    
    .PPavatarDiscError {
        display: none;
    }
    .PPplayerDiscError {
        display: none;
    }
    .PPcampaignDiscError {
        display: none;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .PPcampaignContainerGoal,
    .PPcampaignContainerPercent {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .overlayPercent {
        padding: 28px 0 0 0;
    }
    .PPavatarError {
        margin: -45px 0 0 0;
    }
    .PPbackgroundDiscError {
        display: none;        
    }    
    .PPavatarDiscError {
        display: none;
    }
    .PPplayerDiscError {
        display: none;
    }
    .PPcampaignDiscError {
        display: none;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) { /* 1180 */

    .PPcampaignContainerGoal,
    .PPcampaignContainerPercent {
        border: 2px solid #333;
        background-color: #111;
    }
    .overlayPercent {
        padding: 26px 0 0 0;
    }
    .PPavatarError {
        margin: -55px 0 0 0;
    }
    .PPbackgroundDiscError {
        display: none;        
    }    
    .PPavatarDiscError {
        display: none;
    }
    .PPplayerDiscError {
        display: none;
    }
    .PPcampaignDiscError {
        display: none;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1280px) { /* 1280 Nest Hub Max */

    .PPcampaignContainerGoal,
    .PPcampaignContainerPercent {
        border: 2px solid #333;
        background-color: #111;
    }
    .overlayPercent {
        padding: 26px 0 0 0;
    }
    .PPavatarError {
        margin: -55px 0 0 30px;
    }
    .PPbackgroundDiscError {
        display: none;        
    }    
    .PPavatarDiscError {
        display: none;
    }
    .PPplayerDiscError {
        display: none;
    }
    .PPcampaignDiscError {
        display: none;
    }
}
@media screen and (min-width: 1281px) and (max-width: 1370px) { /* 1366 iPad Pro */

    .PPcampaignContainerGoal,
    .PPcampaignContainerPercent {
        border: 2px solid #333;
        background-color: #111;
    }
    .overlayPercent {
        padding: 26px 0 0 0;
    }
    .PPavatarError {
        margin: -55px 0 0 30px;
    }
    .PPbackgroundDiscError {
        display: none;        
    }    
    .PPavatarDiscError {
        display: none;
    }
    .PPplayerDiscError {
        display: none;
    }
    .PPcampaignDiscError {
        display: none;
    }
}
@media screen and (min-width: 1371px) {

    .PPcampaignContainerGoal,
    .PPcampaignContainerPercent {
        border: 2px solid #333;
        background-color: #111;
    }
    .overlayPercent {
        padding: 26px 0 0 0;
    }
    .PPavatarError {
        margin: -55px 0 0 0;
    }
    .PPbackgroundTapError {
        display: none;
    } 
    .PPavatarTapError {
        display: none;        
    }
    .PPplayerTapError {
        display: none;
    }    
    .PPcampaignTapError {
        display: none;
    }
}


.PPconfirmEmailLink {
    width: auto;
    margin: 10px auto 0 auto;
    padding: 6px;
    color: #ff0000;
    font-size: 12px;
    border-radius: 8px;
    border: 2px solid red;
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.3s linear;
}
.PPconfirmEmailLink:hover {
    background: #000;
}

/*.GoliveConfirm {  blue 
    position: relative; 
    z-index: 1001;
    height: 60px; 
    margin: 10px 0 10px 0; 
    padding: 20px 0 10px 0;
    color: #0088FF;
    text-align: center;
    font-size:calc(9px + 0.3vw);
    border-radius: 12px;  
    border: 2px solid #0088FF;
    background-color: rgba(0, 136, 255, 0.1);
}*/

.GoliveConfirm { /* gold */
/*    position: relative; */
    position: absolute;
    z-index: 1001;
    height: 60px; 
    margin: 10px 0 10px 0; 
    padding: 20px 0 10px 0;
    color: #ff9900;
    text-align: center;
    font-size:calc(9px + 0.3vw);
    border-radius: 12px;  
    border: 2px solid #ff9900;
    background-color: #111;
    /*background-color: rgba(255, 153, 0, 0.1);*/
}

#GoliveConfirmOuterEP {
    position: fixed; 
    z-index: 1000;/**/    
    width: 100%;
    margin: 0;
    padding: 0;
}
#GoliveConfirmInnerEP {   
    width: 100%;
    margin: 0;
    padding: 0;
}
#GoliveConfirmEP { /* blue */
    height: 60px; 
    width: auto;
    margin: 0 0 0 0; 
    padding: 20px 0 10px 0;
    color: #0088FF;
    text-align: center;
    font-size:calc(9px + 0.3vw);
    border-radius: 16px;  
    border: 2px solid #0088FF;
    background-color: rgba(0, 136, 255, 0.1);
}
.GoliveInform { /* red */
    position: relative; 
    z-index: 1001;
    height: 60px; 
    /*margin: 45px 0 -50px 0;*/ 
    margin: 45px 0 0 0;
    padding: 22px 0 10px 0;
    color: #ff0000;
    text-align: center;
    font-size: 14px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px; 
    border: 2px solid #ff0000; 
    border-top: none;
    background-color:rgb(255, 0, 0, 0.15); 
}

.PPplayerError {
    width: auto;
    margin: 10px auto 0 auto; 
    padding: 10px 6px 10px 6px;
    color: #ff0000;
    font-size: 11.5px;  
    border-radius: 12px;
    border: 2px solid red;
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.PPcampaignError {
    margin: 0 0 10px 0;
    padding: 10px 0 10px 0;
    color: #ff0000;
    font-size: 11.5px;
    line-height: 1.6;
    border-radius: 12px;
    border: 2px solid red;
    background-color: #111;
    text-align: center;
}
.PPgoalError {
    margin: 0 0 10px 0;
    padding: 10px 0 10px 0;
    color: #ff0000;
    font-size: 11.5px;
    line-height: 1.6;
    border-radius: 12px;
    border: 2px solid red;
    background-color: #111;
    text-align: center;
}

@media screen and (min-width: 961px) and (max-width: 1370px) {
    
    .PPplayerError {
        position: relative;
        z-index: -1;
    }
    .PPcampaignError {
        position: relative;
        z-index: -1;
    }
    .PPgoalError {
        position: relative;
        z-index: -1;
    }
}


/* ////////// END - PROFILE-PREVIEW PAGE ///////// */

/* =============================================== */

/* ////////// START - PLEDGE REGO PAGE /////////// */


#pledgeSignOnContainer {
    margin-bottom: 100px;
}

/* /// Small Screens /// */

@media screen and (min-width: 320px) and (max-width: 374px) {
    
    #pledgeSignOnContainer {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 375px) and (max-width: 414px) {
    
    #pledgeSignOnContainer {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 415px) and (max-width: 450px) {
    
    #pledgeSignOnContainer {
        margin: 0 6% 0 6%;
    }
}
@media screen and (min-width: 451px) and (max-width: 500px) {

    #pledgeSignOnContainer {
        margin: 0 10% 0 10%;
    }
}
@media screen and (min-width: 501px) and (max-width: 550px) {

    #pledgeSignOnContainer {
        margin: 0 12% 0 12%;
    }
}
@media screen and (min-width: 551px) and (max-width: 600px) {

    #pledgeSignOnContainer {
        margin: 0 14% 0 14%;
    }
}
@media screen and (min-width: 601px) and (max-width: 650px) {

    #pledgeSignOnContainer {
        margin: 0 16% 0 16%;
    }
}
@media screen and (min-width: 651px) and (max-width: 700px) {

    #pledgeSignOnContainer {
        margin: 0 18% 0 18%;
    }
}
@media screen and (min-width: 701px) and (max-width: 767px) {

    #pledgeSignOnContainer {
        margin: 0 20% 0 20%;
    }
}

/* /// Large Screens /// */

@media screen and (min-width: 768px) and (max-width: 800px) {

    #pledgeSignOnContainer {  
        margin-left: auto; 
        margin-right: auto; 
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) { 

    #pledgeSignOnContainer {
        margin-left: auto; 
        margin-right: auto; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {    
    
    #pledgeSignOnContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}
@media screen and (min-width: 1181px) {

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

/* ////////////////////////////////////////////////////////// */

#PRFMainContainerOuter {
    margin: 75px 0 0 0;
    padding: 0;
}

#PledgeRegoMainContainer {
    margin-top: 10px; 
    border-radius: 16px;
}

/* /// Small Screens /// */

@media screen and (min-width: 320px) and (max-width: 374px) {
    
    #PledgeRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 0 25px 0 25px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 375px) and (max-width: 416px) { /* pixel 4 */
    
    #PledgeRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 0 35px 0 35px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 417px) and (max-width: 599px) {
    
    #PledgeRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 0 20px 0 20px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/     
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #PledgeRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 0 20px 0 20px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}

/* /// Large Screens /// */

@media screen and (min-width: 768px) and (max-width: 799px) {
  
    #PledgeRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {
    
    #PledgeRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) { 

    #PledgeRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) { 

    #PledgeRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {    

    #PRFMainContainerOuter {
        width: 64%;
    }
    #PledgeRegoMainContainer {
        width: 100%;
        margin: 0;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;/**/
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) {    

    #PRFMainContainerOuter {
        width: 53%;
    }
    #PledgeRegoMainContainer {
        width: 100%;
        margin: 0;
        padding: 20px 50px 25px 50px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;/**/
        background-color: #111;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1180px) {    

    #PRFMainContainerOuter {
        width: 51.75%;
    }
    #PledgeRegoMainContainer {
        width: 100%;
        margin: 0;
        padding: 20px 50px 25px 50px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;/**/
        background-color: #111;
    }
}
@media screen and (min-width: 1181px) {

    #PledgeRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 20px 40px 25px 40px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
        background-color: #111;
    }
}


#formContainerP {
    margin-top: 10px;        
    padding: 10px 0 0 0;
}
#firstname {
    background: none;
}
#lastname {
    background: none;
}
#email {
    background: none;
}
#pledge_username {
    background: none;
}
#currentPass {
    background: none;
}
#currentPassContainer {
    display: inline-flex;
    width: 100%; 
    margin: 0; 
    padding: 0; 
}
.PRFtitleHolder {
    min-height: 120px;
    width: 100%;
    margin: 40px 0 30px 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.PRFgreylineLogo {
    margin: 35px 30px 0 0; 
    border: 1px solid #333;
}
#PRpostcode {
    /*color: #777777;*/
    margin-top: 16px;
    background: none;    
}
#TCPledgstaRegoInner {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* ////////////////////////////////////////////////////////// */

#PledgeRegoLabelDOBHolder {
    margin: 0;  
}
#PRFlogoContainer {
    display: none;
}  
@media screen and (min-width: 320px) and (max-width: 374px) {
    
    #PRFlogoContainer {
        display: none;
    }    
    #PledgeRego {
        height: 85px;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoEmail {
        height: 85px;
        margin: 0;
        padding: 0; 
    }
    #PledgeRegoUsername {
        height: 145px; 
        margin: 5px 0 0 0;
        padding: 0;
    }
    #PledgeRegoPassword {
        height: 163px;
        margin: -12px 0 0 0;
        padding: 0;
    }
    #PledgeRegoLabelDOBHolder {
        padding: 0;  
    }   
    #countryPostalContainer {
        display: inline-flex;
        height: 184px;
        width: 100%;        
        margin: 8px 0 0 0;
        padding: 0;    
    } 
}

@media screen and (min-width: 375px) and (max-width: 415px) {
    
    #PRFlogoContainer {
        display: none;
    }    
    #PledgeRego {
        height: 85px;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoEmail {
        height: 85px;
        margin: 0;
        padding: 0; 
    }    
    #PledgeRegoUsername {
        height: 135px; 
        margin: 5px 0 0 0;
        padding: 0;
    }
    #PledgeRegoPassword {
        height: 163px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #PledgeRegoLabelDOBHolder {
        padding: 0;  
    }   
    #countryPostalContainer {
        display: inline-flex;
        height: 184px;
        width: 100%;        
        margin: 0;
        padding: 0;    
    }
}
@media screen and (min-width: 416px) and (max-width: 599px) {
    
    #PRFlogoContainer {
        display: none;
    }    
    #PledgeRego {
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoEmail {
        height: 95px;
        margin: 0;
        padding: 0; 
    }    
    #PledgeRegoUsername {
        height: 145px; 
        margin: 5px 0 0 0;
        padding: 0;
    }
    #PledgeRegoPassword {
        height: 175px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #PledgeRegoLabelDOBHolder {
        padding: 0;  
    }   
    #countryPostalContainer {
        display: inline-flex;
        height: 184px;
        width: 100%;        
        margin: 0;
        padding: 0;    
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #PRFlogoContainer {
        display: none;
    }
    #PledgeRego {
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoEmail {
        height: 95px;
        margin: 0;
        padding: 0; 
    }    
    #PledgeRegoUsername {
        height: 145px; 
        margin: 5px 0 0 0;
        padding: 0;
    }
    #PledgeRegoPassword {
        height: 175px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #PledgeRegoLabelDOBHolder {
        padding: 0;  
    }   
    #countryPostalContainer {
        display: inline-flex;
        height: 184px;
        width: 100%;        
        margin: 0;
        padding: 0;    
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .pledgeToProfileAvatar {
        width: 280px;
        height: 280px;
        margin: 0 0 10px 0;
        border: 2px solid #D0D0D0;
        border-radius: 12px;
    } 
    .PRFpledgeToTiltleContainer {
        width: 100%;
        margin: 0;
        padding: 5px 0 0 0; 
        text-align: center;
    }
    .PRFPledgenameInfo {
        margin: 0;
        padding: 0;
    }
    .PRFPledgenameInfo p {
        margin: 0 0 8px 0;
        color: #777;
        font-size: 18px;
        /*font-style: italic;*/
    }
    .PRFPledgenameInfo h1 {
        margin: 0;
        padding: 0;
        color: #D0D0D0; 
        font-size: 38px;
        font-weight: 600;
        /*font-style: italic;*/
    }
    .PRFgreyline {
        margin: 0 3px 0 3px; 
        height: 1.5px; 
        border: 0; 
        background: #222;
    }
    #errorContainerP {
        margin: 0;
        padding: 0;
    }     
    .pledgePasswordInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 5px 0 0;        
        color: #888; 
        font-size: 12px; 
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify;
        background: none;
        border: none;
    }

    /* /// DOB /// */

    #PledgeDOBContainer {
        height: 160px;
        margin: 2px 0 0 0; 
        padding: 0;
    }
    #PledgeInnerDOBContainer {
        margin: 5px 0 0 0;
        padding: 0;
    }
    #DOBrowP {
        justify-content: center;
        margin: 0;
        padding: 0; 
    }
    #pledgeRegodayOB {
        width: 50px;
        padding: 0 5px 0 0; 
        text-align: center;
    }
    #DropDownContainerPledgeRegoMonth {
        margin: 7px 0 0 0;
        padding: 0;
    }
    #pledgeDOBmonth { /* Select */
        position: relative;
        width: 118px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
        color: #777777;
        z-index: 9999; 
    }    
    #pledgeDOBmonth option { /* option */
        width: 78px;
        margin: 0;
        padding: 1px 5px 6px 4px;
        font-size: 12px;
        color: #D0D0D0;        
        cursor: pointer;
    }     
    #pledgeRegoyearOB {
        max-width: 49px;
        margin: 0 0 0 5px;
        padding: 0; 
        text-align: center;
    }
    #PledgePostCodeContainer {
        margin: 0 0 5px 0;
        padding: 0 15px 0 0;
    }
    #PledgeRegoPostCode {
        width: 110px;
        margin: 0; 
        padding: 0;    
    }
    #PledgeCountryContainer {
        width: 100%;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #CountrylabelPRF {
        margin-left: 2px; 
        font-size: 14px;
        font-weight: 600;
        color: #999;
    }
    #FormlabelPRF {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }    
    .TCPledgstaRegoLabel {
        margin: 0;
        color: #999;
        font-size: 12px;
        word-break: break-word;
        text-align: center;
    }
}

@media screen and (min-width: 768px) and (max-width: 800px) {

    #pledgeToPledgstaLogoPRF {
        height: 40px; 
        width: auto;
        margin: -25px 0 -40px 0;
        padding: 0;
    }     
    .pledgeToProfileAvatar {
        width: 280px;
        height: 280px;
        margin: 0 0 8px 0;
        padding: 0;
        border: 2px solid #D0D0D0;
        border-radius: 12px;
    }    
    .PRFgreyline {
        margin: 30px 0 0 0; 
        height: 2px; 
        border: 0; 
        background: #222;
    }    

    #PledgeRego {
        height: 90px;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoEmail {
        height: 90px;
        margin: 0;
        padding: 0; 
    }    
    #PledgeRegoUsername {
        height: 140px; 
        margin: 0;
        padding: 0;
    }
    #PledgeRegoPassword {
        height: 160px;
        margin: 0;
        padding: 0;
    }
    .pledgePasswordInfo {
        margin: 5px 0 10px 0;
        padding: 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background: none;
        border: none;
    }

    /* // DOB // */

    #PledgeDOBContainer {
        height: 175px;
        margin: 0; 
        padding: 0;
    }
    #PledgeRegoLabelDOBHolder {
        padding: 0;  
    }
    #PledgeInnerDOBContainer {
        margin: 15px 0 0 0; 
        padding: 0;
    }
    #DOBrowP {
        justify-content: center;
        margin: 0;
        padding: 0; 
    }
    #pledgeRegodayOB {
        max-width: 48px;
        padding: 0 5px 0 0; 
        text-align: center;
    }
    #pledgeDOBmonth { /* Select */
        position: relative;
        z-index: 9999;
        width: 120px;
        margin: 0;
        padding: 9px 0 10px 6px;
        color: #777777;
        background: none;
    }
    #pledgeDOBmonth option { /*select option */
        width: 78px;
        margin: 0;
        padding: 1px 5px 6px 4px;
        font-size: 12px;
        color: #D0D0D0;        
        cursor: pointer;
    }
    #pledgeRegoyearOB {
        max-width: 50px;
        margin: 0 0 0 5px;
        padding: 0; 
        text-align: center;
    }
    #countryPostalContainer {
        display: inline-flex;
        height: 184px;
        width: 100%;
        margin: 0;
        padding: 0;    
    }
    #PledgePostCodeContainer { 
        margin: 0 0 5px 0;
        padding: 0 70px 0 0;
    }
    #PledgeRegoPostCode {
        width: 110px;
        margin: 0; 
        padding: 0;    
    }
    #PledgeCountryContainer {
        width: 100%;
        margin: 0 0 5px 0;
        padding: 0;        
    }
    #CountrylabelPRF {
        margin-left: 2px; 
        font-size: 14px;
        font-weight: 600;
        color: #999;
    }
    #FormlabelPRF {
        margin-left: 1px;
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .TCPledgstaRegoLabel {
        margin: 15px 0 0 0;
        color: #999;
        font-size: 12px; 
        font-weight: 600;
        text-align: center;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #pledgeToPledgstaLogoPRF {
        height: 40px; 
        width: auto;
        margin: -5px 0 -20px 0;
        padding: 0;
    }      
    .pledgeToProfileAvatar {
        width: 280px;
        height: 280px;
        margin: 0 0 8px 0;
        padding: 0;
        border: 2px solid #D0D0D0;
        border-radius: 12px;
    }   
    .PRFgreyline {
        margin: 30px 0 0 0; 
        height: 2px; 
        border: 0; 
        background: #222;
    }     

    #PledgeRego {
        height: 90px;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoEmail {
        height: 90px;
        margin: 0;
        padding: 0; 
    }    
    #PledgeRegoUsername {
        height: 140px; 
        margin: 0;
        padding: 0;
    }
    #PledgeRegoPassword {
        height: 155px;
        margin: 0;
        padding: 0;
    }
    .pledgePasswordInfo {        
        margin: 5px 0 10px 0;
        padding: 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background: none;
        border: none;
    }

    /* /// DOB /// */

    #PledgeDOBContainer {
        height: 175px;
        margin: 0; 
        padding: 0;
    }
    #PledgeRegoLabelDOBHolder {
        padding: 0;  
    }
    #PledgeInnerDOBContainer {    
        margin: 15px 0 0 0; 
        padding: 0;
    } 
    #DOBrowP {
        justify-content: center;
        margin: 0;
        padding: 0; 
    }      
    #pledgeRegodayOB {
        max-width: 48px;
        padding: 0 5px 0 0; 
        text-align: center;
    }    
    #pledgeDOBmonth { /* Select */
        position: relative;
        z-index: 9999;
        width: 120px;
        margin: 0;
        padding: 8.5px 0 10.5px 6px;
        color: #777777;
        background: none;
    }
    #pledgeDOBmonth option { /*select option */
        width: 78px;
        margin: 0;
        padding: 2px 5px 6px 4px;
        font-size: 12px;
        color: #D0D0D0;        
        cursor: pointer;
    }
    #pledgeRegoyearOB {
        max-width: 50px;
        margin: 0 0 0 5px;
        padding: 0; 
        text-align: center;
    }
    #countryPostalContainer {
        display: inline-flex;
        height: 170px;
        width: 100%;
        margin: 0;
        padding: 0 15px 0 0;     
    }
    #PledgePostCodeContainer {
        margin: 0 0 5px 0;
        padding: 0 70px 0 0;    
    }
    #PledgeRegoPostCode {
        width: 110px;
        margin: 0; 
        padding: 0;
    }  
    #PledgeCountryContainer {
        width: 100%;
        margin: 0 0 5px 0;
        padding: 0; 
    }
    #CountrylabelPRF {
        margin-left: 2px; 
        font-size: 14px;
        font-weight: 600;
        color: #999;
    }
    #FormlabelPRF {
        margin-left: 1px;
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .TCPledgstaRegoLabel {
        margin: 15px 0 0 0;
        color: #999;
        font-size: 12px; 
        font-weight: 600;
        text-align: center;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #pledgeToPledgstaLogoPRF {
        height: 40px; 
        width: auto;
        margin: -5px 0 -20px 0;
        padding: 0;
    }      
    .pledgeToProfileAvatar {
        width: 280px;
        height: 280px;
        margin: 0 0 8px 0;
        padding: 0;
        border: 2px solid #D0D0D0;
        border-radius: 12px;
    }
    .PRFgreyline {
        margin: 35px 15px 10px 15px; 
        height: 2px; 
        border: 0; 
        background: #222;
    }     
    #PledgeRego {
        height: 70px;
        margin: 5px 0 5px 0;
    }
    #PledgeRegoEmail {
        height: 75px;
        margin: 0; 
    }
    #PledgeRegoUsername {
        height: 90px; 
        margin: 5px 0 30px 0;
    }    
    #PledgeRegoPassword {
        height: 120px;
        margin: 5px 0 20px 0;
    }
    .pledgePasswordInfo {        
        margin: 10px 0 10px 0;
        padding: 0 35px 0 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background: none;
        border: none;
    }
    #PledgeDOBContainer {
        height: 160px;
        margin: 35px 0 0 0; 
        padding: 0 15px 0 15px;
    }    
    #PledgeRegoLabelDOBHolder {
        padding: 0 0 0 15px;  
    }
    #PledgeInnerDOBContainer {
        margin: 0; 
        padding: 0;
    }
    #DOBrowP {
        margin: 0;
        padding: 0; 
    }
    #pledgeRegodayOB {
        max-width: 48px;
        margin: 0 5px 0 0;
        padding: 0; 
    }    
    #pledgeDOBmonth { /* Select */
        width: 120px;
        margin: 0;
        padding: 9px 0 10px 6px;
        color: #777777;
        background: none;
    }
    #pledgeDOBmonth option { /* option */
        width: 98px;
        margin: 0;
        padding: 1px 5px 6px 4px;
        color: #D0D0D0;
        font-size: 12px;        
        background: #111;
        cursor: pointer;  
    }
    #pledgeRegoyearOB {
        width: 57px;
        margin: 0 0 0 5px;
        padding: 0;
    }
    #countryPostalContainer { 
        height: 150px;
    }
    #PledgePostCodeContainer {
        margin: 25px 0 5px 0;
        padding: 0 15px 0 0;
    }    
    #PledgeRegoPostCode {
        width: 110px;
        margin: 0; 
        padding: 0;    
    }
    #PledgeCountryContainer {
        margin: 25px 0 5px 0;
        padding: 0;
    }
    #CountrylabelPRF {
        margin-left: 2px; 
        font-size: 14px;
        font-weight: 600;
        color: #999;
    }
    #FormlabelPRF {
        margin-left: -14px;
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .TCPledgstaRegoLabel {
        margin: 15px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px; 
        font-weight: 600;
        text-align: center;
    }
}
@media screen and (min-width: 1025px) {
    
    #pledgeToPledgstaLogoPRF {
        height: 40px; 
        width: auto;
        margin: 0 0 0 7px;
        padding: 0;
    }     
    .pledgeToProfileAvatar {
        width: 280px;
        height: 280px;
        margin: 0 0 8px 0;
        padding: 0;
        border: 2px solid #D0D0D0;
        border-radius: 12px;
    }
    .PRFgreyline {
        height: 1.5px; 
        margin: 0 15px 10px 15px;
        border: 0; 
        background: #333; 
    }      
    #PledgeRegoPassword {
        height: 110px;
        margin: 5px 0 20px 0;
    }    
    .pledgePasswordInfo {
        margin: 10px 0 10px 0;
        padding: 0 35px 0 0;
        color: #888;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
        text-align: justify;
        background: none;
        border: none;
    }
    #PledgeRegoLabelDOBHolder {
        margin-top: 14px;
        padding: 0 0 0 15px;  
    }
    #errorContainerP {
        margin: 0;
        padding: 0 15px 0 15px;
    }
    #PledgeRego {
        position: relative;
        height: 65px;
        z-index: 1000;     
    }    
    #PledgeRegoEmail {
        position: relative;
        height: 65px;
        z-index: 1000; 
    }
    #PledgeRegoUsername {
        position: relative;
        height: 80px; 
        margin: 0 0 50px 0;
        z-index: 1000;
    }
    #countryPostalContainer {
        height: 130px;
    }    
    #PledgePostCodeContainer {
        margin: 25px 0 5px 0;
        padding: 0 15px 0 0;
    }
    #PledgeRegoPostCode {
        float: left;
        width: 110px;
        margin: 0;
        padding: 0;
    }  
    #PledgeCountryContainer {
        margin: 25px 0 5px 0;
        padding: 0;
    }
    #CountrylabelPRF {
        margin-left: 1px; 
        font-size: 14px;
        font-weight: 600;
        color: #999;
    }
    #FormlabelPRF {
        margin-left: 1px; 
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }    
    #PledgeDOBContainer {
        height: 140px;      
        margin: 25px 0 0 0; 
        padding: 0;
    }    
    #PledgeInnerDOBContainer {
        margin: 0; 
        padding: 0;
    }
    #DOBrowP {
        margin: 0;
        padding: 0; 
    }    
    #pledgeRegodayOB {
        width: 50px;
        padding: 0 5px 0 0; 
        text-align: center;
    }
    #pledgeDOBmonth { /* Select */
        position: relative;
        width: 120px;
        margin: 0;
        padding: 6px 0 7px 6px;
        color: #777777;
        background: none;
        z-index: 1000; 
    }    
    #pledgeDOBmonth option { /* Select option */
        width: 78px;
        margin: 0;
        padding: 1px 5px 6px 4px;
        font-size: 12px;
        color: #D0D0D0;       
        cursor: pointer;
    }
    #pledgeRegoyearOB {
        width: 60px;
        margin: 0;
        padding: 0;
    }
    .TCPledgstaRegoLabel {
        margin: 0;
        color: #999;
        font-size: 12px;
        font-weight: 600;
        word-break: break-word;
        text-align: center;
    } 
}

@media screen and (min-width: 768px) {
    
    #PRFlogoContainer {display: none;
        /*margin: 0; 
        padding: 0;
        text-align: center;*/
    }
    .PRFpledgeToTiltleContainer {
        width: 100%;
        margin: 10px 0 0 0;
        padding: 0;
        text-align: center; 
    }    
    .PRFPledgenameInfo {
        margin: 0;
        padding: 0;
    }
    .PRFPledgenameInfo p {
        margin: 0 0 12px 0;
        color: #777; 
        font-size: 18px;
        /*font-style: italic;*/
    }
    .PRFPledgenameInfo h1 {
        margin: 0;
        padding: 0;
        color: #D0D0D0; 
        font-size: 38px;
        font-weight: 600;
        /*font-style: italic;*/
    }
    #DropDownContainerPledgeRegoMonth {
        margin: 7px 0 0 0;
        padding: 0;
        color: #888;
    }
}
/* /// pledge sign on month custom Scroll /// */

#pledgeDOBmonth { /* Select */
    scrollbar-width: none;
}

/*#pledgeDOBmonth::-webkit-scrollbar {
    border-radius: 6px;
    width: 12px;
    background-color: transparent;
}
#pledgeDOBmonth::-webkit-scrollbar-button {
    display: none;
}
#pledgeDOBmonth::-webkit-scrollbar-thumb {
    height: 40px;
    border-radius: 5px;
    background-color: transparent;
}*/





@media screen and (min-width: 768px) and (max-width: 1023px) {  

    #TCPledgstaRego {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) {  
    
    #TCPledgstaRego {
        margin: 60px 0 0 0;
        padding: 0;
    }
}

/* // PLedge Rego Cont Button // */

#PRFcontButtHolder {
    text-align: center;
}
.PRFcontButt {
    width: 100%;
    margin: 0;
    padding: 20px 0 20px 0;
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s linear;
}
.PRFcontButt:hover {
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #PRFcontButtHolder {
        margin: 30px 10px 30px 10px;
        padding: 0;
        border-radius: 14px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .PRFcontButt {
        color: #FF9900;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .PRFcontButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
}
@media screen and (min-width: 1025px) {

    #PRFcontButtHolder {
        margin: 30px 0 30px 0;
        padding: 0;
        border-radius: 16px;
        border: 2px solid transparent;
        overflow: hidden;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
    }
    .PRFcontButt {
        color: #FF9900;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .PRFcontButt:hover {
        cursor: pointer;
        border: 2px solid #ff9900;  
    }
}

/* // Pledge Sign On - Show / Hide eye // */

@media screen and (min-width: 320px) and (max-width: 1024px) {  

    #PRFeye.fa-eye {
        position: relative;
        height: 35.5px;
        width: 33px;
        margin: 9.25px 0 0 -39px;
        padding: 0 4.5px 0 5px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #PRFeye.fa-eye-slash {
        position: relative;
        height: 35.5px;
        width: 35px;
        margin: 9.25px 0 0 -40px;    
        padding: 0 4.25px 0 4.75px;
        color: #444;
        border-radius: 8px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        z-index: 8;
    }
    #PRFeye:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1025px) {  
    
    #PRFeye.fa-eye {
        position: relative;
        height: 29px;
        width: 26px;
        margin: 9px 0 0 -28px;
        padding: 0 6.75px 0 3.25px;
        color: #444;
        border-radius: 8px;
        background-color: #111;
        z-index: 8;
    }
    #PRFeye.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 28px;
        margin: 9px 0 0 -30px;    
        padding: 0 6px 0 4px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #PRFeye:hover {
        cursor: pointer;
    }
}

/* /// pledge sign on Country custom Scroll /// */

#pledge_counrty { /* select */
    margin-top: 16px;
    color: #777777;
}
#pledge_counrty option { /* option */
    padding: 0.5px 5px 6px 4px;
    color: #D0D0D0;
    font-size: 12px; 
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 800px) {
    
    #pledge_counrty {
        position: relative;
        z-index: 9999;
        padding: 9px 0 10.5px 6px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #pledge_counrty {
        padding: 9px 0 10px 6px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #pledge_counrty {
        margin-right: 30px;
        padding: 9.5px 0 10px 6px;
    }
}
@media screen and (min-width: 1025px) {
    
    #pledge_counrty {
        padding: 5px 0 8px 6px;
    }
}

#pledge_counrty::-webkit-scrollbar {
    border-radius: 6px;
    width: 12px;
    background-color: transparent;
}
#pledge_counrty::-webkit-scrollbar-button {
    display: none;
}
#pledge_counrty::-webkit-scrollbar-thumb {
    height: 40px;
    border-radius: 5px;
    background-color: transparent;
}

/* /// JS Error Alerts /// */

@media screen and (max-width: 960px) {    
    
    /* blue */
    
    #ValidFirstname,
    #ValidLastname,
    #ValidEmail,
    #ValidPostCode,
    #ValidPUsername,
    #ValidAge,
    #ValidintPGfirstname,
    #ValidintPGlastname,
    #ValidPGfirstname,
    #ValidPGlastname,
    #ValidPGEmail,    
    #ValidPGemail,
    #ValidPPostCode {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;       
        word-break: break-word;
    }
    #ValidDOB {
        line-height: 1.4;
        margin: 8px 2px 0 -20px;
        font-size: 12px;
        color: #0088FF;       
        word-break: break-word;
    }
    #ValidCountry,
    #ValidGenre {
        height: 15px;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;
        text-shadow: 0 0 0 #0088FF;
        word-break: break-word;
    }    
    #CAAValidEmail {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;       
        word-break: break-word;
    }
    #AREValidEmail {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;       
        word-break: break-word;
    }

    /* gold */
    
    #ValidFirstnameinfo,
    #ValidLastnameinfo,
    #ValidEmailinfo,
    #ValidPGEmailinfo,    
    #ValidPUsernameinfo,    
    #ValidCountryinfo,
    #ValidPostCodeinfo,
    #ValidPGemailinfo {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
    }
    #ValidDOBdayinfo,
    #ValidDOByearinfo {
        line-height: 1.4;
        margin: 8px 0 0 0;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
    }
    #CAAValidEmailinfo {
        line-height: 1.4;
        margin: 8px 0 0 0;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
    }    
    #AREValidEmailinfo {
        line-height: 1.4;
        margin: 8px 0 0 0;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
    }  

    /* red */
    
    #ValidFirstnameError,
    #ValidLastnameError,
    #ValidEmailError,
    #ValidPGEmailError,    
    #ValidPUsernameError,    
    #ValidCountryError,
    #ValidGenreError,
    #ValidDOBmonthError,
    #ValidDOBerror,
    #ValidintPGfirstnameError,
    #ValidintPGlastnameError,
    #ValidintPGEmailError,    
    #ValidPGfirstnameError,
    #ValidPGlastnameError,   
    #ValidPGemailError {
        margin: 8px 2px 0 0;
        color: #ff0000;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        word-break: break-word;
    }
    #ValidDOBdayError, 
    #ValidDOByearError {
        line-height: 1.4;
        margin: 8px 0 0 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff0000;
        text-align: center;
        word-break: break-word;
    }
    #ValidAgreeError {
        line-height: 1.4;
        margin: 0 2px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
    .ValidGoalAmtErrorHolder {
        height: 20px;
        margin: 0;
    }
    #ValidGoalAmtError {
        line-height: 1.4;
        margin: 8px 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
    }    
    .ValidGoalErrorHolder {
        height: 20px;
        margin: 2px 0 5px 0;
    }
    #ValidGoalError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
    }
    .ValidExtErrorHolder {
        height: 20px;
        margin: 30px 0 0 0;
    }
    #ValidExtError {
        line-height: 1.4;
        margin: 0 2px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
    .ValidBacExtErrorHolder {
        height: 20px;
        margin: 8px 0 0 1px;
        padding: 0;
    }    
    #ValidBacExtError {
        line-height: 1.4;
        margin: 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
    /*.ValidBacExtErrorHolder {
        height: 20px;
        margin: 0;
    }
    #ValidBacExtError {
        line-height: 1.4;
        margin: 16px 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
    }*/
    #VerifyEmailAlert {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }        
    #CAAValidEmailError {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
      
    #AREValidEmailError {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
}
@media screen and (min-width: 961px) {

    /* Blue */

    #ValidFirstname,
    #ValidLastname,
    #ValidEmail,
    #ValidPostCode,
    #ValidPUsername,
    #ValidAge,
    #ValidintPGfirstname,
    #ValidintPGlastname,
    #ValidPGfirstname,
    #ValidPGlastname,
    #ValidPGEmail,    
    #ValidPGemail,
    #ValidPPostCode {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;
        word-break: break-word;
    }
    #ValidDOB {
        line-height: 1.4;
        margin: 8px 2px 0 -34px;
        font-size: 12px;
        color: #0088FF;
        word-break: break-word;
    }
    #ValidCountry,
    #ValidGenre {
        height: 15px;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;
        /*text-shadow: 0 0 0 #0088FF;*/
        word-break: break-word;
    }
    #CAAValidEmail,
    #AREValidEmail {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;
        /*text-shadow: 0 0 0 #0088FF;*/
        word-break: break-word;
    } 

    /* Gold */

    #ValidFirstnameinfo,
    #ValidLastnameinfo,
    #ValidEmailinfo,
    #ValidPGEmailinfo,
    #ValidPUsernameinfo,    
    #ValidCountryinfo,
    #ValidPostCodeinfo,
    #ValidPGemailinfo {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
        text-align: justify;
    }    
    #ValidDOBdayinfo,
    #ValidDOByearinfo {
        line-height: 1.4;
        margin: 8px 0 0 0;
        font-size: 12px;
        color: #ff9900;       
        word-break: break-word;
    }
    #CAAValidEmailinfo,   
    #AREValidEmailinfo {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
    } 

    /* Red */

    #ValidFirstnameError,
    #ValidLastnameError,
    #ValidEmailError,
    #ValidPGEmailError,    
    #ValidPUsernameError,    
    #ValidCountryError,
    #ValidGenreError,
    #ValidDOBmonthError,
    #ValidDOBerror,
    #ValidintPGfirstnameError,
    #ValidintPGlastnameError,
    /*#ValidintPGEmailError,*/
    #ValidPGfirstnameError,
    #ValidPGlastnameError,
    #ValidPGemailError {
        line-height: 1.4;
        margin: 8px -20px 0 1px;
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    #ValidintPGEmailError {
        line-height: 1.4;
        margin: 8px -20px 0 1px;
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }   
    #ValidDOBdayError,
    #ValidDOByearError {
        line-height: 1.4;
        margin: 8px 0 0 0;
        font-size: 12px;
        color: #ff0000;     
        word-break: break-word;
        text-align: center;
    }
    #ValidAgreeError {
        line-height: 1.4;
        margin: 0 0 0 7px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
    .ValidGoalAmtErrorHolder {
        width: auto;
        height: 20px;
        margin: 0;
    }
    #ValidGoalAmtError {
        line-height: 1.4;
        margin: 8px 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
    }    
    .ValidGoalErrorHolder {
        height: 20px;
        margin: 2px 0 5px 0;
    }
    #ValidGoalError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
    }
    .ValidExtErrorHolder {
        height: 20px;
        margin: 30px 0 0 0;
    }
    #ValidExtError {
        line-height: 1.4;
        margin: 0 2px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
    .ValidBacExtErrorHolder {
        height: 20px;
        margin: 8px 0 0 1px;
        padding: 0;
    }    
    #ValidBacExtError {
        line-height: 1.4;
        margin: 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
    #VerifyEmailAlert {
        line-height: 1.4;
        margin: 8px -20px 0 1px;
        padding-right: 20px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
        text-align: justify;
    }  
    #CAAValidEmailError {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
    #AREValidEmailError {
        line-height: 1.4;
        margin: 8px 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
    }
}

/* /// PHP Error Alerts /// */

.RegoAlert {
    margin: -5px 0 10px 0;
    padding: 6px 10px 8px 10px;
    font-size: calc(9px + 0.3vw);   
    border: 2px solid red;
}
#regotriangle {
    margin: 0 10px -1px 0;
    font-size: 17px; 
}
.RegoAlertsHighlight {
    margin: -33px 0 0 0; 
    padding: 14px 10px 15px 10px;
    border: 2px solid #000; 
    border-radius: 6px; 
    background-color: rgba(255, 0, 0, 0.3); 
}
.RegoAlertCountryHL {
    margin: 7px 0 -40px 0; 
    padding: 14px 10px 15px 10px;
    border: 2px solid #000; 
    border-radius: 6px; 
    background-color: rgba(255, 0, 0, 0.3); 
}
.RegoAlertMonthHL {
    margin: 0 -2px -33px 0; 
    padding: 14px 10px 15px 10px;
    border: 2px solid #000; 
    border-radius: 6px; 
    background-color: rgba(255, 0, 0, 0.3); 
}

/* ////// END - PLEDGE SIGN ON PAGE/FORM ////// */

/* ============================================ */

/* ///////// PLEDGE SELECT PAGE/FORM ////////// */

/* // Error Alerts // */

.selectAmountAlert {
    margin: 5px 0 -5px 0; 
    padding: 6px 10px 8px 10px;
    font-size: calc(9px + 0.3vw);  
    border: 2px solid red;
}
#selectAmountTriangle {
    margin: 0 10px -1px 0;
    font-size: 17px; 
}
.SelAmtAlertHighlight {
    margin: -32px 0 0 0; 
    padding: 14px 10px 15px 10px;
    border: 2px solid #000; 
    border-radius: 6px; 
    background-color: rgba(255, 0, 0, 0.3); 
}
.AmtAlertHighlight {
    width: 60%;
    margin: -32px 0 0 0; 
    padding: 14px 10px 15px 10px;
    border: 2px solid #000; 
    border-radius: 6px; 
    background-color: rgba(255, 0, 0, 0.3); 
}

/* /////// END - PLEDGE SELECT PAGE/FORM ////// */

/* ============================================ */

/* //////////// STRIPE PAYMENT PAGE /////////// */

#stripePayContainer {
    margin: 0;
}
#stripePayContainerInner {
    margin: 3px 0 0 0; 
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#stripePaySpacer {
    margin: 0; 
    padding: 0;
}
#stripePayMain {
    margin: 0; 
    padding: 0;
    border-radius: 16px; 
    border: 2px solid #333; 
    /*background-color: #000;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.5); */
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#stripePaySpacerInner {
    margin: 0; 
    padding: 0;
}
#cardsContainerSmall {
    float: right;
    margin: 0; 
}
.Cards {
    width: auto; 
    margin: 0;
    border: 2px solid #666;
    border-radius: 6px; 
}
@media screen and (min-width: 320px) and (max-width: 359px) {
    
    #stripePayContainer {
        padding: 0 10px 0 10px;
    }    
    #cardsContainerSmall {
        padding: 15px 0 0 0;
    }
    .Cards {
        height: 27px;
    }
}
@media screen and (min-width: 360px) and (max-width: 374px) {
    
    #stripePayContainer {
        padding: 0 10px 0 10px;
    }    
    #cardsContainerSmall { 
        padding: 18px 0 0 0;
    }
    .Cards {
        height: 30px;
    }
}
@media screen and (min-width: 375px) and (max-width: 410px) {
    
    #stripePayContainer {
        padding: 0 10px 0 10px;
    }    
    #cardsContainerSmall {
        padding: 19px 0 0 0;
    }
    .Cards {
        height: 32px; 
    }
}
@media screen and (min-width: 411px) and (max-width: 413px) {
    
    #stripePayContainer {
        padding: 0 10px 0 10px;
    }    
    #cardsContainerSmall {
        padding: 21px 0 0 0;
    }
    .Cards {
        height: 33px;
    }
}
@media screen and (min-width: 414px) and (max-width: 479px) {
    
    #stripePayContainer {
        padding: 0 10px 0 10px;
    }    
    #cardsContainerSmall {
        padding: 21px 0 0 0;
    }
    .Cards {
        height: 35px; 
    }
}
@media screen and (min-width: 480px) and (max-width: 599px) {
    
    #stripePayContainer {
        padding: 0 40px 0 40px;
    }    
    #cardsContainerSmall {
        padding: 21px 0 0 0;
    }
    .Cards {
        height: 35px;
    }
}
@media screen and (min-width: 600px) and (max-width: 639px) {
    
    #stripePayContainer {
        padding: 0 100px 0 120px;
    }    
    #cardsContainerSmall {
        padding: 20px 0 0 0;
    }
    .Cards {
        height: 32px;
    }
}
@media screen and (min-width: 640px) and (max-width: 730px) {
    
    #stripePayContainer {
        padding: 0 110px 0 130px;
    }    
    #cardsContainerSmall {
        padding: 21px 0 0 0;
    }
    .Cards {
        height: 35px;
    }
}
@media screen and (min-width: 731px) and (max-width: 731px) {
    
    #stripePayContainer {
        padding: 0 165px 0 165px;
    }    
    #cardsContainerSmall {
        padding: 21px 0 0 0;
    }
    .Cards {
        height: 35px;
    }
}
@media screen and (min-width: 732px) and (max-width: 767px) {
    
    #stripePayContainer {
        padding: 0 10px 0 10px;
    }    
    #cardsContainerSmall {
        padding: 21px 0 0 0;
    }
    .Cards {
        height: 35px; 
    }
}

.PayWithText {
    font-size: 13.75px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #avatarMastheadContainerLG {
        display: none;
    }       
    #avatarMastheadContainerSM {
        margin: 0; 
        padding: 0;
    }
    .avatarMastheadPledgeTo {
        width: 100%;
        margin: 0;
        padding: 0;
        color: #FFF;
        text-align: center;
    }
    #stripePayPanel {
        margin: 0; 
        padding: 20px 15px 15px 15px;
    }
    .PledgelogoContainerSP {}
    #pledgeToPledgstaLogo {
        height: auto; 
        width: 150px;
        margin: -5px 0 15px 0;
    }
    .PledgenameInfoSP {
        margin: 42px 0 15px 0;
    }    
    .pledgeToProfileAvatarSP {
        width: 80px;
        height: 80px;
        margin: 0 5px 5px 0;
        border: 2px solid #444;
        border-radius: 8px;
    }
    #pledgeToArtistName {
        width: 100%;
        margin: 15px 0 0 0;
        padding: 0;
        font-size: 20px;
        font-weight: 600;
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
        text-align: center;
    }
    .pledgeToText {
        width: 90%;
        margin: 0; 
        padding: 0; 
        color: #fff; 
        font-style: italic; 
        font-size: 12px; 
        background-color: transparent; 
        border: none;
    }
    .PayWithText {
        margin: -10px 0 -10px -13px;
    }
    #pledgeToTextSP {
        margin: 10px 0 0 1px;
        padding-top: 2px;
        color: #666;
        font-size: 18px;
        font-weight: 600;
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);        
    }
    .LogoCardRow {
        display: inline-block;
        margin: 10px 0 33px 0; 
    }
    .StripeLogo {
        height: 75px; 
        width: auto; 
        margin-left: -54px;
/*        height: auto; 
        width: 45%; 
        margin: 0 0 0 -30px;*/ 
        padding: 0;
    }  
    .StripeLogoSmall {
        height: auto; 
        width: 45%; 
        margin: 0 0 0 -30px; 
        padding: 0;
    }
    .StripeLogoMicro {
        height: auto; 
        width: 40px; 
        margin: 0; 
        padding: 0;
        opacity: 0.6;
    }
    #cardsContainerBig {
        display: none;
    }
    #amountcheckboxContainer {
        height: 51px; 
        margin: 3px 0 0 15px;
/*        margin: 0 0 20px 0;*/
        padding: 11px 0 0 0;
        text-align: left;
    }
}
@media screen and (min-width: 768px) {
    
    #avatarMastheadContainerLG {
        margin: 0;
        padding: 0;
    }     
    #avatarMastheadContainerSM {
        display: none;
    }
    .avatarMastheadPledgeTo {
        display: flex;
        width: 100%;
        min-width: 240px;
        margin: 0;
        padding: 0;
        text-align: left;
        color: #FFF;
    }            
    .pledgeToProfileAvatarSP {
        float: left;
        width: 100px;
        height: 100px;
        margin: 0 10px 5px 0;
        padding: 0;
        border: 2px solid #444;
        border-radius: 8px;
    }
    #pledgeToPledgstaLogo {
        height: 40px; 
        width: auto;
        margin: 0;
        padding: 0;
    }
    .PledgenameInfoSP {
        margin: 42px 0 15px 0;
        padding: 0;        
        text-align: left;
    }
    .pledgeToText {
        width: 90%;
        margin: 0; 
        padding: 0; 
        color: #fff; 
        font-style: italic; 
        font-size: 14px; 
        background-color: transparent; 
        border: none;
    }
    .PayWithText {
        float: left;
        margin: -10px 0 -10px 20px;
    }    
    #pledgeToTextSP {
        margin: 10px 0 0 1px;
        padding-top: 2px;
        color: #666;
        font-size: 18px;
        font-weight: 600;
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);        
    }
    #pledgeToArtistName {
        margin-top: 0;
        font-weight: 600;
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {

    #stripePayContainer {
        margin: 0; 
        padding: 0 160px 0 180px;
    }
    #stripePayPanel {
        margin: 0; 
        padding: 20px 15px 15px 15px;
    }      
    .LogoCardRow {
        display: inline-block;
        margin: 10px 0 30px 0; 
    }
    .StripeLogo {
        height: 75px; 
        width: auto; 
        margin-left: -54px;
/*        height: auto; 
        width: 45%; 
        margin: 0 0 0 -20px; */
        padding: 0;
    }
    .StripeLogoSmall {
        height: auto; 
        width: 45%; 
        margin: 0 0 0 -20px; 
        padding: 0;
    }
    .StripeLogoMicro {
        height: auto; 
        width: 40px; 
        margin: 0; 
        padding: 0;
        opacity: 0.6;
    }
    #cardsContainerSmall {
        float: right;
        margin: 22px 0 0 0; 
        padding: 0;
    }
    #cardsContainerBig {
        display: none;
    }
    .Cards {
        height: 35px; 
        width: auto; 
        margin: 0;
        border: 2px solid #666;
        border-radius: 6px; 
    }
    #amountcheckboxContainer {
        height: 51px; 
        margin: 3px 0 0 15px;
/*        margin: 0 0 30px 0;*/
        padding: 10px 0 0 0;
        text-align: left;
    }
}
@media screen and (min-width: 854px) and (max-width: 854px) {

    #stripePayContainer {
        padding: 0 135px 0 215px;
    }
}
@media screen and (min-width: 855px) and (max-width: 1024px) {

    #stripePayContainer {
        padding: 0;
    }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {

    #stripePayPanel {
        margin: 0; 
        padding: 20px 15px 15px 15px;
    }      
    .LogoCardRow {
        display: inline-block;
        margin: 10px 0 30px 0; 
    }
    .StripeLogo {
        height: 75px; 
        width: auto; 
        margin-left: -54px;
/*        height: auto; 
        width: 45%; 
        margin: 0 0 0 -20px; */
        padding: 0;
    }   
    .StripeLogoSmall {
        height: auto; 
        width: 45%; 
        margin: 0 0 0 -20px; 
        padding: 0;
    }
    .StripeLogoMicro {
        height: auto; 
        width: 40px; 
        margin: 0; 
        padding: 0;
        opacity: 0.6;
    }    
    #cardsContainerSmall {
        float: right;
        margin: 22px 0 0 0; 
        padding: 0;
    }
    #cardsContainerBig {
        display: none;
    }
    .Cards {
        height: 35px; 
        width: auto; 
        margin: 0;
        border: 2px solid #666;
        border-radius: 6px; 
    }
    #amountcheckboxContainer {
        height: 51px; 
        margin: 3px 0 0 15px;
/*        margin: 0 0 30px 0;*/
        padding: 10px 0 0 0; 
        text-align: left;
    }
}
@media screen and (min-width: 1025px) {
    
    #stripePayContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #stripePayPanel {
        margin: 0; 
        padding: 20px 30px 0 30px;
    }
    .LogoCardRow {
        margin: 5px 0 0 0; 
    }     
    .StripeLogo {
        height: 75px; 
        width: auto; 
        margin-left: -54px;
        padding: 0;
    }    
    .StripeLogoSmall {
        height: auto; 
        width: 13%; 
        margin: 0 0 0 -20px; 
        padding: 0;
    }
    .StripeLogoMicro { 
        height: auto; 
        width: 40px; 
        margin: 0; 
        padding: 0;
        opacity: 0.6;
    }
    #cardsContainerSmall {
        display: none;
    }
    #cardsContainerBig {
        float: right;
        margin: 23px 0 0 0; 
        padding: 0;
    }
    .Cards {
        height: 37px; 
        width: auto; 
        margin: 0;
        border: 2px solid #666;
        border-radius: 6px; 
    }
    #amountcheckboxContainer {
        height: 49px; 
        margin: 3px 0 0 15px;
/*        margin: 0 0 10px 0;*/
        padding: 10px 0 0 0;
        text-align: left;
    }
}

.cardErrorAlert {
    margin: -5px 0 11px 0;
    padding: 11px 10px 10px 10px; 
    color: #ff0000; 
    font-size: calc(9px + 0.3vw); 
    text-align: center; 
    border-radius: 6px; 
    background-color: #111;
}
.cardSuccessAlert {
    margin: -18px 0 0 -1.5px; 
    padding: 11px 0 10px 0; 
    color: #0088FF; 
    font-size: calc(9px + 0.3vw); 
    border-radius: 6px; 
    background-color: #111;
}

/* //// Stripe Payment Button  //// */

#paymentButtHolder {
    width: 100%;
}
.paymentButton {
    width: 100%;
    margin: 0;
    padding: 10px 60px 10px 59px;    
    color: #ff9900;   
    text-align: center;
    font-size: 14px;
    transition: all 0.3s linear;
}
.paymentButton:hover {
    cursor: pointer;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    #paymentButtHolder {
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .paymentButton {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .paymentButton:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;     
    }
}
@media screen and (min-width: 1025px) {

    #paymentButtHolder {
        margin: 5px 0 25px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .paymentButton {
        border-radius: 10px;
        border: 2px solid #333; 
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .paymentButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 153, 0, 0.7);
    }
}

#stripeFormContainer {
    margin: 0; 
    padding: 0;
}
.pledgstaInfoSP {
    margin-bottom: 15px; 
    padding: 0; 
    color: #999; 
    text-align: center; 
    font-size: 12px;
}
#cardsHolderSP {
    margin-top: 0; 
    margin-bottom: 12px; 
    padding: 0; 
    border-radius: 10px; 
    border: 2px solid #333;
}
.cardElementHolderSP {
    margin: 0; 
    padding: 0; 
    text-align: left;
}
.formRow {
    margin-bottom: 0;
}
.confirmSubInfoSP {
    margin: 0 0 15px 0; 
    padding: 0; 
    color: #999; 
    text-align: justify; 
    font-size: 10px;
}
.footerContainerSP {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
.footerContainerOuterSP {
    display: inline-flex; 
    color: #999;
}
.stripeLogoHolderSP {
    display: inline-flex; 
    color: #999;
}
.poweredByTextSP {
    margin-top: 1.5px; 
    color: #999; 
    font-size: 11px;
}
.StripeLogoMicro { 
    height: auto; 
    width: 40px; 
    margin: 0; 
    padding: 0;
    opacity: 0.6;
}
.poweredByTextSP {
    margin-top: 1.5px; 
    color: #999; 
    font-size: 11px;
}
.dividerSP {
    margin: 0 25px 0 20px;
}
.termCondSP {
    display: inline-flex; 
    margin: 0 0 15px 0;
}
.termsSP {
    color: #999; 
    font-size: 11px;
}
.privacySP {
    margin: 0 0 0 20px; 
    color: #999; 
    font-size: 11px;
}

/* confim alert */

#confirmErrorAlert {
    margin: 0 26px 0 26px;
}
.confirmError {
    margin: 15px 0 5px 0;
    padding: 0 10px 10px 10px;
    color: red; 
    font-size: calc(10px + 0.3vw); 
    text-align: center;
    border-radius: 10px; 
    border: 2px solid red;
}
#confirmErrorTriangle {
    font-size: 18px; 
    margin-bottom: 5px; 
    margin-top: 12px;
}

/* end confim alert */

#checkboxRow {
    margin: 0 0 0 -10px; 
    padding: 0;
}
#checkboxRowPE {
    margin: 0 0 0 -10px; 
    padding: 0;
    text-align: center;
}
#creditlabel {
    margin-left: 2px;
    font-size: calc(10px + 0.3vw);
}
.cardErrors {
    height: 20px;
    margin: 6px 0 0 0; 
    color: red;
    font-size: 12px;
}

/* /// Stripe Element Shared with Update card page /// */

/*.StripeElement {
    height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid #333;
    background-color: #0d0d0d;
    transition: all 150ms linear;
}
.StripeElement--focus {
    border: 2px solid #444;
}
.StripeElement--invalid {
    border: 2px solid #ff0000;
}
.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}*/

@media screen and (min-width: 320px) and (max-width: 1024px) {    

    .StripeElement {
        height: 42px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #000;
        transition: all 0.3s linear;
    /*    transition: all 150ms linear;*/
    }
    .StripeElement--focus {
        border: 2px solid #333;
    }
    .StripeElement--invalid {
        border: 2px solid #ff0000;
    }
    .StripeElement--webkit-autofill {
        background-color: #ff9900 !important;
    /*    background-color: #fefde5 !important;*/
    }
}
@media screen and (min-width: 1025px) {

    .StripeElement {
        height: 42px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    /*    transition: all 150ms linear;*/
    }
    .StripeElement--focus {
        border: 2px solid #444;
    }
    .StripeElement--invalid {
        border: 2px solid #ff0000;
    }
    .StripeElement--webkit-autofill {
        background-color: #ff9900 !important;
    /*    background-color: #fefde5 !important;*/
    }
}

/* ////////// END - STRIPE PAYMENT PAGE ////////// */

/* =============================================== */

/* ////////// START - ARTIST-REGO-PAGE /////////// */

#artistSignOncontainerOuter {
    margin: 0;
    padding: 0;
}

#ArtistRegoMainContainer {
    margin-top: 10px; 
    border-radius: 16px;
}

/* /// Small Screens /// */

@media screen and (min-width: 320px) and (max-width: 374px) {
    
    #ArtistRegoMainContainer {
        margin: 0 4px 10px 4px;
        padding: 0 10px 0 10px;
/*        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;*/
    }
}
@media screen and (min-width: 375px) and (max-width: 414px) {
    
    #ArtistRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 0 20px 0 20px;
/*        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;*/
    }
}
@media screen and (min-width: 415px) and (max-width: 599px) {
    
    #ArtistRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 0 20px 0 20px;
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;    
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #ArtistRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 0 20px 0 20px;
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}

/* /// Large Screens /// */

@media screen and (min-width: 768px) and (max-width: 799px) {
  
    #ArtistRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {
    
    #ArtistRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) { 

    #ArtistRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) { 

    #ArtistRegoMainContainer {
        margin: 0 125px 10px 100px;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {    

    #artistSignOncontainerOuter {
        width: 64%;
    }
    #ArtistRegoMainContainer {
        width: 100%;
        margin: 0;
        padding: 20px 70px 25px 70px;
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #0a0a0a;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) {    

    #artistSignOncontainerOuter {
        width: 53%;
    }
    #ArtistRegoMainContainer {
        width: 100%;
        margin: 0;
        padding: 20px 50px 25px 50px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #111;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1180px) {    

    #artistSignOncontainerOuter {
        width: 51.75%;
    }
    #ArtistRegoMainContainer {
        width: 100%;
        margin: 0;
        padding: 20px 50px 25px 50px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #111;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;/**/
    }
}
@media screen and (min-width: 1181px) {

    #ArtistRegoMainContainer {
        margin: 0 0 10px 0;
        padding: 20px 40px 25px 40px;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #111;
        box-shadow:  9px 9px 14px #000000, 
                    -4px -4px 14px #1b1b1b;
    }
}

#artistSignOncontainer {
    margin-bottom: 100px;
}

/* /// Small Screens /// */

@media screen and (min-width: 320px) and (max-width: 374px) {
    
    #artistSignOncontainer {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 375px) and (max-width: 414px) {
    
    #artistSignOncontainer {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 415px) and (max-width: 450px) {
    
    #artistSignOncontainer {
        margin: 0 6% 0 6%;
    }
}
@media screen and (min-width: 451px) and (max-width: 500px) {

    #artistSignOncontainer {
        margin: 0 10% 0 10%;
    }
}
@media screen and (min-width: 501px) and (max-width: 550px) {

    #artistSignOncontainer {
        margin: 0 12% 0 12%;
    }
}
@media screen and (min-width: 551px) and (max-width: 600px) {

    #artistSignOncontainer {
        margin: 0 14% 0 14%;
    }
}
@media screen and (min-width: 601px) and (max-width: 650px) {

    #artistSignOncontainer {
        margin: 0 16% 0 16%;
    }
}
@media screen and (min-width: 651px) and (max-width: 700px) {

    #artistSignOncontainer {
        margin: 0 18% 0 18%;
    }
}
@media screen and (min-width: 701px) and (max-width: 767px) {

    #artistSignOncontainer {
        margin: 0 20% 0 20%;
    }
}

/* /// Large Screens /// */

@media screen and (min-width: 768px) and (max-width: 800px) {

    #artistSignOncontainer {  
        margin-left: auto; 
        margin-right: auto; 
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) { 

    #artistSignOncontainer {
        margin-left: auto; 
        margin-right: auto; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {    
    
    #artistSignOncontainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}
@media screen and (min-width: 1181px) {

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

#artistRegoTitleContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.85);
    background: linear-gradient(145deg, #191919 35%, #111111) border-box; 
}
#artistRegoTitle { 
    color: #D0D0D0;
    font-style: italic;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #artistRegoTitleContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #artistRegoTitle {
        margin: 0;
        padding: 30px 0 0 0;
        font-size: 23px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #artistRegoTitleContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #artistRegoTitle {
        margin: 0;
        padding: 30px 0 0 0;
        font-size: 28px;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #artistRegoTitleContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #artistRegoTitle {
        margin: 0;
        padding: 23px 0 0 0;
        font-size: 32px;
    }
}
@media screen and (min-width: 823px) and (max-width: 1024px) {
          
    #artistRegoTitleContainer {
        height: 100px;
        margin: 35px 0 20px 0;
        padding: 0 8px 0 0;
        text-align: center;
    }
    #artistRegoTitle {
        margin: 0;
        padding: 23px 0 0 0;
        font-size: 32px;
    }
}
@media screen and (min-width: 1025px) {
        
    #artistRegoTitleContainer {
        display: flex;
        height: 110px;
        margin: 40px 0 36px 0;
        padding: 0 0 0 0;
    }
    #artistRegoTitle {
        position: relative;
        margin: 12px 0 0 0;     
        font-size: 32px;
        z-index: 6 !important;
    }
}

#columnControl {
    margin: 0; 
    padding: 0;
}
.titleHolder {
    margin: 5px 0 20px 0; 
    padding: 10px;
}
.titleHolder img {
    margin: 0 0 0 5px; 
    padding: 0; 
    height: 40px; 
    width: 200px;
}
.titleHolder p {
    margin: 10px 0 0 85px; 
    padding: 0; 
    color: #fff; 
    font-style: italic; 
    font-size: calc(16px + 0.3vw); 
    background-color: transparent; 
    border: none;
}

#ARFDOBLabelHolder {
    margin: 13px 0 0 0; 
    padding: 0;  
}
#ArtistDOBday { 
    padding: 6px 4px 7px 8px;
    background: none;
}
#ArtistDOBday::-webkit-input-placeholder {
   font-style: normal;
}
#ArtistDOByear {
    padding: 6px 4px 7px 7px;
    background: none;
}
#ArtistDOByear::-webkit-input-placeholder {
   font-style: normal;
}
#ARFpasswordHolder {
    width: 100%; 
    margin: 0; 
    padding: 0; 
    display: inline-flex;
}
#ARprofileTitleOuter {
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #ArtistRegoUsername {
        height: 200px; 
        margin: 0;
    }
    #ArtistRegoTitleName {
        height: 165px;
        margin: 0;
    }
    #ArtistRegoPassword {
        position: relative;
        height: 185px;
        margin: 0;
        z-index: 1000;
    }    
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #ArtistRegoUsername {
        height: 195px; 
        margin: 0;
    }
    #ArtistRegoTitleName {
        height: 165px;
        margin: 0;
    }
    #ArtistRegoPassword {
        position: relative;
        height: 185px;
        margin: 0;
        z-index: 1000;
    } 
}
@media screen and (min-width: 768px) and (max-width: 1024px) {

    #ArtistRegoUsername {
        height: 195px; 
        margin: 0;
        padding: 0; 
    }
    #ArtistRegoTitleName {
        height: 60px; 
        margin-bottom: 100px;
        padding: 0;
    }
    #ArtistRegoPassword {
        height: 120px;
        margin: 5px 0 68px 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {
    
    #ArtistRegoUsername { 
        height: 195px;
        margin: 4px 0 0 0;
        padding: 0; 
    }
    #ArtistRegoTitleName {
        height: 145px;
        margin: 0;
        padding: 0;
    }
    #ArtistRegoPassword {
        height: 145px;
        margin: 0;
        padding: 0;
    }
}


@media screen and (min-width: 320px) and (max-width: 599px) {

    #ArtistRegoURLcontainer {
        margin: 20px 0 0 0; 
        padding: 0;
    }
    #ArtistRegoURLTC {
        display: inline-flex;
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #ArtistRegoURL {
        margin: 0 4px 0 0; 
        padding: 3px 0;
        color: #888;
        font-size: 14px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #ArtistRegoURLcontainer {
        margin: 0; 
        padding: 0;
    }       
    #ArtistRegoURLTC {
        display: inline-flex;
        width: 100%;
        margin-top: 20px; 
        padding: 0;
    }
    #ArtistRegoURL {
        margin: 0 4px 0 0; 
        padding: 3px 0;
        color: #888;
        font-size: 14px;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {    
    
    #ArtistRegoURLcontainer {
        margin: 0; 
        padding: 0;
    }   
    #ArtistRegoURLTC {
        display: inline-flex;
        margin-top: 10px; 
        padding: 0;
    }
    #ArtistRegoURL {
        margin: 16px 4px 0 0; 
        padding: 0;
        color: #888;
        font-size: 14px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {    
    
    #ArtistRegoURLcontainer {
        margin: 0; 
        padding: 0;
    }
    #ArtistRegoURLTC {
        display: inline-flex;
        margin-top: 10px; 
        padding: 0;
    }
    #ArtistRegoURL {
        margin: 16px 4px 0 0; 
        padding: 0;
        color: #888;
        font-size: 14px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {    

    #ArtistRegoURLcontainer {
        margin: -4px 0 0 0; 
        padding: 0;
    }
    #ArtistRegoURLTC {
        display: inline-flex;
        margin: 0;
        padding: 0;
    }
    #ArtistRegoURL {
        margin: 16px 12px 0 0;
        padding: 0;
        color: #888;
        font-size: 14px;
    }
}
@media screen and (min-width: 1025px) { 

    #ArtistRegoURLcontainer {
        margin: 0; 
        padding: 0;
    }
    #ArtistRegoURLTC {
        display: inline-flex;
        margin: 0;
        padding: 0;
    }
    #ArtistRegoURL {
        margin: 13px 4px 0 0;
        padding: 0;
        color: #888;
        font-size: 14px;
    }
}

/* /////////////////////////// */

/* Artist rego form containers */

/* // month // */

#ArtistDOBmonth { /* select */
    scrollbar-width: none;
    color: #777777;
}
#ArtistDOBmonth option { /* option */
    margin-right: 6px;
    padding: 3px 5px 4px 4.5px;
    color: #D0D0D0;
    cursor: pointer;
    border-radius: 4px;
}

@media screen and (min-width: 320px) and (max-width: 341px) { 

    #ArtistDOBmonth {
        width: 110px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }  
    #ArtistDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 342px) and (max-width: 599px) { 

    #ArtistDOBmonth {
        width: 110px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }  
    #ArtistDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) { 

    #ArtistDOBmonth {
        width: 110px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }  
    #ArtistDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #ArtistDOBmonth {
        width: 118px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #ArtistDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {    
    
    #ArtistDOBmonth {
        width: 118px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #ArtistDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #ArtistDOBmonth {
        width: 120px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }
    #ArtistDOBmonth option {
        font-size: 13px;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #ArtistDOBmonth {
        width: 125px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }    
    #ArtistDOBmonth option {
        font-size: 13px;            
    }
}
@media screen and (min-width: 1025px) {
    
    #ArtistDOBmonth {
        width: 118px;
        margin: 0;
        padding: 6px 5px 7px 6px;
    }
    #ArtistDOBmonth option {
        margin-right: 1px;
        font-size: 12px;
    }
}


@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #formContainer {
        margin: -10px 0 20px 0;
        padding: 0;
    }    
    #errorContainerA {
        margin: 0;
        padding: 0 15px 0 15px;       
    }
    #ArtistRego {
        position: relative;
        height: 65px;
        margin: 0 0 35px 0;
        z-index: 1000;
    }
    #ArtistRegoEmail {
        height: 87px;
        margin: 0;
    }
    #ArtistRegoPGEmail {
        height: 85px;
        margin: 0 0 20px 0;
        padding: 0;
    } 
    #ArtistRegoPostCode {
        height: 65px;
        margin: 0 0 22px 0;
    }
    #ArtistRegoPostCodeInner {
        width: 110px;
        margin: 0; 
        padding: 0;    
    }   
    #ARFURLN {
        width: 100%;
        margin: -15px 0 5px 0; 
        padding: 0;
    }
    #ArtistDOBrow {
        justify-content: center;
        margin: 0;
        padding: 0; 
    }
    #ArtistRegodayOB {
        width: 50px;
        padding: 0 5px 0 0; 
        text-align: center;
    }
    #DropDownContainerArtistRegoMonth {
        position: relative;
        z-index: 3333;        
        margin-top: 7px;
        padding: 0;    
    }
    #ArtistRegoyearOB {
        max-width: 49px;
        margin: 0 0 0 5px;
        padding: 0; 
        text-align: center;    
    }
    #CountryArtistRegoLabelHolder {
        margin-top: 0;
        margin-bottom: 10px;
        padding: 0;
    }
    #GenreArtistRegoLabelHolder {
        margin-top: 0;
        margin-bottom: 10px;
        padding: 0;
    }
    .ArtistRegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .ArtistU18RegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }    
    #Over18ArtistRegoLabelHolder {
        margin-top: -60px;
        margin-bottom: 40px;
    }
}
@media screen and (min-width: 768px) {
    
    #errorContainerA {
        margin: 0;
        padding: 0;
    }
    #ArtistDOBrow {
        justify-content: center;
        margin: 0;
        padding: 0; 
    }
    #DropDownContainerArtistRegoMonth {
        position: relative;
        z-index: 3333;
        margin: 7px 0 0 0;
        padding: 0;
        color: #888;
    }
}

/* /////////////////////////////////////////////////////// */

@media screen and (min-width: 768px) and (max-width: 800px) {

    #ArtistRegoEmail {
        position: relative;
        z-index: 1000;
        height: 87px;
        margin: 0;
        padding: 0;
    }
    #ArtistRegoPGEmail {
        min-height: 85px;
        margin: 0 0 20px 0;
        padding: 0;         
    }
    #ArtistRegoPostCodeInner {
        width: 110px;
        margin: 0; 
        padding: 0;    
    }
    #ARFURLN {
        width: 159px;
        margin: -2px 0 5px 0; 
        padding: 0;
    }
    #ArtistRegodayOB {
        width: 50px;
        padding: 0 5px 0 0; 
        text-align: center;
    }
    #ArtistRegoyearOB {
        max-width: 49px;
        margin: 0 0 0 5px;
        padding: 0; 
        text-align: center;    
    }
    .ArtistRegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .ArtistU18RegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }       
}
@media screen and (min-width: 801px) and (max-width: 1023px) { 

    #ArtistRegoEmail {
        position: relative;
        height: 87px;
        margin: 0;
        padding: 0;
        z-index: 1000;      
    } 
    #ArtistRegoPGEmail { 
        position: relative;
        height: 85px;
        margin: 0 0 20px 0;
        padding: 0;
        z-index: 1000;
    }
    #ArtistRegoPostCodeInner {
        width: 110px;
        margin: 0; 
        padding: 0;   
    }
    #ARFURLN {
        width: 159px;
        margin: -2px 0 5px 0; 
        padding: 0;
    }
    .ArtistRegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .ArtistU18RegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }       
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {    
    
    #ArtistRegoEmail {
        position: relative;
        height: 80px;
        margin: 0 0 15px 0;
        padding: 0;
        z-index: 1000;      
    } 
    #ArtistRegoPGEmail { 
        position: relative;
        height: 85px;
        margin: 0 0 20px 0;
        padding: 0;
        z-index: 1000;
    }

    #ArtistRegoPostCodeInner {
        float: right; 
        margin: 0; 
        padding: 0;    
    }
    #ARFURLN {
        width: 157px;
        margin: -2px 0 5px -10px; 
        padding: 0;
    }
    #ArtistRegodayOB {
        width: 62px;
        padding: 0 5px 0 0; 
        text-align: center;
    }
    #ArtistRegoyearOB { 
        width: 62px;
        margin: 0 0 0 2px;
        padding: 0;
    }
    .ArtistRegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .ArtistU18RegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }       
}
@media screen and (min-width: 1025px) {

    #formContainer {
        margin: -10px 0 0 0;
    }    
    #ArtistRego {
        position: relative;
        height: 65px;
        margin: 0;
        padding: 0;        
        z-index: 1000;
    }
    #ArtistRegoEmail {
        position: relative;
        height: 85px;
        margin: 0 0 35px 0;
        padding: 0;
        z-index: 1000;      
    }    
    #ArtistRegoPGEmail {
        position: relative;
        height: 85px;
        margin: 0 0 20px 0;
        padding: 0;
        z-index: 1000;
    }    
    #ArtistRegoPostCode {
        position: relative;
        height: 65px;
        margin: -55px 0 0 0;
        padding: 0;        
        z-index: 1000;
    }
    #ArtistRegoPostCodeInner {
        float: right;
        margin: 0;
        padding: 0;
    }
    #ARFURLN {
        margin: -2px 0 5px 0; 
        padding: 0;
    }
    #ArtistRegodayOB {
        max-width: 50px;
        padding: 0 5px 0 0;
        color: #D0D0D0;
        text-align: center;
    }
    #ArtistRegoyearOB {
        max-width: 49px;
        margin: 0 0 0 5px;
        font-weight: 500;
        padding: 0;
    }
    #Over18ArtistRegoLabelHolder {
        margin-top: -60px;
        margin-bottom: 40px;
        padding: 0;
    }
    #CountryArtistRegoLabelHolder {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    }    
    #GenreArtistRegoLabelHolder {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    }
    .ArtistRegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
    .ArtistU18RegoLabel {
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }
}



/* End - Artist rego form containers */

/* ///////////////////////////////// */

/* Country Genre main Containers */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #DropDownContainerAR {
        margin: 0 15px 0 15px;
        padding: 0;
    } 
    #ArtistRegoCountry {
        position: relative;
        z-index: 2222;  
        height: 70px;
        margin: 0 0 80px 0;
        padding: 0;
    }
    #ArtistRegoGenre {
        position: relative;
        z-index: 1000;
        height: 70px;
        margin: 0 0 60px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #DropDownContainerAR {
        height: 40px;
        margin: 0;
        padding: 0;        
    }
    #DropDownContainerAR option {
        cursor: pointer;
    }
    #ArtistRegoCountry {
         position: relative;
        z-index: 2222;  
        height: 70px;
        margin: 0 0 100px 0;
        padding: 0;
    }
    #ArtistRegoGenre {
        position: relative;
        z-index: 1000;
        height: 70px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #DropDownContainerAR {
        height: 40px;
        margin: 0;
        padding: 0;        
    }
    #DropDownContainerAR option {
        cursor: pointer;
    }
    #ArtistRegoCountry {
        margin: 15px 0 5px 0;
        padding: 0 25px 0 0;
    } 
    #ArtistRegoGenre {
        margin: 15px 0 5px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {
    
    #DropDownContainerAR {
        height: 110px;
        margin: 0;
        padding: 0;        
    }
    #DropDownContainerAR option {
        cursor: pointer;
    }
    #ArtistRegoCountry {
        margin: 5px 0 0 0;
        padding: 0 30px 0 0;
    }
    #ArtistRegoGenre {
        margin: 5px 0 0 0; 
        padding: 0;
    }
}

/* End - Country Genre main Containers */

/* /////////////////////////////////// */

/* Info Containers */

.URLInfo,
.ARprofileTitleInfo,
.passwordInfo ,
.Under18Info,
.CountryInfo,
.GenreInfo,
.PorGemailInfo {       
    color: #888; 
    font-size: 12px;  
    line-height: 1.4;        
    word-break: break-word; 
    text-align: justify;
    border: none;
    background: none;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    .URLInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    }
    .ARprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    }
    .passwordInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 5px 0 0;
    }    
    .Under18Info {
        margin: 15px 0 10px 0;
        padding: 0 5px 0 0;
    }
    .CountryInfo {
        margin: 5px 0 0 0;
        padding: 0 5px 0 0;
    }
    .GenreInfo {
        margin: 5px 0 10px 0;
        padding: 0 5px 0 0;
    }
    .PorGemailInfo {        
        margin: 10px 0 45px 0;
        padding: 0 5px 0 0; 
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    .URLInfo {
        margin: 5px 0 10px 0; 
        padding: 0 5px 0 0;
    }
    .ARprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    }
    .passwordInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 5px 0 0;        
    }
    .CountryInfo {
        margin: 5px 0 0 0;
        padding: 0 5px 0 0;        
    }
    .GenreInfo {
        margin: 5px 0 10px 0;
        padding: 0 5px 0 0;       
    }  
    .Under18Info {
        margin: 5px 0 10px 0; 
        padding: 0 5px 0 0;        
    }    
    .PorGemailInfo {        
        margin: 10px 0 45px 0;
        padding: 0 5px 0 0; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { 

    .URLInfo {        
        margin: 10px 0 0 0; 
        padding: 0 35px 0 0;
    }
    .ARprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 35px 0 0;
    }
    .passwordInfo {
        margin: 10px 0 10px 0; 
        padding: 0 35px 0 0;
    } 
    .CountryInfo {
        margin: 5px 0 10px 0; 
        padding: 0 35px 0 0;
    } 
    .GenreInfo {
        margin: 5px 0 10px 0; 
        padding: 0 35px 0 0;
    }  
    .Under18Info {
        margin: -90px 0 10px 0; 
        padding: 0 27px 0 0;
    }
    .PorGemailInfo {
        margin: 10px 0 45px 0;
        padding: 0 40px 0 0;            
    }
}
@media screen and (min-width: 1025px) { 

    .URLInfo {        
        margin: 10px 0 0 0; 
        padding: 0 35px 0 0;
    }
    .ARprofileTitleInfo {       
        margin: 10px 0 0 0; 
        padding: 0 35px 0 0;
    }
    .passwordInfo {        
        margin: 10px 0 10px 0; 
        padding: 0 35px 0 0;
    }
    .CountryInfo {
        margin: 15px 0 10px 0; 
        padding: 0 2px 0 0; 
    }
    .GenreInfo {
        margin: 15px 0 10px 0; 
        padding: 0 25px 0 0; 
    }    
    .Under18Info {        
        margin: 15px 0 10px 0; 
        padding: 0 35px 0 0; 
    }
    .PorGemailInfo {
        margin: 10px 0 45px 0;
        padding: 0;      
    }
}

/* End - Info Containers */

/* ///////////////////// */

/* Over 18 DOB Containers */

@media screen and (min-width: 320px) and (max-width: 599px) {

    #ArtistDOBcontainer {
        height: 295px;
        margin: 0; 
        padding: 0 15px 0 15px;
    } 
    #Over18ArtistRegoSm {
        height: 85px;
        width: 100%;
        margin: 6px 0 0 0;
        padding: 0;
    }
    #Over18ArtistRegoLg {
        display: none;
    }
    #ArtistInnerDOBContainer {
        margin: 55px 0 0 0; 
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #ArtistDOBcontainer {
        height: 275px;
        margin: 0; 
        padding: 0 15px 0 15px;
    } 
    #Over18ArtistRegoSm {
        height: 85px;
        width: 100%;
        margin: 6px 0 0 0;
        padding: 0;
    }
    #Over18ArtistRegoLg {
        display: none;
    }
    #ArtistInnerDOBContainer {
        margin: 35px 0 0 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {

    #ArtistDOBcontainer {
        height: 255px;
        margin: 0; 
        padding: 0;
    }   
    #Over18ArtistRegoSm {
        height: 75px;
        width: auto;
        margin: 6px 0 0 0;
        padding: 0;
    }
    #Over18ArtistRegoLg {
        display: none;
    }
    #ArtistInnerDOBContainer {
        height: 140px;
        margin: 25px 0 0 0; 
        padding: 0;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) { 

    #ArtistDOBcontainer {
        height: 265px;
        margin: 0 0 0 0; 
        padding: 0;
    }   
    #Over18ArtistRegoSm {
        height: 75px;
        width: auto;
        margin: 6px 0 0 0;
        padding: 0;
    }
    #Over18ArtistRegoLg {
        display: none;
    }
    #ArtistInnerDOBContainer {    
        margin: 30px 0 0 0; 
        padding: 0;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {    

    #ArtistDOBcontainer {
        height: 140px;
        margin: 0;
        padding: 0;
    }
    #Over18ArtistRegoSm {
        display: none;
    }  
    #Over18ArtistRegoLg {
        height: 75px;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    } 
    #ArtistInnerDOBContainer {   
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {

    #ArtistDOBcontainer {
        height: 140px;
        margin: 0;
        padding: 0;
    }
    #Over18ArtistRegoSm {
        display: none;
    }
    #Over18ArtistRegoLg {
        height: 75px;
        margin-top: -40px; 
        margin-bottom: 70px;
        padding: 0;
    }
    #ArtistInnerDOBContainer {   
        margin: 0; 
        padding: 0;
    }
}

/* End - Over 18 DOB Container */

/* /////////////////////////// */

/* Under 18 DOB Containers */

#ARFLabelHolder {
    margin: 13px 0 0 0; 
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #under18ArtistRego { 
        position: relative;    
        display: none;
        height: auto; 
        margin: 0 0 30px 0; 
        padding: 0 15px 0 15px;
        z-index: 1000;        
    }
    #under18ArtistRegoInner { 
        margin-top: 25px;
        padding: 5px 20px 20px 20px;
        border-radius: 12px; 
        border: 2px solid #222;
    } 
    #PGArtistRego {
        height: 75px;
        margin: 0 0 35px 0;
        padding: 0;
    }
    #PGArtistRegoEmail {
        height: 85px;
        margin: 00;
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #under18ArtistRego { 
        position: relative;    
        display: none;
        height: auto; 
        margin: 0 0 30px 0; 
        padding: 0 15px 0 15px;
        z-index: 1000;        
    }
    #under18ArtistRegoInner { 
        margin-top: 25px;
        padding: 5px 20px 20px 20px;
        border-radius: 12px; 
        border: 2px solid #222;
    } 
    #PGArtistRego {
        height: 75px;
        margin: 0 0 35px 0;
        padding: 0;
    }
    #PGArtistRegoEmail {
        height: 85px;
        margin: 0;
        padding: 0;
    }     
}
@media screen and (min-width: 768px) and (max-width: 799px) {

    #under18ArtistRego { 
        position: relative;    
        display: none;
        height: auto; 
        margin: 0 0 30px 0; 
        padding: 0;
        z-index: 1000;        
    }
    #under18ArtistRegoInner { 
        margin-top: 15px;
        padding: 5px 20px 20px 20px;
        border-radius: 12px; 
        border: 2px solid #222;
    }  
    #PGArtistRego {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #PGArtistRegoEmail {
        height: 85px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {

    #under18ArtistRego { 
        position: relative;    
        display: none;
        height: auto; 
        margin: 0 0 30px 0; 
        padding: 0;
        z-index: 1000;        
    }
    #under18ArtistRegoInner { 
        margin-top: 15px;
        padding: 5px 20px 20px 20px;
        border-radius: 12px; 
        border: 2px solid #222;
    }   
    #PGArtistRego {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #PGArtistRegoEmail {
        height: 85px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {    

    #under18ArtistRego { 
        position: relative;    
        display: none;
        height: auto; 
        margin: 0 0 30px 0; 
        padding: 0;
        z-index: 1000;        
    }
    #under18ArtistRegoInner { 
        margin-top: 15px;
        padding: 5px 20px 20px 20px;
        border-radius: 12px; 
        border: 2px solid #222;
    }     
    #PGArtistRego {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #PGArtistRegoEmail {
        height: 85px;
        margin: 0 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {    
    
    #under18ArtistRego { 
        position: relative;    
        display: none;
        height: auto; 
        margin: 0 0 30px 0; 
        padding: 0;
        z-index: 1000;        
    }
    #under18ArtistRegoInner { 
        margin-top: 15px;
        padding: 5px 18px 0 18px;
        border-radius: 12px; 
        border: 2px solid #222;
    }
    #PGArtistRego {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #PGArtistRegoEmail {
        height: 85px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {

    #under18ArtistRego { 
        position: relative;    
        display: none;
        height: auto; 
        margin: 0 0 30px 0; 
        padding: 0;
        z-index: 1000;        
    }
    #under18ArtistRegoInner { 
        margin-top: 15px;
        padding: 5px 18px 0 18px; 
        border: 2px solid #333;
        border-radius: 12px;       
    }
    #PGArtistRego {
        position: relative;
        height: 85px;
        margin: 0;
        padding: 0;        
        z-index: 1000;
    }
    #PGArtistRegoEmail {
        position: relative;
        height: 85px;
        margin: 0 0 10px 0;
        padding: 0;
        z-index: 1000;      
    }
}

/* End - Under 18 DOB Containers */

/* /////////////////////////// */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    #formContainer {
        margin: -10px 0 0 0;        
        padding: 0;
    }
    #ArtistRego {
        position: relative;
        height: 65px;
        margin: 0 0 35px 0;
        padding: 0;        
        z-index: 1000;
    }
    #ArtistRegoPostCode {
        position: relative;
        z-index: 1000;
        height: 65px;
        margin: 0 0 22px 0;
        padding: 0;
    }
    #Over18ArtistRegoLabelHolder {
        margin-top: 0;
        margin-bottom: 40px;
        padding: 0;
    }
    #CountryArtistRegoLabelHolder {
        margin-top: 0;
        margin-bottom: 10px;
        padding: 0;
    }
    #GenreArtistRegoLabelHolder {
        margin-top: 0;
        margin-bottom: 10px;
        padding: 0;
    }
}

@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #ArtistRegodayOB {
        max-width: 50px;
        padding: 0 5px 0 0; 
        text-align: center;
    }
    #ArtistRegoyearOB {
        max-width: 49px;
        margin: 0 0 0 5px;
        padding: 0;
    }
}

#UrldisplayHolder {
    margin-top: -5px; 
    padding: 0; 
    text-align: center;
}
.Urldisplay {
    width: 304px;
    color: #D0D0D0; 
    font-size: 12px; 
    background-color: #111; 
    border: 2px solid #D0D0D0;
    overflow: hidden;
}

/* //////////////////////////////// */

/* Country */

#user_country { /* Select */
    color: #777777;
    scrollbar-width: none;
}
#user_country option { /* Option */
    margin-right: 6px;
    padding: 3px 5px 4px 4.5px;
    color: #D0D0D0;
    font-size: 12px; 
    cursor: pointer;
    border-radius: 4px;
}

/* Genre */

#user_genre { /*  Select */
    color: #777777;
    scrollbar-width: none;
}
#user_genre option { /* Option */
    margin-right: 6px;
    padding: 3px 5px 4px 4.5px;
    color: #D0D0D0;
    font-size: 12px; 
    cursor: pointer;
    border-radius: 4px;
}
.ARgenreOption { /* genre header */ 
    font-weight: 600;
}

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #user_country {
        position: relative;
        z-index: 9999;
        padding: 9px 0 10.5px 6px;
    }    
    #user_genre {
        position: relative;
        z-index: 9999;
        padding: 9px 5px 10.5px 6px;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    
    #user_country {
        margin-right: 30px;
        padding: 9px 0 10px 6px;
    }    
    #user_genre {
        padding: 9px 5px 10px 6px;
    }
}
@media screen and (min-width: 1025px) {
    
    #user_country {
        padding: 6px 0 7px 6px;
    }    
    #user_genre {
        padding: 6px 0 7px 6px;
    }
}



@media screen and (max-width: 992px) {
    
    #PostCodeErrorHolder {
        margin: 0;
        padding: 0;
    }
    #ValidPostCodeError {
        margin: 8px 2px 0 1px;
        color: #ff0000;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }    
}
@media screen and (min-width: 993px) { 

    #PostCodeErrorHolder {
        float: right;
        margin: 0;
        padding: 0;
    }
    #ValidPostCodeError {
        margin: 4px -20px 0 1px;
        color: #ff0000;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }  
}

/* ////// Terms and Conditions ////// */

#TCArtistRegoInner {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;         
}

@media screen and (min-width: 320px) and (max-width: 571px) {  
    
    .TCArtistRegoLabel {
        margin: 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        word-break: break-word; 
        text-align: center;
    }
}
@media screen and (min-width: 572px) and (max-width: 767px) {  

    .TCArtistRegoLabel {
        margin: 0;
        color: #999;
        font-size: 11px;
        word-break: break-word;
        text-align: center;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {   
    
    #TCArtistRego {
        margin: 0;
        padding: 0;        
    }    
    .TCLinkButt {
        height: 38px;
        width: auto;
        margin: 40px 0 0 0;
        padding: 7px 25px 7px 25px;
        color: #ff9900;
        text-align: center;
        font-size: 12px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
        transition: all 0.4s linear;
    }
    .TCLinkButt:hover {
        cursor: pointer;
        background-color: #111;
    }
    .STCLinkButt {
        width: auto;
        margin: 10px 0 0 0;
        padding: 7px 20px 7px 20px;
        color: #ff9900;
        text-align: center;
        font-size: 12px;
        border-radius: 6px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.4s linear;
    }
    .STCLinkButt:hover {
        background-color: #000;
        cursor: pointer;
    }    
    #agreeErrorHolder { 
        height: 40px;
        margin: 8px 0 0 0;
        padding: 0 5px 0 5px;
        text-align: center;
    }
    #agreeCheckboxHolder {
        margin: 15px 0 -10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }  
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    #TCArtistRego {
        margin: 240px 0 0 0;
        padding: 0;
    }
    .TCLinkButt {
        height: 38px;
        width: auto;
        margin: 40px 0 0 0;
        padding: 7px 25px 7px 25px;
        color: #ff9900;
        text-align: center;
        font-size: 12px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;    
        transition: all 0.4s linear;
    }
    .TCLinkButt:hover {
        cursor: pointer;
        background-color: #111;
    }
    #agreeErrorHolder { 
        height: 20px;
        margin: 6px 0 0 0;
        padding: 0;
        text-align: center;
    }    
    .TCArtistRegoLabel {
        margin: 15px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px; 
        font-weight: 600;
        text-align: center;
    }
    #agreeCheckboxHolder {
        margin: 15px 0 -10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }     
}
@media screen and (min-width: 1025px) {

    #TCArtistRego {
        margin: 150px 0 0 0;
        padding: 0;
    }
    .TCLinkButt {
        height: 38px;
        width: auto;
        margin: 40px 0 10px 0;
        padding: 9px 41px 9px 41px;   
        color: #ff9900;
        text-align: center;
        font-size: 12px;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.4s linear;
    }
    .TCLinkButt:hover {
        background-color: #000;
        cursor: pointer;
    }
    #agreeErrorHolder {
        height: 22px;
        margin: 0 0 2px 0;
        padding: 0;
        text-align: center;
    }    
    .TCArtistRegoLabel {
        margin: 0;
        color: #999;
        font-size: 12px;
        font-weight: 600;
        word-break: break-word;
        text-align: center;
    }
    #agreeCheckboxHolder {
        margin: 15px 0 -10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }   
}

@media screen and (min-width: 768px) {
    
    .STCLinkButt {
        width: auto;
        margin: 10px 0 10px 7px;
        padding: 7px 20px 7px 20px;   
        color: #ff9900;
        text-align: center;
        font-size: 12px;
        border-radius: 6px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.4s linear;
    }
    .STCLinkButt:hover {
        background-color: #000;
        cursor: pointer;
    }
}

#ARFcontButtHolder {
    text-align: center;
}
.ARFcontButt {
    width: 100%;
    margin: 0;
    padding: 20px 0 20px 0;
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s linear;
}
.ARFcontButt:hover {
    cursor: pointer;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    #ARFcontButtHolder {
        margin: 30px 10px 30px 10px;
        padding: 0;
        border-radius: 14px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .ARFcontButt {
        color: #FF9900;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .ARFcontButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
}
@media screen and (min-width: 1025px) {

    #ARFcontButtHolder {
        margin: 30px 0 30px 0;
        padding: 0;
        border-radius: 16px;
        border: 2px solid transparent;
        overflow: hidden;
        box-shadow: 5px 5px 10px #000000, 0 0 0 0;
    }
    .ARFcontButt {
        color: #FF9900;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .ARFcontButt:hover {
        cursor: pointer;
        border: 2px solid #ff9900;  
    }
}

/* // Artist Sign On - Show / Hide eye // */

@media screen and (min-width: 320px) and (max-width: 1023px) {  

    #eye.fa-eye {
        position: relative;
        height: 33px;
        width: 30px;
        margin: 11px 0 0 -34px;
        padding: 0 7px 0 3px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        z-index: 8;
    }
    #eye.fa-eye-slash {
        position: relative;
        height: 33px;
        width: 32px;
        margin: 11px 0 0 -35px;    
        padding: 0 7px 0 2.5px;
        color: #444;
        border-radius: 8px;
        background-color: #0a0a0a;
        z-index: 8;
    }
    #eye:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #eye.fa-eye {
        position: relative;
        height: 33px;
        width: 30px;
        margin: 11px 0 0 -34px;
        padding: 0 7px 0 3px;
        color: #444;
        border-radius: 8px; 
        background-color: #0a0a0a;
        z-index: 8;
    }
    #eye.fa-eye-slash {
        position: relative;
        height: 33px;
        width: 31.75px;
        margin: 11px 0 0 -35px;    
        padding: 0 6px 0 3.25px;
        color: #444;
        border-radius: 8px;
        background-color: #0a0a0a;
        z-index: 8;
    }
    #eye:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    #eye.fa-eye {
        position: relative;
        height: 29px;
        width: 26px;
        margin: 9px 0 0 -28px;
        padding: 0 6.75px 0 3px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eye.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 28px;
        margin: 9px 0 0 -31px;    
        padding: 0 5.5px 0 4.5px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eye:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */ 
    
    #eye.fa-eye {
        position: relative;
        height: 29px;
        width: 26px;
        margin: 9px 0 0 -28px;
        padding: 0 6.75px 0 3px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eye.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 28px;
        margin: 9px 0 0 -30px;    
        padding: 0 5.5px 0 4.5px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eye:hover {
        cursor: pointer;
    }
}
@media screen and (min-width: 1200px) {  
    
    #eye.fa-eye {
        position: relative;
        height: 29px;
        width: 26px;
        margin: 9px 0 0 -28px;
        padding: 0 7px 0 3px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eye.fa-eye-slash {
        position: relative;
        height: 29px;
        width: 28px;
        margin: 9.25px 0 0 -30px;    
        padding: 0 5.5px 0 4.25px;
        color: #444;
        border-radius: 8px; 
        background-color: #111;
        z-index: 8;
    }
    #eye:hover {
        cursor: pointer;
    }
}

/* ////// Rego Form Errors ////// */

#ValidUsernameErrorMain {
    line-height: 1.4;
    margin: 0; 
    padding: 0;
    font-size: 12px;
    color: red;
    word-break: break-word;
    text-align: justify;        
    background-color: #000;
}
@media screen and (max-width: 799px) {    
    
    #ValidUsername,
    #Validtitlename {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;       
    }
    #ValidUsernameinfo,  
    #Validtitlenameinfo {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
    }
    #ValidUsernameError,
    #ValidtitlenameError {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;  
        color: #ff0000;
        word-break: break-word;
    }
}
@media screen and (min-width: 800px) and (max-width: 960px) {
    
    #ValidUsername,
    #Validtitlename {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        text-shadow: 0 0 0 #0088FF;
        color: #0088FF;  
    }
    #ValidUsernameinfo,   
    #Validtitlenameinfo {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;       
        color: #ff9900;
        word-break: break-word;
    } 
    #ValidUsernameError,
    #ValidtitlenameError {
        margin: 8px 0 0 1px;
        color: #ff0000;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }
}
@media screen and (min-width: 961px) {
    
    #ValidUsername,
    #Validtitlename {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        text-shadow: 0 0 0 #0088FF;
        color: #0088FF;  
    }
    #ValidUsernameinfo,   
    #Validtitlenameinfo {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;       
        color: #ff9900;
        word-break: break-word;
    } 
    #ValidUsernameError,
    #ValidtitlenameError {
        margin: 8px 2px 0 1px;
        color: #ff0000;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }
}


#ValidMsg {
    margin: 8px 2px 0 1px;
    color: #0088FF;
    font-size: 12px;
    line-height: 1.4;
}
#ValidateMsg1,
#ValidateMsg2,
#ValidateErrorMsg {
    margin: 8px 2px 0 1px;
    color: #ff0000;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    text-align: justify;        
}

/* ////// End - Form Errors ///// */

/* /////////// END - ARTIST-REGO-PAGE //////////// */

/* =============================================== */

/* /////////// TERMS & CONDITIONS PAGE /////////// */

#termsContainer {
    margin: 30px 0 0 0; 
    padding-left: auto; 
    padding-right: auto; 
    background-color: #111;
}
#termsOuter {
    margin: 40px auto 40px auto; 
    padding: 20px;  
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #000;
}
#termsInner {
    margin: 0; 
    padding: 0 12px 0 12px;
}
.lastUpdatedText {
    float: right;
    margin-top: 20px;
    color: #D0D0D0; 
}
.termsTitle {
    margin: 0 0 20px 0;
    color: #ff9900;
    font-size: 16px;    
}
.termsTitle2 {
    margin: 100px 0 20px 0;
    color: #ff9900;
    font-size: 18px;    
}
.termsParaIndent {
    margin-left: 20px;
    color: #D0D0D0;
}
.termsParaIndentx2 {
    margin-bottom: 20px;
    margin-left: 30px;
    color: #ff9900;
}
.termsParaIndentx3 {
    margin-left: 50px;
    color: #D0D0D0;
}
.termsSubTitleIndent {
    margin-left: 20px;
    color: #fff;
}
.termsBulletIndent {
    margin-left: 40px;
    color: #D0D0D0;
}
.termsTitleIndent {
    margin-left: 20px;
    margin-right: 20px;
    color: #D0D0D0;
}
.alphaPoints {
    color: #fff;
}
.stripeLinkButt {
    width: auto;
    margin: 15px 0 30px 20px;
    padding: 8px 15px 8px 15px;   
    color: #ff9900;
    text-align: center;
    font-size: 14px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.stripeLinkButt:hover {
    background-color: #111;
    cursor: pointer;
}

/* //////// END - TERMS & CONDITIONS PAGE //////// */

/* =============================================== */

/* ///////////// PRIVACY POLICY PAGE ///////////// */

#privacyContainer {
    margin: 30px 0 0 0; 
    padding-left: auto; 
    padding-right: auto; 
    background-color: #111;
}
#privacyOuter {
    margin: 40px auto 40px auto; 
    padding: 20px;  
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #000;
}
#privacyInner {
    margin: 0; 
    padding: 0 10px 0 10px;
}
.privacyLastUpdatedText {
    float: right;
    margin-top: 20px;
    color: #D0D0D0; 
}
.privacyTitle {
    margin: 100px 0 20px 0;
    color: #ff9900;
    font-size: 16px;    
}
.privacyTitle2 {
    margin: 0 0 20px 0;
    color: #ff9900; 
}
.privacyTitleIndent {
    margin-left: 20px;
    margin-right: 20px;
    color: #D0D0D0;
}
.privacySubTitleIndent {
    margin-left: 20px;
    color: #fff;
}
.privacyAlphaPoints {
    color: #fff;
}
.privacyBulletIndent {
    margin-left: 40px;
    color: #D0D0D0;
}

/* //// On both TC & PP PAGE //// */

.pledgstaLegalLinkButt {
    width: auto;
    margin: 15px 0 40px 20px;
    padding: 8px 15px 8px 15px;   
    color: #ff9900;
    text-align: center;
    font-size: 14px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.pledgstaLegalLinkButt:hover {
    background-color: #111;
    cursor: pointer;
}

/* ////////// END - PRIVACY POLICY PAGE ////////// */

/* =============================================== */

/* ///////////// COOKIES POLICY PAGE ///////////// */

#cookieContainer {
    margin: 30px 0 0 0; 
    padding-left: auto; 
    padding-right: auto; 
    background-color: #111;
}
#cookieOuter {
    margin: 40px auto 40px auto; 
    padding: 20px;  
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #000;
}
#cookieInner {
    margin: 0; 
    padding: 0 10px 20px 10px;
}
.cookieLastUpdatedText {
    float: right;
    margin-top: 20px;
    color: #D0D0D0; 
}
.cookieTitle {
    margin: 100px 0 20px 0;
    color: #ff9900;
    font-size: 16px;    
}
.cookieTitle2 {
    margin: 0 0 20px 0;
    color: #ff9900; 
}
.cookieTitleIndent {
    margin-left: 20px;
    margin-right: 20px;
    color: #D0D0D0;
}
.cookieAlphaPoints {
    color: #fff;
}
.cookieBulletIndent {
    margin-left: 40px;
    margin-right: 20px;
    color: #D0D0D0;
}
.cookiethirdPartyLinkButt {
    width: auto;
    margin: 0 0 0 5px;
    padding: 8px 15px 8px 15px;   
    color: #ff9900;
    text-align: center;
    font-size: 12px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.cookiethirdPartyLinkButt:hover {
    background-color: #111;
    cursor: pointer;
}
.AAcookieLinkButt {
    width: auto;
    margin: 25px 0 0 25px;
    padding: 8px 15px 8px 15px;   
    color: #ff9900;
    text-align: center;
    font-size: 14px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.AAcookieLinkButt:hover {
    background-color: #111;
    cursor: pointer;
}

/* ////////// END - COOKIES POLICY PAGE ////////// */

/* =============================================== */

/* ///////////// STRIPE CONNECT PAGE ///////////// */

.stripeError {
    margin: 0;
    padding: 0
}
#SCcontainer {
    width: 100%;
    margin: 0;
    padding: 0; 
}
#SCcontainerOuter {
    margin: 90px 0 0 0;
    padding: 0; 
}
#connectSuccess {
    margin: 5px 0 0 0; 
    padding: 0 0 20px 0; 
    color: #0088FF; 
    font-size: 14px; 
    text-align: center; 
    border-radius: 6px; 
    border: 2px solid #0088FF; 
    background-color: #111;
}
#alertCreateAccFirst {
    margin: 5px 0 0 0; 
    padding: 0 0 20px 0; 
    color: #FF0000; 
    font-size: 14px; 
    text-align: center; 
    border-radius: 6px; 
    border: 2px solid #FF0000; 
    background-color: #111;
}
#CreateAccFirstTriangle {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #FF0000;
    font-size: 24px;
}
#connectSuccessSun {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #0088FF;
    font-size: 24px;
}
#alreadyConnected {
    margin: 4px 0 0 0; 
    padding: 0 15px 20px 15px; 
    color: #ff0000; 
    font-size: 13px; 
    text-align: center; 
    border: 2px solid #ff0000; 
    border-radius: 6px;
}
#ACtriangle {
    margin-bottom: 10px; 
    color: #ff0000; 
    font-size: 21px;
}
#SCARalertContainer {
    margin: 25% 0 15px 0;
    padding: 0;
}
#SCARstripePaymentsAlert {    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
    margin: 0 0 0 6px;
    padding: 0 20px 0 20px;
    color: #777;
    font-size: 12px;
    text-align: center;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    #SCARstripePaymentsAlert {
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) {

    #SCARstripePaymentsAlert {
        background-color: #111;
    }
}

#SCARtriangle {
    color: #ff0000; 
    font-size: 21px;
}
.SCARalertTitle {
    margin: 15px 0 -5px 0;
    padding: 0;
    color: #ff0000; 
    font-size: 14px;
}

#SCcontainerInner {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
}

@media screen and (min-width: 320px) and (max-width: 359px) {

    #SCcontainerOuter { 
        padding: 0 0 100px 0; 
    }
    #SCcontainerMiddle {
        width: auto;
        margin: 0;
        padding: 0;        
    } 
    #SACcontainerMiddle {
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        height: auto;
        margin: 0 5px 15px 5px;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;    
    }
    #SACcontainerInner {
        height: auto;
        margin: 0 5px 15px 5px;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;    
    }
    #RSCAmain1 {
        width: 310px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #222;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 {
        width: 310px;       
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 20px 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 {
        width: 310px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        width: 100%;
        margin: 0; 
        padding: 0;    
    }
    #stripeButton {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;        
    }
    #SCstripeLinksHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 360px) and (max-width: 480px) {
    
    #SCcontainerOuter { 
        padding: 0 0 100px 0; 
    }
    #SCcontainerMiddle {
        width: auto;
        margin: 0;
        padding: 0;        
    }    
    #SACcontainerMiddle {
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        height: auto;
        margin: 0 8% 15px 8%;
        padding: 15px 0 20px 0; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;  
    }   
    #SACcontainerInner {
        height: auto;
        margin: 0 8% 15px 8%;
        padding: 15px 0 20px 0; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;  
    } 
    #RSCAmain1 {
        width: 310px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #222;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 {
        width: 340px;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 20px 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 {
        width: 340px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        width: 100%;
        margin: 0; 
        padding: 0;    
    }
    #stripeButton {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;        
    }
    #SCstripeLinksHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 481px) and (max-width: 767px) {
    
    #SCcontainerOuter { 
        padding: 0 0 100px 0; 
    }
    #SCcontainerMiddle {
        width: auto;
        margin: 0;
        padding: 0;        
    }   
    #SACcontainerMiddle {
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        height: auto;
        margin: 0 8% 15px 8%;
        padding: 15px 0 20px 0; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;  
    }   
    #SACcontainerInner {
        height: auto;
        margin: 0 1% 15px 1%;
        padding: 15px 0 20px 0; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;  
    }

    #RSCAmain1 {
        width: 330px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #222;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 {
        width: 360px;        
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 20px 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 {
        width: 360px;        
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        width: 100%;
        margin: 0; 
        padding: 0;    
    }
    #stripeButton {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;        
    }
    #SCstripeLinksHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 768px) {
    
    #SCcontainerOuter {
        padding: 0 80px 0 80px; 
    }
    #SACcontainerMiddle {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        height: auto;
        margin: 0 0 15px 0;
        padding: 15px 50px 20px 50px;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #SACcontainerInner {
        height: auto;
        margin: 0 0 15px 0;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #RSCAmain1 {
        width: 420px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #222;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 {        
        width: 450px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 20px 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 {        
        width: 450px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        width: 100%;
        margin: 0; 
        padding: 0;    
    }
    #stripeButton {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }
    #SCstripeLinksHolder {
        width: 100%;
        margin: 0;
        padding: 0;        
    }    
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    
    #StripeContainer {
        height: auto;
        margin: 0 10px 20px 10px;
        padding: 0;
        background-color: #111;
    }
    #StripeBadge { /* Stripe Logo link to onboarding */
        width: 100%;
        margin: 12px 0 10px 0;
        padding: 5px 0 3px 0;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;
    }
    #StripeBadge:hover {
        cursor: pointer;
        border: 2px solid rgba(0, 136, 255, 0.4);
        background-color: #111;
    }
    #StripeBadgeStart { /* Stripe start button */        
        width: 100%;
        margin: 0 0 20px 0;
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .CreateStripeButton {
        margin: -4px 0 12px 0;
        padding: 11px 13px 11px 13px;
        color: #0088FF; 
        font-size: 11.5px; 
        text-align: center;
        border-radius: 12px; 
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;    
    }
    .CreateStripeButton:hover {
        border: 2px solid #333;
        background-color: #000;
        cursor: pointer;
    }    
    .SlinkButtCA { /* Stripe Connect Agreement link */
        padding: 7px 50px 7px 50px;    
    }    
    .SCsecureText {
        margin: 0; 
        padding: 12px;
        font-size: 12px;
        color: #D0D0D0;
        border: 2px solid #333;
        background-color: #111; 
    }    
}
@media screen and (min-width: 769px) and (max-width: 992px) {
    
    #StripeContainer {
        height: auto;
        margin: 12px 0 20px 0;
        padding: 0;
        background-color: #111;        
    }
    #SCcontainerOuter {
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #SCcontainerMiddle {
        width: 60%;
        margin: 0;
        padding: 0;        
    }
    #SACcontainerMiddle {
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        margin: 0 0 15px 0;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #SACcontainerInner {
        margin: 0 0 15px 0;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #RSCAmain1 {
        width: 420px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #222;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 { 
        width: 450px;       
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 20px 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 {        
        width: 450px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        width: 100%;
        margin: 0; 
        padding: 0;    
    }  
    #stripeButton {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }    
    #StripeBadge { /* Stripe Logo link to onboarding */
        width: 100%;
        margin: 12px 0 10px 0;
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;
    }
    #StripeBadge:hover {
        cursor: pointer;
        border: 2px solid rgba(0, 136, 255, 0.4);
        background-color: #111;
    }
    #StripeBadgeStart { /* Stripe start button */
        width: 100%;
        margin: 5px 0 20px 0;
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;        
    }
    .CreateStripeButton {
        margin: 0 0 15px 0;
        padding: 11px 13px 11px 13px;
        color: #0088FF; 
        font-size: 12px; 
        text-align: center; 
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;    
    }
    .CreateStripeButton:hover {
        border: 2px solid #333;
        background-color: #000;
        cursor: pointer;
    }     
    #SCstripeLinksHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }        
    .SlinkButtCA { /* Stripe Connect Agreement link */
        padding: 7px 30px 7px 30px;    
    }
    .SCsecureText {
        margin: 0; 
        padding: 12px;
        font-size: 11px;
        color: #D0D0D0;
        border: 2px solid #333;
        background-color: #111; 
    }
}
@media screen and (min-width: 993px) and (max-width: 1024px) {
    
    #StripeContainer {
        height: auto;
        margin: 12px 0 20px 0;
        padding: 0;
        background-color: #111;        
    }
    #SCcontainerOuter {
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #SCcontainerMiddle {
        width: 60%;
        margin: 0;
        padding: 0;        
    }
    #SACcontainerMiddle {
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        margin: 0 0 15px 0;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #SACcontainerInner {
        margin: 0 0 15px 0;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #RSCAmain1 {
        width: 472px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #222;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 {
        width: 472px;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 { 
        width: 472px;       
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        margin: 0; 
        padding: 0;    
    }  
    #stripeButton {
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }    
    #StripeBadge { /* Stripe Logo link to onboarding */
        width: 100%;
        margin: 12px 0 10px 0;
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;
    }
    #StripeBadge:hover {
        cursor: pointer;
        border: 2px solid rgba(0, 136, 255, 0.4);
        background-color: #111;
    }
    #StripeBadgeStart { /* Stripe start button */
        width: 100%;
        margin: 0 0 20px 0;
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;    
    }

    .CreateStripeButton {
        margin: 0 0 15px 0;
        padding: 11px 13px 11px 13px;
        color: #0088FF; 
        font-size: 12px; 
        text-align: center; 
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;    
    }
    .CreateStripeButton:hover {
        border: 2px solid #333;
        background-color: #000;
        cursor: pointer;
    }    
    #SCstripeLinksHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }        
    .SlinkButtCA { /* Stripe Connect Agreement link */
        padding: 7px 30px 7px 30px;    
    }
    .SCsecureText {
        margin: 0; 
        padding: 12px;
        font-size: 11px;
        color: #D0D0D0;
        border: 2px solid #333;
        background-color: #111; 
    }
}
@media screen and (min-width: 1025px) and (max-width: 1367px) {
    
    #StripeContainer {
        height: auto;
        margin: 20px 0 20px 0;
        padding: 0;
    }
    #SCcontainerOuter {
        padding: 0 0 300px 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;                 
    }
    #SCcontainerMiddle {
        margin: 0;
        padding: 0;        
    }     
    #SACcontainerMiddle {
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        height: auto;
        margin: 0 0 15px 0;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    } 
    #SACcontainerInner {
        height: auto;
        margin: 0 0 15px 0;
        padding: 15px 0 20px 0;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }     
    #RSCAmain1 {
        width: 472px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #333;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 {
        width: 472px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 20px 20px; 
        border-radius: 16px; 
        border: 2px solid #333;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 {  
        width: 472px;      
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #333;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        margin: 0; 
        padding: 0;    
    }
    #stripeButton {
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #StripeBadge { /* Stripe Logo link to onboarding */
        width: 100%;
        margin: 12px 0 10px 0;
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;
    }
    #StripeBadge:hover {
        cursor: pointer;
        border: 2px solid rgba(0, 136, 255, 0.6);
        background-color: #1a1a1a;
    }
    #StripeBadgeStart { /* Stripe start button */
        width: 100%;
        margin: 0 0 20px 0;
        /*margin: 5px 0 35px 0;
        margin: 8px 0 8px 0;*/
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #333;
        /*border: 2px solid rgba(0, 136, 255, 0.6);*/
        background-color: #111;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;    
    }
    .CreateStripeButton {
        margin: 0 0 15px 0;
        padding: 11px 13px 11px 13px;
        color: #0088FF; 
        font-size: 12px; 
        text-align: center; 
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;    
    }
    .CreateStripeButton:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #0d0d0d;
    }
    #SCstripeLinksHolder {
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }    
    .SlinkButtCA { /* Stripe Connect Agreement link */
        padding: 7px 50px 7px 50px;    
    }    
    .SCsecureText {
        margin: 0; 
        padding: 12px;
        font-size: 12px;
        color: #D0D0D0;
        border: 2px solid #333;
        background-color: #111; 
    }
}
@media screen and (min-width: 1368px) {
    
    #StripeContainer {
        height: auto;
        margin: 20px 0 20px 0;
        padding: 0;
    }
    #SCcontainerOuter {
        padding: 0 10px 300px 10px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;                 
    }
    #SCcontainerMiddle {
        margin: 0;
        padding: 0;        
    }       
    #SACcontainerMiddle {
        margin: 0;
        padding: 0;
    }
    #SCcontainerInner {
        height: auto;
        margin: 0 0 15px 0;
        padding: 15px 20px 20px 20px;
/*        border: 2px solid #333;   
        border-radius: 20px;*/
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }
    #SACcontainerInner {
        height: auto;
        margin: 0 0 15px 0;
        padding: 15px 20px 20px 20px;    
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }
    #RSCAmain1 {
        width: 450px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border: 2px solid #333;
        border-radius: 16px;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain2 {
        width: 450px;      
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 20px 20px; 
        border-radius: 16px; 
        border: 2px solid #333;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #RSCAmain3 {
        width: 450px;      
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        margin: 20px 0 0 0; 
        padding: 20px 20px 0 20px; 
        border-radius: 16px; 
        border: 2px solid #333;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
    }
    #SCheadingHolder {
        margin: 0; 
        padding: 0;    
    }
    #stripeButton {
        margin: 0;
        padding: 0;
    }
    #stripeButtonHlolder {
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #StripeBadge { /* Stripe Logo link to onboarding */
        width: 100%;
        margin: 12px 0 10px 0;
        padding: 5px 0 3px 0;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;
    }
    #StripeBadge:hover {
        cursor: pointer;
        border: 2px solid rgba(0, 136, 255, 0.6);
        background-color: #1a1a1a;
    }
    #StripeBadgeStart { /* Stripe start button */
        width: 100%;
        margin: 0 0 20px 0;
        padding: 5px 0 3px 0;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
    }    
    .CreateStripeButton {
        margin: 0 0 15px 0;
        padding: 11px 13px 11px 13px;
        color: #0088FF; 
        font-size: 12px; 
        text-align: center; 
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;    
    }
    .CreateStripeButton:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #0d0d0d;
    }
    #SCstripeLinksHolder {
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }    
    .SlinkButtCA { /* Stripe Connect Agreement link */
        padding: 7px 50px 7px 50px;    
    }    
    .SCsecureText {
        margin: 0; 
        padding: 12px;
        font-size: 12px;
        color: #D0D0D0;
        border: 2px solid #333;
        background-color: #111; 
    }
}

.SCstripeLogo {
    height: 88px;
    width: auto; 
    margin: -5px 0 0 0; 
    padding: 0;
    opacity: 0.9;
}
.SCstripeLogotext { /* SCAR */
    font-size: calc(9px + 0.3vw); 
    text-align: center; 
    color: #D0D0D0;
}
.SlinkButtContRego { /* Stripe Continue Rego Link */
    width: 100%;
    color: #0088FF;
    text-align: center; 
}
.SClinkExpired { /* account link expired alert */
    width: 100%;    
    color: #D0D0D0;
    text-align: center; 
}
#SCstripeLinksInner {
    padding: 0 0 20px 0;
}
@media screen and (min-width: 320px) and (max-width: 360px) {

    .SlinkButtContRego { /* Stripe Continue Rego Link */
        margin: -9px 0 8px 0;
        padding: 7px 20px 7px 20px;
        font-size: 12px;
    }
    .SClinkExpired { /* account link expired alert */
        margin: -9px 0 8px 0;
        padding: 7px 20px 7px 20px;
        font-size: 12px;
    }
}
@media screen and (min-width: 361px) and (max-width: 767px) {

    .SlinkButtContRego { /* Stripe Continue Rego Link */
        margin: -9px 0 8px 0;
        padding: 7px 35px 7px 35px;
        font-size: 12px;
    }
    .SClinkExpired { /* account link expired alert */
        margin: -9px 0 8px 0;
        padding: 7px 35px 7px 35px;
        font-size: 12px;
    }
}
@media screen and (min-width: 768px) {

    .SlinkButtContRego { /* Stripe Continue Rego Link */
        margin: -10px 0 8px 0;
        padding: 7px 35px 7px 35px;
        font-size: 14px;
    }
    .SClinkExpired { /* account link expired alert */
        margin: -10px 0 8px 0;
        padding: 7px 35px 7px 35px;
        font-size: 14px;
    }
}

.SlinkButtPP { /* Stripe Privicy Policy link */
    width: 100%;    
    margin: 2px 0 10px 0;
    padding: 11px 10px 10px 10px;
    color: #ff9900;
    text-align: center;
    font-size: 12px; 
    border-radius: 10px;    
    transition: all 0.4s linear;
}
.SlinkButtPP:hover {
    cursor: pointer;
    background-color: #0d0d0d;
    /*background-color: #000;*/
}
.SlinkButtCA { /* Stripe Connect Agreement link */
    width: 100%;
    margin: 0 0 0 0;
    padding: 11px 10px 10px 10px;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 10px;   
    transition: all 0.4s linear;
}
.SlinkButtCA:hover {
    cursor: pointer;
    background-color: #0d0d0d;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .SlinkButtPP { /* Stripe Privicy Policy link */
        border: 2px solid #222;
        background-color: #0d0d0d;    
    }
    .SlinkButtCA { /* Stripe Connect Agreement link */
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px) {

    .SlinkButtPP { /* Stripe Privicy Policy link */
        border: 2px solid #333;
        background-color: #111;    
    }
    .SlinkButtCA { /* Stripe Connect Agreement link */
        border: 2px solid #333;
        background-color: #111;   
    }
}


#SCsecureTextOuter {
    margin: 20px 0 0 0; 
    padding: 0;
}
.SCAccButt {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 24px 10px 24px 10px;
    color: #D0D0D0;
    font-size: 13px; 
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;   
    transition: all 0.4s linear;
}
.SCAccButt:hover {
    background-color: #000;
    cursor: pointer;
}
#SCinstruct {
    margin: 0; 
    padding: 30px;
}
#SCnewAccInstruct {
    margin: 0; 
    padding: 30px 30px 10px 30px;
}
#imageContainer {
    margin: 0 0 20px 0; 
    padding: 10px;
    color: red;  
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #000; 
}
#imageContainer img {}
#SCformContainer {
    margin: 0 0 20px 0; 
    padding: 20px 10px 10px 10px;
    color: red;  
    background-color: #000; 
    border: 2px solid #333; 
    border-radius: 6px;    
}
.SCstepTitle {
    padding: 0 5px 0 5px; 
    color: #ff9900; 
}
.SCstepText {
    padding: 0 5px 0 5px; 
    color: #D0D0D0;
}
#itemsUneedHolder {
    margin: 5px 0 0 0;
    padding: 20px 0 10px 0;
    border-radius: 12px;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #itemsUneedHolder {
        border: 2px solid #222;  
    }
}
@media screen and (min-width: 1025px) {

    #itemsUneedHolder { 
        border: 2px solid #333;  
    }
}

.itemsUneed {
    margin-bottom: 20px;
    padding: 0 10px 0 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center;
}
.bullet {
    margin-bottom: 20px;
    padding: 0 10px 0 20px;
    color: #888;
    font-size: 12px;
}
.bullet span {
    color: #D0D0D0;  
    font-size: 12px;
}
.SCwelcomeText {
    padding: 0 5px 0 5px; 
    color: #ff9900; 
    font-weight: 600; 
    word-break: break-word; 
    text-align: center;
}
@media screen and (min-width: 320px) and (max-width: 345px) {
    
    #mainpara {
        margin: 10px 0 20px 0;
        padding: 0 1px 0 1px;
        color: #999;
        font-size: 12px;
        text-align: center;
    }
    #firstpara {
        padding: 0 0 0 5px;
        color: #D0D0D0;
        font-size: 12px; 
    }
    #alreadyAccount {
        margin-top: 10px; 
        padding: 0;
    }
    #needAccount {
        margin-top: 10px; 
        padding: 0;
    }
}
@media screen and (min-width: 346px) and (max-width: 767px) {
    
    #mainpara {
        margin: 10px 0 20px 0;
        padding: 0 1px 0 1px;
        color: #999;
        font-size: 12px;
        text-align: center;
    }
    #firstpara {
        padding: 0 0 0 5px;
        color: #D0D0D0;
        font-size: 12px; 
    }
    #alreadyAccount {
        margin-top: 10px; 
        padding: 0;
    }
    #needAccount {
        margin-top: 10px; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {

    #mainpara {
        margin: 10px 0 20px 0; 
        padding: 0 5px 0 5px;
        color: #999;
        font-size: 12px;
        text-align: center;
    }   
    #firstpara {
        padding: 10px 20px 0 20px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
    }    
    #alreadyAccount {
        margin-top: 10px; 
        padding: 0 5px 0 0;
    }
    #needAccount {
        margin-top: 10px; 
        padding: 0 0 0 5px;
    }
}
@media screen and (min-width: 992px) {

    #mainpara {
        margin: 15px 0 25px 0; 
        padding: 0 18px 0 18px;
        color: #999;
        font-size: 12px;
        text-align: center;
    }   
    #firstpara {
        padding: 10px 20px 0 20px;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
    }    
    #alreadyAccount {
        margin-top: 10px; 
        padding: 0 5px 0 0;
    }
    #needAccount {
        margin-top: 10px; 
        padding: 0 0 0 5px;
    }
}
.SFeelinkButt {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 5px 15px 5px 15px;
    color: #ff9900;
    text-align: center;
    font-size: 13px;
    font-weight: 500;    
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.SFeelinkButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    cursor: pointer;
}
.greylineStripeConnect {
    margin: 15px 5px 20px 5px;
    border-top: 2px solid #333;
}

/* ///////// END - STRIPE CONNECT PAGE /////////// */

/* =============================================== */

/*///////// STRIPE ACCOUNT COMPLETE PAGE //////////*/

#SACconnectConfirm {
    width: 100%;
    margin: 130px 0 20px 0;
    padding: 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
#SACconnectConfirmInner {
    margin: 0; 
    padding: 12px 20px 5px 20px;
    text-align: center;
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
#SAClogo {
    margin: 0 0 25px -4px;
    padding: 0;
}
/*#SACconfirmSun {
    margin: 0 0 25px -4px;
    padding: 0;
    color: #ff9900;
    font-size: 25px;
}*/
.SACconfirmTextBig {
    margin-bottom: 22px;
    padding: 0 5px 0 5px;
    color: #ff9900;
    font-size: 16px; 
    word-break: break-word; 
    text-align: center;
}
.SACconfirmText {
    padding: 0 5px 5px 5px; 
    color: #777;
    /*color: #ff9900;*/
    font-weight: 600;
    word-break: break-word; 
    text-align: center;
}
#SACgetStartButtHolder {
    margin: 15px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
} 
.SACcontButt { /* Stripe Get Started button */
    width: 200px;
    height: 38px;
    /*width: 100%;*/
    margin: 0 0 10px 0;
    padding: 7.5px 4px 7.5px 4px;
    /*padding: 4px 5px 5px 5px;*/    
    font-size: 13px;
    color: #ff9900;
    /*color: #D0D0D0;*/
    text-align: center;
    border-radius: 10px;
    border: 2px solid #333;
    background-color: #111;  
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
    transition: all 0.4s linear;
}
.SACcontButt:hover {
    cursor: pointer;
    background-color: #1a1a1a;
}

/* Alert Stripe Incomplete */

#SACAlertContainer {
    width: 100%;
    /*margin: 180px 0 20px 0;*/
    padding: 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

#SACstripePaymentsAlert {
    width: 100%;
    margin: 0;
    padding: 12px 20px 5px 20px;
    color: #777;
    font-size: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;    
}

@media screen and (min-width: 320px) and (max-width: 360px) {

    #SACAlertContainer {
        margin: 40% 0 20px 0;
    }
    #SACstripePaymentsAlert {
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/   
    }
}
@media screen and (min-width: 361px) and (max-width: 1023px) {

    #SACAlertContainer {
        margin: 40% 0 20px 0;
    }
    #SACstripePaymentsAlert {
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/  
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #SACAlertContainer {
        margin: 20% 0 20px 0;
    }
    #SACstripePaymentsAlert {
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/  
    }
}
@media screen and (min-width: 1025px) {
    
    #SACAlertContainer {
        margin: 120px 0 20px 0;
    }
    #SACstripePaymentsAlert {
        background-color: #111;   
    }    
}

#SACtriangle {
    color: #ff9900; 
    font-size: 21px;
}
.SACAlertTitle {
    margin: 15px 0 -5px 0;
    padding: 0;
    color: #ff9900;
    font-size: 14px;    
}
#SACErrorAlertText {
    color: #777;
    font-weight: 600;
}
#SACAlertHeadText {
    margin-bottom: 10px;
    font-weight: 600;
}
#SACErrorAlertReason {
    color: #777;
    font-weight: 600;
}
#SACinfoTextOr {
    margin: -7px 0 3px 0;
    padding: 10px;
    color: #666; 
    font-size: 12px;
    letter-spacing: 1.4px;
}
.SACstripeDashLink { /* return to account link */
    width: 200px;
    margin: 5px 0 15px 0;
    padding: 7.5px 4px 7.5px 4px;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;  
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
    transition: all 0.4s linear;
}
.SACstripeDashLink:hover {
    cursor: pointer;
    background-color: #1a1a1a;
}
.SACcancelAcctLink { /* return to account link */
    width: 200px;
    margin: 5px 0 15px 0;
    padding: 7.5px 4px 7.5px 4px;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b;
}
.SACcancelAcctLink:hover {
    cursor: pointer;
    background-color: #1a1a1a;
}
.SACstrtAganLink { /* return to account link */
    width: 200px;
    margin: 5px 0 15px 0;
    padding: 7.5px 4px 7.5px 4px;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 8px; 
    border: 2px solid #333;
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b;
}
.SACstrtAganLink:hover {
    cursor: pointer;
    background-color: #1a1a1a;
}
.SACLinkExpired { /* account link expired alert */
    width: 200px;
    margin: 5px 0 15px 0;
    padding: 7.5px 4px 7.5px 4px;
    color: #999;
    font-size: 12px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111; 
}

/* ///// END - STRIPE ACCOUNT COMPLETE PAGE ////// */

/* =============================================== */

/* ///////////// EMAIL-VERIFY PAGES ////////////// */

/* // EMAIL-VERIFY-PENDING PAGE // */

/*#EVPcontainer {
    margin-top: 100px; 
    margin-bottom: 50px; 
    padding: 0 auto 0 auto; 
    vertical-align: center;
}
#EVPcontainerInner {
    height: 50%; 
    margin: 40px auto 40px auto; 
    padding: 30px 0 0 0; 
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #000;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#EVPinfoTextMain {
    padding: 0 10px 0 10px;
    color: #ff9900;
    font-size: calc(12px + 0.3vw); 
}
#EVPinfoText {
    padding: 0 10px 0 10px;
    color: #D0D0D0; 
    font-size: 12px;
    letter-spacing: 1px;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    #EVPresendButtHolder {
        width: 100%;
        margin: 0 auto 30px auto; 
        padding: 0 auto 0 auto;
    }    
    #EVPresendButtHolder2 {
        width: 100%;
        margin: 0 auto 0 auto; 
        padding: 0 auto 0 auto;
    }   
}
@media screen and (min-width: 768px) {

    #EVPresendButtHolder {
        width: 50%;
        margin: 0 auto 30px auto; 
        padding: 0 auto 0 auto;
    }    
    #EVPresendButtHolder2 {
        width: 50%;
        margin: 0 auto 0 auto; 
        padding: 0 auto 0 auto;
    }
}
#EVPconfirmResend {
    height: 35px; 
    margin: 15px 0 15px 0;
}
.ResendButt {
    width: 100%;
    height: 42px;
    margin: 9px 0 0 0;
    padding: 10px;    
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;
    letter-spacing: 1px;
    transition: all 0.3s linear;
}
.ResendButt:hover {
    cursor: pointer;     
    background-color: #111;
}
.ResendButt2 {
    width: 100%;
    height: 62px;
    margin: 9px 0 0 0;
    padding: 10px;    
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;
    transition: all 0.3s linear;
}
.ResendButt2:hover {
    cursor: pointer;     
    background-color: #111;
}*/

/* // EMAIL-CONFIRM PAGES // */

#ECAcontainer {
    margin-top: 150px;
    margin-bottom: 50px; 
    padding: 0 auto 0 auto;
    vertical-align: center;
}
#ECPcontainer {
    margin-top: 150px;
    margin-bottom: 150px; 
    padding: 0 auto 0 auto; 
    vertical-align: center;
}
#ECAInnercontainer {
    height: 30%; 
    margin: 40px auto 40px auto;
    padding: 30px 20px 30px 20px;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 6px;
}
.ECAinfoText {
    margin-top: 0;
    margin-bottom: 20px;
    color: #ff9900;
}
.ECAerrorText {
    margin-bottom: 20px;
    color: red;
}

/* // EMAIL-CONFIRM-AFTER-REGO PAGES // */

#ECARcontainer {
    margin-top: 0;
    margin-bottom: 50px; 
    padding: 0 auto 0 auto; 
}
.ECARBodyContainer {
    margin: 0;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #ECARinfoTextMain {
        margin-top: 20px;
        padding: 0 10px 0 10px;
        color: #ff9900;
        font-size: calc(12px + 0.3vw); 
    }
}
@media screen and (min-width: 768px) {
    
    #ECARinfoTextMain {
        margin-top: 20px;
        padding: 0 30px 0 30px;
        color: #ff9900;
        font-size: calc(12px + 0.3vw); 
        text-align: center;
    }
}    
#ECARconfirmResend {
    height: 35px;
    width: auto;
    margin: 15px 0 15px 0;
}
#ECARconfirmResendText {
    margin: 0; 
    padding: 12px 20px 12px 20px;
    color: #0088FF;
    font-size: 14px;
    text-align: center;
}
#emailVerifiedAlert {
    margin: 9px 0 0 0; 
    padding: 9px 10px 8px 10px; 
    color: #0088FF; 
    font-size: 12px; 
    border-radius: 6px; 
    background-color: #111;
}
#emailVerifiedTick {
    margin: 0 7px 0 0; 
    font-size: 13px;
}
#PGemailVerifiedAlert {
    margin: 9px 0 0 0; 
    padding: 9px 10px 8px 10px; 
    color: #0088FF; 
    font-size: 12px; 
    border-radius: 6px; 
    background-color: #111;    
}


/* ////////// END - EMAIL-VERIFY PAGES /////////// */

/* =============================================== */

/* ////////////// START - EDIT PAGES ///////////// */

/* ////////////// EDIT PROFILE PAGE ////////////// */

#EPlabelHolder { /*border: 1px solid orange;*/
    margin: 8px 0 0 0; 
    padding: 0;
}
.PGintLabel {
    font-size: 14px; 
    font-weight: 600;
    color: #ff9900;
}
.EPgoalAmtLabelHolder {
    margin: 0 0 8px 0;
    padding: 0;    
}
#GoalAmtlabelEP {
    margin-bottom: 10px;
    padding: 0;
    font-size: 14px; 
    font-weight: 600;
    color: #999;
}
.EPgoalDisLabelHolder {
    margin: 0;
    padding: 0;    
}
#GoalDislabelEP {
    margin-bottom: 0;
    padding: 0;
    font-size: 14px; 
    font-weight: 600;
    color: #999;    
}
.EPemailInfo {
    color: #666;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    text-align: justify;
    background-color: none;
    border: none;
}
.EPprofileTitleInfo {       
    color: #666;
    font-weight: 600; 
    font-size: 12px;  
    line-height: 1.4;        
    word-break: break-word; 
    text-align: justify;
    border: none;
    background: none;
}
#EPprofileTitleOuter {
    margin: 0;
    padding: 0;
}
#EPprofileTitleInner {
    margin: 13px 0 0 0; 
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {  
    
    .editProfileForm {
        position: relative;
        height: auto;
        width: 100%;
        margin: 0 0 60px 0;
        padding: 0;
        z-index: 1006;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    .editProfileForm {
        position: relative;
        height: auto;
        width: 100%;
        margin: 0 0 60px 0;
        padding: 0;
        z-index: 1006;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {

    .editProfileForm {
        position: relative;
        height: auto;
        width: 100%;
        margin: 0 0 60px 0;
        padding: 0;
        z-index: 1006;
    }
}
@media screen and (min-width: 800px) and (max-width: 811px) {
    
    .editProfileForm {
        position: relative;
        height: auto;
        width: 100%;
        margin: 0 0 60px 0;
        padding: 0;
        z-index: 1006;
    }
}
@media screen and (min-width: 812px) and (max-width: 960px) {
   
    .editProfileForm {
        position: relative;
        height: auto;
        width: 100%;
        margin: 0 0 60px 0;
        padding: 0;
        z-index: 1006;
    }
}
@media screen and (min-width: 961px) {
    
    .editProfileForm {
        margin: 0 0 60px 0;
    }
}

@media screen and (min-width: 320px) and (max-width: 991px) {
   
    #EPDOBrow {
        margin-top: 0;
        padding: 0;
        justify-content: center;
    }
    #EPinputColumn {
        margin: 0 ;
        padding: 0;
    }
}
@media screen and (min-width: 992px) {
   
    #EPDOBrow {}
    #EPinputColumn {
        margin: 0 ;
        padding: 0 0 0 20px;
    }
}
@media screen and (min-width: 320px) and (max-width: 767px) {  
    
    #URLinfoContainer {
        margin: 0; 
        padding: 0;
    }
    #QRinfoContainer {
        margin: 0; 
        padding: 0;    
    }
    #DLLinfoContainer {
        margin: 0; 
        padding: 0;    
    }    
    #URLfield {
        margin: 20px 0 0 0;
        padding: 0;
    }
    #URLNameText {
        margin: 13px 0 0 0; 
        padding: 0;
    }
    #profileTitleInner {
        margin: 13px 0 0 0; 
        padding: 0;        
    }
    #personalFieldLeft {
        margin: 3px 0 5px 0;
        padding: 0;
    }
    #personalFieldRight {
        margin: 3px 0 5px 0;
        padding: 0;
    }
    #selectImageButtonContainerEP {
        position: relative; 
        z-index: 1006;
        width: 195px;
        margin: 0 auto 20px auto;
    }
    #or {
        margin: 10px 0 -10px 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    #cropImageButtonContainerEP {
        width: 195px;
        margin: 20px auto 10px auto;
    }
    #cropImageButtonContainerEP2 {
        height: 62px;
        width: 200px;
        margin: 20px auto 10px auto;
    }
    #EPFlabelHolder {
        margin: 0 0 10px -15px;
    }
    .QRcodeUrl {
        margin: 20px 0 0 0;    
    }
    #ConnectLinks {
        height: auto;
        margin: 0 15px 0 15px;
        padding: 0;
    }
    #ConnectLinks hr {
        margin: 0 0 15px 0;
        padding: 0;
    }
    #goalAmountContainer {
        height: 85px;
        width: 200px;
        margin: -10px 0 10px 0;
        padding: 5px 15px 5px 5px;
    }
    #U18checkboxContainer {
        display: inline-flex;
        margin: 0;
        padding: 0;    
    }
    #amountPrivate {
        display: inline-flex;
        margin: 0 0 0 -15px;
        padding: 0;
    }
    #percentagePrivate {
        display: inline-flex;
        margin: 10px 0 0 -15px;
        padding: 0;
    }

    /* ////// Error Alerts ////// */

    .EPfieldAlert {
        margin: -10px 0 15px 0;
        padding: 8px 10px 10px 10px;
        border: 2px solid red;
        font-size: calc(10px + 0.3vw);
    }
    #EPalertTriangle {
        margin: 0 7px 0 0;
        font-size: 14px; 
    }
    .EPhighlight {
        margin: -33px 0 0 0;
        padding: 14px 10px 15px 10px;
        border: 2px solid red;
        border-radius: 6px;
        background-color: rgba(255, 0, 0, 0.4);
    }
    .campaignAlert {
        margin: -5px 0 10px 0;
        padding: 6px 10px 8px 10px;
        border: 2px solid red;
        font-size: calc(10px + 0.3vw);
    }
    .campaignhighlight {
        position: relative;
        height: 283px;
        margin: -280px -3px 0 -3px;
        padding: 14px 10px 15px 10px;
        border: 3px solid red;
        border-radius: 6px;
        z-index: -1;
    }
    .goalAlert {
        margin: -5px 0 10px 0;
        padding: 6px 10px 8px 10px;
        border: 2px solid red;
        font-size: calc(10px + 0.3vw);
    }
    .goalhighlight {
        position: relative;
        margin: -33px 0 0 0;
        padding: 15px 0 15px 0;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: rgba(255, 0, 0, 0.4);
        z-index: -1;
    }
}

@media screen and (min-width: 768px) {
    
    #URLfield {
        margin: 20px 0 0 0;
        padding: 0;
    }
    #URLNameText {
        margin: 13px 0 0 0;
        padding: 0px;
    }
    #URLinfoContainer {
        margin: 0;
        padding: 0 5px 0 5px;
    }
    #QRinfoContainer {
        margin: 0; 
        padding: 0 5px 0 5px;  
    }
    #DLLinfoContainer {
        margin: 0; 
        padding: 0 5px 0 5px;    
    }
    #selectImageButtonContainerEP {
        position: relative; 
        z-index: 1006;
        width: 195px;
        margin: 10px auto 20px auto;
    }
    #or {
        margin: 10px 0 -10px 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    #cropImageButtonContainerEP {
        width: 195px;
        margin: 20px auto 10px auto;
    }
    #cropImageButtonContainerEP2 {
        height: 72px;
        width: 200px;
        margin: 20px auto 10px auto;
    }
    #ConnectLinks {
        height: auto;
        margin: 0 15px 0 15px;
        padding: 0;
    }
    #goalAmountContainer {
        height: 90px;
        width: 200px;
        margin: -10px 0 10px 0;
        padding: 5px 15px 5px 0;
    }
    #U18checkboxContainer {
        display: inline-flex;
        margin: 0 0 10px 0;
        padding: 0;    
    }   
    #amountPrivate {
        display: inline-flex;
        margin: 10px 0 0 0;
        padding: 0;
    }
    #percentagePrivate {
        display: inline-flex;
        margin: 10px 0 0 0;
        padding: 0;
    }  
    .campaignhighlight {
        height: 250px;
        position: relative;
        margin:-247px -3px 0 -3px;
        padding: auto 10px 15px 10px;
        border: 3px solid red;
        border-radius:6px;
        z-index: -1;
    }

    /* ////// Error Alerts ////// */
    
    .EPfieldAlert {
        margin: -10px 0 15px 0;
        padding: 8px 10px 10px 10px;
        border: 2px solid red;
        font-size: 12px;
    }
    #EPalertTriangle {
        margin: 0 7px 0 0;
        font-size: 14px; 
    }
    .EPhighlight {
        margin: -33px 0 0 0;
        padding: 14px 10px 15px 10px;
        border: 2px solid red;
        border-radius: 6px;
        background-color: rgba(255, 0, 0, 0.4);
    }
    .campaignAlert {
        margin: -5px 0 10px 0;
        padding: 6px 10px 8px 10px;
        border: 2px solid red;
        font-size: calc(10px + 0.3vw);
    }
    .campaignhighlight {
        position: relative;
        height: 283px;
        margin: -280px -3px 0 -3px;
        padding: 14px 10px 15px 10px;
        border: 3px solid red;
        border-radius: 6px;
        z-index: -1;
    }
    .goalAlert {
        margin: -5px 0 10px 0;
        padding: 6px 10px 8px 10px;
        border: 2px solid red;
        font-size: calc(10px + 0.3vw);
    }
    .goalhighlight {
        position: relative;
        margin: -33px 0 0 0;
        padding: 15px 0 15px 0;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: rgba(255, 0, 0, 0.4);
        z-index: -1;
    }
}

@media screen and (min-width: 320px) and (max-width: 344px) {  
    
    #selectPrivateText {
        margin: 5px 0 0 0;
        padding: 0;
        color: #666;
        font-weight: 600;
        font-size: 11px;
    }
}
@media screen and (min-width: 345px) and (max-width: 400px) {  
    
    #selectPrivateText {
        margin: 5px 0 0 0;
        padding: 0;
        color: #666;
        font-weight: 600;
        font-size: 12px;
    }
}
@media screen and (min-width: 401px) and (max-width: 460px) {  
    
    #selectPrivateText {
        margin: 5px 0 0 0;
        padding: 0;
        color: #666;
        font-weight: 600;
        font-size: 13px;
    }
}
@media screen and (min-width: 461px) {
    
    #selectPrivateText {
        margin: 3px 0 0 0; 
        padding: 0;
        color: #666;
        font-weight: 600; 
        font-size: 14px;           
    }
}

/* ////////// Check box Container ///////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #checkboxContainer {
        margin: 0 0 20px 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width:  960px) {

    #checkboxContainer {
        margin: -20px 0 20px -15px;
        padding: 0;
    }
}
@media screen and (min-width: 961px) {
    
    #checkboxContainer {
        margin: 0 0 20px -15px; 
        padding: 0;
    }
}

/* ///////////////////// */

#SPAlertContainerAEP {
    margin: 0 0 15px 0;
    padding: 0;
}
#stripePaymentsAlertAEP {    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    padding: 5px 20px 10px 20px;
    color: #666;
    font-size: 12px;
    text-align: center;    
    border-radius: 16px;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b; 
}
.SPAlertTitle {
    margin: 15px 0 10px 0;
    padding: 0;
    color: #ff0000;
    font-size: 14px;    
}
/* Stripe Verification Check */
.SVCalertTitle {
    margin: 15px 0 10px 0;
    padding: 0;
    color: #ff9900;
    font-size: 14px;    
}
#SPAlertHeadText {
    margin-bottom: 10px;
    font-weight: 600;
}
.notExistLinkAnchor {
    margin-top: 8px;
}
#SPErrorAlertReason {
    margin-bottom: 20px;
    color: #ff0000;  
}
/* Stripe Verification Check */
#SVCErrorAlertReason {
    margin-bottom: 20px;
    color: #ff9900;  
}
#SPAlertReasonText {
    color: #666;
    font-weight: 600;
}
#SPAlertMainText {
    font-weight: 500;
}
.stripeDashLink {
    width: 150px;
    margin: 0 0 10px 0;
    padding: 5px 5px 6px 5px;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    border: 2px solid #333;
    border-radius: 8px;
    background-color: #111; 
    transition: all 0.3s linear;
}
.SVCstripeDashLink:hover {
    cursor: pointer;     
    border: 2px solid #444;
}
/* Stripe Verification Check */
.SVCstripeDashLink {
    width: 150px;
    margin: 0 0 10px 0;
    padding: 4.5px 5px 6.5px 5px;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border: 2px solid #333;
    border-radius: 8px;
    background-color: #111; 
    transition: all 0.3s linear;
}
.SVCstripeDashLink:hover {
    cursor: pointer;     
    border: 2px solid #444;
}


@media screen and (min-width: 320px) and (max-width: 321px) {
    
    #EPemail {
        height: 130px;
        margin: 0;
        padding: 0;
    }
    #EPUsername {
        height: 215px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 115px;
        margin-bottom: 100px;
        padding: 0;
    }
}
@media screen and (min-width: 322px) and (max-width: 342px) { /* done */
    
    #EPemail {
        height: 112px;
        margin: 0;
        padding: 0;
    } 
    #EPUsername {
        height: 215px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 215px;
        margin: 0;
        padding: 0;
    }  
}
@media screen and (min-width: 343px) and (max-width: 379px) { /* done */
    
    #EPemail {
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #EPUsername {
        height: 215px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 215px;
        margin: 0;
        padding: 0;
    }   
}
@media screen and (min-width: 380px) and (max-width: 382px) {
    
    #EPemail {
        height: 105px;
        margin: 0;
        padding: 0;
    }
    #EPUsername {
        height: 215px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 215px;
        margin: 0;
        padding: 0;
    }   
}
@media screen and (min-width: 383px) and (max-width: 420px) {
    
    #EPemail {
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #EPUsername {
        height: 200px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }   
}
@media screen and (min-width: 421px) and (max-width: 599px) {
    
    #EPemail {
        height: 85px;
        margin: 0;
        padding: 0;
    }
    #EPUsername {
        height: 200px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }
}

/* //////////////////////////////////////////////////////// */

#PDMainContainer {
    position: relative;
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #editProfileContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }    
    #editProfileContainerInner {
        margin: 75px 0 10px 0;
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a; 
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        z-index: 1006;
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPPGEmail {
        height: 145px;
        margin: 0 0 20px 0;
        padding: 0;
    }     
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    }
    #EPpasswordContainer {
        margin: 0 0 30px 0;
        padding: 0;
    }
    #EPpostCode {
        height: 110px;
        margin: 0;
        padding: 0;
    }    
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 - navbar @ 60px high */
    
    #editProfileContainer {
        width: 80%;
    }    
    #editProfileContainerInner {
        margin: 75px auto 30px auto;
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a; 
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;  
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;
    }
    #EPemail {
        height: 85px;
        margin: 0;
        padding: 0;
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPPGEmail {
        height: 145px;
        margin: 0 0 20px 0;
        padding: 0;
    }     
    #EPUsername {
        height: 200px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    }
    #EPpasswordContainer {
        margin: 0 0 30px 0;
        padding: 0;
    }
    #EPpostCode {
        height: 110px;
        margin: 0;
        padding: 0;
    }
}    
@media screen and (min-width: 733px) and (max-width: 767px) { /* 740 - navbar @ 60px high */ 
    
    #editProfileContainer {
        width: 80%;
        margin-bottom: 80px;
    }    
    #editProfileContainerInner {
        margin: 75px auto 10px auto;
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a;   
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;
    }
    #EPemail {
        height: 85px;
        margin: 0;
        padding: 0;
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPPGEmail {
        height: 145px;
        margin: 0 0 20px 0;
        padding: 0;
    }     
    #EPUsername {
        height: 180px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 180px;
        margin: 0;
        padding: 0;
    }  
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    }  
    #EPpasswordContainer {
        margin: 0 0 30px 0;
        padding: 0;
    }
    #EPpostCode {
        height: 110px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */

    #editProfileContainer {
        width: 70%;
    }
    #editProfileContainerInner {
        margin: 65px auto 10px auto;
        padding: 0;  
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a; 
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        height: 134px;
        margin: 0;
        padding: 0;   
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPPGEmail {
        min-height: 80px;
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #EPUsername {
        height: 198px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }  
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    } 
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 20px 0;
        padding: 0;        
    }
    #EPpostCode {
        height: 120px;
        margin: 0;
        padding: 0;         
    }    
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #editProfileContainer {
        width: 65%;
    }
    #editProfileContainerInner {
        margin: 65px auto 30px auto;
        padding: 0;   
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a;   
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        height: 134px;
        margin: 0;
        padding: 0;
    }   
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPPGEmail {
        min-height: 80px;
        margin: 0 0 20px 0; 
        padding: 0;        
    }
    #EPUsername {
        height: 198px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    } 
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }  
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0;
    }
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 60px 0;
        padding: 0;        
    }
    #EPpostCode {
        height: 120px;
        margin: 0;
        padding: 0;         
    } 
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */
    
    #editProfileContainer {
        width: 65%;
    }
    #editProfileContainerInner {
        margin: 65px auto 30px auto;
        padding: 0;   
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a;  
    }  
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        position: relative;
        height: 134px;
        margin: 0;
        padding: 0;     
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPPGEmail {
        position: relative;
        height: 120px;
        margin: 0 0 30px 0;
        padding: 0;
    }
    #EPUsername {
        height: 198px;
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }
    .EPprofileTitleInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPpasswordContainer {
        position: relative;
        height: auto;
        margin: 0 0 20px 0;
        padding: 0;
    }
    #EPpostCode {
        height: 120px;
        margin: 0;
        padding: 0;         
    } 
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 */

    #editProfileContainer {
        width: 58%;
    }
    #editProfileContainerInner {
        margin: 65px 0 30px 0;
        padding: 0;   
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a; 
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        position: relative;
        height: 134px;
        margin: 0;
        padding: 0;    
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0 40px 0 0;
    }
    #EPPGEmail {
        position: relative;
        height: 120px;
        margin: 0 0 30px 0;
        padding: 0;
    }
    #EPUsername {
        height: 198px;
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }     
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 40px 0 0;
    }
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 20px 0;
        padding: 0;
    }
    #EPpostCode {
        height: 120px;
        margin: 0;
        padding: 0;         
    } 
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */

    #editProfileContainer {
        width: 50%;
    }
    #editProfileContainerInner {
        margin: 65px 0 30px 0;
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a;  
    }
    #PDMainContainer { 
        margin: 0 0 90px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPinputContainer {
        height: 94px;
        margin: 0;
        padding: 0;         
    }   
    #EPemail {
        position: relative;
        height: 134px;
        margin: 0;
        padding: 0;   
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0;
    }
    #EPPGEmail {
        position: relative;
        height: 120px;
        margin: 0 0 30px 0;
        padding: 0; 
    }
    #EPUsername {
        height: 198px;
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 200px;
        margin: 0;
        padding: 0;
    }     
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 0 0 0;
    }  
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 60px 0;
        padding: 0;
    }
    #EPpostCode {
        height: 120px;
        margin: 0;
        padding: 0;         
    } 
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #editProfileContainer {
        width: 50%;
    }
    #editProfileContainerInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a; 
    }
    #PDMainContainer { 
        margin: 66px 0 15px 0;
        padding: 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPinputContainer {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        position: relative;
        height: 134px;
        margin: 0;
        padding: 0;     
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0 40px 0 0;
    }
    #EPPGEmail {
        position: relative;
        height: 120px;
        margin: 0 0 30px 0;
        padding: 0;
    }
    #EPUsername {
        height: 165px; 
        margin: 34px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 2px solid #222; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 110px;
        margin-bottom: 70px;
        padding: 0;
    }      
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 40px 0 0;
    }
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 60px 0;
        padding: 0;
    }
    #EPpostCode {
        height: 120px;
        margin: 0;
        padding: 0;         
    } 
}

/* ///////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #editProfileContainer {
        width: 100%;
    }    
    #editProfileContainerInner {
        width: 53.5%;
        margin: 66px 0 0 0;
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #0a0a0a;
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 40px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPinputContainer {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        position: relative;
        height: 130px;
        margin: 0;
        padding: 0;
        z-index: 1000;      
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0 40px 0 0;
    }
    #EPPGEmail {
        position: relative;
        height: 120px;
        margin: 0 0 30px 0;
        padding: 0;
        z-index: 1000;
    }
    #EPUsername {
        height: 100px; 
        margin: 5px 0 100px 0;
        padding: 0; 
        border-top: 2px solid #222; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 110px;
        margin-bottom: 70px;
        padding: 0;
    }      
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 40px 0 0;
    }
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 60px 0;
        padding: 0;        
        z-index: 1000;
    }
    #EPpostCode {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1025 - start background color #111 */
    
    #editProfileContainer {
        width: 52.5%;
    }
    #editProfileContainerInner {
        width: 100%;
        margin: 65px 0 0 7.5px;
        /*margin: 65px 0 0 -18px;*/
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #111;   
    }
    #PDMainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 37.5px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;     
    }
    #EPinputContainer {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        position: relative;
        height: 130px;
        margin: 0;
        padding: 0;
        z-index: 1000;      
    }
    .EPemailInfo {
        margin: 5px 0 10px 0;
        padding: 0 40px 0 0;
    }
    #EPPGEmail {
        position: relative;
        height: 120px;
        margin: 0 0 30px 0;
        padding: 0;
        z-index: 1000;
    }
    #EPUsername {
        height: 100px; 
        margin: 0 0 100px 0;
        padding: 0;
        border-top: 2px solid #333; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 110px;
        margin-bottom: 70px;
        padding: 0;
    }      
    .EPprofileTitleInfo {        
        margin: 5px 0 10px 0; 
        padding: 0 40px 0 0;
    }
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 60px 0;
        padding: 0;        
        z-index: 1000;
    }
    #EPpostCode {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #editProfileContainer {
        width: 52.5%;
        padding: 0;
    }
    #editProfileContainerInner {
        width: 100%;
        margin: 0 0 0 -27.5px;
    }
    #stripePaymentsAlertAEP {
        background-color: #111;   
    }
    #PDMainContainer { 
        margin: 65px 0 15px 0;
        padding: 20px 20px 37.5px 20px;
        border-radius: 20px; 
        border: 2px solid #333;
        background-color: #111;      
    }
    #EPinputContainer {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        position: relative;
        height: 85px;
        margin: 0 0 40px 0;
        padding: 0;
        z-index: 1000;      
    } 
    .EPemailInfo {
        margin: 10px 0 2px 0; 
        padding: 0 40px 0 0;  
    }
    #EPPGEmail {
        position: relative;
        height: 85px;
        margin: 10px 0 20px 0;
        padding: 0;
        z-index: 1000;
    }
    #EPUsername {
        height: 100px; 
        margin: 0 0 100px 0;
        padding: 0; 
        border-top: 2px solid #333; /* // grey line under DOB // */
    }
    #EPprofileTitle {
        height: 25px; 
        margin-bottom: 120px;
        padding: 0;
    }    
    .EPprofileTitleInfo {       
        margin: 10px 0 0 0; 
        padding: 0 35px 0 0;
    }  
    #EPpostCode {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 60px 0;
        padding: 0;        
        z-index: 1000;
    }
}
@media screen and (min-width: 1200px) {

    #editProfileContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #editProfileContainerInner {
        width: 54%;
        margin: 0 0 0 -24.5px;
        padding: 0;
    }
    #stripePaymentsAlertAEP {
        background-color: #111;   
    }
    #PDMainContainer {
        margin: 0 0 15px 0;
        padding: 20px 20px 37.5px 20px; 
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;      
    }
    #EPinputContainer {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
    #EPemail {
        position: relative;
        height: 85px;
        margin: 0 0 40px 0;
        padding: 0;
        z-index: 1000;      
    } 
    .EPemailInfo {
        margin: 10px 0 2px 0; 
        padding: 0 40px 0 0;  
    }
    #EPPGEmail {
        position: relative;
        height: 85px;
        margin: 10px 0 20px 0;
        padding: 0;
        z-index: 1000;
    }
    #EPUsername {
        height: 100px; 
        margin: 0 0 100px 0;
        padding: 10px 0 0 0; 
        border-top: 2px solid #333;
    }
    #EPprofileTitle {
        height: 25px; 
        margin-bottom: 120px;
        padding: 0;
    }    
    .EPprofileTitleInfo {       
        margin: 10px 0 0 0; 
        padding: 0 35px 0 0;
    }  
    #EPpostCode {
        height: 85px;
        margin: 0;
        padding: 0;         
    } 
    #EPpasswordContainer {
        position: relative;
        height: auto; 
        margin: 0 0 60px 0;
        padding: 0;        
        z-index: 1000;
    }
}

.EPemailLabel {
    margin: 0 0 3px 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #999;
}
#EPUsernameOuter {
    margin: 20px 0 0 0; 
    padding: 0;
}
#EPUsernameInner {
    margin: 13px 0 0 0; 
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .EPconfirmEmailLink {
        width: auto;
        margin: 5px auto 0 auto;
        padding: 8px 6px 9px 6px;
        font-size: 12px;
        color: #fff;
        border-radius: 10px;
        background-color: #151515;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: ease-in-out 0.5s;
    }
    .EPconfirmEmailLink:hover {
        cursor: pointer;
        background-color: #222;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .EPconfirmEmailLink {
        width: auto;
        margin: 7px auto 0 auto;
        padding: 4px 6px 6px 6px;
        font-size: 12px;
        color: #fff;
        border-radius: 10px;
        background-color: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: ease-in-out 0.5s;
    }
    .EPconfirmEmailLink:hover {
        cursor: pointer;
        background-color: #222;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) {

    .EPconfirmEmailLink {
        width: auto;
        margin: 7px auto 0 auto;
        padding: 6px 4px 6px 4px;
        font-size: 11px;
        color: #fff;
        border-radius: 10px;
        background-color: #1b1b1b;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: ease-in-out 0.5s;
    }
    .EPconfirmEmailLink:hover {
        cursor: pointer;
        background-color: #222;
    }
}
@media screen and (min-width: 1141px) {

    .EPconfirmEmailLink {
        width: auto;
        margin: 9px auto 0 auto;
        padding: 6px;
        font-size: 12px;
        color: #fff;
        border-radius: 8px;
        background-color: #1b1b1b;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: ease-in-out 0.5s;
    }
    .EPconfirmEmailLink:hover {
        cursor: pointer;
        background-color: #222;
    }
}
#ConfirmEmail {
    margin: 3px 0 2px 0;
    color: #ff0000;
    line-height: 1.4;
    word-break: break-word;
    text-align: center;       
}
#EPDOBlabelHolder {
    margin: 13px 0 0 0; 
    padding: 0;
}


/* /// Edit Profile URL INPUT /// */

.EPURLInfoA {        
    font-size: 12px;
    color: #666;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word; 
    text-align: justify;
    border: none;
    background: none;
}
.EPURLInfoB {       
    margin: 10px 0 0 0; 
    padding: 0;
    line-height: 1.4;
    color: #666;
    font-weight: 600; 
    font-size: 12px;
    word-break: break-word; 
    text-align: justify;
    border: none;
    background: none;
}
#YourAvatarMainContainer {
    position: relative;
    z-index: 1006;
    margin: 0 0 15px 0; 
    padding: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b; 
} 

@media screen and (min-width: 320px) and (max-width: 540px) {

    #YourAvatarMainContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EPcurrentAvatarContainer {
        margin-top: 20px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 541px) and (max-width: 767px) {

    #YourAvatarMainContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }      
    #EPcurrentAvatarContainer {
        margin-top: 20px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {

    #YourAvatarMainContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #EPcurrentAvatarContainer {
        margin-top: 20px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #YourAvatarMainContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #EPcurrentAvatarContainer {
        margin-top: 20px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #YourAvatarMainContainer {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #EPcurrentAvatarContainer {       
        margin-top: 67px;
        text-align: center;
    }
}
@media screen and (min-width: 1025px) {

    #YourAvatarMainContainer {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }       
    #EPcurrentAvatarContainer {       
        margin-top: 67px;
        text-align: center;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .EPURLInfoA {
        margin: 5px 0 0 0;      
        padding: 0;
    }
    #URLcontainer {
        width: 100%;
        margin: 0; 
        padding: 0;        
        /*display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;*/
    }
    #URLTC {
        margin: 0; 
        padding: 0;
    }
    #URL {
        margin: 12px 4px 0 0; 
        padding: 0;
        font-size: 13px;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    .EPURLInfoA {  
        margin: 5px 0 0 0;       
        padding: 0;
    }
    #URLcontainer {        
        width: 100%;
        margin: 0; 
        padding: 0;        
        /*display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;*/
    }
    #URLTC {
        margin: 0;
        padding: 0;
    }
    #URL {
        margin: 12px 0 0 0;
        padding: 0;
        font-size: 13px;
    }
}
@media screen and (min-width: 800px) and (max-width: 824px) {
    
    .EPURLInfoA {  
        margin: 5px 0 0 0;       
        padding: 0;
    }
    #URLcontainer {
        width: 100%;
        margin: 0; 
        padding: 0;        
        /*display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;*/      
    }
    #URLTC {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #URL {
        margin: 12px 0 0 0; 
        padding: 0;
        font-size: 13px;
    }
}
@media screen and (min-width: 825px) and (max-width: 1023px) {  
    
    .EPURLInfoA {  
        margin: 5px 0 0 0;       
        padding: 0;
    }
    #URLcontainer {    
        margin: 0; 
        padding: 0;        
        /*display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;*/       
    }    
    #URLTC {
        margin-top: 10px; 
        padding: 0;
    }    
    #URL {
        margin: 13px 3px 0 0;
        padding: 0;
        font-size: 12px;
    }
}
@media screen and (min-width: 1024px) {    
    
    .EPURLInfoA {
        margin: 10px 0 0 0;        
        padding: 0 40px 0 0;
    }
    #URLcontainer {
        margin: 0; 
        padding: 0 0 0 20px;
    }
    #URLTC {
        margin: 0;
        padding: 0;
    }
    #URL {
        margin: 12px 0 0 0;
        padding: 0;
        font-size: 13px;
    }
}

#YourAvatarInner {
    text-align: center;
}
.imageCoverEP {
    min-height: 196px; 
    min-width: 196px;
    margin-top: 13px; 
    padding: -2px;
    border-radius: 6px;
    background-image: url(https://pledgsta.com/assets/img/icons8-name-48-2.jpg);
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}
.AEPimageCover {
    min-height: 196px; 
    min-width: 196px;
    margin-top: 13px; 
    padding: -2px;
    border-radius: 6px;
    background-image: url(https://pledgsta.com/assets/img/icons8-name-48-2.jpg);
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}

#imagePreview {
    height: 195px;
    max-width: 195px;
    min-width: 195px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    border: 2px solid #333;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#AEPimagePreview {
    height: 195px;
    max-width: 195px;
    min-width: 195px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    border: 2px solid #333;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#AEPinvalidMsgImage {
    display: none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;  
}
.AEPHighlightBack {
    background-color: #000;
}
.AEPHighlightImage {
    min-height: 195px;
    min-width: 195px;
    max-width: 195px;
    margin: -200px 35px 0 35px;
    padding: 0;
    color: #fff;
    font-size: 12px;
    border: 2px solid red;
    border-radius: 8px;
    background-color: rgba(255, 0, 0, 0.2);
    text-align: center;
}
#AEPImageTriangle {
    margin-top: 80px;
    margin-bottom: 10px; 
    color: #fff; 
    font-size: 26px;
}
.imageCoverAEP {
    min-height: 195px; 
    min-width: 195px;
    max-height: 195px; 
    max-width: 195px;
    margin-top: 13px; 
    padding: 0;
    border-radius: 8px; 
    border: 2px solid #333; 
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#ImageAlertContainer {
    margin-top: 20px; 
    padding: 0 40px 0 40px;
}
#AvatarPreviewContainer {
    margin: 0 0 10px 0; 
    text-align: center;
}


/* /// Edit Profile - Background Image /// */

#goLiveBGBackButtonHolder {
    margin: -10px 0 10px 0; 
    padding: 0;
}
.goLiveBGBackButt { 
    width: auto; 
/*    width: 198px;*/
    margin: 0 0 11px 0;
    padding: 9.5px 20px 9.5px 20px;
    color: #0088FF;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    transition: all 0.4s linear;   
}
.goLiveBGBackButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #151515;
}

#yourBackgroundMainContainer {
    position: relative; 
    z-index: 1006;
    margin: 0 0 15px 0;
    padding: 10px 20px 20px 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b; 
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .goLiveBGBackButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;  
    }    
    #yourBackgroundMainContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    .goLiveBGBackButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }    
    #yourBackgroundMainContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .goLiveBGBackButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #yourBackgroundMainContainer {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
}
@media screen and (min-width: 1025px) {

    .goLiveBGBackButt {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
    }    
    #yourBackgroundMainContainer {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }    
}

#yourBackgroundInner {
    margin-top: 10px;
    padding: 0; 
}
.EPshortpreviewBackround {
    margin: 8px 0 0 0;
    padding: 0;
}
#EPBIpreviewContainer {
    padding: 0;
}

#uploadBackgroundImage {
    max-width: 292px; 
    min-width: 257px;
    margin: 0;
    padding: 0;
}
#EPBIpreviewInput {
    margin-top: 10px;
}
.EPbackgroundPicture {
    height: auto; 
    width: 100%;
    border-radius: 6px;
    border: 2px solid #333;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .backgroundImageInfo {
        width: 100%;    
        margin: 20px 0 0 0;
        padding: 11px 0 11px 0;
        color: #666;
        font-size: 11px;
        font-weight: 500;
        text-align: center;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 17px;
        border-bottom-left-radius: 17px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }   
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    .backgroundImageInfo {
        width: 100%;    
        margin: 20px 0 0 0;
        padding: 10px 0 10px 0;
        color: #666;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 17px;
        border-bottom-left-radius: 17px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .backgroundImageInfo {
        width: 100%;    
        margin: 20px 0 0 0;
        padding: 10px 0 10px 0;
        color: #666;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    .backgroundImageInfo {
        width: 100%;    
        margin: 20px 0 0 0;
        padding: 10px 0 10px 0;
        color: #666;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;    
    }
}

.saveBackButtHolder {
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .saveBackButt {
        max-width: 292px; 
        min-width: 256px;
        margin: 20px 0 0 0;
        padding: 12px 0 12px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center; 
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;    
        transition: all 0.3s linear;
    }
    .saveBackButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111; 
    }  

}
@media screen and (min-width: 1025px) {

    .saveBackButt {
        max-width: 292px; 
        min-width: 256px;
        margin: 20px 0 0 0;
        padding: 12px 0 12px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center; 
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.3s linear;
    }
    .saveBackButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515; 
    }  
}

/* /// END - Edit Profile - Background Image /// */


.ConnectLinksTitle {    
    margin: 0 0 5px 0;
    font-size: 14px; 
    font-weight: 600;
    color: #999;
    line-height: 1.4;
}
.ConnectLinksStatement {
    margin: 0;
    font-size: 12px;
    color: #999;
    font-weight: 500;
    line-height: 1.4;
}
#connectToContainer {
    display: inline-flex;
    height: auto;  
    margin: 0; 
    padding: 0;
}
#connectToInner {
    margin: 6px 0 0 0; 
    padding: 0;
    display: flex;
    flex-direction: row;
}
#facebookLogo {
    margin-right: 20px;
    font-size: 30px;  
    color: #666;
} 
#instagramLogo {
    margin-right: 20px;
    font-size: 30px;  
    color: #666;
}
#twitterLogo {
    margin-right: 20px;
    font-size: 30px;
    color: #666;
}
#youtubeLogo {
    margin-right: 12px;
    font-size: 30px;
    color: #666;
}
.socialLabel {
    margin-top: 5px;
    font-size: 14px; 
    font-weight: 600;
    color: #999;
}
#campaignSettingsContainer {
    margin: 0 0 15px 0; 
    padding: 20px 20px 5px 20px; 
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b; 
}
#statsInfoContainer {
    margin: 0 0 15px 0; 
    padding: 20px 20px 4px 20px; 
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b; 
}
#goLiveSettBackButtonHolder {
    margin: -10px 0 10px 0; 
    padding: 0;
}
.goLiveSettBackButt { 
    width: auto;
    margin: 0 0 11px 0;
    padding: 9.5px 20px 9.5px 20px;
    color: #0088FF;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    transition: all 0.4s linear;   
}
.goLiveSettBackButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #151515;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    #campaignSettingsContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }  
    #statsInfoContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }  
    .goLiveSettBackButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #campaignSettingsContainer {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }  
    #statsInfoContainer {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }  
    .goLiveSettBackButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px) {

    #campaignSettingsContainer {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }  
    #statsInfoContainer {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }  
    .goLiveSettBackButt {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
    }  
}

#goalAlertHolder {
    margin: 0 0 10px 0; 
    padding: 0;
}
#checkInner {
    height: 18px; 
    width: 0;
}
.ConnectLinksText {
    margin: 0;
    padding: 0;
    text-align: center;
}
#profileURLContainer {
    padding: 0;
    text-align: center;
} 

/* //////// QR Code /////// */

.EPFcaution {
    color: #ff9900;
}
.QRInfo {
    color: #666;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word; 
    text-align: justify;
    background-color: none;
    border: none; 
}
#generatedQr {
    margin: 0;
    padding: 0;
}
.QRcodeUrl {
    color: #999;
    font-size: 12px; 
    font-weight: 600;
    text-align: center;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.EPFdownloadLink {    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 40px;
    width: 250px;
    margin: 20px auto 0 auto;
    padding: 8px 20px 8px 20px;
    color: #fff;
    font-size: 12px;
    background-color: #1d1d1d;
    transition: all 0.5s linear;
}
.EPFdownloadLink:hover {
    cursor: pointer;
    background-color: #2b2b2b;
}

#DLLbuttContainer {
    width: 100%; 
    margin: 0 0 10px 0;
    padding: 0;  
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.downLoadLogoButt {
    height: 40px;
    width: 250px;    
    margin: 0;
    padding: 8px 20px 8px 20px;
    color: #fff;
    font-size: 12px;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: #1d1d1d;
    transition: all 0.5s ease-out;
    /*transition: all 0.5s linear;*/
}
.downLoadLogoButt:hover {
    cursor: pointer;
    background-color: #2b2b2b;  
}
#GoalDisHolder {
    margin: 10px 0 16px 0; 
    padding: 0 5px 5px 5px;
}

.saveSettButtHolder {
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .saveSettButt {
        width: 100%;
        margin: 20px 0 0 0;
        padding: 12px 0 12px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center; 
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;    
        transition: all 0.3s linear;
    }
    .saveSettButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111; 
    }  
    #pUrlS {
        display: none;
    }    
    [data-title] {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    [data-title]:hover::before { /*body */
        content: attr(data-title);
        position: absolute;
        bottom: -34px;
        display: inline-block;
        padding: 4px 20px 6px 20px;        
        color: #fff;
        font-size: 12px;
        border-radius: 8px;
        background-color: #222;
        white-space: nowrap;
    }
    [data-title]:hover::after { /* triangle */
        content: '';
        position: absolute;
        bottom: -7px;
        display: inline-block;
        color: #fff;
        border: 8px solid transparent;    
        border-bottom: 8px solid #222;
    }    
    .EPFdownloadLink {
        border-radius: 10px;
    }
    .downLoadLogoButt {
        border-radius: 10px;
    }
}
@media screen and (min-width: 1025px) {

    .saveSettButt {
        width: 100%;
        margin: 20px 0 0 0;
        padding: 12px 0 12px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center; 
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.3s linear;
    }
    .saveSettButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515; 
    }  

    #pUrlS {
        display: none;
    }    
    [data-title] {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    [data-title]:hover::before { /*body */
        content: attr(data-title);
        position: absolute;
        bottom: -34px;
        display: inline-block;
        padding: 4px 20px 6px 20px;        
        color: #fff;
        font-size: 12px;
        border-radius: 8px;
        background-color: #222;
        white-space: nowrap;
    }
    [data-title]:hover::after { /* triangle */
        content: '';
        position: absolute;
        bottom: -7px;
        display: inline-block;
        color: #fff;
        border: 8px solid transparent;    
        border-bottom: 8px solid #222;
    }

    .EPFdownloadLink {
        border-radius: 8px;
    }
    .downLoadLogoButt {
        border-radius: 8px;
    }
}

/* // atempt to fade in tooltip // */

/*[data-title] {
    position: relative;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    left: 50%;
    bottom: 100%;
    background-color: yellow;
    width: max-content;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;*/
    /*-webkit-transition: opacity 0.5s ease-in-out;*/ 
/*}
[data-title]:hover:after {
    opacity: 1;
}*/


@media screen and (min-width: 320px) and (max-width: 359px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }
    .QRInfo {        
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 30px 4px 0 4px;
        padding: 0;       
    }
    .center-block {
        height: 50%;
        width: 50%;
    } 
}
@media screen and (min-width: 360px) and (max-width: 374px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 30px 4px 0 4px;
        padding: 0;       
    }
    .center-block {
        height: 50%;
        width: 50%;
    }
}
@media screen and (min-width: 375px) and (max-width: 410px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 30px 4px 0 4px;
        padding: 0;       
    }
    .center-block {
        height: 50%;
        width: 50%;
    }
}
@media screen and (min-width: 411px) and (max-width: 413px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 30px 4px 0 4px;
        padding: 0;       
    }
    .center-block {
        height: 50%;
        width: 50%;
    }
}
@media screen and (min-width: 414px) and (max-width: 479px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }    
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 30px 4px 0 4px;
        padding: 0;       
    }    
    .center-block {
        height: 50%;
        width: 50%;
    }
}
@media screen and (min-width: 480px) and (max-width: 567px) {
    
    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }  
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 30px 4px 0 4px;
        padding: 0;       
    }     
    .center-block {
        height: 40%;
        width: 40%;
    }
}
@media screen and (min-width: 568px) and (max-width: 599px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }      
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 30px 4px 0 4px;
        padding: 0;       
    }    
    .center-block {
        height: 30%;
        width: 30%;
    }
}
@media screen and (min-width: 600px) and (max-width: 639px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }      
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 40px 4px 0 4px;
        padding: 0;       
    }    
    .center-block {
        height: 45%;
        width: 45%;
    }
}
@media screen and (min-width: 640px) and (max-width: 730px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }       
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 40px 4px 0 4px;
        padding: 0;       
    }  
    .center-block {
        height: 28%;
        width: 28%;
    }
}
@media screen and (min-width: 731px) and (max-width: 767px) {

    #EPURLcontainer {
        margin: 0 4px 0 4px;
        padding: 0;         
    }       
    #QRContainer {
        margin: 40px 4px 0 4px;
        padding: 0;  
    }   
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }
    #DLLContainer {
        margin: 40px 4px 0 4px;
        padding: 0;       
    }       
    .center-block {
        height: 25%;
        width: 25%;
    }
}


/* //// Large Screen Sizes //// */

@media screen and (min-width: 768px) and (max-width: 800px) {
    
    #EPURLcontainer {
        margin: 0;
        padding: 0;
    }   
    #QRContainer {
        margin: 40px 0 0 0;
        padding: 0;  
    }      
    #EPFlabelHolder {
        margin: 0 0 10px 0;
        padding: 0;
    }
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }   
    .QRcodeUrl {
        margin: 20px 0 0 0;    
    }    
    #DLLContainer {
        margin: 40px 0 0 0;
        padding: 0;       
    } 
    .center-block {
        height: 35%;
        width: 35%;
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) {

    #EPURLcontainer {
        margin: 0;
        padding: 0;
    }    
    #QRContainer {
        margin: 40px 0 0 0;
        padding: 0;
    } 
    #EPFlabelHolder {
        margin: 0 0 10px 0;
        padding: 0;
    }
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }    
    .QRcodeUrl {
        margin: 20px 0 0 0;    
    }    
    #DLLContainer {
        margin: 40px 0 0 0;
        padding: 0;
    }
    .center-block {
        height: 25%;
        width: 25%;
    }
}
@media screen and (min-width: 961px) {

    #EPURLcontainer {
        margin: 0;
        padding: 0;
    }
    #QRContainer {
        margin: 40px 0 0 0;
        padding: 0;
    }         
    #EPFlabelHolder {
        margin: 0 0 10px 0;
        padding: 0;
    }
    .QRInfo {        
        margin: 0 0 40px 0; 
        padding: 0;
    }      
    .QRcodeUrl {
        margin: 20px 0 0 0;    
    }
    #DLLContainer {
        margin: 40px 0 0 0;
        padding: 0;
    }    
    .center-block {
        height: auto;
        width: 25%;
    }
}


/* /////////////////////////////// */

/* // Country // */

#EPuser_country { /* select */
    scrollbar-width: none;
}
#EPuser_country option { /* Option */
    margin-right: 6px;
    border-radius: 4px;
    padding: 3px 5px 4px 4px;
    color: #D0D0D0;
    cursor: pointer;
}

/* // Genre // */

#EPuser_genre { /*  Select */
    margin-left: 0;
    scrollbar-width: none;
}
#EPuser_genre option { /* Option */
    margin-right: 6px;
    border-radius: 4px;
    padding: 3px 5px 4px 4px;
    color: #D0D0D0;
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 800px) {

    #EPuser_country {
        position: relative;
        z-index: 9999;
        padding: 9px 0 10.5px 6px;
    }    
    #EPuser_country option {
        font-size: 13px; 
    }

    #EPuser_genre {
        position: relative;
        z-index: 9999;
        padding: 9px 5px 10px 6px;
    }
    #EPuser_genre option {
        font-size: 13px; 
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {

    #EPuser_country {
        padding: 9px 0 10px 6px;
    }
    #EPuser_country option {
        font-size: 13px; 
    }

    #EPuser_genre {
        padding: 9px 5px 10.5px 6px;
    }
    #EPuser_genre option {
        font-size: 13px; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #EPuser_country {
        padding: 9px 0 10px 6px;
    }
    #EPuser_country option {
        font-size: 13px; 
    }

    #EPuser_genre {
        padding: 9px 5px 10px 6px;
    }
    #EPuser_genre option {
        font-size: 13px; 
    } 
}
@media screen and (min-width: 1025px) {

    #EPuser_country {
        padding: 6px 0 7px 6px;
    }
    #EPuser_country option {
        font-size: 12px; 
    }

    #EPuser_genre {
        padding: 6px 0 7px 6px;
    }
    #EPuser_genre option {
        font-size: 12px; 
    }
}

/* //////////////////////////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 960px) { 
    
    #EPerrorAnchorAvatar {
        margin-top: 0;
    }
    #EPerrorAnchorBack {
        margin-top: 0;
    }
    #EPerrorAnchorGoal {
        margin-top: 0;
    }
}
@media screen and (min-width: 961px) { 
    
    #EPerrorAnchorAvatar {
        margin-top: -80px;
    }
    #EPerrorAnchorBack {
        margin-top: -60px;
    }
    #EPerrorAnchorGoal {
        margin-top: -60px;
    }
}

/* ////// End Error Alerts ////// */

#mainSocialContainer {
    position: relative;
    margin: 0 0 15px 0; 
    padding: 20px 5px 0 5px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b; 
    z-index: 1006;
}
@media screen and (min-width: 320px) and (max-width: 767px) {  

    #mainSocialContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }       
    #socialContainer {
        margin: 0 15px 35px 15px;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    #mainSocialContainer {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
    #socialContainer {
        margin: 0 15px 40px 15px;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024px */

    #mainSocialContainer {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #socialContainer {
        margin: 0 0 32px 0;
    }
}
@media screen and (min-width: 1025px) {

    #mainSocialContainer {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }  
    #socialContainer {
        margin: 0 0 25px 0;
    }
}

@media screen and (min-width: 320px) and (max-width: 359px) {

    #profileURLContainer {
        width: auto;
        margin: 25px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 250px;
        margin: 10px 0 5px 0;
        padding: 9.25px 8px 7px 8px;
        color: #999;
        font-size: 12px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}
@media screen and (min-width: 360px) and (max-width: 374px) {

    #profileURLContainer {
        width: auto;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 290px;
        margin: 0 0 5px 0;
        padding: 9px 8px 8px 8px;
        color: #999;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}
@media screen and (min-width: 375px) and (max-width: 410px) {

    #profileURLContainer {
        width: auto;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 300px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}  
@media screen and (min-width: 411px) and (max-width: 413px) {

    #profileURLContainer {
        width: 300px;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 300px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}
@media screen and (min-width: 414px) and (max-width: 479px) {

    #profileURLContainer {
        width: 300px;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}  
@media screen and (min-width: 480px) and (max-width: 567px) {
    
    #profileURLContainer {
        width: 300px;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}
@media screen and (min-width: 568px) and (max-width: 599px) {
    
    #profileURLContainer {
        width: 300px;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}
@media screen and (min-width: 600px) and (max-width: 639px) {

    #profileURLContainer {
        width: 340px;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}
@media screen and (min-width: 640px) and (max-width: 730px) {
      
    #profileURLContainer {
        width: 340px;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
}
@media screen and (min-width: 731px) and (max-width: 767px) {
  
    #profileURLContainer {
        width: 340px;
        margin: 35px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #777;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
        transition: all 0.4s linear;
    }
}

/* ///////////////////////////////////////////////////////// */

.EPcancelButton {
    height: 38px;
    color: #ff0000;      
    font-size: 14px;
    text-align: center;
    border-radius: 10px;  
    transition: all 0.4s linear;
}
.EPcancelButton:hover {
    cursor: pointer;
    border: 2px solid #ff0000;
    background-color: #1a1a1a;    
}  
#cancelAccountContainer {    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 376px) {
    
    #personalDetailsContainer {     
        margin: 30px 0 90px 0;
        padding-left: 0; 
        padding-right: 0;
    }  
    #URLN {
        width: 159px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #cancelAccountContainer {
        margin: 10px 0 15px 0;
        padding: 59px 0 59px 0;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EPcancelButton {
        width: 170px;
        margin: 0;
        padding: 7px 0 0 0;
        font-size: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    }      
}
@media screen and (min-width: 377px) and (max-width: 599px) {
    
    #personalDetailsContainer {     
        margin: 30px 0 90px 0;
        padding-left: 0; 
        padding-right: 0;
    }  
    #URLN {
        width: 159px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #cancelAccountContainer {
        margin: 10px 0 15px 0;
        padding: 59px 0 59px 0;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EPcancelButton {
        width: 170px;
        margin: 0;
        padding: 7px 0 0 0;
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    }      
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #personalDetailsContainer {     
        margin: 30px 0 90px 0;
        padding-left: 10px; 
        padding-right: 10px;
    }
    #URLN {
        width: 159px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #cancelAccountContainer {
        margin: 10px 0 15px 0;
        padding: 56.5px 0 56.5px 0;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EPcancelButton {
        width: 170px;
        margin: 0;
        padding: 8px 0 0 0;
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    }  
}
@media screen and (min-width: 768px) and (max-width: 800px) { /* 768px - 800px */

    #personalDetailsContainer {
        margin: 35px 0 90px 0;
        padding: 5px 15px 0 15px;
    }
    #profileURLContainer {
        width: 340px;
        margin: 22px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 25px 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999; 
        font-size: 14px;        
        border-radius: 10px; 
        border: 2px solid #777; 
        background-color: #0a0a0a;
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
    #URLN {
        width: 159px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #ConnectLinks hr {
        margin: 15px 0 15px 0;
        padding: 0;
    }
    #cancelAccountContainer {
        margin: 0 0 15px 0;
        padding: 56.5px 0 56.5px 0;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EPcancelButton {
        width: 170px;
        margin: 0;
        padding: 8px 0 0 0;
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    } 
}
@media screen and (min-width: 801px) and (max-width: 824px) {
    
    #personalDetailsContainer {
        margin: 35px 0 90px 0;
        padding: 5px 15px 0 15px;
    }
    #profileURLContainer {
        width: 340px;
        margin: 22px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 25px 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999; 
        font-size: 14px;        
        border-radius: 10px; 
        border: 2px solid #777; 
        background-color: #0a0a0a;
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }    
    #URLN {
        width: 159px;
        margin: 0 0 5px 0;
        padding: 0;
    }  
    #ConnectLinks hr {
        margin: 15px 0 15px 0;
        padding: 0;
    }
    #cancelAccountContainer {
        margin: 0 0 15px 0;
        padding: 56.5px 0 56.5px 0;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    .EPcancelButton {
        width: 170px;
        margin: 5px 0 0 0;
        padding: 8px 0 0 0;
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    } 
}
@media screen and (min-width: 825px) and (max-width: 960px) {

    #personalDetailsContainer {
        margin: 25px 0 90px 0;
        padding: 15px 15px 0 15px;
    }
    #profileURLContainer {
        width: 340px;
        margin: 40px auto 0 auto;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;        
        color: #999; 
        font-size: 14px;        
        border-radius: 10px; 
        border: 2px solid #777; 
        background-color: #0a0a0a;
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
    #URLN {
        width: 159px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #ConnectLinks hr {
        margin: 15px 0 15px 0;
        padding: 0;
    }
    #cancelAccountContainer {
        margin: 0 0 15px 0;
        padding: 56.5px 0 56.5px 0;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    .EPcancelButton {
        width: 170px;
        margin: 5px 0 0 0;
        padding: 8px 0 0 0;
        font-size: 14px;       
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    } 
}
@media screen and (min-width: 961px) and (max-width: 1023px) {
    
    #personalDetailsContainer {
        margin: 40px 0 50px 0;
        padding: 0 15px 0 15px;
    }
    #profileURLContainer {
        width: 100%;
        margin: 45px auto 0 auto;
        padding-left: 93px;
        padding-right: 93px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;         
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 0 0 5px 0;
        padding: 7.5px 8px 8px 8px;        
        color: #999; 
        font-size: 14px;        
        border-radius: 10px; 
        border: 2px solid #777; 
        background-color: #0a0a0a;
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
    #URLN {
        width: 159px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #ConnectLinks hr {
        margin: 15px 30px 15px 0;
        padding: 0;
    }
    #cancelAccountContainer {        
        margin: 0 0 15px 0;
        padding: 56.5px 0 56.5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }     
    .EPcancelButton {
        width: 190px;
        margin: 10px 0 0 0;
        padding: 7px 0 0 0;
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    } 
}

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024px */
    
    #personalDetailsContainer {
        margin: 45px 0 90px 0;
        padding: 0 15px 0 15px;
    }
    #profileURLContainer {
        width: 100%;
        margin: 45px auto 0 auto;
        padding-left: 93px;
        padding-right: 93px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;         
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 8px 0 5px 0;
        padding: 7.5px 8px 8px 8px;
        color: #999; 
        font-size: 14px;        
        border-radius: 10px; 
        border: 2px solid #777; 
        background-color: #0a0a0a;
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }     
    #URLN {
        max-width: 151px;
        margin: -2px 0 5px 12px; 
        padding: 0;
    }

    #ConnectLinks hr {
        margin: 15px 30px 15px 0;
        padding: 0;
    }
    #cancelAccountContainer {        
        margin: 0 0 15px 0;
        padding: 56.5px 0 56.5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }     
    .EPcancelButton {
        width: 190px;
        margin: 10px 0 0 0;
        padding: 7px 0 0 0;
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 0.5);
        background-color: #151515;    
    } 
}
@media screen and (min-width: 1025px) {

    #personalDetailsContainer {
        margin: 45px 0 90px 0;
        padding: 0 15px 0 15px;
    }
    #profileURLContainer {
        min-width: 320px;
        margin: 42px auto 0 auto; 
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .EPUrldisplay {
        height: 40px;
        min-width: 320px;
        margin: 8px 0 5px 0;
        padding: 8px 8px 8px 8px;
        color: #999; 
        font-size: 14px;        
        border-radius: 8px; 
        border: 2px solid #777; 
        background-color: #0d0d0d;
        word-break: break-all;
        -ms-word-break: break-all;
        word-break: break-word;
    }
    #ConnectLinks hr {
        margin: 15px 30px 15px 0;
        padding: 0;
    }
    #URLN {
        margin: -2px 0 5px 0; 
        padding: 0;
    } 
    #cancelAccountContainer {        
        margin: 0;
        padding: 55px 0 55px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }  
    .EPcancelButton {
        width: 190px;
        margin: 0;
        padding: 6.5px 0 0 0;
        font-size: 14px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.6s linear;
    }
    .EPcancelButton:hover {
        cursor: pointer;
        border: 2px solid #ff0000;
        background-color: #191919;    
    } 
}

/* //////// Start - DOB ////////////////////////////////// */

.EPPGInfo {
    padding: 0;        
    color: #888; 
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word; 
    text-align: justify; 
}
.EPPGemailInfo {
    padding: 0;
    color: #888;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    text-align: justify;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .EPPGInfo {
        margin: 10px 0 10px 0;
    }    
    .EPPGemailInfo {
        margin: 10px 0 10px 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {    

    .EPPGInfo {
        margin: 10px 0 30px 0;    
    }    
    .EPPGemailInfo {
        margin: 10px 40px 30px 0;    
    }
}
@media screen and (min-width: 1025px) {

    .EPPGInfo {
        margin: 10px 0 45px 0;
    }
    .EPPGemailInfo {
        margin: 10px 40px 45px 0;
    }
}

#EPPGLabelHolder {
    margin: 13px 0 0 0; 
    padding: 0;
}
.EPPGLabel {
    margin: 0 0 3px 0;
    font-size: 14px; 
    font-weight: 600;
    color: #999;
}

@media screen and (min-width: 320px) and (max-width: 420px) {

    #DOBcontainer {
        height: 130px;
        margin: 75px 0 0 0;
        padding: 0;
    }  
    #under18EditProfile {
        display: none;
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }
    #EPPGinputContainer {
        height: 80px;
        margin: 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 421px) and (max-width: 599px) {

    #DOBcontainer {
        height: 130px;
        margin: 75px 0 0 0;
        padding: 0;
    }  
    #under18EditProfile {
        display: none;
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }  
    #EPPGinputContainer {
        height: 80px;
        margin: 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 600px) {
    
    #DOBcontainer {
        height: 135px;
        margin: 78px 0 0 0;
        padding: 0;
    }
    #under18EditProfile {
        display: none;
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }  
    #EPPGinputContainer {
        height: 80px;
        margin: 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 601px) and (max-width: 767px) {
    
    #DOBcontainer {
        height: 125px;
        margin: 78px 0 0 0;
        padding: 0;
    }
    #under18EditProfile {
        display: none;
        height: auto;
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222; 
    }  
    #EPPGinputContainer {
        height: 80px;
        margin: 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {

    #DOBcontainer {
        height: 125px;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #under18EditProfile {  
        display: none;
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;     
    } 
    #IsUnder18EditProfile { 
        position: relative;    
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;        
    }  
    #EPPGinputContainer {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 989px) {

    #DOBcontainer {
        height: 125px;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #under18EditProfile { 
        display: none;
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #333;      
    } 
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #333;       
    }
    #EPPGinputContainer {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0 0 0 20px;
    }
}
@media screen and (min-width: 990px) and (max-width: 1023px) {

    #DOBcontainer {
        height: 125px;
        margin: 30px 0 0 15px;
        padding: 0;
    }
    #under18EditProfile { 
        display: none;
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;   
    } 
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 34px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;        
    }    
    #EPPGinputContainer {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0 0 0 20px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #DOBcontainer {
        height: 125px;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #under18EditProfile {    
        display: none;
        height: auto;
        margin: 5px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;
    }
    #IsUnder18EditProfile {   
        height: auto;
        margin: 5px 0 0 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #222;          
    } 
    #EPPGinputContainer {
        height: 75px;
        margin: 0 0 25px 0;
        padding: 0;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0 0 0 20px;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #DOBcontainer {
        height: 125px;
        margin: 0;
        padding: 0;
    }
    #under18EditProfile { 
        display: none;
        height: auto; 
        margin: 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #333;
    } 
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 0; 
        padding: 10px 0 0 0; 
        border-top: 2px solid #333;
    }    
    #EPPGinputContainer {
        position: relative;
        height: 85px;
        margin: 0;
        padding: 0;        
        z-index: 1000;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0 0 0 20px;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #DOBcontainer {
        height: 125px;
        margin: 0;
        padding: 0;
    }
    #under18EditProfile { 
        display: none;
        height: auto; 
        margin: 0; 
        padding: 10px 0 20px 0; 
        border-top: 2px solid #333;
    } 
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 0; 
        padding: 10px 0 20px 0; 
        border-top: 2px solid #333;
    }    
    #EPPGinputContainer {
        position: relative;
        height: 85px;
        margin: 0;
        padding: 0;        
        z-index: 1000;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0 0 0 20px;
    }
}
@media screen and (min-width: 1200px) {

    #DOBcontainer {
        height: 125px;
        margin: 0;
        padding: 0;
    }
    #under18EditProfile { 
        display: none;
        height: auto; 
        margin: 0; 
        padding: 10px 0 20px 0; 
        border-top: 2px solid #333;
    } 
    #IsUnder18EditProfile { 
        height: auto; 
        margin: 0; 
        padding: 10px 0 20px 0; 
        border-top: 2px solid #333;        
    }    
    #EPPGinputContainer {
        position: relative;
        height: 85px;
        margin: 0;
        padding: 0;        
        z-index: 1000;
    }
    #EPPGcolumnControl {
        margin: 0; 
        padding: 0 0 0 20px;
    }
}

/* /////////////////////////////// */

#EPDOBmonth { /* Select */
    scrollbar-width: none;
}
#EPDOBmonth option { /* Option */
    margin-right: 6px;
    border-radius: 4px;
    padding: 3px 5px 4px 4px;
    color: #D0D0D0;
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 341px) { 

    #EPDOBmonth {
        width: 110px;
        margin: 4px 0 0 0;
        padding: 9px 0 10px 6px;
    }  
    #EPDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 342px) and (max-width: 767px) { 

    #EPDOBmonth {
        width: 110px;
        margin: 4px 0 0 0;
        padding: 9px 0 10.5px 6px;
    }  
    #EPDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #EPDOBmonth {
        width: 118px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #EPDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {    
    
    #EPDOBmonth {
        width: 118px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }
    #EPDOBmonth option {
        font-size: 13px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #EPDOBmonth {
        width: 120px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #EPDOBmonth option {
        font-size: 13px;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #EPDOBmonth {
        width: 105px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }    
    #EPDOBmonth option {
        font-size: 13px;            
    }
}
@media screen and (min-width: 1025px) {
    
    #EPDOBmonth {
        margin: 0;
        padding: 6px 5px 7px 6px;
    }
    #EPDOBmonth option {
        margin-right: 1px;
        font-size: 12px;
    }
}

/* /////////////////////////////// */


@media screen and (min-width: 320px) and (max-width: 767px) {  
    
    #EPInnerDOBContainer {
        margin: 0;
        padding: 0;
    } 
    #EPdayOB {
        width: 55px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        margin: 1px 0 0 0;
        padding: 0;
        height: 60px;
    }
    #EPyearOB {
        width: 62px;
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px;
        font-size: 13px; 
        color: #fff;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #EPInnerDOBContainer {
        margin: 0;
        padding: 0;
    }       
    #EPdayOB {
        width: 55px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        margin: 5px 0 0 0;
        padding: 0;
    }
    #EPyearOB {
        width: 60px;
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px;
        font-size: 13px; 
        color: #fff;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {
    
    #EPInnerDOBContainer {
        margin: 0;
        padding: 0;
    }       
    #EPdayOB {
        width: 55px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        margin: 5px 0 0 0;
        padding: 0;
    }
    #EPyearOB {
        width: 60px;
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px;
        font-size: 13px; 
        color: #fff;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
  
    #EPInnerDOBContainer {
        margin: 0;
        padding: 0;
    }       
    #EPdayOB {
        width: 55px;  
        padding: 0 5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        margin: 5px 0 0 0;
        padding: 0;
    }
    #EPyearOB {
        width: 60px;
        margin: 0 0 0 4.5px;
        padding: 0;
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 13px;
        color: #fff;
    }
} 
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #EPInnerDOBContainer {
        margin: 0; 
        padding: 0 0 0 35px;
    }
    #EPdayOB {
        width: 44px;
        padding: 0 4.5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 5px 5px 7px 8px; 
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        width: 105px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #EPyearOB {
        width: 55px;
        margin: 0 0 0 5px;
        padding: 0; 
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 13px; 
        color: #fff;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #EPInnerDOBContainer {
        margin: 0; 
        padding: 0 0 0 35.5px;
    }    
    #EPdayOB {
        width: 44.5px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 6px 5px 7px 8px; 
        font-size: 12px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        width: 122px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #EPyearOB { 
        width: 53px; 
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 12px; 
        color: #fff;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1180px) { /* 1180 */

    #EPInnerDOBContainer {
        margin: 0; 
        padding: 0 0 0 35.5px;
    }    
    #EPdayOB {
        width: 50px; 
        padding: 0 5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 6px 5px 7px 8px; 
        font-size: 12px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        width: 125px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #EPyearOB { 
        width: 57px; 
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 12px; 
        color: #fff;
    }
}
@media screen and (min-width: 1181px) {
    
    #EPInnerDOBContainer {
        margin: 0; 
        padding: 0 0 0 36px;
    }  
    #EPdayOB {
        width: 62px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #EPDOBday {
        padding: 6px 5px 7px 8px; 
        font-size: 12px; 
        color: #fff;
    }
    #DropDownContainerEPMonth {
        width: 122px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #EPyearOB {
        min-width: 70px;
        margin: 0 0 0 4.5px;
        padding: 0; 
        text-align: center;
    }
    #EPDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 12px; 
        color: #fff;
    }
}

/* //////// End - DOB ////////////// */


.EPReset {
    margin: 8px 0 0 0;
    color: #D0D0D0;
    /*color: #ff9900;*/
    text-align: center;
    transition: all 0.4s linear;
}
#postCodeContainer {
    float: left; 
    margin: 0; 
    padding: 0;
}
#EPpostCodeColumnControl {
    margin: 0; 
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #EPpasswordHolder {
        margin: 0;
        padding: 0;    
    }   
    .EPReset {  
        height: 40px;
        width: 100%;
        padding: 8px 0 8px 0;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;
    }
    .EPReset:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;   
    }
    #postCodeContainer {
        width: 113px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px)  {

    #EPpasswordHolder {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;    
    }      
    .EPReset {
        height: 40px;
        width: 200px;  
        padding: 8px 0 8px 0;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;
    }
    .EPReset:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;   
    }
    #postCodeContainer {
        width: 112px;
    }
}
@media screen and (min-width: 1024px)and (max-width: 1024px) {

    #EPpasswordHolder {
        margin: 0;
        padding: 0 0 0 20px;    
    }     
    .EPReset {
        height: 40px;
        width: 100%;  
        padding: 9.5px 0 8px 0;
        font-size: 12px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.4s linear;
    }
    .EPReset:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;   
    }
    #postCodeContainer {
        width: 106px;
        margin-left: 20px;
    }
}
@media screen and (min-width: 1025px) {

    #EPpasswordHolder {
        margin: 0;
        padding: 0 0 0 20px;    
    }     
    .EPReset {
        height: 33px;
        width: 100%;  
        padding: 6px 0 6px 0;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;
    }
    .EPReset:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;   
    }
    #postCodeContainer {
        width: 106px;
        margin-left: 20px;
    }
}
.socialConnect {  
    width: 100px;
    height: 30px;
    margin-left: 5px;
    margin-right: 10px;
    padding-top: 0;        
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #000;   
    color: #0088FF;
    text-shadow: 0 0 0 #0088FF;
    font-size: 12px;
    text-align: center;
    transition: all 0.4s linear;
}
.socialConnect:hover {
    cursor: pointer;
    border: 2px solid #0088FF;
    color: #0088FF;       
    background-color: #111;
}
.ticketbudConnect {  
    height: 154px;
    width: 240px;
    margin: 0;
    padding: 10px;
    border-radius: 6px;   
    border: 2px solid #0088FF;
    background-color: #000;   
    color: #0088FF;
    font-size: 20px;
    text-align: center;
    transition: all 0.4s linear;
}
.ticketbudConnect:hover {
    cursor: pointer;
    border: 2px solid #0088FF;
    color: #0088FF;       
    background-color: #111;
}
.cancelledPledgeAlertArtistEP {
    width: auto;
    margin: -14px auto 16px auto;
    padding: 10px;
    color: #FF0000;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    text-align: center;
    border-radius: 6px;
    background: #111;        
}
#EPFpledgstasOuter {
    margin: 0;
    padding: 0;
}
#EPFpledgstasInner {
    display: inline-block; 
    width: 100%;        
}
#EPFtotalPledgesHolder {
    margin: 0;
    padding: 0;        
    float: left;
    text-align: left; 
}
#EPFtotalAmountHolder {
    margin: 0;
    padding: 0;      
    float: right;
    text-align: right;
}
#EPFtotalLabel {
    color: #999;
    font-weight: 600;
}
#EPFamountLabel {
    color: #999;
    font-weight: 600;
}
#EPFtotalText {
    margin: 5px 0 0 2px;
    padding: 0;
    color: #ff9900;
}
#EPFamountText {
    margin: 5px 2px 0 0;
    padding: 0;
    color: #ff9900;
    letter-spacing: 1.4px;
}
.EPFpledgstasListButtHolder {
    /*display: inline-block; */
    width: 100%; 
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #EPFtotalText,
    #EPFamountText {
        font-weight: 600;
    }
    .EPFpledgstasListButt {
        height: 38px;
        width: 170px;
        margin: 8px 0 0 0;
        color: #ff9900;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
        transition: all 0.4s linear;   
    }
    .EPFpledgstasListButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111; 
    }
}
@media screen and (min-width: 1025px) {

    .EPFpledgstasListButt {

        height: 38px;  
        width: 190px;
        margin: 8px 0 0 0;
        color: #ff9900;
        text-align: center;   
        border-radius: 10px;  
        border: 2px solid #333;
        background-color: #111;   
        transition: all 0.4s linear;   
    }
    .EPFpledgstasListButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515; 
    }
}
@media screen and (min-width: 320px) and (max-width: 376px) {
    
    #EPFtotalLabel {
        font-size: 11.5px; 
    }
    #EPFamountLabel {
        font-size: 11.5px; 
    }
    #EPFtotalText {
        font-size: 11.5px;
    }
    #EPFamountText {
        font-size: 11.5px;
    }
    .EPFpledgstasListButt {
        padding: 8px 0 0 0;
        /*padding: 6px 5px 0 5px;*/
        font-size: 12px;
        /*font-size: 11px;  */
    }
}
@media screen and (min-width: 377px) {

    #EPFtotalLabel {
        font-size: 14px; 
    }
    #EPFamountLabel {
        font-size: 14px; 
    }
    #EPFtotalText {
        font-size: 14px;
    }
    #EPFamountText {
        font-size: 14px;         
    }
    .EPFpledgstasListButt {
        padding: 7px 0 0 0;
        /*padding: 5.5px 5px 0 5px;*/
        font-size: 14px;
        /*font-size: 12px;  */
    }
}

.EPFpledgstasLine {
    height: 1.5px;
    margin: 5px 0 10px 0; 
    border: 0; 
    background: #333;
}



/* ////////// END - EDIT PROFILE PAGE ////////// */

/* ============================================= */

/* //////////// PLEDGSTAS LIST PAGE //////////// */

#pledgstaListOuter {
    box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
}
#pledgstaListOuterBot {
    padding: 20px 20px 15px 20px;
    box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px #1b1b1b;
}
#pledgstaListInner {
    display: inline-flex; 
    margin: 0; 
    padding: 0;    
}
#pledgstalabelHolder {
    margin: 0; 
    padding: 0;
}
#pledgstaLabelOuter {
    display: inline-flex; 
    margin: 0; 
    padding: 0;
}
#PLusername {
    margin: 0; 
    padding: 0;
}
#PLlevel {
    margin: 0; 
    padding: 0; 
    text-align: center;
}
#PLcountry {
    margin: 0; 
    padding: 0; 
    text-align: right;
}
#pledgstaLabelUsername {
    font-size: 12px; 
    font-weight: 600;
    color: #999;
}
#pledgstaLabelLevel {
    font-size: 12px; 
    font-weight: 600;
    color: #999;
}
#pledgstaLabelCountry {
    font-size: 12px; 
    font-weight: 600;
    color: #999;
}
.pledgstaGreyLine {
    height: 2px;
    border: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #pledgstaListContainer {
        margin: 75px 0 80px 0;
        padding: 0 10px 0 10px;
    }
    #pledgstaListOuter {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 20px 15px 4px 15px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstaListOuterBot {
        width: 100%;
        margin: 0 0 15px 0;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry {
        width: 100%;
    }
    #pledgstaLabelUsername { 
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 8px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999999;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 90px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999999;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }    
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
}
@media screen and (min-width: 600px) and (max-width: 730px) {
    
    #pledgstaListContainer {
        margin: 75px 0 80px 0;
        padding: 0 100px 0 100px;
    }
    #pledgstaListOuter {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 20px 15px 4px 15px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #pledgstaListOuterBot {
        width: 100%;
        margin: 0 0 15px 0;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry { 
        width: 100%;
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 8px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 90px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }    
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
}
@media screen and (min-width: 731px) and (max-width: 767px) {
    
    #pledgstaListContainer {
        margin: 75px 0 80px 0;
        padding: 0 100px 0 100px;
    }
    #pledgstaListOuter {
        width: 100%;
        margin: 0 0 15px 0; 
        padding: 20px 15px 4px 15px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstaListOuterBot {
        width: 100%;
        margin: 0 0 15px 0; 
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry {
        width: 100%;
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 10px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 90px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }    
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 11px;
    }
}

/* ///////////////////// large screen ///////////////////// */

@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #pledgstaListContainer {
        margin: 65px 0 80px 0;
        padding: 0 120px 0 150px;
    }
    #pledgstaListOuter { 
        margin: 0 0 15px 0;
        padding: 20px 20px 4px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstaListOuterBot { 
        margin: 0 0 15px 0;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry {
        width: 100%;
    }    
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 10px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 100px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }        
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    } 
}
@media screen and (min-width: 800px) and (max-width: 824px) {
    
    #pledgstaListContainer {
        margin: 65px 0 80px 0;
        padding: 0 65px 0 150px;
    }
    #pledgstaListOuter {
        margin: 0 0 15px 0;
        padding: 20px 20px 4px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #pledgstaListOuterBot {
        margin: 0 0 15px 0;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry {
        width: 100%;
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 10px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 100px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }        
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    } 
}
@media screen and (min-width: 825px) and (max-width: 853px) {
    
    #pledgstaListContainer {
        margin: 65px 0 80px 0;
        padding: 0 25px 0 150px;
    }
    #pledgstaListOuter { 
        margin: 0 0 15px 0;
        padding: 20px 20px 4px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;  
    }
    #pledgstaListOuterBot { 
        margin: 0 0 15px 0;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry {
        width: 100%;
    }  
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 10px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 100px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }        
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    } 
}
@media screen and (min-width: 854px) and (max-width: 960px) { /* 960 */
    
    #pledgstaListContainer {
        margin: 65px 0 80px 0;
        padding: 0 0 0 230px;
    }
    #pledgstaListOuter { 
        margin: 0 0 15px 0;
        padding: 20px 20px 4px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #pledgstaListOuterBot { 
        margin: 0 0 15px 0;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry {
        width: 100%;
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 10px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 100px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }        
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    } 
}
@media screen and (min-width: 961px) and (max-width: 992px) { /* 990 */
    
    #pledgstaListContainer {
        margin: 0 0 80px 0;
        padding: 0 0 0 260px;
    }
    #pledgstaListOuter { 
        margin: 65px 0 15px 5px;
        padding: 20px 20px 4px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #pledgstaListOuterBot { 
        margin: 0 0 15px 5px;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstalabelHolder {
        width: 100%; 
    }
    #pledgstaLabelOuter {
        width: 100%;     
    }
    #pledgstaListInner {
        width: 100%;   
    } 
    #PLusername {
        width: 100%;
    }
    #PLlevel {
        width: auto;
    }
    #PLcountry {
        width: 100%;
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 15px 9px 10px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 100px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }        
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    } 
}
@media screen and (min-width: 993px) and (max-width: 1023px) {
    
    #pledgstaListContainer {
        margin: 0 0 80px 0;
        padding: 0 0 0 25px;
    }
    #pledgstaListOuter {
        margin: 66px 0 15px 0; 
        padding: 20px 20px 4px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstaListOuterBot {
        margin: 0 0 15px 0; 
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 34px 9px 10px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        position: relative;
        width: 100px;
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextUnameLong:before {
        content: '';
        position: absolute;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        position: relative;
        float: right;
        width: 100px;
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    #pledgstaListTextCtryLong:before {
        content: '';
        position: absolute;
    }        
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }  
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #pledgstaListContainer {
        margin: 0 0 80px 0;
        padding: 0 0 0 48px;
    }
    #pledgstaListOuter {
        margin: 66px 0 15px -10.5px; 
        padding: 20px 20px 4px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;  
    }
    #pledgstaListOuterBot {
        margin: 0 0 15px -10.5px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 36px 9px 11px 8px;
        background: #222;
    }
    #pledgstaListTextUnameLong {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
    }      
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) { /* 1138 + 1180 */
    
    #pledgstaListContainer {
        margin: 0 0 80px 0;
        padding: 0 0 0 40px;
    }
    #pledgstaListOuter { 
        margin: 66px 0 15px -4.5px;
        padding: 20px 20px 4px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;   
    }
    #pledgstaListOuterBot { 
        margin: 0 0 15px -4.5px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;   
    }
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 36px 9px 11px 8px;
        background: #333;
    }
    #pledgstaListTextUnameLong {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
    }      
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }   
}
@media screen and (min-width: 1200px) and (max-width: 1200px) { /* 1200 */
    
    #pledgstaListContainer {
        margin: 0 0 80px 0;
        padding: 0 0 0 10px;
    }
    #pledgstaListOuter {
        margin: 66px 0 15px -32px;
        padding: 20px 20px 4px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;    
    }
    #pledgstaListOuterBot {
        margin: 0 0 15px -32px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;    
    }    
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0 0 0 0; 
        padding: 0;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
    }
    .pledgstaGreyLine {
        margin: 36px 9px 11px 8px;
        background: #333;
    }
    #pledgstaListTextUnameLong {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
    }      
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }   
}
@media screen and (min-width: 1201px) {
    
    #pledgstaListContainer {
        margin: 66px 0 80px 0;
        padding: 0 0 0 10px;
    }
    #pledgstaListOuter {
        margin: 0 0 15px -32px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;    
    }
    #pledgstaListOuterBot {
        margin: 0 0 15px -32px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;    
    }    
    #pledgstaLabelUsername {
        margin: 0 0 0 8px;
        padding: 0;
        font-size: 13px;
    }
    #pledgstaLabelLevel {
        width: 100%;
        margin: 0 0 0 0; 
        padding: 0;
        font-size: 13px;
    }
    #pledgstaLabelCountry {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 0;
        font-size: 13px;
    }
    .pledgstaGreyLine {
        margin: 36px 9px 11px 8px;
        background: #333;
    }
    #pledgstaListTextUnameLong {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;
    }
    #pledgstaListTextUname {
        margin: 5px 0 0 8px;
        padding: 0;
        color: #999;
        font-size: 12px;        
    }
    #pledgstaListTextLvl {
        margin: 5px 0 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }
    #pledgstaListTextCtryLong {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;
    }      
    #pledgstaListTextCtry {
        margin: 5px 10px 0 0;
        padding: 0;
        color: #999;
        font-size: 12px;         
    }   
}

#listBreak { 
    margin: 0 0 20px 0; 
    padding: 0;     
}
#pledgstaListCradle {
    height: auto;
    width: 100%;
    margin: 0; 
    padding: 0 0 3px 0;
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* // Pledgsta List Cradle Scroll // */

/* //// firefox & chrome //// */

#pledgstaListCradle {
    scrollbar-width: none;
    scrollbar-color: #ff0000 #000000 !important;
}
.pledgstaCvsbuttHolder {
    display: inline-block; 
    width: 100%; 
    margin: 0;
    padding: 0;
}
.pledgstaCvsbutt {
    float: left;
    height: 38px;  
    width: 150px;
    margin: 0;
    padding: 9px 5px 0 5px;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;
    transition: all 0.4s linear;   
}
.pledgstaCvsbutt:hover {
    cursor: pointer;
    border: 2px solid #0088FF;
    color: #0088FF; 
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .pledgstaCvsbutt {
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 17px;
        border: 2px solid #222;
        background-color: #0d0d0d;      
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .pledgstaCvsbutt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;      
    }
}
@media screen and (min-width: 1025px) {

    .pledgstaCvsbutt {
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;        
    }    
}

/* ////////// END PLEDGSTAS LIST PAGE ////////// */

/* ============================================= */

/* //////// CANCEL ARTIST & PLEDGSTA ACCOUNT PAGE ///////// */

#CAAmainContainer {
/*    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;*/
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b;
}
#CAATextContainer {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
    margin: 0;
    padding: 0 8px 0 8px;    
}
.CAAMainTitle {
    margin-bottom: 10px; 
    color: #D0D0D0; 
}
#CPAmainContainer {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;    
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b;
}

/* /// Small Screens /// */

@media screen and (min-width: 320px) and (max-width: 599px) {

    #CAAcontainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }    
    #CAAcontainerInner {
        margin: 75px auto 10px auto;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 14px;
        text-align: center;
    }
    #CPAcontainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }    
    #CPAcontainerInner {
        margin: 75px auto 10px auto;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 13px 13px 20px 13px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 600px) and (max-width: 639px) {

    #CAAcontainer {
        width: 80%;
    }    
    #CAAcontainerInner {
        margin: 75px auto 30px auto;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;  
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }

    #CPAcontainer {
        width: 80%;
    }    
    #CPAcontainerInner {
        margin: 75px auto 30px auto;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 640px) and (max-width: 732px) {

    #CAAcontainer {}    
    #CAAcontainerInner {
        margin: 75px auto 30px auto;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {}    
    #CPAcontainerInner {
        margin: 75px auto 30px auto;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) { 

    #CAAcontainer {
        width: 84%;
        margin-bottom: 80px;
    }    
    #CAAcontainerInner {
        margin: 75px auto 10px auto;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 84%;
        margin-bottom: 80px;
    }    
    #CPAcontainerInner {
        margin: 75px auto 10px auto;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}

/* /// Large Screens /// */

@media screen and (min-width: 768px) and (max-width: 799px) {

    #CAAcontainer {
        width: 82%;
    }
    #CAAcontainerInner {
        margin: 65px auto 10px auto;
        padding: 0;  
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 82%;
    }
    #CPAcontainerInner {
        margin: 65px auto 10px auto;
        padding: 0;  
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
} 
@media screen and (min-width: 800px) and (max-width: 800px) {

    #CAAcontainer {
        width: 78%;
    }
    #CAAcontainerInner {
        margin: 65px auto 30px auto;
        padding: 0;   
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 78%;
    }
    #CPAcontainerInner {
        margin: 65px auto 30px auto;
        padding: 0;   
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}    
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */

    #CAAcontainer {
        width: 78%;
    }
    #CAAcontainerInner {
        margin: 65px auto 30px auto;
        padding: 0;   
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 78%;
    }
    #CPAcontainerInner {
        margin: 65px auto 30px auto;
        padding: 0;   
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}    
@media screen and (min-width: 825px) and (max-width: 855px) { /* 854 */
    
    #CAAcontainer {
        width: 72%;
    }
    #CAAcontainerInner {
        margin: 65px 0 30px 0;
        padding: 0;   
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 72%;
    }
    #CPAcontainerInner {
        margin: 65px 0 30px 0;
        padding: 0;   
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }
}
@media screen and (min-width: 856px) and (max-width: 960px) {

    #CAAcontainer {
        width: 66%;
        padding: 0;
    }
    #CAAcontainerInner {
        margin: 65px 0 30px 0;
        padding: 0;   
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 66%;
        padding: 0;
    }
    #CPAcontainerInner {
        margin: 65px 0 30px 0;
        padding: 0;   
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) {

    #CAAcontainer {
        width: 50%;
    }
    #CAAcontainerInner {
        margin: 65px 0 30px 0;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 0 0 90px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 50%;
    }
    #CPAcontainerInner {
        margin: 65px 0 30px 0;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 0 0 90px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #CAAcontainer {
        width: 50%;
    }
    #CAAcontainerInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 66px 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 50%;
    }
    #CPAcontainerInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 66px 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
} 
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #CAAcontainer {
        width: 100%;
    }    
    #CAAcontainerInner {
        width: 64%;
        margin: 66px 0 0 0;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 100%;
    }    
    #CPAcontainerInner {
        width: 64%;
        margin: 66px 0 0 0;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1140px) {

    #CAAcontainer {
        width: 52.5%;
    }
    #CAAcontainerInner {
        width: 100%;
        margin: 65px 0 0 -18px;
        padding: 0;
    }
    #CAAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;     
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 52.5%;
    }
    #CPAcontainerInner {
        width: 100%;
        margin: 65px 0 0 -18px;
        padding: 0;
    }
    #CPAmainContainer { 
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #333;
        background-color: #111;     
    } 
}
@media screen and (min-width: 1141px) and (max-width: 1199px) {

    #CAAcontainer {
        width: 52.5%;
        padding: 0;
    }
    #CAAcontainerInner {
        width: 100%;
        margin: 0 0 0 -27.5px;
    }
    #CAAmainContainer { 
        margin: 65px 0 15px 0;
        padding: 20px 25px 25px 25px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;      
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        width: 52.5%;
        padding: 0;
    }
    #CPAcontainerInner {
        width: 100%;
        margin: 0 0 0 -27.5px;
    }
    #CPAmainContainer { 
        margin: 65px 0 15px 0;
        padding: 20px 25px 25px 25px; 
        border: 2px solid #333;
        background-color: #111;      
    }  
}
@media screen and (min-width: 1200px) {

    #CAAcontainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #CAAcontainerInner {
        width: 54%;
        margin: 0 0 0 -24.5px;
        padding: 0;
    }
    #CAAmainContainer {
        margin: 0 0 15px 0;
        padding: 20px 20px 25px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;      
    }
    .CAAMainTitle {
        font-size: 15px;
        text-align: center;
    }
    #CPAcontainer {
        margin: 0 0 0 0;
        padding: 0;
    }
    #CPAcontainerInner {
        width: 54%;
        margin: 63px 0 0 24.5px;
        padding: 0;
    }
    #CPAmainContainer {
        margin: 0 0 15px 0;
        padding: 20px 25px 25px 25px;
        border: 2px solid #333;
        background-color: #111;      
    } 
}

.FormlabelCAA {
    margin: 0 0 0 1px; 
    padding: 0 0 0 0;
    font-size: 12px; 
    font-weight: 600;        
    color: #999;
}
.CAAinfoTitle {
    margin-bottom: 10px;
    color: #ff9900;
    font-size: 14px;
}
.cancelCertainTextAdmin {
    padding: 0 20px 0 20px;
    color: #ff0000;
    font-size: 14px;
    text-align: center;
}
.cancelCertainText {
    padding: 0 16px 0 16px;
    font-size: 14px; 
    color: #999;
    text-align: center;
}
.cancelCertainText span { 
    color: #D0D0D0;
}
.CAAactionsLink {
    margin: 20px 0 20px 0;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.4s linear;
}
.CAAactionsLink:hover {
    cursor: pointer;
    color: #ff9900;
    border: 2px solid #444;
    background-color: #1a1a1a;
}
#CAAcancelButt {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

@media screen and (min-width: 320px) and (max-width: 340px) {

    .cancelCertainText {
        padding: 0;
    }
    #CAAactionsLinkHolder {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #CAAactionsLinkInner { 
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .CAAactionsLink {
        height: 40px;
        max-width: 100%;
        min-width: 100%;
        padding: 9px 0 8px 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CAAcancelButt {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 341px) and (max-width: 431px) {

    .cancelCertainText {
        padding: 0;
    }
    #CAAactionsLinkHolder {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #CAAactionsLinkInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .CAAactionsLink {
        height: 40px;
        width: 100%;
        padding: 9px 16px 8px 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CAAcancelButt {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 432px) and (max-width: 991px) {

    .cancelCertainText {
        padding: 0;
    }
    #CAAactionsLinkHolder {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #CAAactionsLinkInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .CAAactionsLink {
        height: 40px;
        width: 230px;
        padding: 9px 16px 8px 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CAAcancelButt {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 992px) and (max-width: 1024px) {

    .cancelCertainText {
        padding: 0 16px 0 16px;
    }
    #CAAactionsLinkHolder {
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #CAAactionsLinkInner {
        margin: 0;
        padding: 0;
    }
    .CAAactionsLink {
        height: 40px;
        width: 100%;
        padding: 9.5px 16px 7.5px 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CAAcancelButt {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {

    .cancelCertainText {
        padding: 0 16px 0 16px;
    }
    #CAAactionsLinkHolder {
        margin: 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #CAAactionsLinkInner { 
        margin: 0;
        padding: 0;
    }
    .CAAactionsLink {
        height: 36px;
        width: 100%;
        padding: 7px 16px 8px 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    #CAAcancelButt {
        margin: 0;
        padding: 0;
    }
}

#CPAcancelButtHolder {
    width: 220px;
    margin: 0;
    padding: 0;
}
.CAAdeleteButt {
    width: 100%;
    margin: 0 0 15px 0;
    padding: 14px 10px 13px 10px;
    color: #ff0000;
    font-size: 14px;
    text-align: center;
    border-radius: 10px; 
    transition: all 0.3s linear;
}
.CAAdeleteButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}
.CPAdeleteButt {
    width: 100%;
    margin: 0 0 15px 0;
    padding: 14px 10px 13px 10px;
    color: #ff0000;
    font-size: 14px;
    text-align: center;
    border-radius: 10px; 
    transition: all 0.3s linear;
}
.CPAdeleteButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .CAAdeleteButt {
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }

    .CPAdeleteButt {
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
}
@media screen and (min-width: 1025px) {
   
    .CAAdeleteButt {
        border: 2px solid #333;
        background-color: #111; 
    }
    .CPAdeleteButt {
        border: 2px solid #333;
        background-color: #111; 
    }    
}

#CAAcancelButt {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
.canArtFormlabel {
    margin-bottom: 10px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #999;    
}
#CAAerrorHolder {
    height: 205px;
    margin: 0 0 20px 0;
    padding: 0;
}
.CPAconfirmAlert {
    margin: 0 0 5px 0; 
    padding: 10px; 
    color: #0088FF;
    font-size: calc(11px + 0.3vw);
    text-align: center;
    border: 2px solid #0088FF; 
    border-radius: 8px;
}
#CPAfeather {
    margin-bottom: 5px; 
    margin-top: 5px;
    font-size: 22px; 
}

@media screen and (max-width: 767px) {
    
    .cancelCertainTextQ {
        width: 100%;
        padding: 0 15px 0 15px;
        font-size: 12px;
        color: #ff0000;
        text-align: center;
    }    
    .CAAMessage {
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0; 
        left: 0; 
        padding: 24% 6% 24% 6%;
        text-align: center; 
        color: #ff9900;
        font-size: 12px;
        background-color: #111;
    }
    .CAAMessagePayouts {
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0; 
        left: 0; 
        padding: 21% 6% 21% 6%;
        text-align: center; 
        color: #ff9900;
        font-size: 12px;
        background-color: #111;
    }  
}
@media screen and (min-width: 768px) {

    .cancelCertainTextQ {
        width: 100%;
        font-size: 14px;
        color: #ff0000;
        text-align: center;
    }
    .CAAMessage {
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0; 
        left: 0; 
        padding: 15% 0 15% 0;
        text-align: center; 
        color: #ff9900;
        font-size: 13px;
        background-color: #111;
    }
    .CAAMessagePayouts {
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0; 
        left: 0; 
        padding: 13% 0 13% 0;
        text-align: center; 
        color: #ff9900;
        font-size: 13px;
        background-color: #111;
    }
}

#CAAlogo {
    height: 39px; 
    width: 40px;
    margin: 0 0 25px -4px; 
    padding: 0;
    border: 2px solid #333; 
    border-radius: 8px;
}
#CAAtriangle {
    margin: 0 0 20px 0;
    font-size: 24px; 
}
#okButtHolder {
    width: 120px;
}
.okButt {
    width: 120px;    
    margin: 20px 0 0 0;
    padding: 8px 0 8px 0;
    font-size: 12px;
    color: #ff9900;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.3s linear;
}
.okButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}



/* ///// END - CANCEL ARTIST / PLEDGSTA ACCOUNT PAGE ////// */

/* ============================================= */

/* ///////////// UPLOAD MUSIC PAGE ///////////// */

#uploadMusicColumn {
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}
#tableColumn {
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}

/* /// empty player alert // */

.emptyPlayerInfo { 
    width: 100%;
    margin: 0;
    padding: 12px 15px 13px 15px;
    font-size: 14px;
    /*font-size: calc(9px + 0.3vw);*/
    color: #ff0000;
    word-break: break-word;
    border-radius: 16px;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;      
}

/* /// no pledges yet alert // */

#noPledgesAlert {
    border-radius: 16px;      
}
#noPledgesInner {
    margin: 0;
    padding: 0;
}
.noPledgesInfo { 
    width: 100%;
    margin: 0;
    padding: 12px 15px 13px 15px;
    font-size: calc(9px + 0.3vw);
    color: #ff0000;
    word-break: break-word;
    border-radius: 16px;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;        
}

/* /// have one track alert // */

#oneTrackAlert {
    border-radius: 16px;      
}
#oneTrackInner {
    margin: 0;
    padding: 0;
}
.oneTrackInfo { 
    width: 100%;
    margin: 0;
    padding: 12px 15px 13px 15px;
    font-size: calc(9px + 0.3vw);
    color: #ff0000;
    word-break: break-word;
    border-radius: 16px;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;        
}

/* /// return to profile preview button // */

#goLiveBack {
    border-radius: 16px;      
}
#goLiveBackInner {
    width: 100%;
    margin: 0;
    padding: 0;
}
.goLiveBackButton { 
    width: 100%;
    margin: 0;
    padding: 12px 15px 13px 15px;
    color: #0088FF;
    word-break: break-word;
    border-radius: 16px;
    transition: all 0.4s linear;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}
.goLiveBackButton:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #161616;
}

/* /////////////////////////// */

#UMlabelHolder {
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) { /* navbar @ 60px high */ 
    
    #editMusicContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #uploadMusicColumn {
        margin: 75px 0 15px 0;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 7px 0 0 0;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }  
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }    
    #noPledgesAlert {
        margin: 0 0 15.5px 0;
        padding: 0;        
    }
    #oneTrackAlert {
        margin: 10px 0 0 0;
        padding: 0;        
    } 
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;   
    } 
    .oneTrackInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;   
    } 
    #goLiveBack {
        margin: 10px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;    
    } 
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 - navbar @ 60px high */ 
    
    #editMusicContainer {
        width: 80%;
    }    
    #uploadMusicColumn {
        margin: 75px 0 15px 0;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 10px 0 0 0;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo {
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }     
    #noPledgesAlert {
        margin: 0 0 15px 0;
        padding: 0;        
    }
    #oneTrackAlert {
        margin: 10px 0 0 0;
        padding: 0;        
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;    
    }   
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }   
    #goLiveBack {
        margin: 10px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton {
        font-size: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }  
}
@media screen and (min-width: 733px) and (max-width: 767px) { /* navbar @ 60px high */ 
    
    #editMusicContainer {
        width: 80%;
    }
    #uploadMusicColumn {
        margin: 75px 0 15px 0;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 10px 0 0 0;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    } 
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }  
    #noPledgesAlert {
        margin: 0 0 15px 0;
        padding: 0;        
    }
    #oneTrackAlert {
        margin: 10px 0 0 0;
        padding: 0;        
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;   
    } 
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    }
    #goLiveBack {
        margin: 10px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0a0a0a;    
    } 
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */ 

    #editMusicContainer {
        width: 70%;
    }
    #uploadMusicColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 18px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a;   
    }
    #uploadMusicInner {
        margin: 0;
        padding: 10px 0 0 0;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    } 
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }     
    #noPledgesAlert {
        margin: 0 0 15px 0;
        padding: 0;        
    }
    #oneTrackAlert {
        margin: 14.5px 0 0 0;
        padding: 0;        
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;    
    } 
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    }
    #goLiveBack {
        margin: 14.5px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton {
        font-size: 14px; 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    } 
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */
    
    #editMusicContainer {
        width: 65%;
    }
    #uploadMusicColumn {
        margin: 65px auto 15px auto;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a; 
    }  
    #uploadMusicInner {
        margin: 0;
        padding: 10px 0 0 0;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }  
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }    
    #noPledgesAlert {
        margin: 0 0 15px 0;
        padding: 0;        
    }
    #oneTrackAlert {
        margin: 14.5px 0 0 0;
        padding: 0;        
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;   
    } 
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    }
    #goLiveBack {
        margin: 14.5px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0a0a0a;    
    } 
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */

    #editMusicContainer {
        width: 65%;
    }
    #uploadMusicColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 10px 30px 0 30px;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }  
    #noPledgesAlert {
        margin: 0 0 15px 0;
        padding: 0; 
    }
    #oneTrackAlert {
        margin: 14.5px 0 0 0;
        padding: 0; 
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;   
    } 
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }
    #goLiveBack {
        margin: 14.5px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0a0a0a;    
    } 
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 */

    #editMusicContainer {
        width: 58%;  
    }
    #uploadMusicColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 15px 30px 0 30px;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    }   
    #noPledgesAlert {
        margin: 0 0 15px 0;
        padding: 0; 
    }
    #oneTrackAlert {
        margin: 14.5px 0 0 0;
        padding: 0; 
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;    
    } 
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;  
    }
    #goLiveBack {
        margin: 14.5px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0a0a0a;    
    } 
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */
    
    #editMusicContainer {
        width: 50%;
    }
    #uploadMusicColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a;
    }     
    #uploadMusicInner {
        margin: 0;
        padding: 0;
    }
    #tableColumn {
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a; 
    }
    #noPledgesAlert {
        margin: 0 0 15.5px 0;
        padding: 0;   
    }
    #oneTrackAlert {
        margin: 15px 0 0 0;
        padding: 0;   
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;    
    } 
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    }
    #goLiveBack {
        margin: 15px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0a0a0a;     
    } 
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #editMusicContainer {
        width: 50%;
    }
    #uploadMusicColumn {
        width: 100%;
        margin: 66px 0 15px 0;
        padding: 20px 20px 19px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;        
        background-color: #0a0a0a;  
    }
    #uploadMusicInner {
        margin: 0;
        padding: 0;
    }
    #tableColumn {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }    
    #emptyPlaylistContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    }
    #noPledgesAlert {
        width: 100%;
        margin: 0 0 15.5px 0;
        padding: 0;   
    }
    #oneTrackAlert {
        width: 100%;
        margin: 15px 0 0 0;
        padding: 0;   
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;   
    } 
    .oneTrackInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;    
    }
    #goLiveBack {
        width: 100%;
        margin: 15px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton {
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0a0a0a;     
    } 
}

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #editMusicContainer {
        width: 100%;
    }    
    #uploadMusicColumn {
        width: 25%;
        margin: 66px 12.5px 0 0;
        padding: 20px 20px 15px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 0;
    }
    #tableColumn {
        width: 47.25%;
        margin: 66px 0 0 0;
        padding: 0;
        border-radius: 34px;
        background-color: #0a0a0a;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #222;
        background-color: #0a0a0a;     
    }
    #noPledgesAlert {
        width: 47.25%;
        margin: 66px 0 -51px 0;
        padding: 0;   
    }
    #oneTrackAlert {
        width: 47.25%;
        margin: 13px 0 0 0;
        padding: 0;   
    }
    .noPledgesInfo {
        border: 2px solid #222; 
        background-color: #0a0a0a;    
    } 
    .oneTrackInfo {
        border: 2px solid #222;
        background-color: #0a0a0a;   
    }
    #goLiveBack {
        width: 47.25%;
        margin: 13px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton {
        font-size: 14px;
        border: 2px solid #222;
        background-color: #0a0a0a;  
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #editMusicContainer {
        width: 100%;
        margin: 0;
        padding: 0 0 20px 0;
    }
    #uploadMusicColumn {
        margin: 66px 0 0 10px;
        padding: 20px 20px 19px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;  
    }
    #tableColumn {
        width: 42.5%;
        margin: 66px 0 0 16px;
        padding: 0;
        border-radius: 20px;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 0;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #noPledgesAlert {
        width: 42.5%;
        margin: 66px 0 -51px 16px;
        padding: 0;   
    }
    #oneTrackAlert {
        width: 42.5%;
        margin: 16px 0 0 16px;
        padding: 0;   
    }
    .noPledgesInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    .oneTrackInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #goLiveBack {
        width: 42.5%;
        margin: 16px 0 0 16px;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #333;
        background-color: #111;     
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
  
    #editMusicContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #uploadMusicColumn {
        width: 25%;
        margin: 66px 17px 10px -26.75px;
        padding: 20px 20px 19px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111; 
    }    
    #tableColumn {
        width: 41.625%;
        margin-top: 66px;
        padding: 0;
        border-radius: 20px;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 0;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #noPledgesAlert {
        width: 41.625%;
        margin: 66px 0 -51px 0;
        padding: 0;   
    }
    #oneTrackAlert {
        width: 41.625%;
        margin: 17px 0 0 0;
        padding: 0;   
    }
    .noPledgesInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    .oneTrackInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #goLiveBack {
        width: 41.625%;
        margin: 17px 0 0 0;
        padding: 0;        
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #333;
        background-color: #111;     
    }
}
@media screen and (min-width: 1200px) and (max-width: 1200px) {
  
    #editMusicContainer {
        margin: 0;
        padding: 0 0 20px 0;
    }
    #uploadMusicColumn {
        margin: 66px 0 10px -24.5px;
        padding: 20px 20px 19px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 20px 0 0 0;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #tableColumn {
        margin: 66px 0 0 17px;
        padding: 0;
        border-radius: 20px;
    }
    #noPledgesAlert {
        margin: 66px 0 -51px 17px;
        padding: 0;  
    }
    #oneTrackAlert {
        margin: 17px 0 0 17px;
        padding: 0;  
    }
    .noPledgesInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    .oneTrackInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #goLiveBack {
        margin: 17px 0 0 17px;
        padding: 0;         
    } 
    .goLiveBackButton {
        font-size: 14px;
        border: 2px solid #333; 
        background-color: #111;     
    }
}
@media screen and (min-width: 1201px) {
  
    #editMusicContainer {
        margin: 66px 0 0 0;
        padding: 0 0 20px 0;
    }
    #uploadMusicColumn {
        margin: 0 0 10px -24.5px;
        padding: 20px 20px 19px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #uploadMusicInner {
        margin: 0;
        padding: 20px 0 0 0;
    }
    #emptyPlaylistContainer {
        margin: 0;
        padding: 0;
    }
    .emptyPlayerInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #tableColumn {
        margin: 0 0 0 17px;
        padding: 0;
        border-radius: 20px;
    }
    #noPledgesAlert {
        margin: 0 0 15px 17px;
        padding: 0;  
    }
    #oneTrackAlert {
        margin: 17px 0 0 17px;
        padding: 0;  
    }
    .noPledgesInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    .oneTrackInfo { 
        border: 2px solid #333;
        background-color: #111;     
    }
    #goLiveBack {
        margin: 17px 0 0 17px;
        padding: 0;         
    } 
    .goLiveBackButton { 
        font-size: 14px;
        border: 2px solid #333;
        background-color: #111;     
    }
}

.musicTableTitleContainer {
    width: 100%;
    margin: 0;
    padding: 0 15px 0 15px;
}
#music_form {
    margin-bottom: 3px;
}
#UpLoadMusicNumAlertHolder {
    margin: 0; 
    padding: 0;
}
#uploadMusicsPreviewWrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.shortpreviewUM {
    margin: 0 auto 10px auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#uploadCoverPreviewUM {}
#imagePreviewUM { 
    margin: 0;
    padding: 0;
    border-radius: 14px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.UMHighlightBack {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000;
}
.UMhighlightImage {    
    padding: 0;
    color: #ff0000;
    border-radius: 10px;
    border: 2px solid rgba(255, 0, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;        
}  
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .shortpreviewUM {
        height: 258px; 
        width: 258px;   
    }
    #imagePreviewUM {    
        height: 258px; 
        width: 258px;
        border: 2px solid #222;
    }
    .UMhighlightImage {    
        min-height: 258px; 
        min-width: 258px;
        max-width: 258px;
        margin: -265px 0 0 0;       
    }    
}
@media screen and (min-width: 768px) and (max-width: 992px) {

    .shortpreviewUM {
        height: 244px;
        width: 244px;   
    }
    #imagePreviewUM {    
        height: 244px; 
        width: 244px;
        border: 2px solid #222;
    }
    .UMhighlightImage {    
        min-height: 244px;
        min-width: 244px;
        max-width: 244px;
        margin: -255px 0 0 0;        
    }    
}
@media screen and (min-width: 993px) and (max-width: 1024px) {
    
    .shortpreviewUM {
        height: 205px; 
        width: 205px;   
    }
    #imagePreviewUM {    
        height: 205px; 
        width: 205px;
        border: 2px solid #222;
    }
    .UMhighlightImage {    
        min-height: 205px;
        min-width: 205px;
        max-width: 205px;
        margin: -206px 0 0 0;       
    }      
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    
    .shortpreviewUM {
        height: 205px; 
        width: 205px;   
    }
    #imagePreviewUM {    
        height: 205px; 
        width: 205px;
        border: 2px solid #333;
    }
    .UMhighlightImage {    
        min-height: 205px;
        min-width: 205px;
        max-width: 205px;
        margin: -206px 0 0 0;       
    }      
}
@media screen and (min-width: 1201px) {
    
    .shortpreviewUM {
        height: 250px;
        width: 250px;   
    }
    #imagePreviewUM {    
        height: 250px;
        width: 250px;
        border: 2px solid #333;
    }
    .UMhighlightImage {
        min-height: 250px;
        min-width: 250px;
        max-width: 250px;
        margin: -255px 0 0 0; 
    }
}

.notifyPledgeAlertUM {
    width: 100%;
    margin: 0 0 10px 0; 
    padding: 10px; 
    color: #ff0000; 
    font-size: 13px;
    text-align: center;
    border-radius: 8px; 
    background-color: #000;
}
#UMlockPledgeContainer {
    margin: 20px 0 0 0; 
    padding: 0;
}
#UMeditId3Container {
    display: none;   
    margin: 20px 0 0 0; 
    padding: 0;
}
.UMFormlabel {
    margin-bottom: 10px;
    padding: 0;
    font-weight: 600;
    color: #999;
}
.UMpledgeLockTitle {
    margin-bottom: 10px; 
    padding: 0; 
    font-size: 14px; 
    font-weight: 600;        
    color: #999;    
    text-align: center;
}
.UMeditId3TagTitle {
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    font-weight: 600;        
    color: #999;    
    text-align: center;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .UMFormlabel {
        font-size: 14px;
    }
    #UMpledgeLocktext {
        font-size: 12px;
        font-weight: 600;
        color: #999;
    }   
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {

    .UMFormlabel {
        font-size: 12px;
    }    
    #UMpledgeLocktext {
        font-size: 12px;
        font-weight: 600;
        color: #999;
    }       
}
@media screen and (min-width: 1200px) {
    
    .UMFormlabel {
        font-size: 12px;
    }   
    #UMpledgeLocktext {
        font-size: 12px;
        font-weight: 600;
        color: #999;
    }     
}

#uploadMusicCheckboxContainer {
    margin: 10px 0 0 0;
    padding: 10px 10px 5px 0;
}
.UMconfirmEmailLink {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#uploadMusicConfirmEmail {
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 14px 10px 13px 10px;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    word-break: break-word;
    transition: ease-in-out 0.4s;       
}
#uploadMusicConfirmEmail:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #111;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    #uploadMusicCheckboxContainer {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadMusicConfirmEmail {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    #uploadMusicCheckboxContainer {
        border-radius: 8px;
        border: 2px solid #333; 
        background-color: #111;
    } 
    #uploadMusicConfirmEmail {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
}

.multiDeleteButtHolder {
    margin: 0; 
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #UMNoCheckboxContainer {
        margin: 29px 0 0 0;
        padding: 0;
    }
    .multiDelete {        
        height: 40px;
        width: 130px;  
        margin: 10px 0 11px 1px;
        padding: 4px 0 4px 0;
        color: #666;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .multiDelete:hover {
        cursor: pointer;
        color: #ff0000;
        border: 2px solid #ff0000;      
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {

    #UMNoCheckboxContainer {
        margin: 29px 0 0 0;
        padding: 0;
    }
    .multiDelete {        
        height: 40px;
        width: 130px;  
        margin: 0 0 10px 1px;
        color: #666;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .multiDelete:hover {
        cursor: pointer;
        color: #ff0000;
        border: 2px solid #ff0000;     
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {

    #UMNoCheckboxContainer {
        margin: 10px 0 0 0;
        padding: 0;
    }       
    .multiDelete {        
        height: 40px;
        width: 130px;  
        margin: 0 0 5px 0;
        color: #666;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;   
    }
    .multiDelete:hover {
        cursor: pointer;
        color: #ff0000;
        border: 2px solid #ff0000;       
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) {
    
    #UMNoCheckboxContainer {
        margin: 10px 0 0 0;
        padding: 0;
    }       
    .multiDelete {        
        height: 32px;
        width: 130px;  
        margin: 0 0 7px 0;
        color: #666;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;   
    }
    .multiDelete:hover {
        cursor: pointer;
        color: #ff0000;
        border: 2px solid #ff0000;       
        background-color: #111;
    }
}

/* Upload Music */

@media screen and (min-width: 320px) and (max-width: 767px) {

    .UMtitleHolder {
        height: 100px;
        margin: 0;
    }
    .UMmp3Holder {
        height: 100px;
        margin: 0;
    }
    .UMCoverHolder {
        height: 100px;
        margin: 0;
    }
}
@media screen and (min-width: 768px) {
    
    .UMtitleHolder { 
        height: 100px;
        margin: 0;
    }
    .UMmp3Holder { 
        height: 100px;
        margin: 0;
    }
    .UMCoverHolder {
        height: 100px;
        margin: 0;
    }
}

#track_1File {
    display: none;
}
#mp3File {
    font-size: 12px;
}
#ImageFile {
    display: none;
}

/* upload gallery */

#jpegFile {
    font-size: 12px;
}
#uploadFile3 {
    display: none; 
}

/* // JS error alerts // */

#ValidMusicTitleError,
#ValidMusicmp3Error,
#ValidMusicCoverError {
    margin: 8px 0 0 1px;
    color: #ff0000;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;    
    background-color: transparent;
}
#ValidMusicTitleInfo,
#ValidMusicmp3Info,
#ValidMusicCoverInfo {
    margin: 8px 0 0 1px;
    color: #ff9900;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;    
    background-color: transparent;
}
/* // PHP error alerts // */

/* - bit rate error - */
.UpLoadMusicBitAlert {
    margin: 0 0 12px 0; 
    padding: 10px;
    color: #ff0000;
    font-size: calc(9px + 0.3vw);
    line-height: 1.5;
    text-align: center;  
    border: 2px solid red;
    border-radius: 6px;
    background-color: #111; 
}
#UMBitAlertTriangle {
    margin-top: 3px;
    margin-bottom: 6px;
    font-size: 20px; 
}

/* - less than 1 track error - */
.UpLoadMusicNumAlert {
    margin: 0 16px 6px 17px; 
    padding: 10px;
    color: #ff0000;
    font-size: calc(9px + 0.3vw);
    line-height: 1.5;
    text-align: center;  
    border: 2px solid red;
    border-radius: 6px;
    background-color: #111;
}
#UMNumAlertTriangle {
    margin-top: 3px;
    margin-bottom: 6px;
    font-size: 20px;  
}
#emptyMsgMp3SelectUM {
    display: none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;    
}
#emptyMsgImageSelectUM,
#invalidMsgImageUM {
    display: none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;
}
.MusicHighLight {
    height: 31px;
    margin: -41px 0 10px 0;
    padding: 0 10px 0 10px;
    border: 2px solid red;
    border-radius: 6px;
    background-color: rgba(255, 0, 0, 0.4);
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .UMHighLightMp3SelectUM {
        height: 31px;
        margin: -31px 0 0 0;
        padding: 0 10px 0 10px;
        border: none;
        border-radius: 8px;
        background-color: rgba(255, 0, 0, 0.4);    
    }
    #UMeditId3checkboxContainer {
        margin: 20px 0 0 0;
        padding: 10px 10px 5px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #UMselectEditId3Text {
        margin: 5px 0 0 0;
        padding: 0;
        color: #888;
        font-size: 11px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    .UMHighLightMp3SelectUM {
        height: 31px;
        margin: -31px 0 0 0;
        padding: 0 10px 0 10px;
        border-radius: 6px;
        border: 2px solid red;
        background-color: rgba(255, 0, 0, 0.4);    
    }    
    #UMeditId3checkboxContainer {
        margin: 20px 0 0 0;
        padding: 10px 10px 5px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #UMselectEditId3Text {
        margin: 3px 0 0 0;
        padding: 0;
        color: #888;
        font-size: 14px;
    }  
}

@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .UMHighLightMp3SelectUM {
        height: 31px;
        margin: -31px 0 0 0;
        padding: 0 10px 0 10px;
        border-radius: 6px;
        border: 2px solid red;
        background-color: rgba(255, 0, 0, 0.4);    
    }    
    #UMeditId3checkboxContainer {
        margin: 20px 0 0 0;
        padding: 10px 10px 5px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #UMselectEditId3Text {
        margin: 3px 0 0 0;
        padding: 0;
        color: #888;
        font-size: 14px;
    }  
}
@media screen and (min-width: 1025px) {
    
    .UMHighLightMp3SelectUM {
        height: 31px;
        margin: -31px 0 0 0;
        padding: 0 10px 0 10px;
        border-radius: 6px;
        border: 2px solid red;
        background-color: rgba(255, 0, 0, 0.4);    
    }    
    #UMeditId3checkboxContainer {
        margin: 20px 0 0 0;
        padding: 10px 10px 5px 0;
        border-radius: 8px;
        border: 2px solid #333; 
        background-color: #111;   
    }
    #UMselectEditId3Text {
        margin: 3px 0 0 0;
        padding: 0;
        color: #888;
        font-size: 14px;
    }  
}

.UMHighLightImageSelectUM {
    height: 31px;
    margin: -31px 0 0 0;
    padding: 0 10px 0 10px;
    border: 2px solid red;
    border-radius: 6px;
    background-color: rgba(255, 0, 0, 0.4);
}
#uploadMusicPreviewWrapper {
    width: 100%;
    margin: 10px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#highlightImageColumnUM {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;        
}

/* //////////// START - Playlist-Table ///////// */

#trackDisplaytable {
    border: none;
}
#tracktable {
    background-color: transparent;
}
#tracktable table {
    width: 100%;
    font-size: 11px;
    border-collapse: collapse;
    border: transparent;
}
#tracktable thead {
    display: table;
    width: auto;
    table-layout: auto;
}
#tracktable thead th {
    color: #999;
}
.MUtheadSpacer {
    width: 30px;
    margin: 0;
    padding: 0;
}
#tracktable tbody {
    display: block;
    width: 100%;
    overflow: auto;
    margin: -4px -5px 0 0; 
    padding: 0 0 4px 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #musicTableFrame {
        width: 100%;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
    }
    #tracktable thead {
        border-bottom: 2px solid #222;
    }
    #tracktable th {
        border-bottom: 2px solid #222;
    }
    #tracktable tbody {
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #111;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #musicTableFrame {
        width: 100%;
        border-radius: 20px;
        border: 2px solid #222;
    }
    #tracktable thead {
        border-bottom: 2px solid #222;
    }
    #tracktable th {
        border-bottom: 2px solid #222;
    }
    #tracktable tbody {
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {

    #musicTableFrame {
        width: 100%;
        border-radius: 20px;
        border: 2px solid #333;
    }
    #tracktable thead {
        border-bottom: 2px solid #333;
    }
    #tracktable th {
        border-bottom: 2px solid #333;
    }
    #tracktable tbody {
        border-top: 2px solid #333;
        border-bottom: 2px solid #333;
    }
}

#UMnoNotify {
    color: #111;
}
#notifyIconPosts {
    font-size: 14px; 
}
#uploadButtUMContainer {
    margin: 0;
    padding: 0;
    text-align: center;
}
.uploadButtUM {
    height: 52px;
    width: 100%;
    padding: 14px 10px 15px 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.4s linear;
}
.uploadButtUM:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (max-width: 767px) {

    #UMoptionsHolder {
        margin: 0;
        padding: 0;
    }
    .uploadButtUM {
        margin: 30px 0 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }  
}
@media screen and (min-width: 768px) and (max-width: 824px) {

    #UMoptionsHolder {
        margin: 0;
        padding: 0;        
    } 
    .uploadButtUM {
        margin: 30px 0 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
}
@media screen and (min-width: 825px) and (max-width: 1023px) {

    #UMoptionsHolder {
        margin: 20px 0 0 0;
        padding: 0;
    } 
    .uploadButtUM {
        margin: 30px 0 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #UMoptionsHolder {
        margin: 0;
        padding: 0;
    }     
    .uploadButtUM {
        margin: 28px 0 5px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {

    #UMoptionsHolder {
        margin: 0;
        padding: 0;
    }    
    .uploadButtUM {
        margin: 30px 0 0 0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
    }     
}

@media screen and (min-width: 320px) and (max-width: 768px) {

    #musicTableFrame {
        padding: 10px 0 1px 0;
    }
    #tracktable tbody {
        height: auto;
        max-height: 400px;
    }    
    #tracktable tbody tr td {
        background-color: #0a0a0a;
    }
    #tracktable img {
        max-height: 30px;
        max-width: 30px;
        margin: 0;
        border-radius: 4px;
        object-position: 50% 50%;
        object-fit: cover;        
    }
    #checkallWrapperUM {
        height: 30px;
        margin: 1px 0 -12px 0;
        padding: 0 0 0 6px;
    }    
    .chkboxWrapperUM {
        height: 30px;
        margin-top: 1px;
        margin-left: 0;         
        padding-top: 5px; 
        padding-left: 6px;
    }
    #UMtablefooterContainer {
        text-align: center;
        margin: 0 0 0 -5px;
        padding: 0; 
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {

    #musicTableFrame {
        padding: 10px 0 10px 0;
    } 
    #tracktable tbody {
        height: auto;
        max-height: 300px;
    }    
    #tracktable tbody tr td {
        background-color: #0d0d0d;
    }
    #tracktable img {
        height: 32px;
        width: 32px;
        margin: 0;
        border-radius: 4px;
        object-position: 50% 50%;
        object-fit: cover;    
    }
    #checkallWrapperUM {
        height: 30px;
        margin: 1px 0 -11px 0;
        padding: 0 0 0 6px;
    }    
    .chkboxWrapperUM {
        height: 30px;
        margin-top: 1px;
        margin-left: 0;        
        padding-top: 5px; 
        padding-left: 6px;
    }  
    #UMtablefooterContainer {
        text-align: center;
        margin: 0; 
        padding: 0; 
    }  
}
@media screen and (min-width: 1025px) {

    #musicTableFrame {
        padding: 10px 0 10px 0;
    } 
    #tracktable tbody {
        height: auto;
        max-height: 300px;
    }    
    #tracktable tbody tr td {
        background-color: #111;
    }
    #tracktable img {
        height: 32px;
        width: 32px;
        margin: 0;
        border-radius: 4px;
        object-position: 50% 50%;
        object-fit: cover;    
    }
    #checkallWrapperUM {
        height: 30px;
        margin: 1px 0 -11px 0;
        padding: 0 0 0 6px;
    }    
    .chkboxWrapperUM {
        height: 30px;
        margin-top: 1px;
        margin-left: 0;        
        padding-top: 5px; 
        padding-left: 6px;
    }  
    #UMtablefooterContainer {
        text-align: center;
        margin: 0; 
        padding: 0; 
    }  
}

@media screen and (min-width: 320px) and (max-width: 359px) {

    #tracktable thead th {
        font-size: 12px;
    }       
    #tracktable td {
        font-size: 10px;
    }
    .trackWrapperLong {
        position: relative;
        height: 30px;
        width: 82px;
        padding-top: 7.5px;
        padding-right: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    .trackWrapperLong:before {
        content: '';
        position: absolute;
    }
    .trackWrapper {
        height: 30px;
        width: 62px;
        margin: 0;
        padding-top: 7.5px;
        padding-right: 0;
        white-space: nowrap;
    }
    .artistWrapper {
        height: 30px;
        margin: 0;    
        padding-top: 7.5px;
    }
    #UMNotified {        
        height: 30px;
        margin: 0;    
        padding: 7.5px 0 0 16px;
        color: #0088FF;
        background-color: none;
    }
    #tracktable thead th:nth-child(1), /* Checkbox */
    #tracktable tbody td:nth-child(1) {
        width: 3%;  
    }
    #tracktable thead th:nth-child(2), /* Cover */
    #tracktable tbody td:nth-child(2) {
        width: 17.5%;
        text-align: center; 
    }
    #tracktable thead th:nth-child(3), /* Track Title */
    #tracktable tbody td:nth-child(3) {
        width: 30%;
        padding-left: 0;
        padding-right: 0;
    }
    #tracktable thead th:nth-child(4), /* Date Added */
    #tracktable tbody td:nth-child(4) {
        width: 18%;
        padding-left: 0;
        padding-right: 0;   
    }
    #tracktable thead th:nth-child(5), /* Notified */
    #tracktable tbody td:nth-child(5) {
        width: 18%;
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (min-width: 360px) and (max-width: 400px) {

    .trackWrapperLong {
        width: 108px;
    }
}
@media screen and (min-width: 401px) and (max-width: 450px) {

    .trackWrapperLong {
        width: 125px;
    }
}
@media screen and (min-width: 451px) and (max-width: 532px) {

    .trackWrapperLong {
        width: 140px;
    }
}
@media screen and (min-width: 533px) and (max-width: 767px) {

    .trackWrapperLong {
        width: 200px;
    }
}

@media screen and (min-width: 360px) and (max-width: 532px) {
    
    #tracktable thead th {
        font-size: 12px;
    }         
    #tracktable td {
        font-size: 10px;
    } 
    .trackWrapperLong {
        position: relative;
        height: 30px;
        padding-top: 7.5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    .trackWrapperLong:before {
        content: '';
        position: absolute;
    }
    .trackWrapper {
        height: 30px;
        margin: 0;
        padding-top: 7.5px;
    }
    .artistWrapper {
        height: 30px;
        margin: 0;    
        padding-top: 7.5px;
    }
    #UMNotified {        
        height: 30px;
        margin: 0;    
        padding: 7.5px 0 0 16px;
        color: #0088FF;
        background-color: none;
    }
    #tracktable thead th:nth-child(1), /* Checkbox */
    #tracktable tbody td:nth-child(1) {
        width: 4%;  
    }
    #tracktable thead th:nth-child(2), /* Cover */
    #tracktable tbody td:nth-child(2) {
        width: 16%;
        text-align: center;
    }
    #tracktable thead th:nth-child(3), /* Track Title */
    #tracktable tbody td:nth-child(3) {
        width: 34%;
        padding-left: 0;
        padding-right: 0;
    }
    #tracktable thead th:nth-child(4), /* Date Added */
    #tracktable tbody td:nth-child(4) {
        width: 17%;
        padding-left: 0;
        padding-right: 0;   
    }
    #tracktable thead th:nth-child(5), /* Notified */
    #tracktable tbody td:nth-child(5) {
        width: 17%;
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (min-width: 533px) and (max-width: 767px) {
    
    #tracktable thead th {
        font-size: 12px;
    }     
    #tracktable td {
        font-size: 12px;
    } 
    .trackWrapperLong {
        position: relative;
        height: 30px;
        padding-top: 7.5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    .trackWrapperLong:before {
        content: '';
        position: absolute;
    }
    .trackWrapper {
        height: 30px;
        margin: 0;
        padding-top: 7.5px;
    }
    .artistWrapper {
        height: 30px;
        margin: 0;    
        padding-top: 7.5px;
    } 
    #UMNotified {        
        height: 30px;
        margin: 0;   
        padding: 7.5px 0 0 19px; 
        color: #0088FF;
        background-color: none;
    }
    #tracktable thead th:nth-child(1), /* Checkbox */ 
    #tracktable tbody td:nth-child(1) {
        width: 4%;
    }
    #tracktable thead th:nth-child(2), /* Cover */ 
    #tracktable tbody td:nth-child(2) {
        width: 15%;
        text-align: center;            
    }
    #tracktable thead th:nth-child(3), /* Track Title */ 
    #tracktable tbody td:nth-child(3) {
        width: 40%;
        padding-left: 0;
        padding-right: 0;    
    }
    #tracktable thead th:nth-child(4), /* Date Added */ 
    #tracktable tbody td:nth-child(4) {
        width: 16%;
        padding-left: 0;
        padding-right: 0;  
    }
    #tracktable thead th:nth-child(5), /* Notified */ 
    #tracktable tbody td:nth-child(5) {
        width: 15.5%;
        padding-left: 0;
        padding-right: 0;
    }   
}
@media screen and (min-width: 768px) and (max-width: 854px) {
    
    #tracktable thead th {
        font-size: 12px;
    }
    #tracktable td {
        font-size: 12px;
    }  
    .trackWrapperLong {
        position: relative;
        height: 30px;
        width: 230px;
        padding-top: 7px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    .trackWrapperLong:before {
        content: '';
        position: absolute;
    }
    .trackWrapper {
        height: 30px;
        margin: 0;
        padding-top: 7px;
    }
    .artistWrapper {
        height: 30px;
        margin: 0;    
        padding-top: 7px;
    }
    #UMNotified {
        height: 30px;
        margin: 0;    
        padding: 7px 0 0 20px;
        color: #0088FF;
        background-color: none;
    }
    #tracktable thead th:nth-child(1), /* Checkbox */
    #tracktable tbody td:nth-child(1) {
        width: 4%;
    }
    #tracktable thead th:nth-child(2), /* Cover */
    #tracktable tbody td:nth-child(2) {
        width: 12%;
        text-align: center;
    }
    #tracktable thead th:nth-child(3), /* Track Title */
    #tracktable tbody td:nth-child(3) {
        width: 47%;
        padding-left: 0;
        padding-right: 0;
    }
    #tracktable thead th:nth-child(4), /* Date Added */
    #tracktable tbody td:nth-child(4) {
        width: 14.5%;
        padding-left: 0;
        padding-right: 0;
    }       
    #tracktable thead th:nth-child(5), /* Notified */
    #tracktable tbody td:nth-child(5) {
        width: 14%;
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (min-width: 855px) and (max-width: 1023px) { /* 854 */
    
    #tracktable thead th {
        font-size: 12px;
    }
    #tracktable td {
        font-size: 12px;
    }  
    .trackWrapperLong {
        position: relative;
        height: 30px;
        width: 180px;
        padding-top: 7px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    .trackWrapperLong:before {
        content: '';
        position: absolute;
    }
    .trackWrapper {
        height: 30px;
        margin: 0;
        padding-top: 7px;
    }
    .artistWrapper {
        height: 30px;
        margin: 0;    
        padding-top: 7px;
    }
    #UMNotified {
        height: 30px;
        margin: 0;    
        padding: 7px 0 0 20px;
        color: #0088FF;
        background-color: none;
    }
    #tracktable thead th:nth-child(1), /* Checkbox */
    #tracktable tbody td:nth-child(1) {
        width: 4%;
    }
    #tracktable thead th:nth-child(2), /* Cover */
    #tracktable tbody td:nth-child(2) {
        width: 14%;
        text-align: center;
    }
    #tracktable thead th:nth-child(3), /* Track Title */
    #tracktable tbody td:nth-child(3) {
        width: 44.5%;
        padding-left: 0;
        padding-right: 0;
    }
    #tracktable thead th:nth-child(4), /* Date Added */
    #tracktable tbody td:nth-child(4) {
        width: 17%;
        padding-left: 0;
        padding-right: 0;
    }       
    #tracktable thead th:nth-child(5), /* Notified */
    #tracktable tbody td:nth-child(5) {
        width: 15.5%;
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    
    #tracktable thead th {
        font-size: 12px;
    }
    #tracktable td {
        font-size: 12px;
    }  
    .trackWrapperLong {
        position: relative;
        height: 30px;
        width: 180px;
        padding-top: 7px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    .trackWrapperLong:before {
        content: '';
        position: absolute;
    }
    .trackWrapper {
        height: 30px;
        margin: 0;
        padding-top: 7px;
    }
    .artistWrapper {
        height: 30px;
        margin: 0;    
        padding-top: 7px;
    }
    #UMNotified {
        height: 30px;
        margin: 0;    
        padding: 7px 0 0 20px;
        color: #0088FF;
        background-color: none;
    }
    #tracktable thead th:nth-child(1), /* Checkbox */ 
    #tracktable tbody td:nth-child(1) {
        width: 4%;  
    }
    #tracktable thead th:nth-child(2), /* Cover */
    #tracktable tbody td:nth-child(2) {
        width: 14.5%;
        text-align: center;    
    }
    #tracktable thead th:nth-child(3), /* Track Title */
    #tracktable tbody td:nth-child(3) {
        width: 46%;
        padding-left: 0;
        padding-right: 0;    
    }
    #tracktable thead th:nth-child(4), /* Date Added */
    #tracktable tbody td:nth-child(4) {
        width: 15.5%;
        padding-left: 0;
        padding-right: 0;     
    }       
    #tracktable thead th:nth-child(5), /* Notified */
    #tracktable tbody td:nth-child(5) {
        width: 14%;
        padding-left: 0;
        padding-right: 0;   
    }
}
@media screen and (min-width: 1181px) {
    
    #tracktable thead th {
        font-size: 14px;
    }     
    #tracktable td {
        font-size: 12px;
    }  
    .trackWrapperLong {
        position: relative;
        height: 30px;
        width: 240px;
        padding-top: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
    }
    .trackWrapperLong:before {
        content: '';
        position: absolute;
    }
    .trackWrapper {
        height: 30px;
        margin: 0;
        padding-top: 8px;
    }
    .artistWrapper {
        height: 30px;
        margin: 0;    
        padding-top: 8px;
    }
    #UMNotified {
        height: 30px;
        margin: 0;    
        padding: 9px 0 0 20px;
        color: #0088FF;
        background-color: none;
    }
    #tracktable thead th:nth-child(1), /* Checkbox */
    #tracktable tbody td:nth-child(1) {
        width: 4%;
    }
    #tracktable thead th:nth-child(2), /* Cover */
    #tracktable tbody td:nth-child(2) {
        width: 14%;
        text-align: center;          
    }
    #tracktable thead th:nth-child(3), /* Track Title */
    #tracktable tbody td:nth-child(3) {
        width: 46%;
        padding-left: 0;
        padding-right: 0;  
    }
    #tracktable thead th:nth-child(4), /* Date Added */
    #tracktable tbody td:nth-child(4) {
        width: 20.5%;
        padding-left: 0;
        padding-right: 0;  
    }       
    #tracktable thead th:nth-child(5), /* Notified */
    #tracktable tbody td:nth-child(5) {
        width: 13%;
        padding-left: 0;
        padding-right: 0;  
    }
}

/* //// Firefox & Chrome //// */

#tracktable tbody {
    scrollbar-width: none;
}
#tracktable tbody tr:nth-child(odd) {
    background-color: #101010;
}
#tracktable tbody tr:nth-child(even) {
    background-color: #101010;
}

#tracktable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/* //////////// END - Playlist-Table /////////// */

/* ////////// END - UPLOAD MUSIC PAGE ////////// */

/* ============================================= */

/* //////////// UPLOAD GALLERY PAGE //////////// */ 

#UGhighlightImageColumn {
    margin: 0; 
    padding: 0;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;       
}

@media screen and (max-width: 1023px) {

    #uploadGalleryColumnInner {
        margin: 20px 0 10px 0;
        padding: 0;
    }
    .UGFormlabel {
        margin-bottom: 10px;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        color: #999;
    }
}
@media screen and (min-width: 1024px)  {

    #uploadGalleryColumnInner {
        margin: 0 0 10px 0;
        padding: 0;
    }
    .UGFormlabel {
        margin-bottom: 10px;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        color: #999;
    }
}
}
.shortpreviewUG {
    margin: 0 auto 10px auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#uploadImagePreviewUG {}
#imagePreviewUG { 
    margin: 0;
    padding: 0;
    border-radius: 14px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.UGHighlightBack {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000;
}
.UGhighlightImage {    
    padding: 0;
    color: #ff0000;
    border-radius: 10px;
    border: 2px solid rgba(255, 0, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;        
}  
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .shortpreviewUG {
        height: 254px; 
        width: 254px;   
    }
    #imagePreviewUG {    
        height: 254px; 
        width: 254px;
        border: 2px solid #222;
    }
    .UGhighlightImage {    
        min-height: 254px; 
        min-width: 254px;
        max-width: 254px;
        margin: -265px 0 0 0;       
    }    
}
@media screen and (min-width: 768px) and (max-width: 992px) {

    .shortpreviewUG {
        height: 244px;
        width: 244px;   
    }
    #imagePreviewUG {    
        height: 244px; 
        width: 244px;
        border: 2px solid #222;
    }
    .UGhighlightImage {    
        min-height: 244px;
        min-width: 244px;
        max-width: 244px;
        margin: -255px 0 0 0;        
    }    
}
@media screen and (min-width: 993px) and (max-width: 1023px) {
    
    .shortpreviewUG {
        height: 196px; 
        width: 196px;   
    }
    #imagePreviewUG {    
        height: 196px; 
        width: 196px;
        border: 2px solid #222;
    }
    .UGhighlightImage {    
        min-height: 196px;
        min-width: 196px;
        max-width: 196px;
        margin: -206px 0 0 0;       
    }      
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .shortpreviewUG {
        height: 196px; 
        width: 196px;   
    }
    #imagePreviewUG {    
        height: 196px; 
        width: 196px;
        border: 2px solid #222;
    }
    .UGhighlightImage {    
        min-height: 196px;
        min-width: 196px;
        max-width: 196px;
        margin: -206px 0 0 0;       
    }      
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    
    .shortpreviewUG {
        height: 196px; 
        width: 196px;   
    }
    #imagePreviewUG {    
        height: 196px; 
        width: 196px;
        border: 2px solid #333;
    }
    .UGhighlightImage {    
        min-height: 196px;
        min-width: 196px;
        max-width: 196px;
        margin: -206px 0 0 0;       
    }      
}
@media screen and (min-width: 1201px) {
    
    .shortpreviewUG {
        height: 244px;
        width: 244px;   
    }
    #imagePreviewUG {    
        height: 244px; 
        width: 244px;
        border: 2px solid #333;
    }
    .UGhighlightImage {
        min-height: 244px;
        min-width: 244px;
        max-width: 244px;
        margin: -254px 0 0 0;
    }
}


.uploadInputHolder {
    margin: 0; 
    padding: 0;
}
.GalleryAlertHolder {
    height: 28px;
    padding: 8px 0 0 0;
}
#ValidGalleryImageError {
    line-height: 1.4;
    margin: 0 0 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;    
    background-color: transparent;
} 
#emptyMsgWrapper {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 0;
}
#uploadGalleryPreviewWrapper {
    width: 100%;
    margin-top: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#UGSelectLockContainer {
    margin: 30px 0 15px 0;
    padding: 0;
}

#GalleryCheckboxContainer0 {
    margin: 10px 0 0 0;
    padding: 10px 10px 5px 0;
}
#GalleryCheckboxContainer5 {
    margin: 10px 0 0 0;
    padding: 10px 10px 5px 0;
}
#GalleryCheckboxContainer10 {
    margin: 10px 0 0 0;
    padding: 10px 5px 5px 0;
} 

.uploadButtUG {
    width: 100%;
    margin: 10px 0 0 0;
    padding: 14px 10px 14px 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s linear;
}
.uploadButtUG:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #GalleryCheckboxContainer0 {
        border-radius: 10px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #GalleryCheckboxContainer5 {
        border-radius: 10px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #GalleryCheckboxContainer10 {
        border-radius: 10px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    } 
    .uploadButtUG {
        border-radius: 10px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    #GalleryCheckboxContainer0 {
        border-radius: 10px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #GalleryCheckboxContainer5 {
        border-radius: 10px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #GalleryCheckboxContainer10 {
        border-radius: 10px;
        border: 2px solid #333; 
        background-color: #111;
    }
    .uploadButtUG {
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
    }
}

#Gallerycontainer_chk {
    height: 18px; 
    width: 0; 
    margin-left: -10px;
}
#uploadGalleryColumn {
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#galleryTableHolder {
    padding: 0;
}
.emptyGalleryInfo {
    height: 60px;
    width: 100%;
    margin: 0;
    padding: 20px 15px 20px 15px;
    color: #ff0000;
    font-size: 14px;
    word-break: break-word;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;     
}
#galleryTableColumn {
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;    
}
#galleryColumn {
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}  
#galleryButtWrapper {
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) { /* - navbar @ 60px high */
    
    #uploadGalleryContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }    
    #uploadGalleryColumn {
        margin: 75px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryTableHolder {
        margin: 0;
    }
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }    
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableColumn {
        margin: 0 0 15px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }

}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 - navbar @ 60px high */
    
    #uploadGalleryContainer {
        width: 80%;
    }    
    #uploadGalleryColumn {
        margin: 75px auto 15px auto;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableHolder {
        margin: 0;
    }
    #galleryTableColumn {
        margin: 0 auto 10px auto;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 20px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) {
    
    #uploadGalleryContainer {
        width: 80%;
    }    
    #uploadGalleryColumn {
        margin: 75px auto 15px auto;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableHolder {
        margin: 0;
    }
    #galleryTableColumn {
        margin: 0 auto 15px auto;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }

}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */
    
    #uploadGalleryContainer {
        width: 70%;
    }    
    #uploadGalleryColumn {
        margin: 65px auto 15px auto;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableHolder {
        margin: 0;
    }
    #galleryTableColumn {
        margin: 0 auto 15px auto;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */
    
    #uploadGalleryContainer { 
        width: 65%;
    }
    #uploadGalleryColumn {
        margin: 65px auto 15px auto;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableHolder {
        margin: 0;
    }
    #galleryTableColumn {
        margin: 0 auto 15px auto;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */

    #uploadGalleryContainer { 
        width: 65%;
    }
    #uploadGalleryColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableHolder {
        margin: 0;
        padding: 0;
    }
    #galleryTableColumn {
        margin: 0 0 15px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 - end background color #0d0d0d */
    
    #uploadGalleryContainer {
        width: 58%;
    }
    #uploadGalleryColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryTableHolder {
        margin: 0;
        padding: 0; 
    }    
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableColumn {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 - start background color #111 */

    #uploadGalleryContainer {
        width: 50%;
    }
    #uploadGalleryColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #emptyGalleryContainer {
        margin: 0 0 10px 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableHolder {
        margin: 0;
        padding: 0;
    }
    #galleryTableColumn {
        margin: 0 0 15px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }  
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
    
    #uploadGalleryContainer {
        width: 50%; 
    }
    #uploadGalleryColumn {
        width: 100%;
        margin: 66px 0 15px 0;
        padding: 20px; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryTableHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #emptyGalleryContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableColumn {
        margin: 0 10px 15px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        margin: 0 0 15px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
}

/* ///////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #uploadGalleryContainer {
        width: 100%;
    }    
    #uploadGalleryColumn {
        width: 25%;
        margin: 66px 12.5px 0 0;
        padding: 20px 20px 15px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #emptyGalleryContainer {
        width: 47.25%;
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #galleryTableHolder {
        width: 47.25%;
        margin: 66px 0 0 0;
        padding: 0;
    }
    #galleryTableColumn {
        margin: 0 0 10px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryColumn {
        width: 100%;
        margin: 0 0 20px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #galleryButtWrapper {
        margin: 0 0 6px 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #uploadGalleryContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #uploadGalleryColumn {
        margin: 66px 0 0 10px;
        padding: 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;  
    }
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #galleryTableHolder {
        width: 42.5%;
        margin: 66px 0 0 16px;
    }
    #galleryTableColumn {
        margin: 0 0 10px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #galleryColumn {
        margin: 0 0 20px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    #galleryButtWrapper {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
    #uploadGalleryContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #uploadGalleryColumn {
        width: 25%;
        margin: 66px 17px 10px -26.75px;
        padding: 20px;  
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;   
    }    
    #emptyGalleryContainer {
        margin: 0;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #galleryTableHolder {
        width: 41.625%;
        margin: 66px 0 0 0;
        padding: 0;
    }
    #galleryTableColumn {
        margin: 0 0 10px 0;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #galleryColumn {
        margin: 0 0 20px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) {
    
    #uploadGalleryContainer {
        margin: 66px 0 80px 0;
        padding-right: 0;
    }
    #uploadGalleryColumn {
        margin: 0 5px 10px -36px;
        padding: 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #emptyGalleryContainer {
        margin: 0 0 0 2px;
        padding: 0;
    }
    .emptyGalleryInfo {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #galleryTableHolder {
        margin: 0 0 0 10px;
    }
    #galleryTableColumn {
        margin: 0 0 10px 2px;
        padding: 8px 10px 14px 10px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #galleryColumn {
        margin: 0 0 20px 0; 
        padding: 8px 10px 14px 10px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .pledgeLockTitle {
        margin-bottom: 10px; 
        padding: 0; 
        font-size: 13.5px; 
        font-weight: 600;        
        color: #999;    
        text-align: center;
    }
    #pledgeLocktext {
        font-size: 12px;
        font-weight: 600;
        color: #999;
    }   
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .pledgeLockTitle {
        margin-bottom: 10px; 
        padding: 0; 
        font-size: 12px; 
        font-weight: 600;        
        color: #999;    
        text-align: center;
    }
    #pledgeLocktext {
        margin-left: -5px;
        font-size: 10px;
        font-weight: 600;
        color: #999;
    }       
}
@media screen and (min-width: 1025px) {

    .pledgeLockTitle {
        margin-bottom: 10px; 
        padding: 0; 
        font-size: 12px; 
        font-weight: 600;        
        color: #999;    
        text-align: center;
    }
    #pledgeLocktext {
        font-size: 12px;
        font-weight: 600;
        color: #999;
    }     
}
.galleryUpload {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 6px;
}
.columnE {
    -ms-flex: 25%;
    flex: 25%;
    padding: 0 4px;
}
.columnE img {
    margin-top: 8px;
    vertical-align: middle;
}
@media screen and (max-width: 800px) {
    
    .columnE {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}
@media screen and (max-width: 600px) {
    
    .columnE {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}
.containerO {
    position: relative;
    width: 100%;
    max-width: 300px;
}
.pledgeLockedContainer {
    margin: 4px 0 0 0;
    padding: 0 2px 2px 2px;
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #111;
}
.pledgeLockedInner {
    margin: 0; 
    padding: 7px 0 0 0; 
    font-size: 12px;
    color: #ff9900; 
    text-align: center;
}
#lockIconGallery {
    margin-right: 5px;
    margin-bottom: 1px;
    color: #ff9900;
}
#lockIconPubGallery {
    margin: 10px 0 10px 0;
    font-size: 32px;
    color: #ff9900;
}
.UnlockedContainer {
    margin-top: 0; 
    padding: 12px 0 12px 0;
}
.galleryImage {
    display: block;
    height: auto;
    width: 100%;
}
.pledgeLockedOverlay {
    position: relative;
    opacity: 0;
    height: auto;
    width: 100%;
    margin: -46px 0 0 0;
    padding: 10px 25px 8px 25px;
    text-align: center;
    transition: 0.3s linear;
}
.containerO:hover .pledgeLockedOverlay {
    opacity: 1;
    cursor: pointer;
}
.unlockedOverlay {
    position: relative;
    opacity: 0;
    height: auto;
    width: 100%;
    top: 0 ;
    margin: -46px 0 0 0;
    padding: 10px 25px 8px 25px;
    text-align: center; 
    transition: 0.3s linear;
}
.containerO:hover .unlockedOverlay {
    opacity: 1;
    cursor: pointer;
}
.galleryDelete {
    height: 28px;  
    width: 100%;
    margin: 0;
    color: #FF0000;
    font-size: 12px;
    text-align: center;
    border-radius: 8px;   
    border: 2px solid #333;
    background-color: #000;
    transition: all 0.3s linear;   
}
.galleryDelete:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #111;
}
.overlay {
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0;
    padding: 20px;
    font-size: 20px;
    color: #fff;
    text-align: center;    
    opacity: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.3s linear;
}
.containerO:hover .overlay {
    opacity: 1;
    cursor: pointer;
}
.galleryImageC {
    height: 230px;
    width: auto; 
    margin: 20px 0 -40px 0;
    border-radius: 6px;
}
#emptyMsgImageSelectUG {
    display: none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;    
}
.notifyPledgeAlertUG {
    width: 100%;
    margin: 0 0 10px 0; 
    padding: 10px; 
    color: #ff0000; 
    font-size: 12px;
    text-align: center;
    border-radius: 8px; 
    background-color: #111;  
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #notifiedContentUG {
        margin: 35px 0 0 0;
        padding: 0;
        color: #ff9900;
        font-size: 11px;
    }
}
@media screen and (min-width: 768px) {
    
    #notifiedContentUG {
        position: absolute;
        width: 100%;
        margin: 0;
        padding: 0 0 2px 4px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        background: rgba(0, 0, 0, 0.7);
    }
}
@media screen and (max-width: 799px) {
    
    #levelNotifiedUG {
        margin: 8px 2px 0 0;
        color: #0088FF;
        font-size: 12px;
        line-height: 1.4;
        text-shadow: 0 0 0 #0088FF;
    }
    #notifyIconUG {
        margin: 0 5px 0 0;
        font-size: 10px; 
    }
}
@media screen and (min-width: 800px) {
   
    #levelNotifiedUG {
        margin: 8px 2px 0 0;
        color: #0088FF;
        font-size: 12px;
        line-height: 1.4;
        text-shadow: 0 0 0 #0088FF;
        word-break: break-word;
    }
    #notifyIconUG {
        margin: 0 5px 0 0;
        font-size: 11px; 
    }
}

/* ///// Upload Gallery & Gallery Tab Pane ///// */

@media screen and (max-width: 1024px) {
    
    #emptyGalleryHolder {
        margin: 0 0 105px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .galleryImage {
        border-radius: 10px;
    }
}
@media screen and (min-width: 1025px) {

    #emptyGalleryHolder {
        margin: 0 0 105px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .galleryImage {
        border-radius: 10px;
    }
}

.emptyGalleryHeading {
    color: #666;
    font-size: calc(11px + 0.3vw);
    /*border-radius: 8px;
    background-color: #111;*/
}


@media screen and (max-width: 767px) {

    #galleryContainer {
        margin: 15px auto 0 auto;
        padding: 0 10px 0 10px;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #galleryContainer {
        margin: 44px auto 0 auto;
        padding: 0 40px 0 40px;
    }
}
@media screen and (min-width: 824px) and (max-width: 959px) {

    #galleryContainer {
        margin: 15px auto 0 auto;
        padding: 0 40px 0 40px;
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {

    #galleryContainer {
        margin: 15px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #galleryContainer {
        margin: 10px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #galleryContainer {
        width: 90%;
        margin: 10px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 1200px) {

    #galleryContainer {
        margin: 10px auto 0 auto;
        padding: 0;
    }
}

#galleryContainerInner {
    margin: 0;
    padding: 0; 
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .PostsGalleryTitle {
        margin: 0 0 0 4px; 
        padding: 0;
        font-size: 12px;
        color: #D0D0D0;
    }  

    /* //// Content Locker Gallery //// */

    .contentLockerGalContainer {
        margin: 10px 0 0 0;
        /*margin: 10px 5px 0 5px;*/
    }

    .contentLockerGal {
        position: relative;
        height: 215px;
        /*height: 175px;*/
        width: 100%;
        margin: 10px 0 0 0;
        border: 2px solid #222;
        border-radius: 16px;
        background: linear-gradient(145deg, #0f0f0f 35%, #000000) border-box;
        /*border-radius: 8px;
        background: linear-gradient( 145deg, #222222, #000000);*/
        overflow: hidden;
    }
    .pledgeOverlayLabelGal {
        position: absolute;
        height: auto;
        width: 100%;
        margin: 45px 0 0 0;
        /*margin: 35px 0 0 0;*/
        padding: 0 8px 0 8px;
        color: #fff;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    }
    .pledgeOverlayLabelGalSUSP {
        position: absolute;
        height: auto;
        width: 100%;
        margin: 75px 0 0 0;
        /*margin: 35px 0 0 0;*/
        padding: 0 8px 0 8px;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    }    
    .pledgeoverlayLogoGal {
        height: auto;
        width: auto;
        max-width: 32px;
        margin: 0;
        padding: 0;
    }
    #lockIconGal {
        margin: 70px 0 10px 0;
        font-size: 32px;
        color: #ff9900;
    }
    .GalPledgeAccessVIP {
        margin-top: 10px;
        color: #999;
        font-size: 19px;
    }
    .GalPledgeAccessAAA {
        margin-top: 10px;
        color: #ff9900; 
        font-size: 19px;
    }    
    .GalPledgeAmountText {
        margin: 10px 0 0 0;
        font-size: 14px;
    }
}
@media screen and (min-width: 768px) {
    
    /* //// Content Locker Gallery //// */

    .contentLockerGalContainer {
        margin: 10px 5px 0 5px;
    }
    .contentLockerGal {
        position: relative;/**/
        height: 300px;
        width: 100%;
        border-radius: 12px;
        border: 2px solid #333;/**/
        background: linear-gradient(145deg, #191919 35%, #111111) border-box; 
        /*background: linear-gradient( 145deg, #222222, #000000);*/
        overflow: hidden;
    }
    .pledgeOverlayLabelGal {
        position: absolute;
        height: auto;
        width: 100%;
        margin: 80px 0 0 0;
        padding: 0 8px 0 8px;
        color: #fff;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    }
    .pledgeOverlayLabelGalSUSP {
        position: absolute;
        height: auto;
        width: 100%;
        margin: 59px 0 0 0;
        padding: 0 8px 0 8px;
        text-align: center;
        text-shadow: 1.5px 1px 2px rgba(0, 0, 0, 0.7);
        z-index: 8;
    } 
    .pledgeoverlayLogoGal {
        height: auto;
        width: auto;
        max-width: 42px;
        margin: 0 0 0 4px;
        padding: 0;
    }
    #lockIconGal {
        margin: 70px 0 10px 0;
        font-size: 32px;
        color: #ff9900;
    }
    .GalPledgeAccessVIP {
        margin-top: 10px;
        color: #999;
        font-size: calc(16px + 0.2vw);
    }
    .GalPledgeAccessAAA {
        margin-top: 10px;
        color: #ff9900; 
        font-size: calc(16px + 0.2vw);
    }    
    .GalPledgeAmountText {
        margin: 10px 0 0 0;
        font-size: calc(12px + 0.2vw);
    }
}

@media screen and (min-width: 768px) and (max-width: 823px) {

    .PostsGalleryTitle {
        margin: 0 0 0 4px;
        padding: 0;
        font-size: 14px;
        color: #D0D0D0;
    }
}
@media screen and (min-width: 824px) and (max-width: 959px) {
    
    .PostsGalleryTitle {
        margin: 0 0 0 4px;
        padding: 0;
        font-size: 14px;
        color: #D0D0D0;
    }
}
@media screen and (min-width: 960px) {
    
    .PostsGalleryTitle {
        margin: 0 0 0 4px;
        padding: 0;
        font-size: 14px;
        color: #D0D0D0;
    }
}

.Galpledgeoverlay5 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url("https://pledgsta.com/assets/img/Content-Locker-Background-2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(20px);
}   
.GalpledgeOverlayShade5 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.8);
    object-fit: cover;
}
.Galpledgeoverlay10 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url("https://pledgsta.com/assets/img/Content-Locker-Background-1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(20px);
}
.GalpledgeOverlayShade10 {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.7);
    object-fit: cover;
}

/* /////////// END - Gallery Tab Pane ////////// */

/* ///////// END - UPLOAD GALLERY PAGE ///////// */

/* ============================================= */

/* ////////////// YOUR-POSTS PAGE ////////////// */

/* // START - MESSAGES, IMAGE, EMBED & UPLOAD Video // */


#uploadVideoHolder {
    margin: 0 0 20px 0; 
    padding: 0;
}
.textarea-size-post-wrapper {
    width: auto;
    height:auto;
    margin-left: 1 0;
    margin-top: 0;
}
.textarea-size-post {
    border: 2px solid #333;
    background-color: #111;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top:  20px;
    margin-left: 20px;
    margin-right: 0;
    width: 300px;
}
.imagearea-size-post {
    min-height: 330px;
    width: 100%;    
    margin: 0 10px 10px 0;
    padding: 10px 10px 14px 10px;
    border: 2px solid #333;
    border-radius: 6px;
}
.SubmitButton {/**/
    margin-top: 8px;
    margin-right: 600px;
    background-color: #000;
}
#editPostProfileContainer {
    margin-bottom: 100px;
}
.textarea-size-edit {
    width: auto;
    margin: 100px 0 0 0;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 8px;   
    background-color: #000;
}
.textarea {
    width: 100%;
    min-height: 244px;
    margin: 0;
    padding: 0;
    resize: none;
    background-color: #000; 
}
.textarea2 {
    min-height: 280px;
    max-height: 100%;
    margin-top: 10px;
    padding: 4px;    
    border-radius: 6px;
}

#YPNoCheckboxContainer {
    margin: 5px 0 0 0;
    padding: 0;
}
.YPconfirmEmailLink {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#YPConfirmEmail {
    width: 100%;
    margin: 0 auto 0 auto;
    margin: 10px 0 0 0;
    padding: 10px;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #000;
    transition: ease-in-out 0.4s;          
}
#YPConfirmEmail:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #111; 
}
#PostsContainer_chkAll,
#PostsContainer_chkVIP,
#PostsContainer_chkAAA {
    height: 18px; 
    width: 0; 
    margin-left: -10px;
}
#PostsNotify_chk,
#PostsNotify_chkAll,
#PostsNotify_chkVIP,
#PostsNotify_chkAAA {
    height: 18px; 
    width: 0; 
    margin-left: -10px;
}
/*.uploadVideoButt {
    width: 100%;    
    margin: 0;
    padding: 10px 56px 10px 56px;
    font-size: 12px;
    text-shadow: 0 0 0 #ff9900;
    color: #ff9900;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.3s linear;
}
.uploadVideoButt:hover {
    cursor: pointer;
    border: 2px solid #ff9900;
    background-color: #111;
}*/

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    #postHistoryButtHolder {
        height: 38px;
        margin: 28px 0 30px 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) {

    #postHistoryButtHolder {
        margin: 12px 0 30px 0;
        padding: 0;
    }
}

.postHistoryButtSmall {
    float: left;
    width: 110px;
    margin: 0;
    color: #D0D0D0;    
    font-size: 12px;
    text-align: center;
    transition: all 0.3s linear;     
}
.postHistoryButtSmall:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}
@media screen and (max-width: 1023px) {

    .postHistoryButtSmall {
        height: 40px;
        padding: 8px 0 7px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;  
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .postHistoryButtSmall {
        height: 40px;
        padding: 8px 0 8px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;     
    }
}
@media screen and (min-width: 1025px) {

    .postHistoryButtSmall {
        height: 34px;
        padding: 8px 0 8px 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;     
    }
}



.FormlabelEmbedVideo {
    margin: 0 0 10px 0;
    padding: 0;
    color: #999;    
    font-weight: 600;
}

.YPFormlabel {
    margin-bottom: 10px;
    padding: 0;
    color: #999;
    font-weight: 600;
}

.FormlabelComment {
    margin:-10px 0 10px 0;
    color: #999;
    font-weight: 600;
}

#PostsCheckboxContainer0,
#PostsCheckboxContainer5,
#PostsCheckboxContainer10,
#PostsCheckboxContainer {
    margin: 5px 0 5px 0;
    padding: 10px 10px 5px 0;
}

.uploadPostButt {
    width: 100%;
    margin: 0;
    padding: 14px 10px 13px 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center; 
    border-radius: 10px; 
    transition: all 0.3s linear;
}
.uploadPostButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (max-width: 1023px) {

    .postHistoryButtSmall {
        height: 40px;
        padding: 8px 0 7px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;  
    }
    .YPFormlabel {
        font-size: 14px;
    }
    .FormlabelEmbedVideo {
        font-size: 14px; 
    }
    .FormlabelComment {
        font-size: 14px; 
    }
    #PostsCheckboxContainer0,
    #PostsCheckboxContainer5,
    #PostsCheckboxContainer10,
    #PostsCheckboxContainer {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .uploadPostButt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .postHistoryButtSmall {
        height: 40px;
        padding: 8px 0 8px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;     
    }      
    .YPFormlabel {
        font-size: 12px;
    }
    .FormlabelEmbedVideo {
        font-size: 12px; 
    }
    .FormlabelComment {
        font-size: 12px; 
    }
    #PostsCheckboxContainer0,
    #PostsCheckboxContainer5,
    #PostsCheckboxContainer10,
    #PostsCheckboxContainer {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .uploadPostButt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {

    .postHistoryButtSmall {
        height: 34px;
        padding: 8px 0 8px 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;     
    }      
    .YPFormlabel {
        font-size: 12px;
    }
    .FormlabelEmbedVideo {
        font-size: 12px; 
    }
    .FormlabelComment {
        font-size: 12px; 
    }
    #PostsCheckboxContainer0,
    #PostsCheckboxContainer5,
    #PostsCheckboxContainer10,
    #PostsCheckboxContainer {
        border-radius: 10px;
        border: 2px solid #333; 
        background-color: #111;
    }
    .uploadPostButt {
        border: 2px solid #333; 
        background-color: #111;
    }
}

.cancelPostButt {
    width: 100%;    
    margin: 20px 0 0 0;
    padding: 8px 0 8px 0;
    font-size: 12px;
    color: #ff9900;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.3s linear;
}
.cancelPostButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}
.schedulePostButt {  
    width: 100%;   
    margin: 10px 0 0 0;
    padding: 15px 0 15px 0;
    font-size: 12px;
    color: #ff9900;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.3s linear;
}
.schedulePostButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}

@media screen and (min-width: 320px) and (max-width: 1199px) {

    #noPostsAlertContainer {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1200px) {

    #noPostsAlertContainer {
        margin: -2px 0 0 0;
        padding: 0;
    }
}

.noPostsAlert {
    height: 60px;
    width: 100%;   
    margin: 0;
    padding: 20px 15px 20px 15px;
    color: #ff0000;
    text-align: center;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .noPostsAlert {   
        font-size: 12px; 
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .noPostsAlert {   
        font-size: 12px; 
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {
    
    .noPostsAlert {    
        font-size: 13px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

.posts {
    position: relative;
    float: left;
    min-height: 1px;
    width: 100%;
    margin: -2px 0 10px 0;
    padding: 10px 10px 7px 10px;
    border-radius: 20px;
}
.uploadVideoResponsive {
    width: auto;
    margin: 0 0 -5px 0;
    padding: 0;
}
.uploadVideoResponsiveProfile {
    width: auto;
    margin: 0 0 15px 0;
    padding: 0;
}
.video-responsive {
    position: relative;
    height: 0;
    margin: 10px 0 15px 0;
    padding: 0 10px 0 10px;
    padding-bottom: 56.25%;
    font-size: 1.8vmin;
    font-size: 1.2vmax;
    overflow: hidden;
}
.video-responsive iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 640px; 
    left: 0;
    top: 0;
}
.imgPostsHolder {
    margin: 0 0 15px 0;
    padding: 0;
}
.imgPosts {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 14px;
}
#uploadPostsColumn {
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

/* // Posts Display Cradle // */

#postsDisplayCradle {
    overflow-x: hidden;
    padding: 0 10px 0 0;
    border-radius: 20px;
    border-bottom-right-radius: 28px;
    background-color: #0a0a0a;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #0a0a0a;
}

/* // Posts Display Cradle Scroll // */

/* //// firefox & chrome //// */

#postsDisplayCradle {
    scrollbar-width: none;
    scrollbar-color: #ff0000 #000000 !important;
}

@media screen and (min-width: 320px) and (max-width: 599px) { /* navbar @ 60px high */
    
    #uploadPostsContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #uploadPostsColumn {
        margin: 75px 0 5px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        margin: 0;
        padding: 10px 0 40px 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }    
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 - navbar @ 60px high */ 
    
    #uploadPostsContainer {
        width: 80%;
    }    
    #uploadPostsColumn {
        margin: 75px auto 15px auto;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        margin: 0;
        padding: 0 0 40px 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) { /* 740 - navbar @ 60px high */
    
    #uploadPostsContainer {
        width: 80%;
    }    
    #uploadPostsColumn {
        margin: 75px auto 15px auto;
        padding: 20px 20px 10px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        margin: 0;
        padding: 0 0 40px 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postButtWrapper {
        margin: 25px 0 10px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */
    
    #uploadPostsContainer {
        width: 70%;
    }
    #uploadPostsColumn {
        margin: 65px auto 5px auto;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        margin: 0;
        padding: 10px 0 40px 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    } 
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */
    
    #uploadPostsContainer { 
        width: 65%;
    }
    #uploadPostsColumn {
        margin: 65px auto 15px auto;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        margin: 0;
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }     
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */
    
    #uploadPostsContainer {
        width: 65%;
    }
    #uploadPostsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;     
    }
    #postsDisplay {
        margin: 0;
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }   
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }  
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 - end background color #0d0d0d */

    #uploadPostsContainer {
        width: 58%; 
    }
    #uploadPostsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;       
    }
    #postsDisplay {
        margin: 0;
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }  
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }   
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 - start background color #111 */
    
    #uploadPostsContainer {
        width: 50%;
    }
    #uploadPostsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        margin: 0;
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }   
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }  
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #uploadPostsContainer {
        width: 50%;
    }
    #uploadPostsColumn {
        width: 100%;
        margin: 66px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1400px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }     
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}

/* ///////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #uploadPostsContainer {
        width: 100%;
    }    
    #uploadPostsColumn {
        width: 33%;
        margin: 66px 12.5px 0 0;
        padding: 20px 20px 15px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postsDisplay {
        width: 39.25%;
        margin-top: 66px;
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1474px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .posts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postButtWrapper {
        margin: 25px 0 6px 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    #uploadPostsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #uploadPostsColumn {
        width: 30%;
        margin: 66px 0 10px 10px;
        padding: 20px;  
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;  
    }
    #postsDisplay {
        width: 37%;
        margin: 66px -5px 0 16px; 
        padding: 0 0 40px 0;
    } 
    #postsDisplayCradle {
        height: 1441px;
        margin: -2px -5px 0 0; 
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }
    .posts {
        border: 2px solid #333;
        background-color: #111;
    }
    #postButtWrapper {
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
    #uploadPostsContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #uploadPostsColumn {
        width: 29%;
        margin: 66px 17px 10px -26.75px;
        padding: 20px;  
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111; 
    }
    #postsDisplay {
        width: 37.25%;
        margin: 66px 0 0 0;
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1439px;
        margin: 0 -5px 0 0; 
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }    
    .posts {
        border: 2px solid #333;
        background-color: #111;
    } 
    #postButtWrapper {
        text-align: center;
        margin: 25px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1200px) {
    
    #uploadPostsContainer {
        margin: 66px 0 80px 0;
        padding: 0;
    }    
    #uploadPostsColumn {
        margin: 0 17px 0 -24.5px;
        padding: 20px 20px 20px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #postsDisplay {
        margin: 2px -5px 0 0; 
        padding: 0;
    }
    #postsDisplayCradle {
        height: 1467px;
        margin: -2px -5px 0 0;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333; 
    }     
    .posts {
        border: 2px solid #333;
        background-color: #111;
    }
    #postButtWrapper {
        text-align: center;
        margin: 25px 0 0 0;
        padding: 0;
    }
}

/* // End - Posts Display Cradle  // */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #uploadPostsColumnInner {
        margin: 0;
        padding: 0; 
    }    
    #editorHolder {
        width: 100%;
        margin: 16px 0 0 0;
        padding: 0; 
    }    
    #PostslockPledgeContainer {
        margin: 20px 0 20px 0; 
        padding: 0 ;
    }
    #PostslockPledgeDropDown {
        margin: 20px 0 0 0; 
        padding: 0;
    }    
    #timeSince {
        width: 100%;
        margin: 0 2px 6px 1px;
        padding: 0;
        font-size: 12px;
        float: left;
    }
    #timeSincePubPosts {
        width: 100%;
        margin: 0 2px 6px 1px;
        padding: 0;
        font-size: 12px;
        float: left;    
    }
    .PostsHeading {
        margin: 3px 0 6px 0; 
        padding: 0;
        font-size: 11px;
        color: #D0D0D0;
        float: right;
    }
    .PubPostsHeading {
        margin: 3px 0 3px 0; 
        padding: 0;
        font-size: 12px;
        color: #D0D0D0;
        float: right;
    }
    #lockIconPosts {
        margin: 0 6px 1px 1px;
        padding: 0;
        font-size: 11px;
        color: #ff9900;
    }
    #postsMessage {
        margin: 10px 0 15px 1px;
        padding: 0;
        font-size: 12px;
        word-break: break-word;
    }
}
@media screen and (min-width: 768px)  {

    #uploadPostsColumnInner {
        margin: 0;
        padding: 0; 
    }   
    #editorHolder {
        width: 100%;
        margin: 16px 0 0 0;
        padding: 0; 

    }     
    #PostslockPledgeContainer {
        margin: 20px 0 10px 0; 
        padding: 0;
    }
    #PostslockPledgeDropDown {
        margin: 20px 0 0 0; 
        padding: 0;        
    }
    #timeSince {
        width: 100%;
        margin: 0 2px 6px 3px;
        padding: 0;      
        font-size: 12px;
        float: left;
    }
    #timeSincePubPosts {
        width: 100%;
        margin: 0 2px 6px 3px;
        padding: 0;
        font-size: 12px;
        float: left;
    }    
    .PostsHeading {
        margin: 0 4px 0 0; 
        padding: 0;
        font-size: 12px;
        color: #D0D0D0;
        float: right;
    }    
    .PubPostsHeading {
        margin: 0 4px 4px 0; 
        padding: 0;
        font-size: 14px;
        color: #D0D0D0;
        float: right;
    }
    #lockIconPosts {
        margin: 0 5px 1px 0;
        padding: 0;
        font-size: 11px;
        color: #ff9900;
    }
    #postsMessage {
        margin: 10px 0 15px 3px;
        padding: 0;
        font-size: 14px;
        word-break: break-word;
    }
}

#levelNotified {
    margin: 8px 2px 0 1px;
    color: #0088FF;
    font-size: 12px;
    line-height: 1.4;
    text-shadow: 0 0 0 #0088FF;
}
.notifyPledgeAlertYP {
    width: 100%;
    margin: -15px 0 10px 0; 
    padding: 10px; 
    color: #ff0000; 
    font-size: 12px;
    text-align: center;
    border-radius: 8px; 
    background-color: #111;  
}
.noPledgeAlertYP {
    width: 100%;
    margin: 0 0 12px 0; 
    padding: 10px; 
    color: #ff0000; 
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;  
}
#yourPostsPreviewWrapper {
    width: 100%;
    margin-top: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#uploadImagePreviewYP {
    margin: 0 auto 0 auto;
    padding: 0;
}
#imagePreviewYP { 
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    /*border-radius: 10px;*/
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    #imagePreviewYP {
        border: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {
    
    #imagePreviewYP {
        border: 2px solid #333;
    }
}
.shortpreviewYP {
    height: 244px;
    width: 244px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;    
}
.YPhighlightImage {
    min-height: 244px;
    min-width: 244px;
    max-width: 244px;
    margin: -244.5px 0 0 0;
    padding: 0;
    color: #ff0000;
    border-radius: 8px;
    border: 2px solid rgba(255, 0, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;
}
.YPHighlightBack {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000;
}
.time {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #timeSinceYposts {
        padding-left: 2px;
        color: #ff9900;
        font-size: 11px;
    }
    .YPtime {
        color: #888;
        font-size: 11px;
        font-weight: 600;
    }    
}
@media screen and (min-width: 768px) {
    
    #timeSinceYposts {
        padding-left: 2px;
        color: #ff9900;
        font-size: 12px;
    }
    .YPtime {
        color: #888;
        font-size: 12px;
        font-weight: 600;
    }    
}

/* /// Individual Post Buttoms /// */

.editDeleteComments {
    margin-top: 20px;
    margin-right: 0;
    display: flex;
    align-items: right;
    justify-content: right;
    flex-direction: row;    
}
.editDeleteCommentsRight {
    height: 36px;
    margin: 0;
    padding: 0;
}
.editDeleteCommentsLeft {
    height: 36px;
    margin: 0;
    padding: 0;
}


/* ///////////// from select page////////////// */

/*.scheduleButt {
    width: 100%;    
    margin: 0;
    color: #ff9900;
    font-size: 14px;
    text-align: center; 
    transition: all 0.3s linear;
}
.scheduleButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .scheduleButt {
        padding: 14px 10px 13px 10px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px) {
    
    .scheduleButt {
        padding: 12px 0 12px 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
    }    
}*/

/* /////////////////////////// */

#scheduleButtHolder {
    margin: 25px 0 0 0;
    padding: 0;
}
.scheduleButtLeft {
    width: 200px;
    margin: 20px 0 0 0.5px;
    padding: 0;
    float: left;
}
.scheduleButt {
    height: 32px;
    width: 140px;
    margin: 0;
    padding: 5.5px 0 0 0;
    color: #999;  
    font-size: 12px;
    text-align: center;
    border-radius: 10px;
    /*border-bottom-left-radius: 10px;*/
    transition: all 0.3s linear; 
}
.scheduleButt:hover {
    cursor: pointer;
    color: #D0D0D0;
    background-color: #1d1d1d;
}
.commentDeleteP {
    height: 32px;
    width: 100px;
    color: #888;
    text-shadow: 0 0 0 #888;  
    font-size: 12px;
    text-align: center;    
    border-radius: 10px;
    transition: all 0.3s linear;   
}
.commentDeleteP:hover {
    cursor: pointer;
    color: #ff0000;
    border: 2px solid #ff0000;
}
.commentEditP {
    width: 100px;
    height: 32px;
    padding-top: 2px;
    color: #888;
    font-size: 12px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.4s linear;   
}
.commentEditP:hover {
    cursor: pointer;
    border: 2px solid #0088FF;
    color: #0088FF;       
    background-color: #111;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .scheduleButt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .commentDeleteP {    
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {

    .scheduleButt {
        border: 2px solid #333;
        background-color: #111;
    }
    .commentDeleteP {      
        border: 2px solid #333;
        background-color: #111;
    }
}

/* /// Load More Button Etc /// */

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    #loadMoreHolderProfile1 {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #loadMoreTop { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 16px;
        text-align: center;
        border-radius: 24px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;        
    }       
    .loadMoreContainerProfile1 { /* spinning balls profile */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 24px;  
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;     
    }
    #loadMoreHolderProfile2 {
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;
    }
    .loadMoreContainerProfile2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #loadMoreBottom { /* notify that no more posts - at the bottom of load */
        height: 80px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 27px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 24px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button 2 - Profile // */

    #upButton {
        display: none;
    }
    #chevronUp {
        display: none;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #loadMoreHolderProfile1 {
        margin: 0 0 20px 0;
        padding: 0;
    }    
    #loadMoreTop { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 16px;
        text-align: center;
        border-radius: 24px; 
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerProfile1 { /* spinning balls profile */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 24px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;     
    }    

    #loadMoreHolderProfile2 {
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;        
    }
    .loadMoreContainerProfile2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #loadMoreBottom { /* notify that no more posts - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 24px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button 2 - Profile // */

    #upButton {
        display: none;
    }
    #chevronUp {
        display: none;
    }
}
@media screen and (min-width: 1025px) {

    #loadMoreHolderProfile1 {
        margin: 0 0 20px 0;
        padding: 0;
    }    
    #loadMoreTop { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 17px;
        text-align: center;
        border-radius: 16px;
        /*border-radius: 12px;*/
        border: 2px solid #333;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerProfile1 { /* spinning balls profile */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 16px;
        /*border-radius: 12px;*/  
        border: 2px solid #333;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;     
    }
    .loadMoreContainerProfile2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #loadMoreHolderProfile2 {
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;
    }
    #loadMoreBottom { /* notify that no more posts - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 16px;
        /*border-radius: 12px;*/  
        border: 2px solid #333;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button 2 - Profile // */

    #upButton {
        position: relative;
        height: 50px; 
        width: 100%;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        z-index: 8888;
    }
    #upButton:hover {
        cursor: pointer;
    }
    #upButton.show {
        opacity: 1;
        visibility: visible;
    }
    #chevronUp {
        height: 45px; 
        width: 45px;
        padding: 5px 6px 8px 6px; 
        font-weight: normal;
        font-style: normal;
        font-size: 1.8em;  
        line-height: 45px;
        color: #ff9900;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    #loadMoreTop {
        background-color: #0a0a0a;     
    }       
    .loadMoreContainerProfile1 {
        background-color: #0a0a0a;   
    }
    #loadMoreBottom {
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    #loadMoreTop {
        background-color: #111;       
    }       
    .loadMoreContainerProfile1 {
        background-color: #111;    
    }
    #loadMoreBottom {
        background-color: #111;
    }
}


.load-more-profile {}
.load-more-profile:hover {
    cursor: pointer;
}
.loadMoreContainer { /* spinning balls  */
    position: relative;
    width: 100%;
    min-height: 32px;
    max-height: auto;
    margin-top: -36px;
    padding-top: 5px;
    text-align: center;
    border-radius: 6px;   
    border: 2px solid #ff9900;
    background-color: #000;
    z-index: 8888;   
}
.load-more {}
.load-more:hover {
    cursor: pointer;
}
#Msg {
    display:none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent; 
}
#ExtMsg {
    display:none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;     
}
#MessMsg {
    display:none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;     
}
#alertCellYP {
    margin: -10px 0 15px 0; 
    padding: 5px 10px 15px 10px;
    font-size: calc(9px + 0.3vw);  
    border: 2px solid red;
}
#alertTriangleYP {
    margin-top: 5px;
    margin-bottom: 10px; 
    font-size: 18px; 
}
#alertCellUV {
    margin: 15px 0 0 0; 
    padding: 5px 10px 15px 10px;
    font-size: calc(9px + 0.3vw);  
    border: 2px solid red;
}
#alertTriangleUV {
    margin-top: 5px;
    margin-bottom: 10px; 
    font-size: 18px; 
}

/* // Edit-Post Page // */

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #editPostContainer {
        margin-bottom: 100px;
    }    
    #editPostWrapper {
        margin-top: -34px;
        padding: 0;
    }
    .editPostInner {    
        width: auto;
        margin: 100px 0 50px 0;
        padding: 20px;
        border: 2px solid #333;
        border-radius: 8px;   
        background-color: #000;
    }
}
@media screen and (min-width: 600px) and (max-width: 960px) {

    #editPostWrapper {
        margin: 0;
        padding: 0 50px 0 50px;
    }
    .editPostInner {    
        width: auto;
        margin: 60px 0 50px 0;
        padding: 20px ;
        border: 2px solid #333;
        border-radius: 8px;   
        background-color: #000;
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {

    #editPostWrapper {
        margin: 0;
        padding: 0;
    }
    .editPostInner {    
        width: auto;
        margin: 64px 0 50px 0;
        padding: 20px ;
        border: 2px solid #333;
        border-radius: 8px;   
        background-color: #000;
    }
}
@media screen and (min-width: 1025px) {

    .editPostInner {    
        width: auto;
        margin: 64px 0 50px 0;
        padding: 20px ;
        border: 2px solid #333;
        border-radius: 8px;   
        background-color: #000;
    }
}


#embedHolder {
    height: 95px;
    margin: 0; 
    padding: 0; 
}
#selectVideoHolder {
    height: 95px;
    margin: 0; 
    padding: 0; 
}
#UploadVideoFile {
    display: none;
}
#UVInput {
    font-size: calc(8px + 0.3vw);
}
.UVFormlabel {
    padding: 0; 
    font-size: 14px; 
    font-weight: 600;        
    color: #999;
}

@media screen and (min-width: 320px) and (max-width: 959px) {
    
    #selectImageHolder { /*border: 1px solid red;*/
        height: 95px;
        margin: -1px 0; 
        padding: 0; 
    }
}
@media screen and (min-width: 960px) and (max-width: 991px) {

    #selectImageHolder { /*border: 1px solid red;*/
        height: 95px;
        margin: 57px 0 0 0; 
        padding: 0; 
    }
}
@media screen and (min-width: 992px) {

    #selectImageHolder { /*border: 1px solid red;*/
        height: 95px;
        margin: 0; 
        padding: 0; 
    }
}

/* /// JS Error Alerts /// */

.YPMessageErrorHolder { /*border: 1px solid red;*/
    height: 20px;
    margin: 9px 0 0 0;
}

/* Gold */

#AlertVideoInfo,
#YPImageInfo {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff9900;
    word-break: break-word;       
    background-color: transparent;
}

/* Red */

#videoUrlError,
#AlertVideoError,
#YPImageError,
#YPMessageError { 
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;    
    background-color: transparent;
}

@media screen and (min-width: 320px) and (max-width: 322px) {
    
    #YPMessageError {
        font-size: 11.5px;  
    }    
}
@media screen and (min-width: 323px) {
    
    #YPMessageError {
        font-size: 12px;  
    } 
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #YPerrorAnchorMessage {
        margin-top: 0;
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {

    #YPerrorAnchorMessage {
        margin-top: -60px;
    }
}
@media screen and (min-width: 1024px) {

    #YPerrorAnchorMessage {
        margin-top: 0;
    }
}

/* //////////// END YOUR-POSTS PAGE //////////// */

/* ============================================= */

/* ///////////// POSTS HISTORY PAGE //////////// */


#postsHistoryDisplay {
    margin: 0;
    padding: 0 0 100px 0;
}
#postsHistoryDisplay1 {
    margin: 0;
    padding: 0 0 100px 0;
}
#postsHistoryDisplay2 {
    margin: 0;
    padding: 0 0 100px 0;
}
#postsHistoryDisplay3 {
    margin: 0;
    padding: 0 0 100px 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #PostsHistoryContainer {
        margin: 75px 0 80px 0;
        padding: 0;
    }
    #PostsHistoryLoadCradle {
        margin: 0;
        padding: 0 10px 100px 10px; 
    }
    #postsHistoryDisplay1 {
        min-height: 262px;
    }
    #postsHistoryDisplay2 {
        min-height: 524px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) { /* 600 */
    
    #PostsHistoryContainer {
        width: 80%;
    }    
    #PostsHistoryLoadCradle {
        margin: 75px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsHistoryDisplay1 {
        min-height: 262px;
    }
    #postsHistoryDisplay2 {
        min-height: 524px;
    }

}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */

    #PostsHistoryContainer {
        width: 70%;
    }    
    #PostsHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsHistoryDisplay1 {
        min-height: 442px;
    }    
    #postsHistoryDisplay2 {
        min-height: 880px;
    }
}
@media screen and (min-width: 800px) and (max-width: 824px) { /* 800 - 823 */

    #PostsHistoryContainer {
        width: 65%;
    }    
    #PostsHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }    
    #postsHistoryDisplay1 {
        min-height: 442px;
    }    
    #postsHistoryDisplay2 {
        min-height: 880px;
    }  
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 - 960 */
    
    #PostsHistoryContainer {
        width: 58%;
    }    
    #PostsHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsHistoryDisplay1 {
        min-height: 442px;
    }
    #postsHistoryDisplay2 {
        min-height: 882px;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */

    #PostsHistoryContainer {
        width: 50%;
    }    
    #PostsHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsHistoryDisplay1 {
        min-height: 442px;
    }    
    #postsHistoryDisplay2 {
        min-height: 882px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
    
    #PostsHistoryContainer {
        width: 50%;
    }    
    #PostsHistoryLoadCradle {
        width: 100%;
        margin: 66px 0 0 0;
        padding: 0 0 100px 0;
    }
    #postsHistoryDisplay1 {
        min-height: 442px;
    }    
    #postsHistoryDisplay2 {
        min-height: 882px;
    }
}

/* //////////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #PostsHistoryContainer {
        width: 100%;
    }    
    #PostsHistoryLoadCradle {
        width: 50%;
        margin: 66px 0 0 0;
        padding: 0 0 100px 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    #PostsHistoryContainer {
        width: 100%;
    }    
    #PostsHistoryLoadCradle {
        width: 40%;
        margin: 66px 0 0 -24.75px;
        padding: 0 0 100px 0;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1181px) { /* 1180 */
    
    #PostsHistoryContainer {
        width: 100%;
        padding: 0;
    }    
    #PostsHistoryLoadCradle {
        width: 40%;
        margin: 66px 0 0 -27.75px;
        padding: 0 0 100px 0;
    }
}
@media screen and (min-width: 1182px) and (max-width: 1199px) {
    
    #PostsHistoryContainer {
        width: 100%;
        padding: 0;
    }    
    #PostsHistoryLoadCradle {
        width: 40%;
        margin: 66px 0 0 -27.75px;
        padding: 0 0 100px 0;
    }
}
@media screen and (min-width: 1200px) {
    
    #PostsHistoryContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #PostsHistoryLoadCradle {
        width: 40%;
        margin: 0 0 0 -24.75px;
        padding: 0;
    }
}

/* /////////////////////////////// */

.emptyPostHistory {
    width: 100%;
    margin: 0;
    padding: 15px 10px 14.5px 10px;
    color: #ff0000;
    text-align: center;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#postHeadingHolder {
    margin: 0 0 15px 0;
    padding: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
.postHistBackbutt {
    float: left;
    height: 32px;  
    width: 100px;
    margin: 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;
    border-radius: 8px;
    transition: all 0.4s linear;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;     
}
.postHistBackbutt:hover {
    cursor: pointer;
    color: #0088FF;
    border: 2px solid #0088FF;
}
.postHistDeletebutt {
    float: right;
    height: 32px;  
    width: 100px;
    margin: 0;
    padding: 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;    
    border-radius: 8px;
    transition: all 0.4s linear;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
.postHistDeletebutt:hover {
    cursor: pointer;
    color: #ff0000;
    border: 2px solid #ff0000;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {   

    .emptyPostHistory {
        font-size: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postHeadingHolder {
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .postHistBackbutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .postHistDeletebutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {   

    .emptyPostHistory {
        font-size: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #postHeadingHolder {
        border-radius: 20px;        
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .postHistBackbutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .postHistDeletebutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) { 
    
    .emptyPostHistory {
        font-size: 13px;
        border: 2px solid #333;
        background-color: #111;
    }
    #postHeadingHolder {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    .postHistBackbutt {
        border: 2px solid #333;
        background-color: #111;
    }
    .postHistDeletebutt {
        border: 2px solid #333;
        background-color: #111; 
    }    
}

@media screen and (min-width: 320px) and (max-width: 991px) {   

    #postHistButtHolder {
        margin: 0 0 46px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 992px) {   

    #postHistButtHolder {
        margin: 0 0 15px 0; 
        padding: 0;
    }
}

#timeSincePostHistory {
    font-size: 12px;
    color: #ff9900;
}

/* ////////////////////////////////// */

.PostHistoryPosts {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 10px 10px 7px 10px;
    border-radius: 20px;    
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;    
}
.PostHistoryPosts p {    
    margin-left: 3px;
    padding: 0;
    word-wrap: break-word;
    text-overflow: hidden;
    white-space: normal;
    font-size: calc(10px + 0.3vw);
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .PostHistoryPosts {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    .PostHistoryPosts {
        border: 2px solid #333;
        background-color: #111;
    }
}


/* //// Load more feature - Your Posts //// */

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #loadMoreHolderYPH1 {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #loadMoreTopYPH { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 16px;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerYPH1 { /* Spinning balls Your Posts */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }

    #loadMoreHolderYPH2 { 
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;
    } 
    .loadMoreContainerYPH2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }    
    #loadMoreBottomYPH { /* notify that no more posts - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button - Post history // */

    #YPHupButton {
        display: none;
    }
    #YPHchevronUp {
        display: none;
    }   
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #loadMoreHolderYPH1 {
        margin: 0 0 20px 0;
        padding: 0;
    }    
    #loadMoreTopYPH { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 16px;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerYPH1 { /* Spinning balls Event History */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;     
    }    

    #loadMoreHolderYPH2 {
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;        
    }
    .loadMoreContainerYPH2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #loadMoreBottomYPH { /* notify that no more Events - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button - Event History // */

    #YPHupButton {
        display: none;
    }
    #YPHchevronUp {
        display: none;
    }
}
@media screen and (min-width: 1025px) {

    #loadMoreHolderYPH1 {
        margin: 0 0 20px 0;
        padding: 0;
    }    
    #loadMoreTopYPH { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 17px;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerYPH1 { /* Spinning balls Event History */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;     
    }
    
    #loadMoreHolderYPH2 {
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;
    }
    .loadMoreContainerYPH2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #loadMoreBottomYPH { /* notify that no more Events - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 13px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 16px;   
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button - Event History // */

    #YPHupButton {
        position: relative;
        height: 50px; 
        width: 100%;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        z-index: 8888;
    }
    #YPHupButton:hover {
        cursor: pointer;
    }
    #YPHupButton.show {
        opacity: 1;
        visibility: visible;
    }
    #YPHchevronUp {
        height: 40px; 
        width: 40px;
        padding: 6.5px 5.75px 4px 6.25px; 
        font-weight: normal;
        font-style: normal;
        font-size: 1.8em;  
        line-height: 45px;
        color: #ff9900;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b; 
        transition: all 0.1s linear; 
    }
    #YPHchevronUp:active {
        background-color: #1a1a1a;
        transform: translateY(3px);
    }
}

/* /////////// END POSTS HISTORY PAGE ////////// */

/* ============================================= */

/* /////////// PLEDGSTA CONNECT SOCIAL PAGE //// */

@media screen and (min-width: 320px) and (max-width: 431px) {
   
    #PCSwrapper {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    #PCScontainer {
        width: 100%;
        margin: 75px 10px 15px 0; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px 20px 29px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .PCStext {
        padding: 10px 20px 0 20px;
        text-align: justify;
    }
}
@media screen and (min-width: 432px) and (max-width: 767px) {
   
    #PCSwrapper {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }
    #PCScontainer {
        width: 100%;
        margin: 75px 10px 15px 0; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px 20px 29px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .PCStext {
        padding: 10px 20px 0 20px;
        text-align: justify;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) { /* 768 - 800 */

    #PCSwrapper {
        width: 100%;
    }
    #PCScontainer {
        width: 100%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 34px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .PCStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) { /* 960 */

    #PCSwrapper {
        width: 100%;
    }
    #PCScontainer {
        width: 100%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 34px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    } 
    .PCStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #PCSwrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #PCScontainer {
        width: 73%;
        margin: 66px 10px 15px 7px; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 34px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    } 
    .PCStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #PCSwrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #PCScontainer {
        width: 73%;
        margin: 66px 10px 15px 7px; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    } 
    .PCStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138  */

    #PCSwrapper {
        width: 98%;
        margin: 0; 
        padding: 0;
    }
    #PCScontainer {
        width: 74%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
    .PCStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #PCSwrapper {
        width: 96%;
        margin: 0; 
        padding: 0;
    }
    #PCScontainer {     
        margin: 66px 0 15px 0; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
    .PCStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1200px) {
    
    #PCSwrapper {
        width: 82%;
        margin: 66px 0 300px 0; 
        padding: 0;
    }
    #PCScontainer {     
        margin: 0 10px 15px -25px; 
        padding: 0; 
    }
    #PCSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    } 
    .PCStext {
        padding: 0 10px 0 10px;
        text-align: center;
    }

}

/* ////// Button Container /////// */

@media screen and (max-width: 767px) {

    .PCSbtnContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) {

    .PCSbtnContainer {
        display: flex;
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
        justify-content: space-between;
    }
}

/* ////// Scale buttons ////// */

@media screen and (max-width: 1023px) {
    
    .PCSbtnContainer a {
        color: #888;
        transition: 500ms;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .PCSbtnContainer a:active {
        color: #888;
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .PCSbtnContainer a {
        color: #888;
        transition: 500ms;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .PCSbtnContainer a:hover {
        color: #888;
        /*transform: scale(1.2);*/
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1180px) {
    
    .PCSbtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .PCSbtnContainer a:hover {
        color: #999;
        /*transform: scale(1.2);*/
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1181px) {

    .PCSbtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }    
    .PCSbtnContainer a:hover {
        color: #999;
        /*transform: scale(1.0);*/
        background-color: #1c1c1c;
    }
}

/* ////// Buttons ////// */

@media screen and (min-width: 320px) and (max-width: 431px) {

    .PCSfacebookBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .PCSinstagramBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .PCSredditBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }    
    .PCSxBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
}
@media screen and (min-width: 432px) and (max-width: 1023px) {

    .PCSfacebookBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .PCSinstagramBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .PCSredditBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }    
    .PCSxBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .PCSfacebookBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
    }
    .PCSfacebookBtn:active {
        transform: translateY(3px);
    }
    .PCSinstagramBtn {
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
    }
    .PCSredditBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
    }    
    .PCSxBtn {
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
    }
}
@media screen and (min-width: 1025px) {

    .PCSfacebookBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }
    .PCSfacebookBtn:active {
        transform: translateY(3px);
    }
    .PCSinstagramBtn {
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }
    .PCSinstagramBtn:active {
      transform: translateY(3px);
    }
    .PCSredditBtn {
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }    
    .PCSredditBtn:active {
      transform: translateY(3px);
    }
    .PCSxBtn {
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }
    .PCSxBtn:active {
      transform: translateY(3px);
    }
}

/* /// Icons /// */

.PCSbtnContainer .fa-facebook {
    margin-bottom: 4px;
    font-size: 24px;
    color: #3b5998;
}
.PCSbtnContainer .fa-instagram {
    margin: -2px 0 4px 0;
    /*margin: -2px 10px 0 0;*/
    padding: 0;
    color: transparent;
    font-size: 28px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* For Safari */
}
.PCSbtnContainer .fa-x-twitter {
    margin-bottom: 4px;
    font-size: 25px;
    color: #D0D0D0;
}
.PCSbtnContainer .fa-reddit {
    margin-bottom: 4px;
    font-size: 23px;
    color: #ff4500;
}

/* ///////// END PLEDGSTA CONNECT SOCIAL /////// */

/* ============================================= */

/* ///////// SELECT SOCIALS PAGE /////////////// */

@media screen and (min-width: 320px) and (max-width: 431px) {
   
    #SSwrapper {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    #SScontainer {
        width: 100%;
        margin: 75px 10px 15px 0; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px 20px 29px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .SStext {
        padding: 10px 20px 0 20px;
        text-align: justify;
    }
}
@media screen and (min-width: 432px) and (max-width: 767px) {
   
    #SSwrapper {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }
    #SScontainer {
        width: 100%;
        margin: 75px 10px 15px 0; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px 20px 29px 20px;
        border-radius: 34px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .SStext {
        padding: 10px 20px 0 20px;
        text-align: justify;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) { /* 768 - 800 */

    #SSwrapper {
        width: 100%;
    }
    #SScontainer {
        width: 100%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 34px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .SStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) { /* 960 */

    #SSwrapper {
        width: 100%;
    }
    #SScontainer {
        width: 100%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 34px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    } 
    .SStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #SSwrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #SScontainer {
        width: 73%;
        margin: 66px 10px 15px 7px; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 34px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    } 
    .SStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #SSwrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #SScontainer {
        width: 73%;
        margin: 66px 10px 15px 7px; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #222;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    } 
    .SStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138  */

    #SSwrapper {
        width: 98%;
        margin: 0; 
        padding: 0;
    }
    #SScontainer {
        width: 74%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
    .SStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #SSwrapper {
        width: 96%;
        margin: 0; 
        padding: 0;
    }
    #SScontainer {     
        margin: 66px 0 15px 0; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
    .SStext {
        padding: 0 10px 0 10px;
        text-align: center;        
    }
}
@media screen and (min-width: 1200px) {
    
    #SSwrapper {
        width: 82%;
        margin: 66px 0 300px 0; 
        padding: 0;
    }
    #SScontainer {     
        margin: 0 10px 15px -25px; 
        padding: 0; 
    }
    #SSmainInner {    
        margin: 0; 
        padding: 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    } 
    .SStext {
        padding: 0 10px 0 10px;
        text-align: center;
    }

}

/* ////// Button Container /////// */

@media screen and (max-width: 767px) {

    .SSbtnContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) {

    .SSbtnContainer {
        display: flex;
        width: 100%;
        margin: 30px 0 0 0;
        padding: 0;
        justify-content: space-between;
    }
}

/* ////// Scale buttons ////// */

@media screen and (max-width: 1023px) {
    
    .SSbtnContainer a {
        color: #888;
        transition: 500ms;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .SSbtnContainer a:active {
        color: #888;
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .SSbtnContainer a {
        color: #888;
        transition: 500ms;
        text-decoration: none;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .SSbtnContainer a:hover {
        color: #888;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1180px) {
    
    .SSbtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b; 
    }
    .SSbtnContainer a:hover {
        color: #999;
        background-color: #1c1c1c;
    }
}
@media screen and (min-width: 1181px) {

    .SSbtnContainer a {
        color: #999;
        transition: 500ms;
        text-decoration: none;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }    
    .SSbtnContainer a:hover {
        color: #999;
        background-color: #1c1c1c;
    }

}

/* ////// Buttons ////// */

@media screen and (min-width: 320px) and (max-width: 431px) {

    .ssFacebookBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .ssInstagramBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .ssRedditBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }    
    .ssXBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
}
@media screen and (min-width: 432px) and (max-width: 1023px) {

    .ssFacebookBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .ssInstagramBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .ssRedditBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }    
    .ssXBtn {
        width: 90%;
        margin-bottom: 10px;
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .ssFacebookBtn {
        width: 100px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .ssInstagramBtn {
        width: 100px;
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
    .ssRedditBtn {
        width: 100px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }    
    .ssXBtn {
        width: 100px;
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #222;
        color: #888;
        text-align: center;
    }
}
@media screen and (min-width: 1025px) {

    .ssFacebookBtn {
        width: 100px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }
    .ssFacebookBtn:active {
        transform: translateY(3px);
    }
    .ssInstagramBtn {
        width: 100px;
        padding: 10px 13px 8px 13px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }
    .ssInstagramBtn:active {
      transform: translateY(3px);
    }
    .ssRedditBtn {
        width: 100px;
        padding: 12px 13px 10px 13px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }    
    .ssRedditBtn:active {
      transform: translateY(3px);
    }
    .ssXBtn {
        width: 100px;
        padding: 12px 12px 10px 12px;
        border-radius: 12px;
        border: 2px solid #333;
        color: #999;
        text-align: center;
    }
    .ssXBtn:active {
      transform: translateY(3px);
    }
}

/*.ssFacebookBtn {
    display: inline-flex;
    margin-right: 20px;
    margin-left: 4px;
    padding: 12px 16px 10px 13px;
    color: #fff;
    border-radius: 10px;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b; 
}
.ssInstagramBtn {
    display: inline-flex;
    margin-right: 20px;
    padding: 12px 16px 10px 13px;
    color: #fff;
    border-radius: 10px;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b; 
}
.ssRedditBtn {
    display: inline-flex;
    margin-right: 20px;
    padding: 12px 16px 10px 13px;
    color: #fff;
    border-radius: 10px;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b; 
}
.ssXBtn {
    display: inline-flex;
    margin-right: 0;
    padding: 12px 16px 10px 13px;
    color: #fff;
    border-radius: 10px;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b; 
}*/

/* /// Icons /// */

.SSbtnContainer .fa-facebook {
    margin-bottom: 4px;
    font-size: 24px;
    color: #3b5998;
}
.SSbtnContainer .fa-instagram {
    margin: -2px 0 4px 0;
    padding: 0;
    color: transparent;
    font-size: 28px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* For Safari */
}
.SSbtnContainer .fa-x-twitter {
    margin-bottom: 4px;
    font-size: 25px;
    color: #D0D0D0;
}
.SSbtnContainer .fa-reddit {
    margin-bottom: 4px;
    font-size: 23px;
    color: #ff4500;
}



/* ///////// END - SELECT SOCIALS PAGE ///////// */

/* ============================================= */

/* /////////// SCHEDULE POST PAGE - FACEBOOK /// */

#SPwrapper {
    margin: 66px 0 0 0; 
    padding: 0;
}
#SPcontainer {     
    margin: 0 10px 15px -25px; 
    padding: 0; 
} 
#SPmainInner {    
    margin: 0; 
    padding: 20px 20px 20px 20px;
    border: 2px solid #333;
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
} 
#SPcolumnOne {
    margin: 0; 
    padding: 0 10px 0 0; 
}
.SPinfo {
    margin: 10px 0 15px 0; 
    color: #999; 
    text-align: justify;
}
.SPformlabelPreview {
    margin: 10px 0 10px 0; 
    color: #999; 
    font-size: 14px; 
    font-weight: 600;
}
.SPpostHolder {
    padding: 10px 15px; 
    border-radius: 16px; 
    border: 2px solid #333;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #SPtimeSince {
        padding-left: 2px;
        color: #ff9900;
        font-size: 11px;
    }
    .SPtime {
        color: #888;
        font-size: 11px;
        font-weight: 600;
    }    
}
@media screen and (min-width: 768px) {
    
    #SPtimeSince {
        padding-left: 2px;
        color: #ff9900;
        font-size: 12px;
    }
    .SPtime {
        color: #888;
        font-size: 12px;
        font-weight: 600;
    }    
}

.SPpostImage {
    height: auto; 
    width: 100%; 
    border-radius: 14px;
}
.SPpostMessage {
    width: 100%; 
    margin-top: 15px
}
#SPcolumnTwo {
    height: 550px;
    margin: 0; 
    padding: 0 0 0 15px;
}
.SPselectPageCell {
    height: 120px; 
    margin: 0; 
    padding: 0;
}
.SPformlabelSelect {
    margin: 10px 0 0 0; 
    color: #999; 
    font-size: 14px; 
    font-weight: 600;
}
#pageId { /*  Select */
    color: #777777;
    scrollbar-width: none;
}
#pageId option { /* Option */
    margin-right: 6px;
    padding: 3px 5px 4px 4.5px;
    color: #D0D0D0;
    font-size: 12px; 
    cursor: pointer;
    border-radius: 4px;
}

@media screen and (min-width: 320px) and (max-width: 599px) {
       
    #pageId {
        position: relative;
        z-index: 9999;
        padding: 9px 5px 10.5px 6px;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    
    #pageId {
        padding: 9px 5px 10px 6px;
    }
}
@media screen and (min-width: 1025px) {
    
    #pageId {
        position: relative;
        z-index: 9999;        
        padding: 6px 0 7px 6px;
    }
}

.SPformPage {
    box-shadow: none;
    display: inline-block;
    width: 36%;    
    margin-top: 10px;
    margin-left: 0;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.SPformPage:hover {
    cursor: pointer;
    border: 2px solid #444;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .SPformPage {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 1025px) {

    .SPformPage {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    } 
}
.SPpageIdOption { /* pageId header */ 
    font-weight: 600;
}
.SPformlabelSchedule {
    margin: 10px 0 10px 0; 
    color: #999; 
    font-size: 14px; 
    font-weight: 600;
}
.SPscheduleHolder {
    width: 100%; 
    display: inline-flex; 
    margin: 0; 
    padding: 0;
}
#dateWrapperSP {
    height: 50px;
    margin: 0;
    padding: 0 8px 0 0;
}
#SPtimeHolder {
    margin: 0; 
    padding: 0 0 0 20px;
}
#TimeWrapperSP {
    height: 50px;
    margin: 0;
    padding: 0 0 0 0;
}
.SPformlabel {
    width: 100%;
    margin: 0 0 10px 0; 
    padding: 0;
    color: #999;  
    font-weight: 600;
}
.ui-timepicker {
    height: 234px;
}

@media screen and (min-width: 320px) and (max-width: 413px) {

    #SPscheduleButtWrapper {    
        margin: 15px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #SPscheduleButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 414px) and (max-width: 600px) {

    #SPscheduleButtWrapper {
        margin: 25px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #SPscheduleButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 601px) and (max-width: 768px) {

    #SPscheduleButtWrapper {
        margin: 25px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #SPscheduleButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 769px) and (max-width: 960px) {

    #SPscheduleButtWrapper {
        margin: 25px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #SPscheduleButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 961px) {

    #SPscheduleButtWrapper {
        width: 96%;
        position: absolute; 
        bottom: 0;
        margin: 10px 0 0 0;
        padding: 0;
    }
    #SPscheduleButtInner {
        margin: 0; 
        padding: 0;
    }     
}

.SPscheduleButt {
    width: 100%;    
    margin: 0;
    color: #ff9900;
    font-size: 14px;
    text-align: center; 
    transition: all 0.3s linear;
}
.SPscheduleButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .SPscheduleButt {
        padding: 14px 10px 13px 10px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px) {
    
    .SPscheduleButt {
        padding: 12px 0 12px 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
    }    
}

/* ///////// END - SELECT PAGE - FACEBOOK ////// */

/* ============================================= */

/* //////////////// EVENTS PAGES /////////////// */

.updateSuccessAlert {
    margin-bottom: 10px; 
    padding: 0; 
    font-size: 14px;
    color: #0088FF;
    text-align: center;
}
.accountConnectAlert {
    width: 100%;
    margin: 0 0 5px 0;
    padding: 10px;
    font-size: 14px;
    color: #0088FF;
    text-align: center; 
    border: 2px solid #0088FF; 
    border-radius: 6px;
    background-color: #111;
}
.eventsAlreadyConnected {
    width: 100%;
    margin: 0 0 5px 0;
    padding: 10px;
    font-size: 14px;
    color: #FF9900;
    text-align: center; 
    border: 2px solid #ff9900; 
    border-radius: 8px;
    background-color: #111;
}
.EventsTbudConnectAlert {
    width: 100%;
    margin: 0 0 5px 0;
    padding: 10px;
    font-size: 14px;
    color: red;
    text-align: center; 
    border: 2px solid red; 
    border-radius: 8px;
    background-color: #111;
}
#EventsTbudConnecttriangle {
     margin-bottom: 10px;
     margin-top: 5px;
     font-size: 22px;
}
#ticketingInfo {
    margin: 0; 
    padding: 0 10px 0 10px;
}
#linedOREvents {
    margin: 0; 
    padding: 0 14px 0 14px; 
    color: #999; 
    font-size: 16px; 
    font-weight: 600; 
    background-color: #000;
}
.updateText {
    margin-bottom: 10px; 
    padding: 0; 
    font-size: 14px; 
    color: #D0D0D0;
    text-align: center;
}
.FormlabelEventsQuery {
    margin-bottom: 10px; 
    padding: 0; 
    font-size: 14px; 
    font-weight: 600;        
    color: #999;
    text-align: center;
}
.noEventsSign {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 22px 10px 22px 10px;
    font-size: 14px;
    font-weight: 500;
    color: red;
    text-align: center;
    border: 2px solid #333;
    border-radius: 6px;
}
#ticketbudVidHolder {
    margin: 0; 
    padding: 0; 
    text-align: center;
}
#ticketbudLinksHolder {
    margin: 0 0 20px 0; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
#syncbuttWrap {
    width: 240px;    
    margin: 0;
    padding: 0;
}
#UbuttWrap {
    margin: 0;
    padding: 0;
}
#UbuttWrap a {
    color: #fff;
}
.click {
    margin-top: 5px;
    text-align: center;
}
.paymentInfoBanner {
    margin: 0; 
    padding: 10px 5px 10px 5px;
    font-size: calc(10px + 0.3vw);  
    line-height: 1.2;
    background-color: #000; 
    border: 2px solid red;
}
#UbuttWrapEdit {
    margin: 0;
    padding: 0;
}
#UbuttWrapEdit a {
    color: #ff9900;
}
.UniRefButt { /* ticketbud Info link */
    width: 100%;
    color: #D0D0D0;
    text-align: center;
    font-size: 14px;
    margin: 0 0 10px 0;
    padding: 24px 10px 24px 10px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.UniRefButt:hover {
    background-color: #111;
    cursor: pointer;
}    
.UniRefButtEdit {
    width: 100%;
    color: #D0D0D0;
    text-align: center;
    font-size: 14px;
    margin: 0 0 10px 0;
    padding: 24px 10px 24px 10px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;    
}
.UniRefButtEdit:hover {
    background-color: #111;
    cursor: pointer;
}
.SyncEventButt {
    width: 100%;
    color: #ff9900;
    text-align: center;
    font-size: 14px;
    margin: 0 0 10px 0;
    padding: 24px 10px 24px 10px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;    
}
.SyncEventButt:hover {
    background-color: #111;
    cursor: pointer;
}
.TicketBudEventlink {
    width: 100%;
    color: #ff9900;
    text-align: center;
    font-size: 14px;
    margin: 0 0 10px 0;
    padding: 24px 10px 24px 10px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;    
}
.TicketBudEventlink:hover {
    background-color: #111;
    cursor: pointer;
}
.UpdateButtEdit { /* save edit button */
    width: 100%;
    color: #ff9900;
    text-align: center;
    font-size: 14px;
    margin: 0 0 10px 0;
    padding: 24px 10px 24px 10px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;    
}
.UpdateButtEdit:hover {
    background-color: #111;
    cursor: pointer;
}  
.UniStepButt {
    width: 100%;
    color: red;
    text-align: center;
    font-size: 14px;
    margin: 0 0 10px 0;
    padding: 24px 10px 24px 10px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.UniStepButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    cursor: pointer;
}
.connectRefButt {
    width: 100%;    
    margin: 0 0 10px 0;
    padding: 11px 5px 13px 5px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.connectRefButtt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    cursor: pointer;
}
.greylineEvents {
    margin: 5px 10px 20px 10px;
    border-top: 2px solid #333;
}
#pledgeRec {
    color: #ff9900; 
    text-shadow: 0 0 0 #ff9900; 
    text-align: center;
}
.StripeLogoEvents {
    min-height: auto; 
    width: 150px; 
    margin-bottom: 15px;
}
.FormlabelEventsInfo {
    margin-bottom: 10px; 
    padding: 0; 
    font-size: 14px; 
    font-weight: 600;        
    color: #999;
    text-align: center;
}
#lockIconEvents {
    color: #ff9900;
}
#instructState1 {
    color: #ff9900;
    text-align: center;
    font-size: 16px;
}
#instructState2 {
    color: #999;
    text-align: center;
}
.Instruction {
    min-height: auto; 
    width: auto;
}
#ticketingColumn {
    border: 2px solid #333; 
    border-radius: 6px; 
    background-color: #000; 
}
@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #ticketingMainContainer {
        margin: 0 10px 20px 10px;
        padding: 0 0 0 25px;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0;
    }
    #ticketingColumn {
        margin: 65px 0 5px -25px; 
        padding: 20px;
    }    
}
@media screen and (min-width: 600px) and (max-width: 730px) {
    
    #ticketingMainContainer {
        margin: 0 10px 200px 10px;
        padding: 0 0 0 25px;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 80px 0 80px;
    }
    #ticketingColumn {
        margin: 60px 0 5px -25px; 
        padding: 20px; 
    }    
}
@media screen and (min-width: 731px) and (max-width: 767px) {
    
    #ticketingMainContainer {
        margin: 0 10px 200px 10px;
        padding: 0 0 0 25px;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 80px 0 80px;
    }
    #ticketingColumn {
        margin: 65px 0 5px -25px; 
        padding: 20px; 
    }    
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #ticketingMainContainer {
        margin: 0 0 300px 10px;
        padding: 0;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 80px 0 80px;
    }     
    #ticketingColumn {
        margin: 62px 0; 
        padding: 20px;
    }    
}
@media screen and (min-width: 800px) and (max-width: 800px) {
    
    #ticketingMainContainer {
        margin: 0 0 300px 10px;
        padding: 0;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 80px 0 100px;
    } 
    #ticketingColumn {
        margin: 64px 0; 
        padding: 20px; 
    }        
}
@media screen and (min-width: 801px) and (max-width: 812px) {
    
    #ticketingMainContainer {
        margin: 0 0 200px 10px;
        padding: 0;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 50px 0 90px;
    }
    #ticketingColumn {
        margin: 57px 0; 
        padding: 20px;
    }    
}
@media screen and (min-width: 813px) and (max-width: 854px) {
    
    #ticketingMainContainer {
        margin: 0 0 200px 10px;
        padding: 0;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 50px 0 130px;
    }
    #ticketingColumn {
        margin: 60px 0; 
        padding: 20px; 
    }    
}
@media screen and (min-width: 855px) and (max-width: 1023px) {
    
    #ticketingMainContainer {
        margin: 0 0 20px 10px;
        padding: 0;        
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 80px 0 80px;
    }
    #ticketingColumn {
        margin: 60px 0; 
        padding: 20px; 
    }    
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #ticketingMainContainer {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #ticketingContainer {
        margin: 0;
        padding: 0 0 0 268px;
    }
    #ticketingColumn {
        width: 100%;
        margin: 62px 0 5px 0; 
        padding: 20px; 
    }
}
@media screen and (min-width: 1025px) {
   
    #ticketingMainContainer {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #ticketingContainer {
        margin: 0;
        padding: 0;
    }    
    #ticketingColumn {
        margin: 63px 0 5px -25px; 
        padding: 20px;
    }
}

/* ///////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #ticketingLogoWrapper1 {
        margin: -5px 0 40px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #ticketingLogoWrapper1B {
        margin: -5px 0 40px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #ticketingLogoWrapper2 {
        margin: 10px 0 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #ticketingLogoWrapper3 {
        margin: 20px 0 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #ticketingLogoWrapperEmpty {
        margin: 0 0 40px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
    }
    .ticketingLogoWrapperInner {
        height: 118px;
        width: 214px;
        margin: 0;
        padding: 10px 0 10px 0;
        border: 2px solid #666;
        border-radius: 6px;
        background-color: #fff;
    } 
    .ticketbudLogo {
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }
    #TBbuttGoto {
        width: 240px;
        margin-top: 42px; 
        padding: 0; 
    }
    #orWrapperEvents {
        width: 100%; 
        height: 12px;
        margin: 0 0 10px 0;
        border-bottom: 2px solid #333; 
        text-align: center;
    }    
    .universeLogoButton {
        height: 154px;
        width: auto;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }
    .universeLogoButton3 {
        height: 154px;
        width: auto;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }    
    #instructColumn {
        margin: 0; 
        padding: 30px 0 10px 0;
    }
    #About-Ticketbud {
        margin-top: -30px;
        margin-bottom: 30px;
    }
    #aboutTicketingInner {
        margin: 15px 0 0 0;
        padding: 0 10px 10px 10px; 
    }    
    #Ticketbud-Instructions {
        margin-top: -30px;
        margin-bottom: 30px;        
    }
    .FormlabelStepEvents {
        margin: 0; 
        padding: 15px 4px 0 3px; 
        font-size: 14px;        
        font-weight: 600;
        color: #fff;
        text-align: justify;
    }    
    .FormlabelEvents {
        margin-bottom: 10px; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;
        color: #999;
        text-align: justify;
    }
    #imageContainer2 {
        margin: 0 0 20px 0; 
        padding: 10px;
        color: red;  
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }    
    #payProWrapper {
        margin: 15px 0 20px 0; 
        padding: 18px 10px 0 10px;  
        border: 2px solid #333; 
        border-radius: 6px;
        background-color: #000;
    }
    .StripeText {
        margin: 0; 
        padding: 0 8px 0 8px; 
        font-size: 14px;
        text-align: justify;
    }      
    #Connect-Instructions {
        margin-top: -30px;
        margin-bottom: 30px;
    }
    #step1Wrap {
        margin: 0; 
        padding: 0;
    }
    #step_1 {
        margin-top: -75px;
        padding-top: 10px;
        margin-bottom: 60px;
    }
    #step6Wrap {
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #step_6 {
        margin-top: -80px;
        padding-top: 10px;
        margin-bottom: 60px;
    }
    #step12Wrap {
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #step_12 {
        margin-top: -70px;
        padding-top: 10px;
        margin-bottom: 60px; 
    }
    #instructStateHolder {
        margin: 40px 0 0 0;
        padding: 10px 10px 3px 10px; 
        background-color: #111; 
        border: 2px solid #ff9900; 
        border-radius: 6px;
    }    
    #connectAccountWrapper {
        margin: 40px 0 20px 0; 
        padding: 18px 18px 0 18px;  
        border: 2px solid #333; 
        border-radius: 6px;
        background-color: #000;    
    }
    .FormlabelEventsCA {
        margin: 0; 
        padding: 0 4px 0 3px; 
        font-size: 14px;        
        font-weight: 600;
        color: #999;
        text-align: justify;
    }         
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #instructColumn {
        margin: 0; 
        padding: 35px 10px 0 10px;
    }    
    #ticketingLogoWrapper1 {
        margin: -3px 0 35px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #ticketingLogoWrapper1B {
        margin: -3px 0 35px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #ticketingLogoWrapper2 {
        margin: 5px 0 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #ticketingLogoWrapper3 {
        margin: 20px 0 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #ticketingLogoWrapperEmpty {
        margin: -5px 0 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
    }    
    .ticketingLogoWrapperInner {
        height: 130px;
        width: 236px;
        margin: 0;
        padding: 10px 0 10px 0;
        border: 2px solid #666;
        border-radius: 6px;
        background-color: #fff;
    } 
    .ticketbudLogo {
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }
    #TBbuttGoto {
        width: 240px;
        margin-top: 42px; 
        padding: 0; 
    }    
    #orWrapperEvents {
        width: 100%; 
        height: 12px;
        margin: 30px 0 10px 0;
        border-bottom: 2px solid #333; 
        text-align: center;
    }    
    .universeLogoButton {
        height: 154px;
        width: auto;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }
    .universeLogoButton3 {
        height: 154px;
        width: auto;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    } 
    #About-Ticketbud {
        margin-top: -70px;
        margin-bottom: 30px;
    }
    #aboutTicketingInner {
        margin: 15px 0 0 0;
        padding: 0 10px 10px 10px;    
        border: 2px solid #333; 
        border-radius: 6px;
    }       
    #Ticketbud-Instructions {
        margin-top: -70px;
        margin-bottom: 30px;        
    }
    .FormlabelStepEvents {
        margin: 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;        
        color: #fff;
    }
    .FormlabelEvents {
        margin-bottom: 10px; 
        padding: 0; 
        font-size: 14px;
        color: #999;
    }
    #imageContainer2 {
        margin: 0 0 40px 0; 
        padding: 10px;
        color: red;  
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }    
    #payProWrapper {
        margin: 20px 0 20px 0; 
        padding: 18px 25px;  
        border: 2px solid #333; 
        border-radius: 6px;
        background-color: #000;
    }
    .StripeText {
        margin: 0; 
        padding: 0 4px 0 3px; 
        font-size: 14px;
    }     
    #Connect-Instructions {
        margin-top: -70px;
        margin-bottom: 30px;
    }
    #step1Wrap {
        margin: 0; 
        padding: 0;
    }
    #step_1 {
        margin-top: -80px;
        padding-top: 10px;
        margin-bottom: 60px;
    }
    #step6Wrap {
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #step_6 {
        margin-top: -85px;
        padding-top: 10px;
        margin-bottom: 60px;
    }
    #step12Wrap {
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #step_12 {
        margin-top: -65px;
        padding-top: 10px;
        margin-bottom: 60px; 
    }
    #instructStateHolder {
        margin: 40px 0 0 0;
        padding: 10px 10px 3px 10px; 
        background-color: #111; 
        border: 2px solid #ff9900; 
        border-radius: 6px;
    }   
    #connectAccountWrapper {
        margin: 24px 0 20px 0; 
        padding: 62px 25px 0 25px;  
        border: 2px solid #333; 
        border-radius: 6px;
        background-color: #000;    
    }
    .FormlabelEventsCA {
        margin: 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }         
}
@media screen and (min-width: 1024px) {
    
    #ticketingLogoWrapper1 {
        margin: 40px 0 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #ticketingLogoWrapper1B {
        margin: 1px 0 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #ticketingLogoWrapper2 {
        margin: 40px 0 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #ticketingLogoWrapper3 {
        margin: 40px 0 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #ticketingLogoWrapperEmpty {
        margin: 2px 0 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
    }     
    .ticketingLogoWrapperInner {
        height: 143px;
        width: 240px;
        margin: 0;
        padding: 10px 0 10px 0;
        background-color: #fff;
        border-radius: 6px;
    } 
    .ticketbudLogo {
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }
    #TBbuttGoto {
        width: 240px;
        margin-top: 42px; 
        padding: 0; 
    }    
    #orWrapperEvents {
        width: 100%; 
        height: 12px;
        margin: 30px 0 10px 0;
        border-bottom: 2px solid #333; 
        text-align: center;
    }      
    .universeLogoButton {
        height: 154px;
        width: auto;
        margin: 10px 30px 0 -18px;
        padding: 0;
        border-radius: 6px;
    }
    .universeLogoButton3 {
        height: 154px;
        width: auto;
        margin: 0;
        padding: 0;
        border-radius: 6px;
    }    
    #instructColumn {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #About-Ticketbud {
        margin-top: -30px;
        margin-bottom: 30px;
    }    
    #aboutTicketingInner {
        margin: 15px 0 0 0;
        padding: 0 10px 10px 10px;    
        border: 2px solid #333; 
        border-radius: 6px;
    } 
    #Ticketbud-Instructions {
        margin-top: -30px;
        margin-bottom: 30px;        
    }
    .FormlabelStepEvents {
        margin: 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;
        color: #fff;
    }
    .FormlabelEvents {
        margin-bottom: 10px; 
        padding: 0; 
        font-size: 14px;
        color: #999;
    }
    #imageContainer2 {
        margin: 0 0 40px 0; 
        padding: 10px;
        color: red;  
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }    
    #payProWrapper {
        margin: 20px 0 20px 0; 
        padding: 18px 25px;  
        border: 2px solid #333; 
        border-radius: 6px;
        background-color: #000;
    }
    .StripeText {
        margin: 0; 
        padding: 0 5px 0 5px; 
        font-size: 14px;
    }  
    #Connect-Instructions {
        margin-top: -85px;
        margin-bottom: 85px;
    }
    #step1Wrap {
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #step_1 {
        margin-top: -90px;
        margin-bottom: 84px;
    }
    #step6Wrap {
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #step_6 {
        margin-top: -50px;
        margin-bottom: 60px;
    }
    #step12Wrap {
        margin: 0 0 20px 0; 
        padding: 0;
    }
    #step_12 {
        margin-top: -50px;
        margin-bottom: 60px; 
    }
    #instructStateHolder {
        margin: 30px 0 0 0;
        padding: 10px 10px 3px 10px; 
        background-color: #111; 
        border: 2px solid #ff9900; 
        border-radius: 6px;
    }    
    #connectAccountWrapper {
        margin: 20px 0 20px 0; 
        padding: 18px 25px 0 25px;  
        border: 2px solid #333; 
        border-radius: 6px;
        background-color: #000;    
    }
    .FormlabelEventsCA {
        margin: 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;
        color: #999;
    }       
}


.editEventHeading {
    color: #ff9900; 
    font-size: calc(12px + 0.3vw); 
    background-color: #111; 
    border: 2px solid #ff9900;
}
#editEvtInputWrapper {
    margin: 20px 0 0 0; 
    padding: 0 0 0 10px;
}
#posterWrapper {
    margin: 20px 0 10px 0; 
    padding: 0 0 0 10px; 
    align-items: center;
}
.posterLabel {
    margin: 0 0 10px 0;    
    padding: 0; 
    font-size: 14px; 
    font-weight: 600;        
    color: #999;
    text-align: center;
}
.shortPreviewEditEvent {
    height: 240px;
    min-width: 240px;
    max-width: 240px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    border: 2px solid #333;
    background: none;
}
#posterPreviewColumn {
    display: flex;
    margin: 0; 
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;    
}
.imageCoverEditEvent {
    position: relative;
    max-width: 236px;
    min-width: 236px;
    max-height: 236px;
    min-height: 236px;
    margin: 0; 
    padding: 0;
    border-radius: 4px;
    object-fit: cover;
    z-index: 0;
    transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}
#editDescriptionWrapper {
    margin: 15px 0 25px 0; 
    padding: 0 15px 0 15px;
}

/* /////////// END - EDIT EVENT PAGE /////////// */

/* /////////////// GIGS Tab Pane /////////////// */

.emptyEventHeading {
    color: #666; 
    font-size: calc(11px + 0.3vw);
}

@media screen and (max-width: 767px) {

    #gigsContainer {
        margin: 15px auto 0 auto;
        padding: 0 10px 0 10px;
    }    
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #gigsContainer {
        margin: 44px auto 0 auto;
        padding: 0 40px 0 40px;    
    }
}
@media screen and (min-width: 824px) and (max-width: 959px) {

    #gigsContainer {
        margin: 15px auto 0 auto;
        padding: 0 40px 0 40px; 
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {

    #gigsContainer {
        margin: 15px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #gigsContainer {
        margin: 10px auto 0 auto;
        padding: 0; 
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #gigsContainer {
        width: 90%;
        margin: 10px auto 0 auto;
        padding: 0; 
    }
}
@media screen and (min-width: 1200px) {

    #gigsContainer {
        margin: 10px auto 0 auto;
        padding: 0;        
    }
}

#gigsContainerInner {
    margin: 0;
    padding: 0; 
}

@media screen and (min-width: 320px) and (max-width: 425px) {

    #emptyEvent {
        margin: 0 0 105px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }    
    #GigsWrapper {
        margin: 0; 
        padding: 0;
    }
    #GigsWrapperInner {
        margin: 0;
        padding: 0;
    }
    
    /* /// Countdown Function /// */
    
    #timeLeftMain {
        margin: 0;
        padding: 0;
    }    
    #timeTillHolder {
        margin: 0;
        padding: 0;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    #timeSinceHolder {
        margin: 0;   
        padding: 15px 0 4px 0;
        text-align: center;
    }
    #tillGigsHolder {
        margin: 0 15px 0 15px;     
        border-radius: 10px;
        border: 2px solid #222;
    }
    #tillGigsHolderInner {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .eventTillStartLong {
        width: 160px;
        margin: 0;
        padding: 20px 0 0 6px;
        font-size: 16px;
        color: #999;
        overflow: hidden;  
        text-overflow: ellipsis; 
        -ms-text-overflow: ellipsis;
    }
    .eventTillStartLong:before {
        content: '';
    }
    .eventTillStart {
        margin: 0;
        padding: 20px 5px 20px 5px;
        font-size: 15px;
        color: #999;
    }
    .gigsBitsCss {
        margin: 0;
        padding: 0;
        font-size: 16px;
        color: #999;
    }
    .timeLeftCss {
        margin: 0;
        padding: 0;
        font-size: 16px;
        color: #ff9900;
    }

    /* // Clock Element // */

    #clockdiv {
        display: inline-block;
        margin: 10px 5px 10px 0;
        color: #999;
        font-weight: 100;
        font-size: 22px;
        text-align: center;
    }
    #clockdiv > div {
        width: 62px;
        display: inline-block;
        margin: 0;
        padding: 0;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #clockdiv div > span {
        width: 100%;
        display: inline-block;
        padding: 0;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .smalltext {
        width: 100%;
        padding: 0;
        color: #ff9900;
        font-size: 10px;
    }
    .timeTillGigsActive {
        margin: 0;
        font-size: 13px;
        color: #0088FF;
    } 

    /* /// End - Countdown Function /// */
    
    #mainGigsContainer {
        margin: 14px 0 0 0;
        padding: 0;
    }
    #eventNameHolder {
        margin: 0 0 5px 0;
        padding: 0 10px 0 10px;
        color: #D0D0D0;        
    }     
    .eventName {
        margin: 20px 0 10px 0;
        color: #D0D0D0;
        font-size: 28px; 
        font-weight: 600;
        word-break: break-word; 
    }
    #eventDescHolder {
        margin: 0 0 5px 0;
        padding: 0 25px 0 25px;
        color: #D0D0D0;        
    }
    #eventText {
        color: #D0D0D0;
    }
    #GigInfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
    #GigInfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
}
@media screen and (min-width: 426px) and (max-width: 600px) {

    #emptyEvent {
        margin: 0 0 105px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }    
    #GigsWrapper {
        margin: 0; 
        padding: 0;
    }
    #GigsWrapperInner {
        margin: 0;
        padding: 0;
    }
    
    /* /// Countdown Function /// */
    
    #timeLeftMain {
        margin: 0;
        padding: 0;
    }    
    #timeTillHolder {
        margin: 0;
        padding: 0;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    #timeSinceHolder {
        margin: 0;   
        padding: 15px 0 4px 0;
        text-align: center;
    }
    #tillGigsHolder {
        margin: 0 15px 0 15px;     
        border-radius: 10px;
        border: 2px solid #222;
    }
    #tillGigsHolderInner {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .eventTillStartLong {
        width: 160px;
        margin: 0;
        padding: 19px 0 0 6px;
        font-size: 18px;
        color: #999;
        overflow: hidden;  
        text-overflow: ellipsis; 
        -ms-text-overflow: ellipsis;
    }
    .eventTillStartLong:before {
        content: '';
    }
    .eventTillStart {
        margin: 0;
        padding: 19px 5px 20px 5px;
        font-size: 18px;
        color: #999;
    }
    .gigsBitsCss {
        margin: 0;
        padding: 0;
        font-size: 18px;
        color: #999;
    }
    .timeLeftCss {
        margin: 0;
        padding: 0;
        font-size: 18px;
        color: #ff9900;
    }

    /* // Clock Element // */

    #clockdiv {
        display: inline-block;
        margin: 10px 5px 10px 0;
        color: #999;
        font-weight: 100;
        font-size: 24px;
        text-align: center;
    }
    #clockdiv > div {
        width: 62px;
        display: inline-block;
        margin: 0 10px 0 10px;
        padding: 0;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #clockdiv div > span {
        width: 100%;
        display: inline-block;
        padding: 0;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .smalltext {
        width: 100%;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }
    .timeTillGigsActive {
        margin: 0;
        font-size: 13px;
        color: #0088FF;
    } 

    /* /// End - Countdown Function /// */
    
    #mainGigsContainer {
        margin: 14px 0 0 0;
        padding: 0;
    }

    #eventNameHolder {
        margin: 0 0 5px 0;
        padding: 0 10px 0 10px;
        color: #D0D0D0;        
    }     
    .eventName {
        margin: 20px 0 10px 0;
        color: #D0D0D0;
        font-size: 28px; 
        font-weight: 600;
        word-break: break-word; 
    }
    #eventDescHolder {
        margin: 0 0 5px 0;
        padding: 0 25px 0 25px;
        color: #D0D0D0;        
    }
    #eventText {
        color: #D0D0D0;
    }
    #GigInfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
    #GigInfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
}
@media screen and (min-width: 601px) and (max-width: 767px) {

    #emptyEvent {
        margin: 0 0 105px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }    
    #GigsWrapper {
        margin: 0; 
        padding: 0;
    }
    #GigsWrapperInner {
        margin: 0;
        padding: 0;
    }
    
    /* /// Countdown Function /// */
    
    #timeLeftMain {
        margin: 0;
        padding: 0;
    }    
    #timeTillHolder {
        margin: 0;
        padding: 0;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    #timeSinceHolder {
        margin: 0;   
        padding: 15px 0 4px 0;
        text-align: center;
    }
    #tillGigsHolder {
        margin: 0 15px 0 15px;     
        border-radius: 10px;
        border: 2px solid #222;
    }
    #tillGigsHolderInner {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    /* // Long // */
    
    .eventTillStartLong {
        display: inline-block;
        width: 440px;
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
        overflow: hidden;  
        text-overflow: ellipsis; 
        -ms-text-overflow: ellipsis;
    }
    .eventTillStartLong:before {
        content: '';
    }

    /* // Short // */
    
    .eventTillStart {
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
    }
    .gigsBitsCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #999;
    }   
    .timeLeftCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #ff9900;
    }

    /* // Clock Element // */
    
    #clockdiv {
        display: inline-block;
        margin: 10px 5px 10px 0;
        color: #999;
        font-weight: 100;
        font-size: 24px;
        text-align: center;
    }
    #clockdiv > div {
        width: 108px;
        display: inline-block;
        margin: 0 5px 0 5px;
        padding: 5px 10px 5px 10px;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #clockdiv div > span {
        width: 100%;
        display: inline-block;
        padding: 0;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .smalltext {
        width: 100%;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }

    .timeTillGigsActive {
        margin: 0;
        font-size: 13px;
        color: #0088FF;
    } 

    /* /// End - Countdown Function /// */
    
    #mainGigsContainer {
        margin: 14px 0 0 0;
        padding: 0;
    }

    #eventNameHolder {
        margin: 0 0 5px 0;
        padding: 0 10px 0 10px;
        color: #D0D0D0;        
    }     
    .eventName {
        margin: 20px 0 10px 0;
        color: #D0D0D0;
        font-size: 28px; 
        font-weight: 600;
        word-break: break-word; 
    }
    #eventDescHolder {
        margin: 0 0 5px 0;
        padding: 0 25px 0 25px;
        color: #D0D0D0;        
    }
    #eventText {
        color: #D0D0D0;
    }
    #GigInfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
    #GigInfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #emptyEvent {
        margin: 0 0 100px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0d0d0d;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }  
    #GigsWrapper {
        margin: 0; 
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #GigsWrapperInner {
        margin: 0;
        padding: 0 60px 0 60px;
    }

    /* /// Countdown Function /// */
    
    #timeLeftMain {
        margin: 0 0 5px 0; 
        padding: 0 0 0 0;
    } 
    #timeTillHolder {
        margin: 0;
        padding: 20px 25px 10px 25px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    #timeSinceHolder {
        margin: 0 0 10px 0;   
        padding: 0;
        text-align: center;
    } 
    
    /* /////////////////////// */

    #tillGigsHolder {
        margin: 0;     
        border-radius: 10px;
        border: 2px solid #222;
    }
    #tillGigsHolderInner {
        margin: 0;
        padding: 0 0 0 6px;
        text-align: center;
    }

    /* // Long // */
    
    .eventTillStartLong {
        display: inline-block;
        width: 440px;
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
        overflow: hidden;  
        text-overflow: ellipsis; 
        -ms-text-overflow: ellipsis;
    }
    .eventTillStartLong:before {
        content: '';
    }

    /* // Short // */
    
    .eventTillStart {
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
    }
    .gigsBitsCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #999;
    }   
    .timeLeftCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #ff9900;
    }

    /* // Clock Element // */

    #clockdiv {
        display: inline-block;
        margin-top: 15px;
        color: #999;
        font-weight: 100;
        font-size: 24px;
        text-align: center;
    }
    #clockdiv > div {
        width: 108px;
        display: inline-block;
        margin: 0 5px 0 5px;
        padding: 5px 10px 5px 10px;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #clockdiv div > span {
        width: 100%;
        display: inline-block;
        padding: 0;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .smalltext {
        width: 100%;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }

    /* // End - Clock Element // */

    .timeTillGigsActive {
        margin: 0;
        font-size: 16px;
        color: #0088FF;
    }    

    /* /// End - Countdown Function /// */
    
    #mainGigsContainer {
        margin: 0; 
        padding: 5px 0 5px 0;
    }
    #mainGigsContainerInner {}

    #eventNameHolder {
        margin: 20px 0 5px 0;
        padding: 0 10px 0 10px;
        color: #D0D0D0;        
    }  
    .eventName {
        margin: 0 0 10px 0;
        color: #D0D0D0;
        font-size: 28px; 
        font-weight: 600;
        word-break: break-word; 
    }
    #eventDescHolder {
        margin: 20px 0 5px 0;
        padding: 0 25px 0 25px;
        color: #D0D0D0;        
    }
    #eventText {
        color: #D0D0D0;
    }
    #GigInfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 5px 0 10px;
    }
    #GigInfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 5px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #emptyEvent {
        margin: 0 0 100px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }  
    #GigsWrapper {
        margin: 0; 
        padding: 0 100px 0 100px;
    }
    #GigsWrapperInner {
        margin: 0;
        padding: 0;
    }

    /* /// Countdown Function /// */
    
    #timeLeftMain {
        margin: 0 0 5px 0; 
        padding: 0 0 0 0;
    } 
    #timeTillHolder {
        margin: 0;
        padding: 20px 25px 10px 25px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    #timeSinceHolder {
        margin: 0 0 10px 0;   
        padding: 0;
        text-align: center;
    } 
    
    /* /////////////////////// */

    #tillGigsHolder {
        margin: 0;     
        border-radius: 10px;
        border: 2px solid #222;
    }
    #tillGigsHolderInner {
        margin: 0;
        padding: 0 0 0 6px;
        text-align: center;
    }

    /* // Long // */
    
    .eventTillStartLong {
        display: inline-block;
        width: 440px;
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
        overflow: hidden;  
        text-overflow: ellipsis; 
        -ms-text-overflow: ellipsis;
    }
    .eventTillStartLong:before {
        content: '';
    }

    /* // Short // */
    
    .eventTillStart {
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
    }

    .gigsBitsCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #999;
    }   
    .timeLeftCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #ff9900;
    }

    /* // Clock Element // */

    #clockdiv {
        display: inline-block;
        margin-top: 15px;
        color: #999;
        font-weight: 100;
        font-size: 24px;
        text-align: center;
    }
    #clockdiv > div {
        width: 108px;
        display: inline-block;
        margin: 0 0 0 0;
        padding: 5px 10px 5px 10px;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #clockdiv div > span {
        width: 100%;
        display: inline-block;
        padding: 0;
        text-align: center;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .smalltext {
        width: 100%;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }

    /* // End - Clock Element // */

    .timeTillGigsActive {
        margin: 0;
        font-size: 16px;
        color: #0088FF;
    }    

    /* /// End - Countdown Function /// */
    
    #mainGigsContainer {
        width: 100%;
        margin: 0; 
        padding: 5px 0 5px 0;
    }
    #eventNameHolder {
        margin: 20px 0 5px 0;
        padding: 0 10px 0 10px;
        color: #D0D0D0;        
    }  
    .eventName {
        margin: 0 0 10px 0;
        color: #D0D0D0;
        font-size: 28px; 
        font-weight: 600;
        word-break: break-word; 
    }
    #eventDescHolder {
        margin: 20px 0 5px 0;
        padding: 0 25px 0 25px;
        color: #D0D0D0;        
    }
    #eventText {
        color: #D0D0D0;
    }
    #GigInfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 5px 0 10px;
    }
    #GigInfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 5px;
    }
}
@media screen and (min-width: 1025px) {

    #emptyEvent {
        margin: 0 0 150px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }  
    #GigsWrapper {
        margin: 0; 
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    /* /// Countdown Function /// */
    
    #timeLeftMain {
        margin: 0 0 5px 0; 
        padding: 0 auto 0 auto;
    } 
    #timeTillHolder {
        margin: 0;
        padding: 20px 25px 10px 25px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    #timeSinceHolder {
        margin: 0 0 10px 0;   
        padding: 0;
    } 
    
    /* /////////////////////// */

    #tillGigsHolder {
        margin: 2px 0;     
        border-radius: 12px;
        border: 2px solid #333;
    }
    #tillGigsHolderInner {
        margin: 0;
        padding: 0 0 0 6px;
        text-align: center;
    }

    /* // Long // */
    
    .eventTillStartLong {
        display: inline-block;
        width: 440px;
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
        overflow: hidden;  
        text-overflow: ellipsis; 
        -ms-text-overflow: ellipsis;
    }
    .eventTillStartLong:before {
        content: '';
    }

    /* // Short // */
    
    .eventTillStart {
        margin: 0;
        padding: 20px 0 20px 0;
        color: #999;
        font-size: 20px;
    }
    .gigsBitsCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #999;
    }   
    .timeLeftCss {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #ff9900;
    }

    /* // Clock Element // */

    #clockdiv {
        display: inline-block;
        margin-top: 15px;
        color: #999;
        font-weight: 100;
        font-size: 24px;
        text-align: center;
    }
    #clockdiv > div {
        width: 108px;
        display: inline-block;
        margin: 0 5px 0 5px;
        padding: 5px 10px 5px 10px;
        text-align: center;
        background-color: #111;
    }
    #clockdiv div > span {
        width: 100%;
        display: inline-block;
        padding: 0;
        text-align: center;
        background-color: #111;
    }
    .smalltext {
        width: 100%;
        padding: 0;
        color: #ff9900;
        font-size: 14px;
    }

    /* // End - Clock Element // */

    .timeTillGigsActive {
        margin: 0;
        font-size: 16px;
        color: #0088FF;
    }  

    /* /// End - Countdown Function /// */

    #mainGigsContainer {
        margin: 5px 0 5px 0; 
        padding: 0 auto 0 auto;
    }
    #eventNameHolder {
        margin: 20px 0 5px 0;
        padding: 0 10px 0 10px;
        color: #D0D0D0;        
    }  
    .eventName {
        margin: 0;
        color: #D0D0D0;
        font-size: 40px;
        /*font-size: calc(46px + 0.3vw);*/ 
        font-weight: 600;
        letter-spacing: 2px;
        word-break: break-word; 
    }
    #eventDescHolder {
        margin: 20px 0 5px 0;
        padding: 0 20px 0 20px;
        color: #D0D0D0;        
    }
    #eventText {
        color: #D0D0D0;
    }
    #GigInfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 5px 0 10px;
    }
    #GigInfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 5px;
    }  
}

/* ////////// Details and info //////////// */

@media screen and (min-width: 320px) and (max-width: 599px) {

    
    #infoHolder {
        margin: 0;
        padding: 0 10px 25px 10px; 
        text-align: center;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b; 
    }
    .timeSinceGigs {
        margin: 0 0 6px 2px;
        padding: 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
    }    
    .timeGigs {
        margin: 0;
        font-size: 12px;
        color: #888;
    }

    .detsInfoTitle {
        color: #FF9900;
        font-weight: 500;
        font-size: 12px;
    }       
    .eventData {
        padding: 0 20px 0 20px;
        font-size: 11px;
        color: #D0D0D0;
        word-break: break-word;
    }
    .timeCode {
        margin-top: -8px; 
        font-size: 9px; 
        color: #666;
    }
    .eventDataAddress {
        margin-left: 15px;
        margin-right: 15px;
        padding: 0 5px 0 5px;
        font-size: 11px;
        color: #D0D0D0;
        word-break: break-word;       
    }
    #gigsMapMarker {
        margin: 0 4px 0 0;
        font-size: 10px;
        /*color: #444;*/
        color: #851C0B;
    } 
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #infoHolder {
        margin: 0;
        padding: 0 10px 25px 10px; 
        text-align: center;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b; 
    }
    .timeSinceGigs {
        margin: 0 0 6px 2px;
        padding: 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
    }    
    .timeGigs {
        margin: 0;
        font-size: 12px;
        color: #888;
    }

    .detsInfoTitle {
        color: #FF9900;
        font-weight: 500;
        font-size: 14px;
    }          
    .eventData {
        padding: 0 20px 0 20px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
    .timeCode {
        margin-top: -8px; 
        font-size: 12px; 
        color: #666;
    }
    .eventDataAddress {
        margin-left: 15px;
        margin-right: 15px; 
        padding: 0 10px 0 10px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
    #gigsMapMarker {
        margin: 0 5px 1px 0;
        font-size: 13px;
        /*color: #444;*/
        color: #851C0B;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {

    #infoHolder {
        margin: 0;
        padding: 0 25px 25px 25px;
        text-align: center;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    .timeSinceGigs {
        margin: 4px 0 6px 2px;
        padding: 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
    }
    .timeGigs {
        margin: 0;
        color: #888;
        font-size: 14px;
    }
    
    .detsInfoTitle {
        color: #FF9900;
        font-weight: 500;
        font-size: 14px;
    }          
    .eventData {
        padding: 0 20px 0 20px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
    .timeCode {
        margin-top: -8px; 
        font-size: 12px; 
        color: #666;
    }
    .eventDataAddress {
        margin-left: 15px;
        margin-right: 15px; 
        padding: 0 10px 0 10px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
    #gigsMapMarker {
        margin: 0 5px 1px 0;
        font-size: 13px;
        /*color: #444;*/
        color: #851C0B;
    }
}
@media screen and (min-width: 1025px) {

    #infoHolder {
        margin: 0;
        padding: 0 25px 25px 25px;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;            
    }
    .timeSinceGigs {
        margin: 4px 0 6px 2px;
        padding: 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: left;
    }
    .timeGigs {
        margin: 0;
        color: #888;
        font-size: 14px;
    }
    
    .detsInfoTitle {
        color: #FF9900;
        font-weight: 500;
        font-size: 14px;
    }          
    .eventData {
        padding: 0 20px 0 20px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
    .timeCode {
        margin-top: -8px; 
        font-size: 12px; 
        color: #666;
    }
    .eventDataAddress {
        margin-left: 15px;
        margin-right: 15px; 
        padding: 0 10px 0 10px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
    #gigsMapMarker {
        margin: 0 5px 1px 0;
        font-size: 13px;
        /*color: #444;*/
        color: #851C0B;
    }
}

/* ////////// End - Details and info ////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #GigsWrapperInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {

    #GigsWrapperInner {
        margin: 0;
        padding: 0;
    }
}

/* ///////// Gigs Upcoming page////////// */

@media screen and (max-width: 767px) {
     
    .gigsMessage {
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0; 
        left: 0; 
        padding: 45% 6% 0 6%;
        text-align: center; 
        color: #ff9900;
        background-color: #111;
    }    
}
@media screen and (min-width: 768px) {
     
    .gigsMessage {
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0; 
        left: 0; 
        padding: 30% 0 0 0;
        text-align: center; 
        color: #ff9900;
        font-size: 18px;
        background-color: #111;
    }

}

@media screen and (min-width: 320px) and (max-width: 425px) {

    #GigsUpcontainer {
        margin: 60px auto 0 auto; 
        padding: 0 0 0 10px;    
    }    
    #GigsUpWrapper {
        margin: 0 10px 0 0; 
        padding: 0;
    }
    #GigsUpColumn {
        margin: 0; 
        padding: 0;
    }  
    #GigsUpcontainerInner {
        margin: 10px 0 5px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 15px 0 0 0;
        padding: 13px 13px 15px 13px;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
}
@media screen and (min-width: 426px) and (max-width: 600px) {

    #GigsUpcontainer {
        margin: 60px auto 0 auto; 
        padding: 0 0 0 10px;    
    }    
    #GigsUpWrapper {
        margin: 0 10px 0 0; 
        padding: 0;
    }
    #GigsUpColumn {
        margin: 0; 
        padding: 0 3% 0 3%;
    }  
    #GigsUpcontainerInner {
        margin: 10px 0 5px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 15px 0 0 0;
        padding: 13px 13px 15px 13px;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
}
@media screen and (min-width: 601px) and (max-width: 767px) {

    #GigsUpcontainer {
        margin: 60px auto 0 auto; 
        padding: 0 0 0 10px;    
    }    
    #GigsUpWrapper {
        margin: 0 10px 0 0; 
        padding: 0;
    }
    #GigsUpColumn {
        margin: 0; 
        padding: 0 7% 0 7%;
    }  
    #GigsUpcontainerInner {
        margin: 10px 0 5px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 15px 0 0 0;
        padding: 13px 13px 15px 13px;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    
    #GigsUpcontainer {
        margin: 0 auto 0 auto; 
        padding: 0 0 0 10px;    
    }
    #GigsUpWrapper {
        margin: 66px 10px 0 auto; 
        padding: 0;
    }
    #GigsUpcontainerInner {
        margin: 10px 0 10px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 5px 0 0 0;
        padding: 15px 15px 15px 15px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;         
    }  
}
@media screen and (min-width: 961px) and (max-width: 991px) {

    #GigsUpcontainer {
        margin: 66px auto 0 auto; 
        padding: 0 0 0 10px;    
    }
    #GigsUpWrapper {
        margin: 0 auto 0 auto; 
        padding: 0 19% 0 19%;
    }
    #GigsUpcontainerInner {
        margin: 10px 0 10px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 5px 0 0 0;
        padding: 15px 15px 15px 15px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;         
    }  
}
@media screen and (min-width: 992px) and (max-width: 1024px) { /* 1024 */

    #GigsUpcontainer {
        margin: 0 auto 0 auto; 
        padding: 0;    
    }
    #GigsUpWrapper {
        margin: 60px auto 0 -9px; 
        padding: 0;
    }
    #GigsUpColumn {
        width: 52%;
        margin: 0; 
        padding: 0;
    }    
    #GigsUpcontainerInner {
        margin: 10px 0 5px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 5px 0 0 0;
        padding: 15px 15px 15px 15px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;         
    }  
}
@media screen and (min-width: 1025px) and (max-width: 1199px) { /* 1180 */

    #GigsUpcontainer {
        margin: 0 auto 0 auto; 
        padding: 0;    
    }
    #GigsUpWrapper {
        margin: 66px auto 0 -9px; 
        padding: 0;
    }
    #GigsUpColumn {
        margin: 0; 
        padding: 0;
    }  
    #GigsUpcontainerInner {
        margin: 10px 0 5px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 5px 0 0 0;
        padding: 15px 15px 15px 15px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;         
    }  
}
@media screen and (min-width: 1200px) {

    #GigsUpcontainer {
        margin: 66px auto 0 auto; 
        padding: 0 0 0 10px;    
    }
    #GigsUpWrapper {
        margin: 0; 
        padding: 0;
    }
    #GigsUpColumn {
        margin: 0; 
        padding: 0;
    }  
    #GigsUpcontainerInner {
        margin: 0 0 5px 0; 
        padding: 0;        
    }
    #gigsUpInfoHolder {
        margin: 5px 0 0 0;
        padding: 25px 25px 25px 25px;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b; 
    }  
}


#ticketbudWidgetContainer {
    margin: 0 0 30px 0;
    padding: 0;
}
.gigPoster {
    height: auto;
    width: 100%;
    border-radius: 8px;
}
.eventActiveGigs {
    float: right;
    margin: 0 5px 0 0;
    font-size: 12px;
    color: #0088FF;
    text-shadow: 0 0 0 #0088FF;
}
.eventStartedGigs {
    float: right;
    margin: 0 5px 0 0;
    font-size: 12px;
    color: #ff9900;
}
#circleGigs {
    margin: 0 5px 0 0;
    font-size: 11px; 
}
#smileyGigs {
    margin: 0 5px 0 0;
    font-size: 14px; 
}
#gigPosterWrapper {
    height: auto;
    width: 100%;
    margin: 0; 
    padding: 0;
    border-radius: 16px;
    border: 2px solid #333;
    overflow: hidden;
}
.gigPoster {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    object-position: 50% 50%;
    object-fit: cover;
}
#gigDetsContainerOutter {
    margin: 10px 0 0 0; 
    padding: 0; 
    border-radius: 8px;
}
#TBgigPosterWrapper {
    height: auto;
    width: 100%;
    margin: 0; 
    padding: 0;
    border: 2px solid #333;
    border-radius: 12px;
    overflow: hidden;
}
.TBgigPoster {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    object-position: 50% 50%;
    object-fit: cover;
}
#ESMgigPosterWrapper {
    height: auto;
    width: 100%;
    margin: 0 0 12px 0; 
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    #ESMgigPosterWrapper {
        border: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {
    
    #ESMgigPosterWrapper {
        border: 2px solid #333;
    }
}
.ESMgigPoster {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    object-position: 50% 50%;
    object-fit: cover;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #gigDetsContainer {
        margin: 20px 0 0 0;
        padding: 25px 0 25px 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 990px) {
    
    #gigDetsContainer {
        margin: 25px 0 0 0;
        padding: 25px 0 25px 0;
    }
}
@media screen and (min-width: 991px) {

    #gigDetsContainer {
        margin: 10px 2px 0 0;
        padding: 25px 0 25px 0;
    }
}

#infoTime {
    width: 100%;
    display: inline-flex; 
    margin: 0 0 20px 0; 
    padding: 0;
}
#infoLocation {
    width: 100%;
    display: inline-flex; 
    margin: 0 0 20px 0; 
    padding: 0;
}
#infoTickets {
    width: 100%;
    display: inline-flex; 
    margin: 0 0 0 0; 
    padding: 0;
}
#infoTickets a {
    color: #fff;
}
#infoTickets a:hover {
    cursor: pointer;
    color: #ff9900;
}

/* /////////// END - Gigs Tab Pane ///////////// */

/* ///////////// END - EVENTS PAGES ///////////// */

/* ============================================== */

/* //////////////// EVENTS PAGE ///////////////// */


@media screen and (min-width: 320px) and (max-width: 991px) {

    #noEventsAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #noEventsAlertContainer {
        width: 100%;
        margin: 0 20px 0 20px;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    
    #noEventsAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 1200px) {
    
    #noEventsAlertContainer {
        margin: -3px 0 0 0;
        padding: 0;
    } 
}

.noEventsAlert {
    height: 60px;
    width: 100%;   
    margin: 0;
    padding: 20px 15px 20px 15px;
    color: #ff0000;
    text-align: center;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .noEventsAlert {   
        font-size: 12px; 
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .noEventsAlert {   
        font-size: 12px; 
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {
    
    .noEventsAlert {    
        font-size: 13px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

#uploadEventsColumn {
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 599px) { /* navbar @ 60px high */ 

    #eventsContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #uploadEventsColumn {
        margin: 75px 0 15px 0;
        padding: 20px 20px 10px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 - navbar @ 60px high */ 
    
    #eventsContainer {
        width: 80%;
    }    
    #uploadEventsColumn {
        margin: 75px 0 15px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) { /* navbar @ 60px high */ 
    
    #eventsContainer {
        width: 80%;
    }    
    #uploadEventsColumn {
        margin: 75px 0 15px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */ 
    
    #eventsContainer {
        width: 70%;
    }    
    #uploadEventsColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #eventsContainer {
        width: 65%;
    }    
    #uploadEventsColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */

    #eventsContainer {
        width: 65%;
    }    
    #uploadEventsColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 - end background color #0d0d0d */

    #eventsContainer {
        width: 58%;
    }    
    #uploadEventsColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990  */

    #eventsContainer {
        width: 50%;
    }    
    #uploadEventsColumn {
        margin: 65px 0 15px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #eventsContainer {
        width: 50%;
    }    
    #uploadEventsColumn {
        width: 100%;
        margin: 66px 0 15px 0;
        padding: 20px 20px 20px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        width: 100%;
        margin: 0;
        padding: 0;
    } 
}

/* //////////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #eventsContainer {
        width: 100%;
    }    
    #uploadEventsColumn {
        width: 33%;
        margin: 66px 12.5px 0 0;
        padding: 20px 20px 20px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #EventsCardColumn {
        width: 39.25%;
        margin-top: 66px;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 - start background color #111 */

    #eventsContainer {
        width: 100%;
    }    
    #uploadEventsColumn {
        width: 32%;
        margin: 66px 17px 0 2px;
        padding: 20px 20px 20px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #EventsCardColumn {
        width: 37%;
        margin-top: 66px;
        padding: 0;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
    #eventsContainer {
        width: 100%;
        padding: 0;
    }    
    #uploadEventsColumn {
        width: 29%;
        margin: 66px 17px 0 -27px;
        padding: 20px 20px 20px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #EventsCardColumn {
        width: 37.25%;
        margin-top: 66px;
        padding: 0;
    } 
}
@media screen and (min-width: 1200px) {
    
    #eventsContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #uploadEventsColumn {
        margin: 0 17px 0 -24.5px;
        padding: 20px 20px 20px 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #EventsCardColumn {
        margin: 3px 0 0 0;
        padding: 0 10px 0 0;
    }
}

#uploadEventsColumnInner {
    margin: 0; 
    padding: 0;
}

/* /// Events Posted Display /// */

.EventsCardUpload {
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    .EventsCardUpload {
        margin: 0 0 15px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
    
    .EventsCardUpload {
        margin: -2px 0 10px 0;
        padding: 10px 12px 12px 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 800px) and (max-width: 1024px) {

    .EventsCardUpload {
        margin: 0 0 13px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
    
    .EventsCardUpload {
        margin: 0 0 20px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) {
    
    .EventsCardUpload {
        margin: -3px 0 20px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #333;
        background-color: #111;
    }
}

/* /// Events Display Cradle /// */

#EventsDisplayCradle {    
    overflow-x: hidden;
    padding: 0 10px 0 0;
    border-radius: 20px;
    border-bottom-right-radius: 28px;
    background-color: #0a0a0a;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #0a0a0a;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #EventsDisplayCradle {
        height: 1500px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }    
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #EventsDisplayCradle {
        height: 1440px;
        margin: 0; 
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #EventsDisplayCradle {
        height: 1424px;
        margin: 0; 
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
    #EventsDisplayCradle {
        height: 1424px;
        margin: 0 -5px 0 0;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }
}
@media screen and (min-width: 1200px) {
    
    #EventsDisplayCradle {
        height: 1424px;
        margin: -3px -5px 0 0;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }
}

/* // Events Display Cradle Scroll // */

/* //// firefox & chrome //// */

#EventsDisplayCradle {
    scrollbar-width: none;
    scrollbar-color: #ff0000 #000000 !important;
}

/* /// Events Display Cradle Inner /// */

.EventsCardUploadCradle {
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #0a0a0a;   
}
@media screen and (min-width: 320px) and (max-width: 599px) {
    
    .EventsCardUploadCradle {
        margin: -2px 0 10px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
    
    .EventsCardUploadCradle {
        margin: -2px 0 10px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 800px) and (max-width: 1024px) {
    
    .EventsCardUploadCradle {
        margin: -2px 0 10px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
    
    .EventsCardUploadCradle {
        margin: -2px 0 10px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px)  {

    .EventsCardUploadCradle {
        margin: -3px 0 10px 0; 
        padding: 10px 12px 12px 12px;
        border: 2px solid #333;
        background-color: #111;
    }
}


/* // End - Events Display Candle Scroll // */

/* /////////// END - EVENTS PAGE ////////// */

/* ////////// EVENT HISTORY PAGE ////////// */

/* // Start - Events History Display  // */

#eventsDisplay {
    margin: 0;
    padding: 0 0 100px 0;
}
#eventsDisplay1 {
    margin: 0;
    padding: 0 0 100px 0;
}
#eventsDisplay2 {
    margin: 0;
    padding: 0 0 100px 0;
}
#eventsDisplay3 {
    margin: 0;
    padding: 0 0 100px 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #eventHistoryContainer {
        margin: 75px 0 80px 0;
        padding: 0;
    }
    #eventHistoryLoadCradle {
        margin: 0;
        padding: 0 10px 100px 10px; 
    }
    #eventsDisplay1 {
        min-height: 262px;
    }
    #eventsDisplay2 {
        min-height: 524px;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) { /* 600 */
 
    #eventHistoryContainer {
        width: 80%;
    }    
    #eventHistoryLoadCradle {
        margin: 75px 0 0 0;
        padding: 0 0 100px 0;
    }
    #eventsDisplay1 {
        min-height: 262px;
    }
    #eventsDisplay2 {
        min-height: 524px;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */

    #eventHistoryContainer {
        width: 70%;
    }    
    #eventHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }
    #eventsDisplay1 {
        min-height: 442px;
    }    
    #eventsDisplay2 {
        min-height: 880px;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 800px) and (max-width: 824px) { /* 800 - 823 */
    
    #eventHistoryContainer {
        width: 65%;
    }    
    #eventHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }
    #eventsDisplay1 {
        min-height: 442px;
    }    
    #eventsDisplay2 {
        min-height: 880px;
    } 
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 - 960 */
    
    #eventHistoryContainer {
        width: 58%;
    }    
    #eventHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }
    #eventsDisplay1 {
        min-height: 442px;
    }
    #eventsDisplay2 {
        min-height: 882px;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */
    
    #eventHistoryContainer {
        width: 50%;
    }    
    #eventHistoryLoadCradle {
        margin: 65px 0 0 0;
        padding: 0 0 100px 0;
    }
    #eventsDisplay1 {
        min-height: 442px;
    }    
    #eventsDisplay2 {
        min-height: 882px;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
    
    #eventHistoryContainer {
        width: 50%;
    }    
    #eventHistoryLoadCradle {
        width: 100%;
        margin: 66px 0 0 0;
        padding: 0 0 100px 0;
    }
    #eventsDisplay1 {
        min-height: 442px;
    }    
    #eventsDisplay2 {
        min-height: 882px;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}

/* //////////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
    
    #eventHistoryContainer {
        width: 100%;
    }    
    #eventHistoryLoadCradle {
        width: 50%;
        margin: 66px 0 0 0;
        padding: 0 0 100px 0;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    #eventHistoryContainer {
        width: 100%;
    }    
    #eventHistoryLoadCradle {
        width: 40%;
        margin: 66px 0 0 -24.5px;
        padding: 0 0 100px 0;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }    
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
    #eventHistoryContainer {
        width: 100%;
        padding: 0;
    }    
    #eventHistoryLoadCradle {
        width: 40%;
        margin: 66px 0 0 -27.5px;
        padding: 0 0 100px 0;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
}
@media screen and (min-width: 1200px) {

    #eventHistoryContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #eventHistoryLoadCradle {
        width: 40%;
        margin: 0 0 0 -24.5px;
        padding: 0;
    }
    .eventHistoryText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 10px 15px 10px;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    } 
}

/* // End - Events History Display  // */

#eventsAnchor {
    /*margin: -80px 0 60px 0;*/
    margin: 0;
    padding-top: 0;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #timeSinceESM {
        padding-left: 2px;
        color: #ff9900;
        font-size: 11px;
    }
    .EVtime {
        color: #888;
        font-size: 11px;
        font-weight: 600;
    }
    #notifyIconEV {
        margin: 0 4px 0 5px;
        padding: 0;
        font-size: 10px; 
    }
}
@media screen and (min-width: 768px) {
    
    #timeSinceESM {
        padding-left: 2px;
        color: #ff9900;
        font-size: 12px;
    }
    .EVtime {
        color: #888;
        font-size: 12px;
        font-weight: 600;
    }
    #notifyIconEV {
        margin: 0 4px 1px 0; 
        padding: 0;
        font-size: 11px; 
    }
}
.timeESM {
    margin: 0;
    color: #888;
}
.eventActive {
    margin: 0 5px 0 0;
    float: right;
    color: #0088FF;
    text-shadow: 0 0 0 #0088FF;
}
#checkCircleBlue {
    margin: 0 5px 0 0;
    font-size: 14px; 
}
.eventInactive {
    margin-right: 5px;
    float: right;
    color: #ff0000;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #currentImagePreviewOuterEV {
        margin: 0 0 10px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) {
    
    #currentImagePreviewOuterEV {
        margin: 0 0 10px 0; 
        padding: 0;
    }
}

#currentImagePreviewInnerEV {
    margin: 0; 
    padding: 0 8px 0 8px;
}
.shortpreviewESM {
    height: 240px;
    width: 240px;
    margin: 0 0 10px 0;
    text-align: center;
}
#currentImage {
    height: 238px;
    width: 234px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    object-fit: cover;
}
#PosterPreview {    
    height: 238px;
    width: 238px;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    /*border-radius: 10px;*/
    text-align: center;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.eventsImageOverlay {
    position: relative;
    max-height: 234px;
    min-height: 234px;
    max-width: 230px;
    min-width: 230px; 
    margin: -236px 0 0 5px;
    opacity: 0;
    padding: 10px 25px 8px 25px;
    text-align: center;
    border-radius: 4px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.3s linear;
}
.eventsImageOverlay:hover  {
    opacity: 1;
    cursor: pointer;
}
.eventsImageDeleteButt {
    height: 28px;  
    width: 100%;
    margin: 180px 0 0 0;    
    color: #FF0000;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #000;
    transition: all 0.3s linear;   
}
.eventsImageDeleteButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #111;
}
.SelectImageEventsButt {
    margin: 0 0 10px 0;
    color: #ff9900;
    text-align: center;
    font-weight: normal;
    border: 2px solid #333;
    background-color: #111;    
    transition: all 0.3s linear;
}
.SelectImageEventsButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;  
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    #PosterPreview {    
        border: 2px solid #222;
    }
    #currentImage {
        border: 2px solid #222;
    }
    .SelectImageEventsButt {
        padding: 12px 43px 12px 44px;
        font-size: 13px;
        border-radius: 10px;   
    }
}
@media screen and (min-width: 1025px) {

    #PosterPreview {    
        border: 2px solid #333;
    }
    #currentImage {
        border: 2px solid #333;
    }    
    .SelectImageEventsButt {
        padding: 9px 43px 10px 44px;
        font-size: 12px;
        border-radius: 8px;   
    }    
}

#NewImagePreviewOuterEV {
    margin: 10px 0 10px 0; 
    padding: 0;
}
#NewImagePreviewInnerEV {
    margin: 0; 
    padding: 0 8px 0 8px;
}

#highlightImageColumnEv {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;  
}
#invalidMsgImageEv {
    display: none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;
}
.ESMHighlightBack {
    margin: 0;
    padding: 0;    
    background-color: #000;
}
.EvhighlightImage {   
    min-height: 238px;
    min-width: 238px;
    max-width: 238px;
    margin: -239.5px 0 0 0;
    padding: 0;
    color: #FF0000;
    border-radius: 6px;
    border: 2px solid rgba(255, 0, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;
}
.EventHeading {
    margin: 0 -2px 10px 0; 
    padding: 8px 12px 7px 12px; 
    color: #D0D0D0; 
    font-size: calc(14px + 0.3vw); 
    word-break: break-word;
    background-color: #111; 
    border: 2px solid #ff9900;
    border-radius: 6px;
}
.containerESM {
    width: 100%; 
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #EventHistoryButtHolder {
        height: 38px;
        margin: 28px 0 30px 0; 
        padding: 0;    
    }
}
@media screen and (min-width: 1024px) {

    #EventHistoryButtHolder {
        
        margin: 12px 0 30px 0; 
        padding: 0;    
    }
}

.EventHistoryButtSmall {
    float: left;
    width: 110px;
    margin: 0;    
    color: #D0D0D0;    
    font-size: 12px;
    text-align: center;
    transition: all 0.3s linear;     
}
.EventHistoryButtSmall:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (max-width: 1023px) {

    .EventHistoryButtSmall {
        height: 40px;
        padding: 8px 0 7px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;  
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .EventHistoryButtSmall {
        height: 40px;
        padding: 8px 0 8px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;     
    }
}
@media screen and (min-width: 1025px) {

    .EventHistoryButtSmall {
        height: 34px;
        padding: 8px 0 8px 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;     
    }
}

.EventFormlabel {
    width: 100%;
    margin: 0 0 10px 0; 
    padding: 0;
    color: #999;  
    font-weight: 500;
}
.selectHeading {
    color: #999; 
}
.selectSubHeading {
    margin-top: 10px;
    color: #999; 
}
#uploadPoster {
    display: none;
}
.ESMticketAlertHolder {
    height: 30px;
    margin-top: -15px;
    padding-top: 10px;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .ESMurlHolder {
        height: 48px;
    }
    .ESMticketsOtherHolder {
        height: 90px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .ESMurlHolder {
        height: 50px;
    }
    .ESMticketsOtherHolder {
        height: 90px;
    }
}
@media screen and (min-width: 1025px) {
    
    .ESMurlHolder {
        height: 40px;
    }
    .ESMticketsOtherHolder {
        height: 80px;
    }
}

.GetTicketsheading {
    margin-top: 20px;
    color: #999; 
}
.EventFormlabelImgPreview {
    margin: 0 0 10px 0;  
    padding: 0;
    color: #999; 
    font-size: 12px; 
    font-weight: 600;
    text-align: center;
}
.EventDisFormlabel {
    margin: 0 0 15px 0; 
    padding: 0; 
    font-size: 12px; 
    font-weight: 600;        
    color: #999;
    text-align: center;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .EventFormlabel {
        font-size: 14px; 
    }
    .selectHeading {
        font-size: 13px; 
        color: #999; 
    }
    .selectSubHeading {
        margin-top: 10px;
        font-size: 13px; 
        color: #999; 
    }
    .GetTicketsheading {
        margin-top: 20px;
        font-size: 13px; 
        color: #999; 
    }
    .EventFormlabelImgPreview {
        font-size: 14px; 
    }
    .EventDisFormlabel { 
        font-size: 14px; 
    }
}
@media screen and (min-width: 1024px) {

    .EventFormlabel {
        font-size: 12px; 
    }
    .selectHeading {
        font-size: 12px; 
        color: #999; 
    }
    .selectSubHeading {
        margin-top: 10px;
        font-size: 12px; 
        color: #999; 
    }
    .GetTicketsheading {
        margin-top: 20px;
        font-size: 12px; 
        color: #999; 
    }
    .EventFormlabelImgPreview {
        font-size: 12px; 
    }
    .EventDisFormlabel { 
        font-size: 12px; 
    }
}

.EventHistoryButt {
    height: 34px;
    width: 100%;
    margin: 0;
    padding: 8px 56px 8px 56px;
    color: #D0D0D0;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;  
    transition: all 0.3s linear;
}
.EventHistoryButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (max-width: 990px) {
    
    #detsWrapperESM {
        height: 95px;
        margin: 0; 
        padding: 0;
    }
    #dateWrapperESM {
        height: 95px;
        margin: 0; 
        padding: 0;
    }
    #TimeWrapperESM {
        height: 95px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (max-width: 991px) and (max-width: 1023px) {

    #detsWrapperESM {
        height: 95px;
        margin: 0; 
        padding: 0;
    }
    #dateWrapperESM {
        height: 95px; 
        margin: 0;
        padding: 0;
    }
    #TimeWrapperESM {
        height: 95px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1140px){
    
    #detsWrapperESM {
        height: 95px;
        margin: 0; 
        padding: 3px 0 0 0;
    }
    #dateWrapperESM {
        height: 110px;
        margin: 0;
        padding: 0 16px 0 0;
    }
    #TimeWrapperESM {
        height: 110px;
        margin: 0;
        padding: 0 0 0 9px;
    }    
}
@media screen and (min-width: 1141px) {
    
    #detsWrapperESM {
        height: 95px;
        margin: 0; 
        padding: 2px 0 0 0;
    }
    #dateWrapperESM {
        height: 105px;
        margin: 0;
        padding: 0 16px 0 0;
    }
    #TimeWrapperESM {
        height: 105px;
        margin: 0;
        padding: 0 0 0 9px;
    }    
}

.StartDatePicker {
    box-shadow: none;
    display: inline-block;
    padding: 8px 10px 8px 10px;
    margin: 0;
    color: #FFF;
    resize: none;
    line-height: 1.4;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.StartDatePicker:hover {
    cursor: text;
    border: 2px solid #444;  
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .StartDatePicker {
        height: 40px;
        width: 212px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .StartDatePicker {
        height: 40px;
        width: 100%;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
}
@media screen and (min-width: 1025px) {
    
    .StartDatePicker {
        height: 33px;
        width: 100%;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;  
    }
}

.EndDatePicker {
    box-shadow: none;
    display: inline-block;
    padding: 8px 10px 8px 10px;
    margin: 0;
    color: #FFF;
    resize: none;
    line-height: 1.4;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.EndDatePicker:hover {
    cursor: text;
    border: 2px solid #444;  
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    .EndDatePicker {
        height: 40px;
        width: 212px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
    #ESMWhereticketWrapper {
        margin: 20px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .EndDatePicker {
        height: 40px;
        width: 100%;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
    #ESMWhereticketWrapper {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {
    
    .EndDatePicker {
        height: 33px;
        width: 100%;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;  
    }
    #ESMWhereticketWrapper {
        margin: 0;
        padding: 0;
    }
}

#detailsWrapper {
    border-radius: 14px;
    margin: 0 0 15px 0;  
    padding: 25px 12px 0 12px;
}  

@media screen and (min-width: 320px) and (max-width: 359px) {

    #detailsWrapper {
        margin: 0 0 15px 0;  
        padding: 25px 12px 0 12px;
        border: 2px solid #222;
    }    
}
@media screen and (min-width: 360px) and (max-width: 374px) {

    #detailsWrapper {
        margin: 0 0 15px 0;  
        padding: 25px 15px 0 15px;
        border: 2px solid #222;
    }    
}
@media screen and (min-width: 375px) and (max-width: 479px) {
       
    #detailsWrapper {
        margin: 0 0 15px 0;  
        padding: 25px 20px 0 20px;
        border: 2px solid #222;
    }    
}
@media screen and (min-width: 480px) and (max-width: 567px) {
       
    #detailsWrapper {
        margin: 0 0 15px 0;  
        padding: 25px 30px 0 30px;
        border: 2px solid #222;
    }    
}
@media screen and (min-width: 568px) and (max-width: 599px) {
       
    #detailsWrapper {
        margin: 0 0 15px 0;  
        padding: 25px 70px 0 70px;
        border: 2px solid #222;
    }    
}
@media screen and (min-width: 600px) and (max-width: 730px) {
       
    #detailsWrapper {
        margin: 0 0 15px 0;  
        padding: 25px 30px 0 30px;
        border: 2px solid #222;
    }    
}
@media screen and (min-width: 731px) and (max-width: 767px) {
       
    #detailsWrapper {
        margin: 0 0 15px 0;  
        padding: 15px 50px 0 50px;
        border: 2px solid #222;
    }    
}
@media screen and (min-width: 768px) and (max-width: 853px) {

    #detailsWrapper {
        margin: 0 0 15px 0; 
        padding: 30px 20px 0 20px;
        border: 2px solid #222;
    }
    #ESMMapMarker {
        margin: 0 3px 1px 0;
        padding: 0;
        font-size: 12px;
        /*color: #444;*/
        color: #851C0B;
    }    
    .ESMeventDataAddress {
        padding: 0 20px 0 20px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
}
@media screen and (min-width: 854px) and (max-width: 1023px) {

    #detailsWrapper {
        margin: 0 0 15px 0; 
        padding: 30px 40px 0 40px;
        border: 2px solid #222;
    }
    #ESMMapMarker {
        margin: 0 3px 1px 0;
        padding: 0;
        font-size: 12px;
        /*color: #444;*/
        color: #851C0B;
    }
    .ESMeventDataAddress {
        padding: 0 20px 0 20px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #detailsWrapper {
        margin: 0 0 15px 0; 
        padding: 30px 0 0 0;
        border: 2px solid #222;
    }

    #ESMMapMarker {
        margin: 0 5px 1px 0;
        font-size: 0.875em;
        /*color: #444;*/
        color: #851C0B;       
    }

    .ESMeventDataAddress {
        padding: 0 10px 0 10px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
}
@media screen and (min-width: 1025px) {
    
    #detailsWrapper {
        margin: 0 0 15px 0; 
        padding: 30px 0 0 0;
        border: 2px solid #333;
    }
    #ESMMapMarker {
        margin: 0 5px 1px 0;
        font-size: 0.875em; /* 14px */
        /*color: #444;*/
        color: #851C0B;       
    }    
    .ESMeventDataAddress {
        padding: 0 10px 0 10px;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #eventsCardWrapper {
        margin: 0; 
        padding: 0;
    }
    .ESMeventName {
        margin: 15px 0 10px 0;
        color: #fff;
        font-size: 28px; 
        font-weight: 600;
        word-break: break-word;
        text-align: center;         
    }
    .ESMeventText {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0 0 15px 0;      
        color: #D0D0D0;
        font-size: 11px;
        word-break: break-word;
        text-align: center; 
    }     
    .ESMeventData {
        padding: 0;
        font-size: 11px;
        color: #D0D0D0;
        word-break: break-word;
    }
    .ESMtimeCode {
        margin-top: -8px; 
        font-size: 9px; 
        color: #666;
    }    
    .ESMeventDataAddress {
        padding: 0 10px 0 10px;
        font-size: 11px;
        color: #D0D0D0;
        word-break: break-word;       
    }
    #ESMMapMarker { 
        margin: 0 3px 0 0;
        padding: 0;
        font-size: 10px;
        /*color: #444;*/
        color: #851C0B;
    }   
    #ESMticketWrapper {
        width: 100px;
        margin: 5px 0 0 0; 
        padding: 0;
    }
    #ESMticketAlertWrapper {
        height: 15px;
        min-height: 30px;
        margin: 0; 
        padding: 8px 0 0 0;
    }
    #ESMSelectImageWrapper {
        margin: 45px 0 25px 0; 
        padding: 0; 
        text-align: center;
    }
    #eventsSelectImageWrapper {
        height: 75px;
        margin: 0; 
        padding: 0;        
    }
    #descriptionWrapper {
        margin: 5px 0 25px 0; 
        padding: 10px 0 0 0;
    }
}
@media screen and (min-width: 768px) {

    #eventsCardWrapper {
        margin: 0; 
        padding: 0;
    }
    .ESMeventName {
        margin: 15px 0 10px 0;
        color: #fff;
        font-size: 34px; 
        font-weight: 600;
        word-break: break-word;
        text-align: center; 
    }    
    .ESMeventText {
        width: 100%;
        height: auto;
        color: #D0D0D0;
        margin: 0;
        padding: 0 0 15px 0;
        font-size: 14px;
        word-break: break-word;
        text-align: center; 
    }
    .ESMeventData {
        padding: 0;
        color: #D0D0D0;
        font-size: 14px;
        word-break: break-word;
    }
    .ESMtimeCode {
        margin-top: -8px; 
        font-size: 12px; 
        color: #666;
    } 
    #ESMticketWrapper { 
        margin: 5px 0 0 0; 
        padding: 0;
    }    
    #ESMticketAlertWrapper {
        height: 20px; 
        margin: 8px 0 0 0; 
        padding: 0;    
    }
    #ESMSelectImageWrapper {
        margin: 45px 0 25px 0; 
        text-align: center;
    }
    #eventsSelectImageWrapper {
        height: 75px;
        margin: 0; 
        padding: 0;        
    }
    #descriptionWrapper {
        margin: 5px 0 15px 0; 
        padding: 0;
    }
}

.eventsButtsHolder {
    margin: 0; 
    padding: 0 0 38px 0;  
}
.scheduleEventButtLeft {
    margin: 0 0 20px 0;
    padding: 0;
    float: left;
}
.scheduleEventButt {
    height: 38px;
    width: 140px; 
    margin: 0;
    padding: 9px 10px 0 10px;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;
    border-radius: 8px;
    border-bottom-left-radius: 10px;
    transition: all 0.3s linear; 
}
.scheduleEventButt:hover {
    cursor: pointer;
    color: #D0D0D0;
    background-color: #1d1d1d;
}

.deleteEventButtRight {
    margin: 0 0 20px 0;
    padding: 0;
    float: right;
}
.EventDeleteButt {
    height: 38px;
    width: 140px; 
    margin: 0;
    padding: 0 10px 0 10px;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;
    border-radius: 8px;  
    transition: all 0.3s linear;   
}
.EventDeleteButt:hover {
    cursor: pointer;
    color: #ff0000;
    border: 2px solid #ff0000;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .scheduleEventButt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .EventDeleteButt { 
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {
   
    .scheduleEventButt {
        border: 2px solid #333;
        background-color: #111; 
    }
    .EventDeleteButt {
        border: 2px solid #333;
        background-color: #111; 
    }
}

#SMeventTimes {
    width: 100%;
    display: inline-flex; 
    margin: 0 0 20px 0; 
    padding: 0;
}
#SMeventLocation {
    width: 100%;
    display: inline-flex; 
    margin: 0 0 20px 0; 
    padding: 0;
}
#SMeventTickets {
    width: 100%;
    display: inline-flex; 
    margin: 0 0 32px 0; 
    padding: 0;
}
#SMeventTickets a {
    color: #fff;
}
#SMeventTickets a:hover {
    cursor: pointer;
    color: #ff9900;
}
#otherOrLink {
    margin: 15px 0 10px 0;
    color: #ff9900;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #InfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
    #InfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 0;
    }
    #otherOrLink {
        font-size: 12px;
    }
}
@media screen and (min-width: 768px) {
    
    #InfoCellLeft {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 5px 0 10px;
    }    
    #InfoCellRight {
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0 0 0 5px;
    }
    #otherOrLink {
        font-size: 14px;
    }
}

.detsInfoText {
    color: #FF9900;
    font-size: 14px;
}

@media screen and (min-width: 320px) and (max-width: 413px) {

    #eventsButtWrapper {
        margin: 15px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #eventsButtButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 414px) and (max-width: 600px) {

    #eventsButtWrapper {
        margin: 25px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #eventsButtButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 601px) and (max-width: 768px) {

    #eventsButtWrapper {
        margin: 25px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #eventsButtButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 769px) and (max-width: 960px) {

    #eventsButtWrapper {
        margin: 25px 0 0 0; 
        padding: 0 0 8px 0;
        text-align: center; 
    }
    #eventsButtButtInner {
        margin: 0; 
        padding: 0;
    }     
}
@media screen and (min-width: 961px) {

    #eventsButtWrapper { 
        margin: 10px 0 0 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }
    #eventsButtButtInner {
        width: 100%;
        margin: 0; 
        padding: 0;
    }     
}

.uploadEventButt {
    width: 100%;    
    margin: 0;
    padding: 14px 10px 13px 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.3s linear;
}
.uploadEventButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .uploadEventButt {
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px) {
    
    .uploadEventButt {
        border: 2px solid #333;
        background-color: #111;   
    }    
}

/* ////////// EDIT EVENT PAGE ////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #editEventsContainer {
        margin: 50px 10px 0 10px;
        padding: 10px 0 20px 0;
    }
    #editEventsColumn {
        margin: 0;
        padding: 0;
    }
    #editEventsColumnInner {
        margin: 0 0 15px 0; 
        padding: 7px 15px 10px 15px; 
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #editEventsColumn {
        margin: 0 10px 0 -25px;
        padding: 0;
    }
    #editEventsColumnInner {
        margin: 0 0 15px 0; 
        padding: 7px 15px 10px 15px; 
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {

    #editEventsContainer {
        margin: 50px 0 0 0;
        padding: 10px 70px 20px 125px;
    }
}
@media screen and (min-width: 800px) and (max-width: 812px) {

    #editEventsContainer {
        margin: 50px 0 0 0;
        padding: 10px 30px 20px 125px;
    }
}
@media screen and (min-width: 813px) and (max-width: 822px) {

    #editEventsContainer {
        margin: 50px 0 0 0;
        padding: 10px 70px 20px 125px;
    }
}
@media screen and (min-width: 823px) and (max-width: 853px) {

    #editEventsContainer {
        margin: 50px 0 0 0;
        padding: 10px 35px 20px 135px;
    }
}
@media screen and (min-width: 854px) and (max-width: 1023px) {

    #editEventsContainer {
        margin: 50px 0 0 0;
        padding: 10px 15px 20px 150px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #editEventsContainer {
        width: 100%;
        margin: 55px 0 0 0;
        padding: 10px 0 20px 68px;
    }
    #editEventsColumn {
        margin: 0 10px 30px -40px;
        padding: 0;
    }
    #editEventsColumnInner {
        width: 105%;
        margin: 0 0 15px 0; 
        padding: 7px 15px 10px 15px; 
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }
}
@media screen and (min-width: 1025px) {

    #editEventsContainer {
        margin: 55px 0 0 0;
        padding: 10px 0 20px 0;
    }
    #editEventsColumn {
        margin: 0 10px 30px -25px;
        padding: 0;
    }
    #editEventsColumnInner {
        margin: 0 0 15px 0; 
        padding: 7px 15px 10px 15px; 
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }
}

/* //////// Errors & highlights ///////// */

.EventHighLightTicketsLink {
    height: 32px;
    margin: -32px 0 20px 0;
    padding: 0 10px 0 10px;
    border: 2px solid red;
    border-radius: 6px;
    background-color: rgba(255, 0, 0, 0.4);
}


@media screen and (max-width: 799px) {    
    
    #ValidEventURL {
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        color: #0088FF;       
        word-break: break-word;
        background-color: transparent;
    }
    #ValidEventNameInfo,
    #ValidEventVenueInfo,
    #ValidEventAddressInfo,
    #ValidEventStartDateInfo,
    #ValidEventStartTimeInfo,
    #ValidEventEndDateInfo,
    #ValidEventEndTimeInfo,
    #ValidEventURLInfoA,
    #ValidEventURLInfoB,
    #ValidEventOtherInfo,
    #ValidEventPriceInfo {
        line-height: 1.4;
        margin: 8px 0 0 1px;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
        background-color: transparent;       
    }
    #ValidEventNameError,
    #ValidEventVenueError,
    #ValidEventAddressError,
    #ValidEventStartDateError,
    #ValidEventEndDateError,
    #ValidEventURLError,
    #ValidEventOtherError {
        line-height: 1.4;
        margin: 8px 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
        background-color: transparent;
    }
    #ValidEventGetTicketsError {
        line-height: 1.4;
        margin: 0 -20px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
        background-color: transparent;       
    }
    #ValidEventPriceError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;      
    }
    #ValidCapacityError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent; 
    }
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #ValidEventStartTimeError,
    #ValidEventEndTimeError {
        line-height: 1.4;
        margin: -12px 0 0 1px;
        padding: 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;
        background-color: transparent;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {

    #ValidEventStartTimeError,
    #ValidEventEndTimeError {
        line-height: 1.4;
        margin: -12px -20px 0 1px;
        padding: 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;
    }
}
@media screen and (min-width: 1201px) {

    #ValidEventStartTimeError,
    #ValidEventEndTimeError {
        line-height: 1.4;
        margin: -12px 0 0 1px;
        padding: 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;
    }
}

@media screen and (min-width: 800px) {
    
    #ValidEventURL{
        line-height: 1.4;
        margin: 8px 2px 0 1px;
        font-size: 12px;
        text-shadow: 0 0 0 #0088FF;
        color: #0088FF;
        word-break: break-word;
        background-color: transparent;
    }
    #ValidEventNameInfo,
    #ValidEventVenueInfo,
    #ValidEventAddressInfo,
    #ValidEventStartDateInfo,
    #ValidEventStartTimeInfo,
    #ValidEventEndDateInfo,
    #ValidEventEndTimeInfo,
    #ValidEventURLInfoA,
    #ValidEventURLInfoB,
    #ValidEventOtherInfo,
    #ValidEventPriceInfo {
        line-height: 1.4;
        margin: 8px -20px 0 1px;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;    
        background-color: transparent;       
    }
    #ValidEventNameError,
    #ValidEventVenueError,
    #ValidEventAddressError,
    #ValidEventStartDateError,
    #ValidEventEndDateError,
    #ValidEventURLError,
    #ValidEventOtherError {
        line-height: 1.4;
        margin: 8px -20px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;
    }
    #ValidEventGetTicketsError {
        line-height: 1.4;
        margin: 0 -20px 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;       
    }
    #ValidEventPriceError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;      
    }
    #ValidCapacityError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;      
    }
}

#EVImageError {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;    
    background-color: transparent;   
}
#descriptionAlertHolder {
    height: 24px; 
    text-align: center;
}
#ValidEventdescriptionError {
    line-height: 1.4;
    margin: 0;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;  
    background-color: transparent;
}
.noPledgeAlertEvt {
    width: 100%;
    margin: -2px 0 12px 0; 
    padding: 10px; 
    color: #ff0000; 
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;  
}


/* /////// END EVENTS-SELF-MANAGED PAGE //////// */

/* ============================================= */

/* //////////// EVENTS-HISTORY PAGE //////////// */


.emptyEvents {
    width: 100%;
    margin: 0;
    padding: 15px 10px 14.5px 10px;
    color: #ff0000;
    text-align: center;
    border-radius: 16px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#eventHeadingHolder {
    margin: 0 0 15px 0;
    padding: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
.EVHistBackbutt {
    float: left;
    height: 32px;  
    width: 100px;
    margin: 0;
    padding: 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;    
    border-radius: 8px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
    transition: all 0.4s linear;   
}
.EVHistBackbutt:hover {
    cursor: pointer;
    color: #0088FF;
    border: 2px solid #0088FF;
}
.EVHistDeletebutt {
    float: right;
    height: 32px;  
    width: 100px;
    margin: 0;
    padding: 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;    
    border-radius: 8px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
    transition: all 0.4s linear; 
}
.EVHistDeletebutt:hover {
    cursor: pointer;
    color: red;
    border: 2px solid red;
}

@media screen and (min-width: 320px) and (max-width: 1023px) { 
   
    .emptyEvents {
        font-size: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #eventHeadingHolder {
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EVHistBackbutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EVHistDeletebutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { 
   
    .emptyEvents {
        font-size: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #eventHeadingHolder {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EVHistBackbutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .EVHistDeletebutt {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) { 

    .emptyEvents {
        font-size: 13px;
        border: 2px solid #333;
        background-color: #111; 
    }
    #eventHeadingHolder {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    .EVHistBackbutt {
        border: 2px solid #333;
        background-color: #111; 
    }
    .EVHistDeletebutt {
        border: 2px solid #333;
        background-color: #111; 
    }
}

@media screen and (min-width: 320px) and (max-width: 991px) {   

    #EVHistButtHolder {
        margin: 0 0 46px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 992px)  {   

    #EVHistButtHolder {
        margin: 0 0 15px 0; 
        padding: 0;
    }
}

.eventDeleteButtHolder {
    width: 100%;
    margin: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
.eventDelete {
    height: 38px;
    width: 100%; 
    margin: 0;
    padding: 0;
    color: #888;  
    font-size: 14px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.3s linear;   
}
.eventDelete:hover {
    cursor: pointer;
    color: #FF0000; 
    border: 2px solid #FF0000;
}

@media screen and (min-width: 320px) and (max-width: 415px) {

    .eventDeleteButtHolder {
        padding: 0; 
    }
    .eventDelete { 
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 416px) and (max-width: 854px) {

    .eventDeleteButtHolder {
        padding: 0 20% 0 20%; 
    }
    .eventDelete { 
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 855px) and (max-width: 1024px) {
    
    .eventDeleteButtHolder {
        padding: 0 28% 0 28%; 
    }
    .eventDelete {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {
    
    .eventDeleteButtHolder {
        padding: 0 28% 0 28%; 
    }    
    .eventDelete {
        border: 2px solid #333;
        background-color: #111; 
    }
}

.EventHistoryCardUpload {
    margin: 0 0 10px 0;
    padding: 10px 12px 15px 12px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .EventHistoryCardUpload {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    .EventHistoryCardUpload {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

.loadMoreContainerEHistory {
    position: relative;
    width: 100%;
    min-height: 32px;
    max-height: auto;
    margin-top: -32px;
    padding-top: 5px;
    text-align: center;
    border-radius: 6px;   
    border: 2px solid #ff9900;
    background-color: #111;
    z-index: 8888;
}

/* //// Load more feature - Events //// */

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #loadMoreHolderEVH1 {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #loadMoreTopEVH { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 16px;
        text-align: center;
        border-radius: 20px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerEVH1 { /* Spinning balls Event History */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }
    #loadMoreHolderEVH2 { 
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;
    } 
    .loadMoreContainerEVH2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }    
    #loadMoreBottomEVH { /* notify that no more posts - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button - Event history // */

    #EVHupButton {
        display: none;
    }
    #EVHchevronUp {
        display: none;
    }   
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #loadMoreHolderEVH1 {
        margin: 0 0 20px 0;
        padding: 0;
    }    
    #loadMoreTopEVH { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 16px;
        text-align: center;
        border-radius: 20px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerEVH1 { /* Spinning balls Event History */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 20px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;     
    }    
    #loadMoreHolderEVH2 {
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;        
    }
    .loadMoreContainerEVH2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #loadMoreBottomEVH { /* notify that no more Events - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 12px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 20px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button - Event History // */

    #EVHupButton {
        display: none;
    }
    #EVHchevronUp {
        display: none;
    }
}
@media screen and (min-width: 1025px) {

    #loadMoreHolderEVH1 {
        margin: 0 0 20px 0;
        padding: 0;
    }    
    #loadMoreTopEVH { /* trigger for load more - at the top of load */
        height: 80px;
        width: 100%;
        margin-top: 0;
        padding: 8px 0 10px 0;
        color: #ff9900;
        font-size: 17px;
        text-align: center;
        border-radius: 20px;   
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .loadMoreContainerEVH1 { /* Spinning balls Event History */ 
        height: 80px;
        width: 100%;
        margin-top: -80px;
        padding: 8px 0 0 0;
        text-align: center;
        border-radius: 20px;   
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;     
    }
    
    #loadMoreHolderEVH2 {
        display: flex;
        width: 100%; 
        bottom: 0;
        margin: 0 0 20px 0;
        padding: 0;
    }
    .loadMoreContainerEVH2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #loadMoreBottomEVH { /* notify that no more Events - at the bottom of load */
        height: 50px;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 13px 10px 6px 10px;
        color: #ff9900;
        font-size: 14px;
        text-align: center;
        border-radius: 20px;   
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }

    /* // Scroll to top button - Event History // */

    #EVHupButton {
        position: relative;
        height: 50px; 
        width: 100%;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        z-index: 8888;
    }
    #EVHupButton:hover {
        cursor: pointer;
    }
    #EVHupButton.show {
        opacity: 1;
        visibility: visible;
    }
    #EVHchevronUp {
        height: 40px; 
        width: 40px;
        padding: 6.5px 5.75px 4px 6.25px; 
        font-weight: normal;
        font-style: normal;
        font-size: 1.8em;  
        line-height: 45px;
        color: #ff9900;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b; 
        transition: all 0.1s linear; 
    }
    #EVHchevronUp:active {
        background-color: #1a1a1a;
        transform: translateY(3px);
    }
}

/* //////// END - EVENTS-HISTORY PAGE ////////// */

/* ============================================= */

/* //////////// EVENT PREVIEW PAGE ///////////// */

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #eventPreviewMainContainer {
        width: 100%; 
        margin: 0; 
        padding: 0;
    }

    #eventPreviewWrapper {
        margin: 75px 0 0 0;
        padding: 0 10px 0 10px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #eventPreviewMainContainer {
        width: 100%;
        margin: 0;
    }    

    #eventPreviewWrapper {
        width: 80%;
        margin: 75px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */
    
    #eventPreviewMainContainer {
        width: 100%;
        margin: 0; 
    }    

    #eventPreviewWrapper {
        width: 80%;
        margin: 65px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 800px) and (max-width: 812px) {
    
    #eventPreviewMainContainer {
        width: 100%;
        margin: 0; 
    }    

    #eventPreviewWrapper {
        width: 77%;
        margin: 65px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 813px) and (max-width: 855px) { /* 854 */
    
    #eventPreviewMainContainer {
        width: 100%; 
    }    

    #eventPreviewWrapper {
        width: 76%;
        margin: 65px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 856px) and (max-width: 960px) { /* 960 */

    #eventPreviewMainContainer {
       width: 100%;
       margin: 0;     
    }    

    #eventPreviewWrapper {
        width: 75%;
        margin: 65px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) { /* 1024 */

    #eventPreviewMainContainer {
       width: 100%;
       margin: 0;
    }    

    #eventPreviewWrapper {
        width: 75%;
        margin: 66px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    #eventPreviewMainContainer {
        width: 100%;
        margin: 0;
    }

    #eventPreviewWrapper {
        width: 70.5%;
        margin: 66px 0 0 -25px;
        padding: 0;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1200px) { /* 1180 */

    #eventPreviewMainContainer {
        width: 100%;
        margin: 0;
    }
    #eventPreviewWrapper {
        width: 70.5%;
        margin: 66px 0 0 -34.75px;
        padding: 0;
    }
}
@media screen and (min-width: 1201px)  {

    #eventPreviewMainContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }

    #eventPreviewWrapper {
        width: 65%;
        margin: 0 0 0 -24.5px;
        padding: 0;
    }
}


/* ///////////// Buttons ////////////// */

#eventPreviewButtons {
    margin: 0 0 10px 0; 
    padding: 20px 10px 0 10px; 
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b; 
}
.EVheadingHolder {
    margin: 0 10px 0 10px;
}
.eventPreviewDelete {
    height: 32px;
    width: 80px;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;
    transition: all 0.3s linear;   
}
.eventPreviewDelete:hover {
    cursor: pointer;
    color: #ff0000;
    border: 2px solid #ff0000;
}
.eventPreviewEdit {
    height: 32px;  
    width: 80px;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;
    transition: all 0.3s linear;   
}
.eventPreviewEdit:hover {
    cursor: pointer;
    border: 2px solid #0088FF;
    color: #0088FF;       
}
.eventPreviewPostSend {
    color: #ff9900;
    font-size: 12px;
    text-align: center;        
    padding: 5px 5px 6px 5px;
    transition: all 0.3s linear;   
}
.eventPreviewPostSend:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
} 
@media screen and (min-width: 320px) and (max-width: 599px) {

    #eventPreviewButtons {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #eventPreviewButtonsInner {
        margin: 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: inline-flex;
        margin: 20px 0 0 0; 
        padding: 0;
    }
    .eventPreviewDelete {        
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventPreviewEdit {
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #EPSelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }    
    #EPcheckboxContainer {
        width: 100%;
    }
    #EPdetsWrapper {
        margin: 10px 0 20px 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
    #EPlineBreak {
        border: 1px solid #222;
    }
    .eventPreviewPostSM {
        width: 165px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        background-color: #000; 
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .eventPreviewSendEmail {
        width: 165px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        background-color: #000;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
    }
    .eventPreviewPostSend {
        width: 140px;
        height: 32px;
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #eventPreviewMapMaker { 
        margin: 0 3px 0 0;
        padding: 0;
        font-size: 10px;
        color: #444;
    }    
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #eventPreviewButtons {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #eventPreviewButtonsInner {
        margin: 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: flex;
        margin: 20px 0 0 0; 
        padding: 0;
    }
    .eventPreviewDelete {        
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventPreviewEdit {
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #EPSelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }    
    #EPcheckboxContainer {
        width: 100%;
    }    
    #EPdetsWrapper {
        margin: 0 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;        
    }
    #EPlineBreak {
        border: 1px solid #222;
    }
    .eventPreviewPostSM {
        width: 165px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        background-color: #000; 
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .eventPreviewSendEmail {
        width: 165px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        background-color: #000;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
    }
    .eventPreviewPostSend {
        width: 140px;
        height: 32px;
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #eventPreviewMapMaker { 
        margin: 0 3px 0 0;
        padding: 0;
        font-size: 10px;
        color: #444;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #eventPreviewButtons {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #eventPreviewButtonsInner {
        display: inline-flex;
        width: 100%;
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: flex;
        margin: 15px 0 0 0; 
        padding: 0;
    }    
    .eventPreviewDelete {
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventPreviewEdit {
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #EPSelectHolder {
        display: inline-flex; 
        width: 100%; 
        margin: 0; 
        padding: 0;
    }
    #EPcheckboxContainer {
        width: 100%;
    }
    #EPdetsWrapper {
        margin: 0 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;        
    }
    #EPlineBreak {
        display: none;
    }
    .sendEmailForm {
        display: flex;
        width: 100%;   
    }
    .eventPreviewPostSM {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        max-width: 140px;
        min-width: 132px;
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    .eventPreviewPostSend {
        max-width: 140px;
        min-width: 132px;
        height: 32px;
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventPreviewSendEmail {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    #eventPreviewMapMaker {
        margin: 0 3px 1px 0;
        padding: 0;
        font-size: 12px;
        color: #444;
    } 
}
@media screen and (min-width: 800px) and (max-width: 855px) {
    
    #eventPreviewButtons {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #eventPreviewButtonsInner {
        display: inline-flex;
        width: 100%;
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: inline-flex;
        margin: 15px 0 0 0; 
        padding: 0;
    }
    .eventPreviewDelete {        
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;        
    }
    .eventPreviewEdit {
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }    
    #EPSelectHolder {
        display: inline-flex; 
        width: 100%; 
        margin: 0; 
        padding: 0;
    }   
    #EPcheckboxContainer {
        width: 100%;
    }
    #EPdetsWrapper {
        margin: 0; 
        padding: 0;
        text-align: right;
    }
    #EPlineBreak {
        display: none;
    }
    .sendEmailForm {
        display: flex;
        width: 100%;   
    }
    .eventPreviewPostSM {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        max-width: 140px;
        min-width: 132px;
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    .eventPreviewPostSend {
        max-width: 140px;
        min-width: 132px;
        height: 32px;
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventPreviewSendEmail {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    #eventPreviewMapMaker {
        margin: 0 3px 1px 0;
        padding: 0;
        font-size: 12px;
        color: #444;
    } 
}
@media screen and (min-width: 856px) and (max-width: 960px) {
    
    #eventPreviewButtons {
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #eventPreviewButtonsInner {
        display: inline-flex;
        width: 100%;
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: inline-flex;
        margin: 15px 0 0 0; 
        padding: 0;
    }
    .eventPreviewDelete {
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;        
    }
    .eventPreviewEdit {
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    #EPSelectHolder {
        display: inline-flex; 
        width: 100%; 
        margin: 0; 
        padding: 0;
    }
    #EPcheckboxContainer {
        width: 100%;
    }    
    #EPdetsWrapper {
        margin: 0;
        padding: 0;
        text-align: right;
    }
    #EPlineBreak {
        display: none;
    }
    .sendEmailForm {
        display: flex;
        width: 100%;   
    }
    .eventPreviewPostSM {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        max-width: 140px;
        min-width: 132px;
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    .eventPreviewPostSend {
        max-width: 140px;
        min-width: 132px;
        height: 32px;
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventPreviewSendEmail {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    #eventPreviewMapMaker {
        margin: 0 3px 1px 0;
        padding: 0;
        font-size: 12px;
        color: #444;
    } 
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
    
    #eventPreviewButtons {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #eventPreviewButtonsInner {
        display: inline-flex;
        width: 100%;
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: inline-flex;
        margin: 15px 0 -25px 0; 
        padding: 0;
    }
    .eventPreviewDelete {
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;         
    }
    .eventPreviewEdit {
        margin: 0 5px 0 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    #EPSelectHolder {
        display: inline-flex; 
        width: 100%; 
        margin: 0; 
        padding: 0;
    }
    #EPcheckboxContainer {
        width: 100%;
    }   
    #EPdetsWrapper {
        text-align: right; 
        margin: 0;
        padding: 0;
    }
    #EPlineBreak {
        display: none;
    }
    .sendEmailForm {
        display: flex;
        width: 100%;   
    }
    .eventPreviewPostSM {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        max-width: 140px;
        min-width: 132px;
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    .eventPreviewPostSend {
        max-width: 140px;
        min-width: 132px;
        height: 32px;
        margin: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .eventPreviewSendEmail {
        width: 130px;
        height: 32px;
        margin: 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    #eventPreviewMapMaker {
        margin: 0 3px 1px 0;
        padding: 0;
        font-size: 12px;
        color: #444;
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    
    #eventPreviewButtons {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #eventPreviewButtonsInner {
        display: inline-flex;  
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: inline-flex;
        margin: 0; 
        padding: 0;
    }    
    .eventPreviewDelete {
        margin: 15px 5px 12px 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111; 
    }
    .eventPreviewEdit { 
        margin: 15px 10px 12px 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }    
    #EPSelectHolder {
        display: inline-block; 
        width: 100%; 
        margin: 0; 
        padding: 0;
    }
    #EPcheckboxContainer {}    
    #EPdetsWrapper {
        text-align: right; 
        margin: 0;
        padding: 0 0 14px 0;
    }
    #EPlineBreak {
        display: none;
    }    
    .eventPreviewPostSM {
        width: 140px;
        height: 32px;
        margin: 0 5px 0 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    } 
    .eventPreviewSendEmail {
        width: 140px;
        height: 32px;
        margin: 0 5px 0 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        width: 140px;
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    .eventPreviewPostSend {
        width: 140px;
        height: 32px;
        margin: 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }    
    #eventPreviewMapMaker {
        margin: 0 5px 1px 0;
        font-size: 0.875em;
        color: #444;       
    }    
}
@media screen and (min-width: 1280px) {
    
    #eventPreviewButtons {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #eventPreviewButtonsInner {
        display: inline-flex;  
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #eventPreviewButtonsleft {
        width: auto;
        display: inline-flex;
        margin: 0; 
        padding: 0;
    }
    .eventPreviewDelete {
        margin: 15px 5px 12px 0;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #111;        
    }
    .eventPreviewEdit {
        margin: 15px 10px 12px 0;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #111;
    }
    #EPSelectHolder {
        display: inline-block; 
        width: 100%; 
        margin: 0; 
        padding: 0;
    }
    #EPcheckboxContainer {}
    #EPdetsWrapper {
        text-align: right; 
        margin: 0;
        padding: 0 0 14px 0;
    }
    #EPlineBreak {
        display: none;
    }    
    .eventPreviewPostSM {
        width: 140px;
        height: 32px;
        margin: 0 5px 0 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        transition: all 0.4s linear;   
    }
    .eventPreviewPostSM:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    } 
    .eventPreviewSendEmail {
        width: 140px;
        height: 32px;
        margin: 0 5px 0 0;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;   
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #ff9900;
        transition: all 0.4s linear;   
    }
    .eventPreviewSendEmail:hover {
        cursor: pointer;
        border: 2px solid #ff9900;
        color: #ff9900;       
        background-color: #111;
    }
    .donePreviewlabel {
        width: 140px;
        margin: 0 0 10px 0;
        font-size: 11px;
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    .eventPreviewPostSend {
        width: 140px;
        height: 32px;
        margin: 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }    
    #eventPreviewMapMaker {
        margin: 0 5px 1px 0;
        font-size: 0.875em;
        color: #444;       
    }      
}



.eventPreviewlabel {
    margin: 0 0 10px 0; 
    padding: 0; 
    font-size: 11px;
    font-weight: 600;        
    color: #999;
}
.EPcheckboxWrapper {
    width: 100%;
    margin: 19px 24px 0 0;
    padding: 0;
    text-align: left;
}
#EPradio {
    margin-top: -12px;
}
#EventPreviewAlertHolder {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
#EdPreNoCheckboxContainer {
    margin: -4px 0 0 0;
    padding: 0;
}
#EdPreConfirmEmail {
    height: 32px;
    margin: 0;
    padding: 5.5px 6px 0 6px;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #111;    
    word-break: break-word;
    transition: ease-in-out 0.4s;       
}
#EdPreConfirmEmail:hover {
    background-color: #191919;          
}


@media screen and (max-width: 799px) {    
    
    #notifyOffAlert {
        width: 100%;
        line-height: 1.4;
        margin: 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: #000;    
        text-align: center;
    }
}
@media screen and (min-width: 800px) {
    
    #notifyOffAlert {
        line-height: 1.4;
        margin: 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: #000;    
    }
}

/* ///////// END - PREVIEW EVENT PAGE ////////// */

/* ============================================= */

/* /////////// EVENT TICKETING PAGE //////////// */


#ETPosterInner {   
    float: right;
    height: 100%;
    width: 100%;
    margin: 0; 
    padding: 0;
    border-radius: 16px;
    border: 2px solid #333;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #ETWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #ETContainer {     
        margin: 0 10px 15px 10px; 
        padding: 0; 
    } 
    #ETMainInner {   
        width: 100%; 
        margin: 75px 0 0 0; 
        padding: 20px 20px 25px 20px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #ETDetails {
        height: 644px;
        display: inline-flex;
        margin: 0; 
        padding: 0 5px 0 5px;           
    }
    #ETcolumnOne {
        height: 645px;
        margin: 0; 
        padding: 10px 0 0 0; 
    }
    #ETPosterInner {   
        border-radius: 16px;
        border: 2px solid #222;
    }
    #ETcolumnTwo {
        display: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {

    #ETWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #ETContainer {     
        margin: 0 10px 15px 0; 
        padding: 0; 
    } 
    #ETMainInner {  
        width: 100%;
        margin: 65px 0 0 0; 
        padding: 20px 20px 25px 20px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #ETDetails {
        height: 608px;
        display: inline-flex;
        margin: 0; 
        padding: 0 5px 0 5px;           
    }
    #ETcolumnOne {
        height: 609px;
        margin: 0; 
        padding: 10px 30px 0 0; 
    }
    #ETPosterInner {   
        border-radius: 16px;
        border: 2px solid #222;
    }
    #ETcolumnTwo {
        height: 668px; 
        top: -62px;
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 992px) and (max-width: 1024px) {

    #ETWrapper {
        width: 100%;
    }
    #ETContainer {
        margin: 0 10px 15px 0; 
        padding: 0; 
    } 
    #ETMainInner {
        width: 126%;
        margin: 66px 0 0 0; 
        padding: 20px 20px 25px 20px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #ETDetails {
        height: 634px;
        display: inline-flex;
        margin: 0; 
        padding: 0 5px 0 5px;           
    }
    #ETcolumnOne {
        height: 635px;
        margin: 0; 
        padding: 10px 30px 0 0; 
    }
    #ETPosterInner {   
        border-radius: 16px;
        border: 2px solid #222;
    }
    #ETcolumnTwo {
        height: 694px; 
        top: -62px;
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1025px)  {
    
    #ETWrapper {
        margin: 66px 0 0 0; 
        padding: 0;
    }
    #ETContainer {     
        margin: 0 10px 15px -25px; 
        padding: 0; 
    } 
    #ETMainInner {    
        margin: 0; 
        padding: 20px 20px 25px 20px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #ETDetails {
        height: 608px;
        display: inline-flex;
        margin: 0; 
        padding: 0 5px 0 5px;           
    }
    #ETcolumnOne {
        height: 609px;
        margin: 0; 
        padding: 10px 30px 0 0; 
    }
    #ETcolumnTwo {
        height: 668px; 
        top: -62px;
        margin: 0; 
        padding: 0;
    }
    #ETPosterInner {   
        border-radius: 16px;
        border: 2px solid #222;
    }
}

.createTicketsButt {  
    height: 38px;
    width: 135px;
    margin: 15px 0 10px 0;
    padding: 8.75px 0 7px 0;        
    font-size: 12px;
    text-align: center;
    border-radius: 10px;   
    transition: all 0.1s linear; 
}
.createTicketsButt:hover {
    cursor: pointer;
}

/*///////////////////////////////////*/

#ETURL_addon {  
    padding: 0 2px 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
.ETticket_link_URL {
    display: block;
    width: 100%;
    padding: 10px 10px 10px 0;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    border-left: none;
    transition: all 0.3s linear;
}
.ETtickets_other {
    box-shadow: none;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 10px 0 10px;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.ETtickets_other:hover {
    background-color: #111;
    border: 2px solid #444;  
}

#ETtpAddonHolder {}
#ETTP_addon {
    padding: 1px 0 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
.ETticket_price {
    display: block;
    padding: 10px 10px 10px 2px;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    border-left: none;
    box-shadow: none;  
    transition: all 0.3s linear;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #ETMainInner {
        border-radius: 34px;    
        border: 2px solid #222;
    } 
    .createTicketsButt { 
        color: #999; 
        border: 2px solid rgba(255, 153, 0, 0.7);
        background-color: #0f0f0f;
    }
    .createTicketsButt:hover {
        color: #D0D0D0;
        border: 2px solid rgba(255, 153, 0, 1.0);
        background-color: #111;
    }
    #ETURL_addon {
        height: 40px;
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left:2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ETticket_link_URL {
        height: 40px;
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ETtickets_other {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #ETTP_addon {
        height: 40px;  
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ETticket_price {
        height: 40px;
        width: 65px;
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #ETMainInner {
        border-radius: 20px;    
        border: 2px solid #222;
    } 
    .createTicketsButt { 
        color: #999; 
        border: 2px solid rgba(255, 153, 0, 0.6);
        background-color: #0f0f0f;
    }
    .createTicketsButt:hover {
        color: #D0D0D0;
        border: 2px solid rgba(255, 153, 0, 0.9);
        background-color: #1f1f1f;
    }
    #ETURL_addon {
        height: 40px;
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left:2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ETticket_link_URL {
        height: 40px;
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ETtickets_other {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #ETTP_addon {
        height: 40px;  
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ETticket_price {
        height: 40px;
        width: 100%;
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {
    
    #ETMainInner {
        border-radius: 20px;    
        border: 2px solid #333;
    } 
    .createTicketsButt { 
        color: #999; 
        border: 2px solid rgba(255, 153, 0, 0.8);
        background-color: #111;
    }
    .createTicketsButt:hover {
        color: #D0D0D0;
        border: 2px solid rgba(255, 153, 0, 1);
        background-color: #1d1d1d;
    }
    #ETURL_addon {
        height: 33px;
        font-size: 12px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #333;
        border-left:2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
    .ETticket_link_URL {
        height: 33px;
        font-size: 12px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
    .ETtickets_other {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
    #ETTP_addon {
        height: 33px;  
        font-size: 12px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
    .ETticket_price {
        height: 33px;
        width: 52px;
        font-size: 12px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
}

#ETcontainer_chk {
    height: 18px; 
    width: 0;
    margin-top: 6px;
    margin-left: -10px;
}
.ETcheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;
}
.container_chk input:checked ~ .ETcheckmark {
    border: 2px solid #444;
}
.ETcheckmark:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .ETcheckmark:after {
    display: block;
}
.container_chk .ETcheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ETtext {
    color: #ff9900;
    margin: 5px 0 0 5px; 
    font-size: 24px; 
    text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
}
.ETtitle {
    color: #D0D0D0;
    width: 300px;
    margin: 0 0 0 5px; 
    font-size: 22px;
}
.ETintroLabel {
    width: 100%;
    margin: 0 0 10px 0; 
    padding: 0;
    color: #999;
    font-weight: 500;
    font-size: 15px;
}
.ETformLabel {
    width: 100%;
    margin: 10px 0 10px 0; 
    padding: 0;
    color: #D0D0D0;  
    font-weight: 500;
    font-size: 12px;
}
#ETformLabelpoint {
    margin: 0;
    padding: 0;
    color: #D0D0D0;
    font-size: 14px; 
}
.ETpriceWrapper {
    display: flex;
    margin: 10px 0 0 0;
    padding: 0;
}
.ETcheckLabel {
    padding: 0;
    font-size: 12px; 
    font-weight: 500;
    color: #D0D0D0;
}
.totalTickets {
    margin: 0;
    padding: 13px 0 0 0;
}
.ETnoOfTicketsHolder {
    display: flex;
    margin: 10px 0 0 0;
    padding: 0;
}
.ETnoOfTicketsLabel {
    width: 100%;
    padding: 13px 0 0 0;
    color: #999;
    font-size: 14px; 
    font-weight: 600;
}
.ETformControl {
    display: inline-block;
    height: 33px;
    width: 89px;
    margin: 7px 2px 0 0;
    padding-left: 10px;
    color: #FFF;
    font-size: 12px;
    resize: none;
    box-shadow: none;        
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.ETformControl:hover {
    cursor: text;
    border: 2px solid #444;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .ETformControl {
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ETcheckLabel {
        margin: 0;
    }
}
@media screen and (min-width: 1025px) {

    .ETformControl {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
    .ETcheckLabel {
        margin: 0;
    }
}
/* /// Button /// */

.ETticketButtHolder {
    position: absolute; 
    /*width: 91%; */
    bottom: 3px;
    margin: 25px 0 0 0; 
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .ETticketButtHolder {
        width: 100%; 
    }
}
@media screen and (min-width: 768px) {

    .ETticketButtHolder {
        width: 91%; 
    }
}

.ETticketButt {   
    width: 100%;
    margin: 0;
    padding: 20px 0 20px 0;
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s linear;
}
.ETticketButt:hover {
    cursor: pointer;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {


    .ETticketButt {
        color: #FF9900;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .ETticketButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
}
@media screen and (min-width: 1025px) {

    .ETticketButt {
        color: #FF9900;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .ETticketButt:hover {
        cursor: pointer;
        border: 2px solid #ff9900;  
    }
}

/* //////// END - EVENT TICKETING PAGE ///////// */

/* ============================================= */

/* //////// EVENT CREATE TICKETS PAGE ////////// */

#ECTPosterInner {        
    margin: 0; 
    padding: 0;        
}

@media screen and (min-width: 320px) and (max-width: 767px) {
   
    #ECTWrapper {
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
    }
    #ECTContainer {
        width: 100%;
        margin: 75px 10px 15px 0; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 10px 20px 10px 20px;
        border-radius: 20px;
        border: 2px solid #222;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #ECTDetails {
        margin: 20px 0 0 0; 
        padding: 0;           
    }
    #ECTcolumnOne {
        margin: 0; 
        padding: 0; 
    }
    #ECTcolumnTwo {
        margin: 0; 
        padding: 0;
    }
    #ECTcolumnThree {
        margin: 0; 
        padding: 0;
    }
    .ECTcolumnThreeInner {
        margin: 0; 
        padding: 0;
    }
}
/*@media screen and (min-width: 360px) and (max-width: 410px) {
    
}
@media screen and (min-width: 411px) and (max-width: 413px) {
    
}
@media screen and (min-width: 414px) and (max-width: 479px) {

}
@media screen and (min-width: 480px) and (max-width: 567px) {
 
}
@media screen and (min-width: 568px) and (max-width: 599px) {

}
@media screen and (min-width: 600px) and (max-width: 639px) {

}
@media screen and (min-width: 640px) and (max-width: 730px) {

}
@media screen and (min-width: 731px) and (max-width: 767px) {
 
}*/

/* //////////////// Large Screens //////////////////////// */

@media screen and (min-width: 768px) and (max-width: 800px) { /* 768 - 800 */

    #ECTWrapper {
        width: 100%;
    }
    #ECTContainer {
        width: 100%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #222;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .ECTcolumnThreeInner {
        position: absolute; 
        width: 100%; 
        top: 0; 
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) { /* 960 */

    #ECTWrapper {
        width: 100%;
    }
    #ECTContainer {
        width: 100%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #222;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    } 

    /* ////////////////////////////////////////////////////////////// */

    #ECTPosterInner {        
        margin: 0; 
        padding: 0;        
    }
    #ECTDetails {
        display: inline-flex;
        margin: 20px 0 0 0; 
        padding: 0;           
    }
    #ECTcolumnOne {
        width: 40%;
        margin: 0; 
        padding: 0 10px 0 0; 
    }
    #ECTcolumnTwo {
        width: 40%;
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #ECTcolumnThree {
        width: 40%;
        margin: 0; 
        padding: 0 0 0 10px;
    }
    .ECTcolumnThreeInner {
        position: absolute; 
        width: 100%; 
        top: 0; 
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #ECTWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #ECTContainer {
        width: 73%;
        margin: 66px 10px 15px 7px; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #222;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    } 

    /* /////////////////////////////// */

    #ECTPosterInner {        
        margin: 0; 
        padding: 0;        
    }
    #ECTDetails {
        display: inline-flex;
        margin: 20px 0 0 0; 
        padding: 0;           
    }
    #ECTcolumnOne {
        margin: 0; 
        padding: 0 10px 0 0; 
    }
    #ECTcolumnTwo {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #ECTcolumnThree {
        margin: 0; 
        padding: 0 0 0 10px;
    }
    .ECTcolumnThreeInner {
        position: absolute; 
        width: 100%; 
        top: 0; 
        margin: 0 10px 0 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #ECTWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #ECTContainer {
        width: 73%;
        margin: 66px 10px 15px 7px; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #222;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    } 

    /* /////////////////////////////////////////////////////// */

    #ECTPosterInner {        
        margin: 0; 
        padding: 0;        
    }
    #ECTDetails {
        display: inline-flex;
        margin: 20px 0 0 0; 
        padding: 0;           
    }
    #ECTcolumnOne {
        margin: 0; 
        padding: 0 10px 0 0; 
    }
    #ECTcolumnTwo {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #ECTcolumnThree {
        margin: 0; 
        padding: 0 0 0 10px;
    }
    .ECTcolumnThreeInner {
        position: absolute; 
        width: 100%; 
        top: 0; 
        margin: 0 10px 0 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138  */

    #ECTWrapper {
        width: 98%;
        margin: 0; 
        padding: 0;
    }
    #ECTContainer {
        width: 74%;
        margin: 66px 10px 15px 0; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }

    /* /////////////////////////////////////////////////////// */

    #ECTPosterInner {        
        margin: 0; 
        padding: 0;        
    }
    #ECTDetails {
        display: inline-flex;
        margin: 20px 0 0 0; 
        padding: 0;           
    }
    #ECTcolumnOne {
        margin: 0; 
        padding: 0 10px 0 0; 
    }
    #ECTcolumnTwo {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #ECTcolumnThree {
        margin: 0; 
        padding: 0 0 0 10px;
    }
    .ECTcolumnThreeInner {
        position: absolute; 
        width: 100%; 
        top: 0; 
        margin: 0 10px 0 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #ECTWrapper {
        width: 96%;
        margin: 0; 
        padding: 0;
    }
    #ECTContainer {     
        margin: 66px 0 15px 0; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    }

    /* ////////////////////////////////////////////////////////////// */

    #ECTPosterInner {        
        margin: 0; 
        padding: 0;        
    }
    #ECTDetails {
        display: inline-flex;
        margin: 20px 0 0 0; 
        padding: 0;           
    }
    #ECTcolumnOne {
        margin: 0; 
        padding: 0 10px 0 0; 
    }
    #ECTcolumnTwo {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #ECTcolumnThree {
        margin: 0; 
        padding: 0 0 0 10px;
    }
    .ECTcolumnThreeInner {
        position: absolute; 
        width: 100%; 
        top: 0; 
        margin: 0 10px 0 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1200px) {
    
    #ECTWrapper {
        width: 90%;
        margin: 66px 0 300px 0; 
        padding: 0;
    }
    #ECTContainer {     
        margin: 0 10px 15px -25px; 
        padding: 0; 
    }
    #ECTMainInner {    
        margin: 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #333;
        border-radius: 20px;
        box-shadow: 5px 5px 10px #000000,
                  -1px -1px 10px #1b1b1b;
    } 

    /* ////////////////////////////////////////////////////////////// */

    #ECTPosterInner {        
        margin: 0; 
        padding: 0;        
    }
    #ECTDetails {
        display: inline-flex;
        margin: 20px 0 0 0; 
        padding: 0;           
    }
    #ECTcolumnOne {
        margin: 0; 
        padding: 0 10px 0 0; 
    }
    #ECTcolumnTwo {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #ECTcolumnThree {
        margin: 0; 
        padding: 0 0 0 10px;
    }
    .ECTcolumnThreeInner {
        position: absolute; 
        width: 100%; 
        top: 0; 
        margin: 0 10px 0 0; 
        padding: 0;
    }
}

.ECTECHolder {
    display: flex;
    margin: 0;
    padding: 0;
}
.ECTECLabel {
    width: 100%;
    padding: 14px 0 0 0;
    color: #999;
    font-size: 12px; 
    font-weight: 600;
}
#ECTEC_AddonHolder {
    display: flex;
    margin-top: 7px;
    padding-right: 2px;
    justify-content: right;    
}
#ECTEC_addon {
    padding: 9px 8px 0 10px;
    color: #999;
    transition: all 0.3s linear;    
}
.ECTevent_cost {
    display: block;
    padding: 10px 10px 10px 2px;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    border-left: none;
    box-shadow: none;  
    transition: all 0.3s linear;   
}
#ECTDP_AddonHolder1,
#ECTDP_AddonHolder2,
#ECTDP_AddonHolder3,
#ECTDP_AddonHolder4 { 
    display: flex;
    margin: 0;
    padding: 0;
}
#ECTDP_addon1,
#ECTDP_addon2,
#ECTDP_addon3,
#ECTDP_addon4 {
    padding: 9px 18px 0 0;
    color: #999;
    transition: all 0.3s linear;
}
.ECTticket_percent1,
.ECTticket_percent2,
.ECTticket_percent3,
.ECTticket_percent4 {
    max-width: 34px;
    display: block;
    padding: 10px 0 10px 10px;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    border-right: none;
    box-shadow: none;  
    transition: all 0.3s linear;    
}
#ECTtpAddonHolder1,
#ECTtpAddonHolder2,
#ECTtpAddonHolder3,
#ECTtpAddonHolder4,
#ECTtpAddonHolder5,
#ECTtpAddonHolder6 { 
    display: flex;
    margin: 0;
    padding: 0;    
    justify-content: right;
}
#ECTTP_addon1,
#ECTTP_addon2,
#ECTTP_addon3,
#ECTTP_addon4,
#ECTTP_addon5,
#ECTTP_addon6 {
    padding: 9px 8px 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
.ECTevent_cost,
.ECTticket_price1,
.ECTticket_price2,
.ECTticket_price3,
.ECTticket_price4,
.ECTticket_price5,
.ECTticket_price6 {
    display: block;
    padding: 10px 10px 10px 2px;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    border-left: none;
    box-shadow: none;  
    transition: all 0.3s linear;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #ECTDP_addon1,
    #ECTDP_addon2,
    #ECTDP_addon3,
    #ECTDP_addon4 {
        height: 40px;  
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/        
    }
    .ECTticket_percent1,
    .ECTticket_percent2,
    .ECTticket_percent3,
    .ECTticket_percent4 {
        height: 40px;
        width: 65px;
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #ECTEC_addon,
    #ECTTP_addon1,
    #ECTTP_addon2,
    #ECTTP_addon3,
    #ECTTP_addon4,
    #ECTTP_addon5,
    #ECTTP_addon6 {
        height: 40px;  
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
/*    .ECTevent_cost {
        height: 33px;
        width: 80px;
        font-size: 12px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;        
    }*/
    .ECTevent_cost,
    .ECTticket_price1,
    .ECTticket_price2,
    .ECTticket_price3,
    .ECTticket_price4,
    .ECTticket_price5,
    .ECTticket_price6 {
        height: 40px;
        width: 65px;
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #ECTDP_addon1,
    #ECTDP_addon2,
    #ECTDP_addon3,
    #ECTDP_addon4 {
        height: 40px;  
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/       
    }
    .ECTticket_percent1,
    .ECTticket_percent2,
    .ECTticket_percent3,
    .ECTticket_percent4 {
        height: 40px;
        width: 65px;
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #ECTEC_addon,
    #ECTTP_addon1,
    #ECTTP_addon2,
    #ECTTP_addon3,
    #ECTTP_addon4,
    #ECTTP_addon5,
    #ECTTP_addon6 {
        height: 40px;  
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .ECTevent_cost,
    .ECTticket_price1,
    .ECTticket_price2,
    .ECTticket_price3,
    .ECTticket_price4,
    .ECTticket_price5,
    .ECTticket_price6 {
        height: 40px;
        width: 100%;
        font-size: 13px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) {

    #ECTDP_addon1,
    #ECTDP_addon2,
    #ECTDP_addon3,
    #ECTDP_addon4 {
        height: 33px;  
        font-size: 12px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;        
    }
    #ECTEC_addon,
    #ECTTP_addon1,
    #ECTTP_addon2,
    #ECTTP_addon3,
    #ECTTP_addon4,
    #ECTTP_addon5,
    #ECTTP_addon6 {
        height: 33px;  
        font-size: 12px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
    .ECTticket_percent1,
    .ECTticket_percent2,
    .ECTticket_percent3,
    .ECTticket_percent4 {
        height: 33px;
        width: 52px;
        font-size: 12px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }    
    .ECTevent_cost {
        height: 33px;
        width: 80px;
        font-size: 12px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;        
    }
    .ECTticket_price1,
    .ECTticket_price2,
    .ECTticket_price3,
    .ECTticket_price4,
    .ECTticket_price5,
    .ECTticket_price6 {
        height: 33px;
        width: 52px;
        font-size: 12px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
}

#ECTcontainer_chk {
    height: 18px; 
    width: 0;
    margin-top: 6px;
    margin-left: -10px;
}
.ECTcheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .ECTcheckmark {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .container_chk input:checked ~ .ECTcheckmark {
        border: 2px solid #333;
    }
}
@media screen and (min-width: 1025px) {
    
    .ECTcheckmark {
        border: 2px solid #333;
        background-color: #111;
    }
    .container_chk input:checked ~ .ECTcheckmark {
        border: 2px solid #444;
    }
}


.ECTcheckmark:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .ECTcheckmark:after {
    display: block;
}
.container_chk .ECTcheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ECTtext {
    color: #ff9900;
    margin: 5px 0 0 3px; 
    font-size: 22px; 
    text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
}
.ECTtitle {
    color: #D0D0D0;
    width: 300px;
    margin: 0 0 0 3px; 
    font-size: 28px;
}
.ECTintroLabel {
    width: 100%;
    margin: 0 0 20px 3px; 
    padding: 0 7px 0 0;
    color: #999;
    font-weight: 500;
    font-size: 13px;
    text-align: justify;
}
.ECTmiddleLabel {
    width: 100%;
    margin: 0 0 20px 3px; 
    padding: 0 7px 0 0;
    color: #999;
    font-weight: 500;
    font-size: 13px;
    text-align: justify;
}
.ECTreviewLabel {
    width: 100%;
    margin: 0 0 20px 3px; 
    padding: 0 16px 0 0;
    color: #999;
    font-weight: 500;
    font-size: 13px;
    text-align: justify;
}
.ECTformLabel {
    width: 100%;
    margin: 15px 0 10px 0; 
    padding: 0;
    color: #999;  
    font-weight: 600;
    font-size: 12px;
}
.ECTpercentWrapper {
    display: flex;
    margin: 10px 0 0 0;
    padding: 0;    
}
.ECTpriceWrapper {
    display: flex;
    margin: 10px 0 0 0;
    padding: 0;
}
.ECTpriceLabel {
    width: 110%;
    padding: 13px 0 0 0;
    color: #999;
    font-size: 12px; 
    font-weight: 600;
}
#ECTtpAddonHolder {
    width: 100px;
    display: flex;
    margin-top: 7px;
    padding-right: 2px;
    justify-content: right;
}
.ECTcheckLabel {
    margin: 0;
    padding: 0;
    font-size: 12px; 
    font-weight: 600;
    color: #999;
}
.ECTticketsCell {
    margin: 0;
    padding: 4px 8px 10px 10px;
    border-radius: 16px;
    border: 2px solid #333;    
}
.ECTvenueCapCell {
    margin: 0;
    padding: 4px 8px 10px 10px;
    border-radius: 16px;
    border: 2px solid #333;     
}
.ECTevenntCostCell {
    margin: 0;
    padding: 4px 8px 10px 10px;
    border-radius: 16px;
    border: 2px solid #333;    
}
.ECTnoOfTicketsHolder {
    display: flex;
    margin: 0;
    padding: 0;
}
.ECTnoOfTicketsLabel {
    width: 100%;
    padding: 14px 0 0 0;
    color: #999;
    font-size: 12px; 
    font-weight: 600;
}
.ECTformControlCapacity {
    display: inline-block;
    height: 33px;
    width: 70px;
    margin: 7px 2px 0 0;
    padding-left: 10px;
    color: #FFF;
    font-size: 12px;
    resize: none;
    box-shadow: none;        
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.ECTformControlCapacity:hover {
    cursor: text;
    border: 2px solid #444;
}

.ECTformControl {
    display: inline-block;
    height: 33px;
    width: 90px;
    margin: 7px 2px 0 0;
    padding-left: 10px;
    color: #FFF;
    font-size: 12px;
    resize: none;
    box-shadow: none;        
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.ECTformControl:hover {
    cursor: text;
    border: 2px solid #444;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .ECTformControlCapacity {
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ECTformControl {
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    .ECTformControlCapacity {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
    .ECTformControl {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
}

.ECTtotalTicktsCell {
    margin: 0;
    padding: 5px 8px 5px 10px;
    border-radius: 16px;
    border: 2px solid #333;    
}
.ECTtotalTicktsHolder {
    display: flex;
    margin: 0;
    padding: 0;
}
.ECTtotalTicktsLabel {
    width: 100%;
    margin: 0;
    padding: 13px 0 13px 0;
    color: #999;
    font-size: 14px; 
    font-weight: 600;
}
.ECTtotalTicketsCell {
    margin-top: 2px;
    padding: 5px 8px 5px 10px;
    border-radius: 16px;
    border: 2px solid #333;    
}
.ECTtotalProfitCell {
    margin-top: 6.5px;
    margin-bottom: 5px;
    padding: 5px 8px 5px 10px;
    border-radius: 16px;
    border: 2px solid #333;    
}
.ECTtotalTickets {
    height: 33px;
    width: 94px;
    margin: 7px 2px 0 0;
    padding: 6px 6px 0 6px;
    color: #FFF;
    font-size: 12px;
    text-align: right;
    resize: none;
    box-shadow: none;        
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
    vertical-align: middle;
}
.ECTtotalProfit {
    width: 100%;
    margin: 0;
    padding: 13px 5px 0 0;
    color: #fff;
    font-size: 14px;
    text-align: right;
    background-color: #111;
}

/* /// Button /// */

.ECTticketButtPusher {
    position: absolute;
    width: 100%;
    bottom: 0;
}
.ECTticketButtHolder {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}
.ECTticketButt {  
    width: 100%;
    margin: 0;
    padding: 20px 0 20px 0;
    color: #FF9900;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s linear;
}
.ECTticketButt:hover {
    cursor: pointer;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    .ECTticketButt {
        color: #FF9900;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .ECTticketButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;    
    }
}
@media screen and (min-width: 1025px) {

    .ECTticketButt {
        color: #FF9900;
        text-align: center;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .ECTticketButt:hover {
        cursor: pointer;
        border: 2px solid #ff9900;  
    }
}


/* /// Errors Alerts /// */

@media screen and (min-width: 320px) and (max-width: 767px) {

    #ECTemptyAlertWrapper {
        min-height: 30px;
        margin: 0; 
        padding: 8px 0 0 0;
    }
    #ECTticketAlertWrapper {
        min-height: 30px;
        margin: 0; 
        padding: 8px 0 0 0;
    }
    #ECTCapacityAlertWrapper {
        min-height: 30px;
        margin: 0; 
        padding: 8px 0 0 0;
    }
}
@media screen and (min-width: 768px) {

    #ECTemptyAlertWrapper {
        height: 28px; 
        margin: 8px 0 5px 0; 
        padding: 0;    
    }
    #ECTticketAlertWrapper {
        height: 20px; 
        margin: 8px 0 0 0; 
        padding: 0;    
    }
    #ECTCapacityAlertWrapper {
        height: 20px; 
        margin: 8px 0 0 0; 
        padding: 0;    
    }
}

@media screen and (max-width: 799px) {    
    
    #EmptyAlertError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;      
    }
}
@media screen and (min-width: 800px) {
    
    #EmptyAlertError {
        line-height: 1.4;
        margin: 0 0 0 1px;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
        background-color: transparent;      
    }   
} 

/* ////////////// copied code to be adjusted to event create tickets page ///////////////// */
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */

.formControlPledgeTickets { 
    display: inline-block;
    width: 100%;    
    margin-top: 0;
    margin-bottom: 15px;
    margin-left: 0;
    padding-left: 10px;
    color: #FFF;
    resize: none;
    box-shadow: none;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.formControlPledgeTickets:hover {
    cursor: text;
    border: 2px solid #444;
}
.formControlNoOfTickets {
    display: inline-block;
    height: 33px;
    width: 70px;    
    margin-top: 7px;
    margin-left: 0;
    padding-left: 10px;
    color: #FFF;
    font-size: 12px;
    resize: none;
    box-shadow: none;        
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.formControlNoOfTickets:hover {
    cursor: text;
    border: 2px solid #444;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .formControlPledgeTickets,
    .formControlNoOfTickets {
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    .formControlPledgeTickets,
    .formControlNoOfTickets {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
}

/* ///// No. of tickets ///// */

.noOfTicketsHolder { /*border: 1px solid red;*/
    display: flex;
    margin: 10px 0 0 0;
    padding: 0;
}
.noOfTicketsLabel {
    width: 210px;
    padding: 13px 10px 0 0;
    color: #999;
    font-size: 14px; 
    font-weight: 600;
}
#noOfTickets { /* Select */ /*border: 1px solid red;*/
    scrollbar-width: none;
}
#noOfTickets option { /* Option */
    margin-right: 6px;
    border-radius: 4px;
    padding: 3px 5px 4px 4px;
    color: #D0D0D0;
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 341px) { 

    #noOfTickets {
        width: 110px;
        margin: 4px 0 0 0;
        padding: 9px 0 10px 6px;
    }  
    #noOfTickets option {
        font-size: 13px;
    }
}
@media screen and (min-width: 342px) and (max-width: 767px) { 

    #noOfTickets {
        width: 110px;
        margin: 4px 0 0 0;
        padding: 9px 0 10.5px 6px;
    }  
    #noOfTickets option {
        font-size: 13px;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #noOfTickets {
        width: 118px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #noOfTickets option {
        font-size: 13px;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {    
    
    #noOfTickets {
        width: 118px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }
    #noOfTickets option {
        font-size: 13px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #noOfTickets {
        width: 120px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #noOfTickets option {
        font-size: 13px;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #noOfTickets {
        width: 105px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }    
    #noOfTickets option {
        font-size: 13px;            
    }
}
@media screen and (min-width: 1025px) {
    
    #noOfTickets {
        margin: 0;
        padding: 6px 5px 7px 6px;
    }
    #noOfTickets option {
        margin-right: 1px;
        font-size: 14px;
    }
}



#ticketAlertHolder {   
    height: 20px;
    margin: 15px 0 -34px 0;
    padding: 0 15px 0 0;    
    text-align: center;
}
.ticketSucessAlert {
    float: right;
    margin: 0;
    padding: 0;
    color: #ff9900;
    font-size: 14px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* ////// END - EVENT CREATE TICKETS PAGE /////// */ 

/* ============================================== */

/* //////////////// CAUSES PAGES //////////////// */

#UCselectImageHolder {
    height: 70px;
    margin: 0 0 30px 0; 
    padding: 0; 
}
#UCTitleHolder {
    width: 100%;
    margin: 7px 0 0 0; 
    padding: 0;
}
#UCInputHolder {
    width: 100%;
    margin: 0; 
    padding: 0;
}
#uploadFile7 {
    display: none;
}
.UCAlertHolder {
    height: 28px;
    padding: 8px 0 0 0;
}
#ValidUCImageError {
    line-height: 1.4;
    margin: 0 0 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;    
    background-color: transparent;
} 
#uploadImagePreview7 {
    margin: 0 auto 0 auto;
    padding: 0;
}
#imagePreview7 {    
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    /*border-radius: 10px;*/
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.UCshortpreviewlogo {
    height: 240px;
    width: 240px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #imagePreview7 {    
        border: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {

    #imagePreview7 {    
        border: 2px solid #333;
    }
}

#CharMissWrapper {
    margin: 0 0 0 1px;
    padding: 0 4px 0 4px;
}

/* //////////// Upload Panel //////////// */

#causesAnchor {
    margin: 0;
    padding: 0;    
}
#uploadCauseColumn {
    padding: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#uploadcausesColumnInner {
    margin: 0;
    padding: 15px 0 0 0;
} 
.CausesCardUploadOne {
    height: auto;
    width: 100%;
    margin: 0 0 10px 0; 
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
.CausesCardUpload {
    float: left; 
    position: relative;    
    height: auto;
    min-height: 1px;    
    width: 100%;
    margin: -2px 0 10px 0; 
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

/* // Causes Display Cradle Scroll // */

#CauseDisplayCradle {
    overflow-x: hidden;
    padding: 0 10px 0 0;
    border-radius: 20px;
    border-bottom-right-radius: 28px;
    background-color: #0a0a0a;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #0a0a0a;
}
#CauseDisplayCradle {
    scrollbar-width: none;
    scrollbar-color: #ff0000 #000000 !important;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #uploadCauseContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #uploadCauseColumn {
        margin: 75px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0 0 100px 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 21px 23px 21px 23px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 */

    #uploadCauseContainer {
        width: 80%;
    }    
    #uploadCauseColumn {
        margin: 75px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0 0 100px 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 21px 24px 21px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) {

    #uploadCauseContainer {
        width: 80%;
    }    
    #uploadCauseColumn {
        margin: 75px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0 0 100px 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 21px 24px 21px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768px */

    #uploadCauseContainer {
        width: 70%;
    }    
    #uploadCauseColumn {
        margin: 65px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0 0 100px 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 21px 24px 21px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #uploadCauseContainer {
        width: 65%;
    }    
    #uploadCauseColumn {
        margin: 65px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0 0 100px 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 21px 24px 21px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 812 + 823 */

    #uploadCauseContainer {
        width: 65%;
    }    
    #uploadCauseColumn {
        margin: 65px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 20px 24px 20px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }     
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 914 + 960 */

    #uploadCauseContainer {
        width: 58%;
    }    
    #uploadCauseColumn {
        margin: 65px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 20px 24px 20px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990px */

    #uploadCauseContainer {
        width: 50%;
    }    
    #uploadCauseColumn {
        margin: 65px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 20px 24px 20px 24px;        
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #uploadCauseContainer {
        width: 50%;
    }
    #uploadCauseColumn {
        width: 100%;
        margin: 66px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadCausesCardColumn {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 24px 15px 24px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1500px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}

/* //////////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024px */

    #uploadCauseContainer {
        width: 100%;
    }    
    #uploadCauseColumn {
        width: 33%;
        margin: 66px 12.5px 0 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #uploadcausesColumnInner {
        margin: 0;
        padding: 15px 0 0 0;
    }
    #uploadCausesCardColumn {
        width: 39.25%;
        margin: 66px 0 0 0;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 20px 15px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #CauseDisplayCradle {
        height: 1060px;
        margin: 0;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .CausesCardUpload {
        padding: 21px 20px 21px 20px; 
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #uploadCauseContainer {
        width: 100%;
    }    
    #uploadCauseColumn {
        width: 32%;
        margin: 66px 17px 0 2px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #uploadcausesColumnInner {
        margin: 0;
        padding: 15px 0 0 0;
    }
    #uploadCausesCardColumn {
        width: 37%;
        margin-top: 66px;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 20px 15px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #CauseDisplayCradle {
        height: 1049.5px;
        margin: 0;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }
    .CausesCardUpload {
        padding: 21px 20px 21px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180px */
    
    #uploadCauseContainer {
        width: 100%;
        padding: 0;
    }    
    #uploadCauseColumn {
        width: 29%;
        margin: 66px 17px 0 -26.75px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #uploadcausesColumnInner {
        margin: 0;
        padding: 15px 0 0 0;
    }
    #uploadCausesCardColumn {
        width: 37.25%;
        margin-top: 66px;
        padding: 0;
    }
    .CausesCardUploadOne {
        padding: 20px 20px 15px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #CauseDisplayCradle {
        height: 1049.5px;
        margin: 0;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }
    .CausesCardUpload {
        padding: 21px 20px 21px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) {
    
    #uploadCauseContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #uploadCauseColumn {
        margin: 0 17px 0 -24.5px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #uploadcausesColumnInner {
        margin: 0;
        padding: 15px 0 0 0;
    }
    #uploadCausesCardColumn {
        width: 36%;
        margin: 0;
        padding: 0;        
    }
    .CausesCardUploadOne {
        padding: 20px 20px 15px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #CauseDisplayCradle {
        height: 1060px;
        margin: 0;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
    }
    .CausesCardUpload {
        padding: 21px 20px 21px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

.CauseFormlabel {
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    font-weight: 600;
    color: #999;
}
.CauseFormlabelImg {
    margin: 0 0 10px 0; 
    padding: 0;
    color: #999;  
    font-weight: 600;
    text-align: center;
}
.CauseFormlabelCharMiss {
    margin: 0 0 15px 0; 
    padding: 0; 
    font-weight: 600;        
    color: #999;
    text-align: center;
}
@media screen and (min-width: 320px) and (max-width: 1023px) {

    .CauseFormlabel,
    .CauseFormlabelImg,
    .CauseFormlabelCharMiss {
        font-size: 14px; 
    }
}
@media screen and (min-width: 1024px) {

    .CauseFormlabel,
    .CauseFormlabelImg,
    .CauseFormlabelCharMiss {
        font-size: 12px; 
    }
}


@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .CharityHeading {
        margin: 0 0 10px 0;
        /*padding: 13px 10px 14px 10px;*/
        padding: 10px 12px 10px 12px;
        color: #D0D0D0;
        font-size: 16px;
        line-height: 1.4;
        text-align: center;
        overflow-wrap: break-word;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .CharityHeading {
        margin: 0 0 10px 0;
        /*padding: 13px 10px 14px 10px;*/
        padding: 10px 12px 10px 12px;
        color: #D0D0D0;
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
        overflow-wrap: break-word;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
}
@media screen and (min-width: 1025px) {

    .CharityHeading {
        margin: 0 0 10px 0;
        padding: 13px 10px 14px 10px;
        /*padding: 9.5px 10px 9.5px 10px;*/
        color: #D0D0D0;
        font-size: 14px;
        text-align: center;
        overflow-wrap: break-word;
        border-radius: 10px;
        /*border-radius: 8px;*/
        border: 2px solid #333;
        background-color: #111;
    }
}

.containerUC {
    position: relative;
    width: 100%;
}
.containerUC .row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0;
}

/*.overlayC {  upload 
    position: absolute;
    width: 100%;
    height: auto;
    margin: 0 0 -20px 0;
    padding: 20px 25px 20px 0;
    bottom: 0;
    color: #f1f1f1; 
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    opacity: 1;
    color: white;
    font-size: 20px;
    text-align: center;
    transition: 0.3s linear;
}
.containerUC:hover .overlayC {
    opacity: 1;
    cursor: pointer;
}*/
#CausesCardWrapper { /* upload */
    margin: 0; 
    padding: 0 20px 0 12px;
    text-align: left;
}
#CausesCardWrapperInner { /* upload */
    height: 170px;    
    width: 170px;
    margin: 0 0 10px 5px;
    padding: 0;
}
.uploadCausesLogo { /* upload */
    height: 100%;
    width: 100%;
    margin: 10px 0 0 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    object-fit: cover;
    overflow: hidden;
}
#CharMissDisplayWrapper { /* upload */
    margin: 25px 0 14px 1px;
    padding: 0 4px 0 4px;
}
#missionTextheader { /* upload */
    margin-left: -1px;
    color: #888;
    font-size: 17px;
}
.missionText { /* upload */
    margin-top: 10px;
    margin-bottom: 0;
    color: #D0D0D0;
    font-size: 12px;
    word-break: break-word;
}
#learnMoreText { /* upload */
    margin-top: 21px;
    color: #888;    
    font-size: 14px;
}
#CauseButtsOne {
    display: inline-flex;
    width: 100%;
    margin: 6px 0 5px 0; 
    padding: 0;
}
#CauseButts { /* cradle display */
    display: inline-flex;
    width: 100%;
    margin: 6px 0 0 0; 
    padding: 0;
}
#causesEditButtHolder { /* upload */
    width: 100%;   
}
#causesDeleteButtHolder { /* upload */
    width: 100%;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .causesEdit {
        width: 100%;
        height: 40px;
        margin-right: 0;
        margin-bottom: 0;
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;  
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .causesEdit:hover {
        cursor: pointer;
        border: 2px solid #0088FF;
        color: #0088FF;  
    }
    .causesDelete {
        width: 100%;
        height: 40px;
        margin-right: 0;
        margin-bottom: 0;
        color: #888;
        font-size: 12px;
        text-align: center;        
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .causesDelete:hover {
        cursor: pointer;
        border: 2px solid red;
        color: #FF0000;
    }
}
@media screen and (min-width: 1025px) {

    .causesEdit {
        width: 140px;
        height: 34.5px;
        margin: 0;
        color: #888; 
        font-size: 12px;
        text-align: center;        
        border-radius: 8px; 
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .causesEdit:hover {
        cursor: pointer;
        border: 2px solid #0088FF;
        color: #0088FF;  
    }
    .causesDelete {
        float: right;
        width: 140px;
        height: 34.5px;
        margin: 0;
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .causesDelete:hover {
        cursor: pointer;
        border: 2px solid #FF0000;
        color: #FF0000;
    } 
}

/*////////////////////////////*/

#LogoPreviewColumn { /* edit */
    display: flex;
    margin: 0; 
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;    
}
#SelectButtonContainer { /* edit */
    text-align: center;
    margin: 42px 0 20px 0; 
    padding: 0;
}

.SelectImageCharityButt { /* edit cause */
    width: 100%;
    margin: 0 0 10px 0;
    color: #ff9900;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s linear;
}
.SelectImageCharityButt:hover {
    cursor: pointer;    
    border: 2px solid #444;
    background-color: #1a1a1a;   
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .SelectImageCharityButt {
        padding: 10px 38px 11px 38px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {

    .SelectImageCharityButt {
        padding: 9px 38px 9px 38px;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
    }    
}


#UCURL_addon {
    padding: 0 2px 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
.charityInputURL {
    display: block;
    width: 100%;
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border-left: none;
    transition: all 0.3s linear;
}
.charityInputURL:hover {
    cursor: text;
}

/* edit cause */

#ECURL_addon {
    padding: 0 2px 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
.ECcharityInputURL {
    display: block;
    width: 100%;
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border-left: none;
    transition: all 0.3s linear;
}
.ECcharityInputURL:hover {
    cursor: text;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #UCURL_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .charityInputURL {
        height: 40px;
        padding: 10.5px 10px 11px 0;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    
    /* edit cause */

    #ECURL_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .ECcharityInputURL {
        height: 40px;
        padding: 11px 10px 10px 0;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    
    #UCURL_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .charityInputURL {
        height: 40px;
        padding: 11px 10px 10px 0;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    /* edit cause */

    #ECURL_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .ECcharityInputURL {
        height: 40px;
        padding: 10.5px 10px 11px 0;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
    
    #UCURL_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .charityInputURL {
        height: 40px;
        padding: 10.5px 10px 11px 0;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    /* edit cause */

    #ECURL_addon {
        height: 40px;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-left: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
    .ECcharityInputURL {
        height: 40px;
        padding: 10.5px 10px 11px 0;
        font-size: 14px;
        border-top: 2px solid #222222;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
}
@media screen and (min-width: 1025px) {
    
    #UCURL_addon {
        height: 33px;
        font-size: 12px;
        border-top: 2px solid #333333;
        border-left: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        background-color: #111;
    }
    .charityInputURL {
        height: 33px;
        padding: 11px 10px 10px 0;
        font-size: 12px;
        border-top: 2px solid #333333;
        border-right: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: #111;
    }

    /* edit cause */

    #ECURL_addon {
        height: 33px;
        font-size: 12px;
        border-top: 2px solid #333333;
        border-left: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        background-color: #111;
    }
    .ECcharityInputURL {
        height: 33px;
        padding: 10.5px 10px 11px 0;
        font-size: 12px;
        border-top: 2px solid #333333;
        border-right: 2px solid #333333;
        border-bottom: 2px solid #333333;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: #111;
    }
}

#CauSelectImageWrapper {
    margin: 20px 0 25px 0; 
    padding: 0; 
    text-align: center;
}
#currentImagePreviewOuter {
    margin: 35px 0 10px 0; 
    padding: 0;
}
#imagePreviewOuter {
    margin: 0 0 10px 0; 
    padding: 0;
}
#imagePreviewInner {
    margin: 0; 
    padding: 0 8px 0 8px;
}
.CauHighlightBack { /* upload*/
    background-color: #000;
}

@media screen and (min-width: 320px) and (max-width: 413px) {

    #CauseButtWrapper {/* upload */
        margin: 20px 0 0 0; 
        padding: 0;
        text-align: center; 
    }
    #CauseSaveButtInner {/* upload */
        width: 100%; 
        margin: 0; 
        padding: 0 3px 0 3px;
    }     
}
@media screen and (min-width: 414px) {

    #CauseButtWrapper { /* upload */
        margin: 20px 0 0 0;
        padding: 0 4px 0 4px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #CauseSaveButtInner {/* upload */
        width: 100%;
        margin: 0; 
        padding: 0;
    }     
}


.uploadCauseButt {
    width: 100%;    
    margin: 0;
    padding: 14px 10px 13px 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center; 
    border-radius: 10px;
    transition: all 0.3s linear;
}
.uploadCauseButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .uploadCauseButt {
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px) {
    
    .uploadCauseButt {
        border: 2px solid #333;
        background-color: #111;   
    }    
}


/* ////////////// Edit Cause Page ////////////// */

#editCauseColumn {
    margin: 0 0 15px 0;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
.editHeading {
    width: 100%;
    margin: 0 0 22px 0;
    font-size: 14px;
    color: #ff9900;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
}  

.EditCauseButton {
    width: 100%;    
    margin: 0;
    padding: 14px 10px 13px 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center; 
    border-radius: 10px;
    transition: all 0.3s linear;
}
.EditCauseButton:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .EditCauseButton {
        margin: 17px 0 0 0;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px)  {
    
    .EditCauseButton {
        margin: 18px 0 0 0;
        border: 2px solid #333;
        background-color: #111;   
    }    
}


@media screen and (min-width: 320px) and (max-width: 599px) {  
    
    #editCausesContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #editCauseColumn {
        margin: 75px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 */
    
    #editCausesContainer {
        width: 80%;
    }    
    #editCauseColumn {
        margin: 75px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */ 
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) {

    #editCausesContainer {
        width: 80%;
    }    
    #editCauseColumn {
        margin: 75px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }  
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */

    #editCausesContainer {
        width: 70%;
    }    
    #editCauseColumn {
        margin: 65px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */
    
    #editCausesContainer {
        width: 65%;
    }    
    #editCauseColumn {
        margin: 65px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 801px) and (max-width: 812px) { /* 812 */
    
    #editCausesContainer {
        width: 65%;
    }    
    #editCauseColumn {
        margin: 65px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }   
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */ 
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 813px) and (max-width: 822px) { /* 820 */
    
    #editCausesContainer {
        width: 65%;
    }    
    #editCauseColumn {
        margin: 65px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }   
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 813px) and (max-width: 824px) { /* 823 */
    
    #editCausesContainer {
        width: 65%;
    }    
    #editCauseColumn {
        margin: 65px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 14px 10px 13px 10px;
    }    
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1.5px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
} 
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 914 + 915 + 960 */
    
    #editCausesContainer {
        width: 58%;
    }    
    #editCauseColumn {
        margin: 65px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 14px 10px 13px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 14px 0 0 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */
    
    #editCausesContainer {
        width: 50%;
    }    
    #editCauseColumn {
        margin: 65px 0 0 0;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 10px 10px 9px 10px;
    }
    #editcausesColumnInner {
        margin: 0;
        padding: 0;  
    } 
    #inputWrapper {
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 0 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #editCausesContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #editCauseColumn {
        width: 65%;
        margin: 66px 10px 0 7px;
        padding: 20px 20px 0 20px;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 10px 10px 9px 10px;
    }  
    #editcausesColumnInner {
        margin: 0;
        padding: 0; 
    }
    #inputWrapper {
        margin: 0;
        padding: 0 20px 0 0;
    } 
    #missionWrapper {
        margin: 10px 0 30px 0;
        padding: 0 1px 0 1px;
    }
    #causesButtontHolderSml {
        width: 240px;
        margin: 15px 0 0 0;
        /*margin: 15px 0 10px 0; */
        padding: 0;
    }
    #causesButtontHolderLge {
        display: none;
    }
}
       
/* ///////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #editCausesContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #editCauseColumn {
        width: 65%;
        margin: 66px 10px 0 7px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .editHeading {
        padding: 10px 10px 9px 10px;
    }  
    #editcausesColumnInner {
        margin: 0;
        padding: 0;
    }
    #inputWrapper {
        margin: 0;
        padding: 0 20px 0 0;
    } 
    #missionWrapper {
        margin: 29px 0 22px 0;
        padding: 0;
    }
    #causesButtontHolderSml {
        display: none;
    }
    #causesButtontHolderLge {
        margin: 0;
        /*margin: 0 0 25px 0; */
        padding: 0;  
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #editCausesContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #editCauseColumn {
        margin: 66px 10px 0 -17px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    .editHeading {
        padding: 10px 10px 9px 10px;
    }  
    #editcausesColumnInner {
        margin: 0;
        padding: 0;
    }
    #inputWrapper {
        margin: 0;
        padding: 0;
    }  
    #missionWrapper {
        margin: 29px 0 22px 0;
        padding: 0;
    }
    #causesButtontHolderSml {
        display: none;
    }
    #causesButtontHolderLge {
        margin: 0;
        /*margin: 0 0 25px 0; */
        padding: 0;  
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #editCausesContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #editCauseColumn {
        margin: 66px 10px 0 -28px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111; 
    }
    .editHeading {
        padding: 9.5px 10px 9px 10px;
    }  
    #editcausesColumnInner {
        margin: 0;
        padding: 0;
    }
    #inputWrapper {
        margin: 0;
        padding: 0;
    }  
    #missionWrapper {
        margin: 29px 0 21px 0;
        padding: 0;
    }
    #causesButtontHolderSml {
        display: none;
    }
    #causesButtontHolderLge {
        margin: 0;
        /*margin: 0 0 25px 0; */
        padding: 0;  
    }
}
@media screen and (min-width: 1200px) {

    #editCausesContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #editCauseColumn {
        margin: 0 10px 0 -24.5px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    .editHeading {
        padding: 9.5px 10px 9px 10px;
    }  
    #editcausesColumnInner { 
        margin: 0;
        padding: 0; 
    }
    #inputWrapper { 
        margin: 0;
        padding: 0;
    }
    #missionWrapper {
        margin: 29px 0 21px 0;
        padding: 0;
    }
    #causesButtontHolderSml {
        display: none;
    }
    #causesButtontHolderLge {
        margin: 0;
        /*margin: 0 0 25px 0; */
        padding: 0;  
    }
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #logoWrapper {
        margin: 0; 
        padding: 2px 0 19px 0;     
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #logoWrapper {
        margin: 0; 
        padding: 2px 0 19px 20px;     
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #logoWrapper {
        margin: 0; 
        padding: 2px 0 19px 20px;     
    }
}
@media screen and (min-width: 1200px) { 
    
    #logoWrapper { 
        /*border: 1px solid red;*/
        margin: 0; 
        padding: 2.5px 0 19px 20px;
        /*padding: 2.5px 0 24px 40px;*/
    }
}

/* edit cause */

#ECdetsWrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}
.ECFormlabelLogo {
    padding: 0; 
    font-weight: 600;
    color: #999;
}
.ECFormlabelCharMiss {
    margin-bottom: 15px; 
    padding: 0;
    font-weight: 600;        
    color: #999;
    text-align: center;
}
.ECFormlabelImg {
    margin-bottom: 10px; 
    padding: 0;
    color: #999; 
    font-weight: 600;
    text-align: center;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #ECdetsWrapper {
        height: 96px;
    }    
    .ECFormlabel {
        margin-bottom: 10px; 
        font-size: 14px;
    }
    .ECFormlabelCharMiss,
    .ECFormlabelImg {
        font-size: 14px; 
    }
}
@media screen and (min-width: 1024px)  and (max-width: 1199px) {

    #ECdetsWrapper {
        height: 95px;
    }
    .ECFormlabel {
        margin-bottom: 9px; 
        font-size: 12px;
    }
    .ECFormlabelCharMiss,
    .ECFormlabelImg {
        font-size: 12px; 
    }
}
@media screen and (min-width: 1200px) {

    #ECdetsWrapper {
        height: 95px;
    }
    .ECFormlabel {
        margin-bottom: 9px; 
        font-size: 12px;
    }
    .ECFormlabelCharMiss,
    .ECFormlabelImg {
        font-size: 12px; 
    }    
}

.ECFormlabel {
    padding: 0; 
    font-weight: 600;
    color: #999;
}
@media screen and (min-width: 320px) and (max-width: 1023px) {

    .ECFormlabelLogo {
        margin-bottom: 10px; 
        font-size: 14px;
    }
}
@media screen and (min-width: 1024px)  and (max-width: 1139px) {

    .ECFormlabelLogo {
        margin-bottom: 9px; 
        font-size: 12px;
    }
}
@media screen and (min-width: 1140px)  and (max-width: 1199px) {

    .ECFormlabelLogo {
        margin-bottom: 8px; 
        font-size: 12px;
    }
}
@media screen and (min-width: 1200px) {

    .ECFormlabelLogo {
        margin-bottom: 8px; 
        font-size: 12px;
    }  
}

/* upload cause */

#UCdetsWrapper {
    height: 90px;
    width: 100%;
    margin: 6px 0 0 0; 
    padding: 0;
}
.CauseFormlabel {
    margin-bottom: 10px;
    padding: 0;
    font-weight: 600;
    color: #999;
}
.CauseFormlabelImg {
    margin-bottom: 10px; 
    padding: 0;
    color: #999;  
    font-weight: 600;
    text-align: center;
}
.CauseFormlabelCharMiss {
    margin-bottom: 15px; 
    padding: 0; 
    font-weight: 600;        
    color: #999;
    text-align: center;
}
@media screen and (min-width: 320px) and (max-width: 1023px) {

    .CauseFormlabel,
    .CauseFormlabelImg,
    .CauseFormlabelCharMiss {
        font-size: 14px; 
    }
}
@media screen and (min-width: 1024px) {

    .CauseFormlabel,
    .CauseFormlabelImg,
    .CauseFormlabelCharMiss {
        font-size: 12px; 
    }
}


#locationWrapper {
    margin: 10px 15px 5px 15px; 
    padding: 0;    
}
#location {
    background: none;    
}
#charUrlWrapper {
    margin: 10px 15px 5px 15px; 
    padding: 0;     
}

#currentPosterColumn { /* edit */
    display: flex;
    margin: 0; 
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
}
#horizontalLineTop {
    margin: 30px 15px 10px 15px;
}
.LogoLabel {
    margin: 0 0 10px 0;    
    padding: 0; 
    font-size: 14px; 
    font-weight: 600;        
    color: #999;
    text-align: center;
}
.currentImg { /* edit */
    height: 240px; 
    width: 240px;
    padding: 0; 
    border-radius: 14px;
    border: 2px solid #333;
    object-fit: cover;
    overflow: hidden;   
}
#inputholder { /* edit */
    margin: 0 0 10px 0; 
    padding: 0 20px 0 20px;
}
#editCauseMissionHolder { /* edit */
    height: 24px;
    margin: 0;    
    padding: 0;
}
#horizontalLineBottom {
    margin: 30px 0 30px 0;
}
.ECshortpreviewlogo { /* edit */
    height: 240px;
    width: 240px;
    margin-bottom: 0;
    /*margin-bottom: 10px;*/
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#uploadImagePreview4 { /* edit */
    margin: 0 auto 0 auto;
    padding: 0;
}
#imagePreview4 { /* edit */    
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    /*border-radius: 10px;*/
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #imagePreview4 {
        border: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {

    #imagePreview4 { 
        border: 2px solid #333;
    }
}

/* //////// errors //////// */

#emptyMsgName,
#lengthMsgName,
#emptyMsgLocation,
#emptyMsgURL,
#invalidMsgImage,  /* edit / upload */
#emptyMsgImage,
#emptyMsgMess,
#lengthMsgMess {
    display: none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent; 
}

/* /////// js errors /////// */  

#ValidCauseURL {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #0088FF;       
    word-break: break-word;
    background-color: transparent;
}
#ValidCauseNameinfo,
#ValidCauseURLinfo {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff9900;
    word-break: break-word;    
    background-color: transparent;

}
#ValidCauseNameerror,
#ValidCauseURLerror {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;   
    background-color: transparent;
}
#CauseMissionHolder {
    height: 24px; 
    text-align: center;
}
#ValidCauseMissionError {
    line-height: 1.4;
    margin: 0;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;  
    background-color: transparent;
}
#ValidCauseMissionInfo {
    line-height: 1.4;
    margin: 0;
    font-size: 12px;
    color: #ff9900;
    word-break: break-word;    
    background-color: transparent;
}

/* /////// end - js errors /////// */ 

/* // Causes/Edit Cause - error highlight // */

.Causehighlight {
    height: 32px;
    margin: -52px 0 20px 0;
    padding: 0 10px 0 10px;
    border: 2px solid red;
    border-radius: 6px;
    background-color: rgba(255, 0, 0, 0.4);
}
.CauseURLhighlight {
    height: 32px;
    margin: -32px 0 8px 0;
    padding: 0 10px 0 10px;
    border: 2px solid red;
    border-radius: 6px;
    background-color: rgba(255, 0, 0, 0.4);    
}
.ECausehighlight {
    margin: -33px 0 0 0;
    padding: 14px 10px 15px 10px;
    border-radius: 6px;
    border: 2px solid red;
    background-color: rgba(255, 0, 0, 0.4);
}
.ECHighlightBack { /* edit */
    background-color: transparent;
}
.ECausehighlightImage { /* edit / upload*/
    min-height: 240.5px;
    min-width: 240px;
    max-width: 240px;
    margin: -240px 35px 0 35px;
    padding: 0;
    color: #ff0000;
    border-radius: 6px;
    border: 2px solid rgba(255, 0, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;
}
#imageTriangle {
    margin-top: 95px;
    margin-bottom: 10px; 
    color: #ff0000; 
    font-size: 34px;
}
#highlightImageColumn { /* edit / upload*/
    margin: 0; 
    padding: 0;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;       
}
.CauseHighlightBack {
    background-color: transparent;
}



/* /////// Causes Tab Pane with Causes Page /////// */

.emptyCausesHeading { /* tab */
    color: #666; 
    font-size: calc(11px + 0.3vw);
}

@media screen and (max-width: 767px) {

    #causesContainer { /* tab */
        margin: 15px auto 0 auto;
        padding: 0 10px 0 10px;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {
    
    #causesContainer { /* tab */
        margin: 30px auto 0 auto;
        padding: 0 40px 0 70px;
    }
}
@media screen and (min-width: 824px) and (max-width: 959px) {

    #causesContainer { /* tab */
        margin: 1px auto 0 auto;
        padding: 0 40px 0 70px;
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {

    #causesContainer { /* tab */
        margin: 1px auto 0 auto;
        padding: 0 0 0 35px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #causesContainer { 
        margin: 5px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #causesContainer {
        width: 90%;
        margin: 5px auto 0 auto;
        padding: 0;
    }
}
@media screen and (min-width: 1200px) {

    #causesContainer {
        margin: 5px auto 0 auto;
        padding: 0;
    }
}

#causesContainerInner { /* tab */
    margin: 0;
    padding: 0;
}
#causesColumn { /* tab */
    margin: 0 0 150px 0;
    padding: 0;
}
.columnC { /* tab */
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0;
    margin: 0 0 0 -10px;
}
#causesInnerContainer { /* tab */
    margin: 0;
}

.causesHeading { /* tab */
    width: 100%;
    margin: -5px 0 0 0;
    padding: 14px 10px 14px 10px;  
    color: #D0D0D0; 
    font-size: calc(14px + 0.3vw);
    border-radius: 12px;
}
@media screen and (max-width: 1024px) {

    .causesHeading { /* tab */
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {

    .causesHeading { /* tab */
        border: 2px solid #333;
        background-color: #111;
    }
}

#CausesCardInner1 { /* tab */
    margin: 10px 0 10px 0;
    padding: 0 10px 0 10px;
    border-radius: 10px;
}
#CausesCardInner2 { /* tab */
    margin: 10px 0 10px 0;
    padding: 0;
    border-radius: 10px;
}

@media screen and (min-width: 320px) and (max-width: 599px) {    

    #emptyCauses {
        margin: 0 0 150px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #causesInnerContainer { /* tab */
        padding: 0 0 0 10px;
    }
    #CausesCardColumn { /* tab */
        margin: 0 0 5px 0;
        padding: 0;
    }
    .CausesCard { /* tab */
        width: 100%;
        height: auto;
        margin: 0 0 15px 0; 
        padding: 20px 15px 20px 15px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #CausesCardInnerImage { /* tab */
        margin: 10px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
    }
    #CausesImageWrapper { /* tab */
        height: 265px;
        width: 265px;
        margin: 15px 0 -35px 0;
        padding: 0 6px 0 6px;
    }
    #CausesCardInnerText { /* tab */
        margin: 0;
        padding: 0 5px 0 5px;
    }     
    #causeInfo { /* tab */
        margin: 50px 0 30px 0; 
        padding: 0;
        text-align: justify;
    }
    #causeInfo p { /* tab */
        font-size: 12px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {    

    #emptyCauses {
        margin: 0 0 150px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;    
    }
    #causesInnerContainer { /* tab */
        padding: 0 0 0 10px;
    }
    #CausesCardColumn {
        margin: 0 0 5px 0;
        padding: 0;
    }
    .CausesCard { /* tab */
        width: 100%;
        height: auto;
        margin: 0 0 15px 0; 
        padding: 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #CausesCardInnerImage { /* tab */
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;        
    }
    #CausesCardInnerText { /* tab */
        margin-top: 0;
    }     
    #CausesImageWrapper { /* tab */
        height: 230px;
        width: 230px;
        margin: 30px 0 -40px 0;
        padding: 0;
    }
    #causeInfo { /* tab */
        margin: 50px 0 30px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    #emptyCauses {
        margin: 14px 0 150px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;    
    }
    #causesInnerContainer { /* tab */
        padding: 0 0 0 10px;
    } 
    .CausesCard { /* tab */
        max-height: 540px;
        min-height: 573px;
        width: 100%;
        margin: 14px 0 0 0; 
        padding: 20px 15px 20px 15px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #CausesCardInnerImage { /* tab */
        margin: 0;
        padding: 0 30px 0 10px;
    }
    #CausesCardInnerText { /* tab */
        margin: 0;
        padding: 0 30px 0 10px;
    }    
    #CausesImageWrapper { /* tab */
        height: 230px;
        width: 230px;
        margin: 20px 0 -20px 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    
    #CausesCardColumn {
        margin: 0 10px 0 -25px;
        padding: 0;
    }
    #causeInfo { /* tab */
        margin: 20px 0 25px 0; 
        padding: 0 0 0 0;
    }    
}
@media screen and (min-width: 961px) and (max-width: 1023px) {
    
    #CausesCardColumn {
        width: auto;
        margin: 0 10px 0 114px;
        padding: 0;
    }
    #causeInfo { /* tab */
        margin: 20px 0 45px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #emptyCauses {
        margin: 5px 0 0 0;
        padding: 10px 20px 10px 20px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;    
    }
    #causesInnerContainer { /* tab */
        padding: 0 0 0 10px;
    }
    #CausesCardColumn {
        margin: 0;
        padding: 0 0 0 10px;
    }
    .CausesCard { /* tab */ 
        width: 100%;
        max-height: 620px;
        min-height: 620px;
        margin: 5px 0 5px 0; 
        padding: 20px 15px 20px 15px;
        border-radius: 24px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #CausesCardInnerImage { /* tab */
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #CausesCardInnerText { /* tab */
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #CausesImageWrapper { /* tab */
        height: 230px;
        width: 230px;
        margin: 20px 15px 20px 0;
        padding: 0;
        border-radius: 6px;
    }    
    #causeInfo { /* tab */
        width: 100%;
        margin: 0 0 20px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #emptyCauses {
        margin: 5px 0 150px 0;
        padding: 10px 20px 10px 20px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;    
    }
    #causesInnerContainer { /* tab */
        padding: 0;
    }
    #CausesCardColumn {
        margin: 0;
        padding: 0 0 0 10px;
    }
    .CausesCard { /* tab */ 
        width: 100%;
        max-height: 620px;
        min-height: 620px;
        margin: 5px 0 5px 0; 
        padding: 20px 15px 20px 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #CausesCardInnerImage { /* tab */
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #CausesCardInnerText { /* tab */
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #CausesImageWrapper { /* tab */
        height: 230px;
        width: 230px;
        margin: 20px 15px 20px 0;
        padding: 0;
        border-radius: 6px;
    }    
    #causeInfo { /* tab */
        width: 100%;
        margin: 0 0 20px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1200px) {

    #emptyCauses { 
        margin: 5px 0 0 0;
        padding: 10px 20px 10px 20px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;   
    }
    #causesInnerContainer { /* tab */
        padding: 0;
    }
    #CausesCardColumn { /* tab */
        margin: 0 0 0 0;
        padding: 0 0 0 10px;
    }
    .CausesCard { /* tab */
        width: 100%;
        max-height: 600px;
        min-height: 600px;
        margin: 5px 0 5px 0; 
        padding: 20px 15px 0 15px; 
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }    
    #CausesCardInnerImage { /* tab */
        margin: 0;
        padding: 0 20px 0 20px;
    }
    #CausesCardInnerText { /* tab */
        margin: 0;
        padding: 0 20px 0 20px;
    }
    #CausesImageWrapper { /* tab */
        height: 230px;
        width: 230px;
        margin: 20px 15px 20px 0;
        padding: 0;
        border-radius: 6px;
    }    
    #causeInfo { /* tab */
        width: 100%;
        margin: 0 0 15px 0; 
        padding: 0;
    }
}

.CausesTabLogo { /* tab */
    height: auto;
    width: 100%; 
    border-radius: 8px;
    object-fit: contain;
    overflow: hidden;
}
#causesMissionTitle { /* tab */
    margin-bottom: 10px;
    color: #999;
}
#causeslearnMoreText { /* tab */
    color: #999;
    font-size: 14px;
}
#causesURL { /* tab */
    font-size: 14px;
}

@media screen and (min-width: 320px) and (max-width: 991px) {

    #noCausesAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #noCausesAlertContainer {
        width: 100%;
        margin: 0 20px 0 20px;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    
    #noCausesAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 1200px) {
    
    #noCausesAlertContainer {
        margin: 0;
        padding: 0;
    } 
}


.noCausesAlert {
    height: 60px;
    width: 100%;   
    margin: 0;
    padding: 20px 15px 20px 15px;
    color: #ff0000;
    text-align: center;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .noCausesAlert {   
        font-size: 12px; 
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .noCausesAlert {   
        font-size: 12px; 
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {
    
    .noCausesAlert {    
        font-size: 13px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

/* // END - Causes Tab Pane with Causes Page /// */

/* ////////////// END CAUSE PAGES ////////////// */

/* ============================================= */

/* //////////// NOTIFICATIONS PAGE ///////////// */

.NotSaveButt {
    width: 100%;    
    margin: 0;
    padding: 14px 10px 13px 10px;
    color: #ff9900;
    font-size: 14px;
    text-align: center; 
    border-radius: 10px;
    transition: all 0.3s linear;
}
.NotSaveButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .NotSaveButt {
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 1025px) {
    
    .NotSaveButt {
        border: 2px solid #333;
        background-color: #111;   
    }    
}

.NotHistoryButtSmall {
    float: left;
    width: 144px;
    margin: 0;
    color: #D0D0D0;    
    font-size: 12px;
    text-align: center; 
    transition: all 0.3s linear;     
}
.NotHistoryButtSmall:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}

@media screen and (max-width: 1023px) {

    .NotHistoryButtSmall {
        height: 40px;
        padding: 7px 0 8px 0;
        /*padding: 8px 0 7px 0;*/
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;  
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .NotHistoryButtSmall {
        height: 40px;
        padding: 7px 0 8px 0;
        /*padding: 8px 0 8px 0;*/
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;     
    }
}
@media screen and (min-width: 1025px) {

    .NotHistoryButtSmall {
        height: 34px;
        padding: 7px 0 8px 0;
        /*padding: 8px 0 8px 0;*/
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;     
    }
}


.FormlabelNoti,
.FormlabelImgPreviewa,
.FormlabelImgPreviewb,
.FormlabelImgPreviewc {
    margin-bottom: 10px;  
    padding: 0;
    color: #999;
    font-weight: 600;
    text-align: center;
}
.FormlabelNotiMessage {
    margin: 20px 0 15px 0;
    padding: 0;
    color: #999;
    font-weight: 600;
    text-align: center;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #NotHistoryButtHolder {
        height: 38px;
        margin: 28px 0 30px 0; 
        padding: 0;    
    }
}
@media screen and (min-width: 1024px) {

    #NotHistoryButtHolder {
        margin: 12px 0 0 0; 
        padding: 0;    
    }
}


@media screen and (min-width: 320px) and (max-width: 1023px) {

    /*#NotHistoryButtHolder {
        height: 38px;
        margin-top: 11px; 
        padding: 0;
    }
    .NotHistoryButtSmall {
        height: 38px;
        border-radius: 8px;   
    }*/
    .FormlabelNoti,
    .FormlabelImgPreviewa,
    .FormlabelImgPreviewb,
    .FormlabelImgPreviewc,
    .FormlabelNotiMessage {
        font-size: 14px;
    }
}
@media screen and (min-width: 1024px) {

    /*#NotHistoryButtHolder {
        margin-top: 12px; 
        padding: 0;    
    }
    .NotHistoryButtSmall {
        height: 34px;
        border-radius: 8px;  
    }*/
    .FormlabelNoti,
    .FormlabelImgPreviewa,
    .FormlabelImgPreviewb,
    .FormlabelImgPreviewc,
    .FormlabelNotiMessage {
        font-size: 12px;
    }
}

#notifyAlertInner {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

.noMessageAlert,
.NoPledgeAlertText,
.notifyPledgeAlert { /* red */
    width: 100%;
    padding: 0 20px 0 20px;
    color: #ff0000; 
    text-align: center;
    background-color: transparent;
}
.notifySuccess { /* blue */
    width: 100%; 
    padding: 0 20px 0 20px;
    color: #0088FF;
    text-align: center;
    background-color: transparent;
}
@media screen and (min-width: 320px) and (max-width: 431px) {

    .noMessageAlert,    /* red */
    .NoPledgeAlertText, /* red */
    .notifyPledgeAlert { /* red */
        padding: 0 5px 0 5px;
        font-size: 13.5px;
        margin-top: -4px;    
    }
    .notifySuccess {    /* blue */
        font-size: 13.5px;
        margin-top: -4px;
    }
}
@media screen and (min-width: 432px) and (max-width: 960px) {

    .noMessageAlert,    /* red */
    .NoPledgeAlertText, /* red */
    .notifyPledgeAlert { /* red */
        font-size: 15px;
        margin-top: -2px;    
    }
    .notifySuccess {    /* blue */
        font-size: 15px;
        margin-top: -1px;
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {

    .noMessageAlert,    /* red */
    .NoPledgeAlertText, /* red */
    .notifyPledgeAlert { /* red */
        font-size: 13px;
        margin-top: 0;    
    }
    .notifySuccess {    /* blue */
        font-size: 13px;
        margin-top: 1px;
    }
}
@media screen and (min-width: 1025px) {

    .noMessageAlert,    /* red */
    .NoPledgeAlertText, /* red */
    .notifyPledgeAlert { /* red */
        padding: 0 15px 0 15px;
        font-size: 14.5px;
        margin-top: -1px;    
    }
    .notifySuccess {    /* blue */
        font-size: 14.5px;
        margin-top: 1px;
    }
}

#uploadFile4 {
    display: none;
}
#notificationsColumn { 
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #notificationsContainer {
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #notificationsColumn {
        margin: 75px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 */
    
    #notificationsContainer {
        width: 80%;
    }    
    #notificationsColumn {
        margin: 75px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 15px 0 0 0;
        padding: 0;
    }   
}
@media screen and (min-width: 733px) and (max-width: 767px) {
    
    #notificationsContainer {
        width: 80%;     
    }
    #notificationsColumn {
        margin: 75px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 15px 0 0 0;
        padding: 0;
    }   
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */
    
    #notificationsContainer {
        width: 70%;
    }    
    #notificationsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 0;
        padding: 0;
    }  
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #notificationsContainer {
        width: 65%;
    }    
    #notificationsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */

    #notificationsContainer {
        width: 65%;
    }    
    #notificationsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 - end background color #0d0d0d */

    #notificationsContainer {
        width: 58%;
    }    
    #notificationsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */

    #notificationsContainer {
        width: 50%;
    }    
    #notificationsColumn {
        margin: 65px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) { /* start background color #111 */

    #notificationsContainer {
        width: 50%;
    }    
    #notificationsColumn {
        width: 100%;
        margin: 66px 0 15px 0;
        padding: 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* //////////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
    
    #notificationsContainer {
        width: 100%;
    }    
    #notificationsColumn {
        width: 33%;
        margin: 66px 12.5px 0 0;
        padding: 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotificationCardColumn {
        width: 39.25%;
        margin-top: 66px;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #notificationsContainer {
        width: 100%;
    }    
    #notificationsColumn {
        width: 32%;
        margin: 66px 17px 0 2px;
        padding: 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #NotificationCardColumn {
        width: 37%;
        margin-top: 66px;
        padding: 0;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1181px) { /* 1180 */
    
    #notificationsContainer {
        width: 100%;
        padding: 0;
    }    
    #notificationsColumn {
        width: 29%;
        margin: 66px 17px 0 -27px;
        padding: 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #NotificationCardColumn {
        width: 37.25%;
        margin-top: 66px;
        padding: 0;
    }
}
@media screen and (min-width: 1182px) {

    #notificationsContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #notificationsColumn {
        margin: 0 17.25px 0 -24.5px;
        padding: 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #NotificationCardColumn {
        margin: 0;
        padding: 0;
    }
}


/* //////////// Body Of Notifications Page //////////// */

.imageCoverEmail {
    position: relative;
    margin: 0; 
    padding: 0;
    border-radius: 14px;
    object-fit: cover;
    z-index: 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.notifyImageOverlay {
    position: relative;
    opacity: 0;
    padding: 10px 25px 8px 25px;
    text-align: center;
    border-radius: 4px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.3s linear;
}
.notifyImageOverlay:hover  {
    opacity: 1;
    cursor: pointer;
}
.notifyImageDeleteButt {
    height: 28px;  
    width: 100%;
    color: #FF0000;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #000;
    transition: all 0.3s linear;   
}
.notifyImageDeleteButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #111;
}
@media screen and (min-width: 320px) and (max-width: 1280px) {
    
    .notifyImageDeleteButt {
        margin: 150px 0 0 0;
    }
}
@media screen and (min-width: 1281px) and (max-width: 1440px) { 
    
    .notifyImageDeleteButt {
        margin: 130px 0 0 0;
    }
}
@media screen and (min-width: 1441px) { 
    
    .notifyImageDeleteButt {
        margin: 140px 0 0 0;
    }
}

#notImagePreviewOuter {
    margin: 0 0 10px 0;
    padding: 0;
}
.ShortPreviewNotificationsA {
    margin: 0;
    padding: 0;
}

.imagePreview5a {
    min-height: 225px;    
    min-width: 225px; 
    max-width: 225px;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.imagePreview5b {
    margin: 0;
    padding: 0;
    border-radius: 14px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .imagePreview5a {    
        border: 2px solid #222;
    }
    .imagePreview5b {    
        border: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {

    .imagePreview5a {    
        border: 2px solid #333;
    }
    .imagePreview5b {    
        border: 2px solid #333;
    }
}

#NotImageMessageAnchor,
#NotMessageAnchor {
    margin: 0;
}
.NotiHighlightBack {
    margin: 0;
    padding: 0;
    background-color: #000;
}
.notificationHighlightImageA {
    min-height: 225px;
    min-width: 225px;
    max-width: 225px;
    margin: -225px 0 0 0;
    padding: 0;
    color: #ff0000;
    border-radius: 14px;
    border: 2px solid rgba(255, 0, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;
}
.notificationHighlightImageB {
    color: #ff0000;
    border-radius: 14px;
    border: 2px solid rgba(255, 0, 0, 0.6);
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #notificationsColumnInner {
        margin: 0;
        padding: 0 0 15px 0;
    }
    #imagePreviewWrapper {
        margin: 0 0 -165px 0; 
        padding: 0;
    }      
    #NotImagePreviewInner {
        margin: -20px 0 180px 0;
        padding: 0;
    }
    #CurrentImageContainer {
        margin: 55px 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .imageCoverEmail {
        max-height: 201px;
        min-height: 201px;
        max-width: 201px;
        min-width: 201px;
    }
    .notifyImageOverlay {
        max-height: 201px;
        min-height: 201px;
        max-width: 201px;
        min-width: 201px;
        margin: -201px 0 0 0;
    } 
    #notifyPreviewWrapper1 {
        margin: 30px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #notifyPreviewWrapper2 {
        margin: 30px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .ShortPreviewNotificationsB {
        margin: 0;
        padding: 0;
    }    
    .imagePreview5b {
        min-height: 205px;    
        min-width: 205px; 
        max-width: 205px;
    }
    .notificationHighlightImageB {
        min-height: 205px;    
        min-width: 205px; 
        max-width: 205px;
        margin: -206px 0 0 0;
        padding: 0;
    }
    .shortPreviewNotify {
        height: 205px;
        min-width: 205px;
        max-width: 205px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid #333;
        background: none;
    }
    #notifyAlertHolder {
        height: 18px;
        width: 100%;
        margin: 15px 0 0 0;
        padding: 0;
        text-align: center; 
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {

    #notificationsColumnInner {
        width: 100%;
        padding: 2px 0 15px 0;
    }
    #imagePreviewWrapper {
        margin: 0 0 -170px 0; 
        padding: 0;
    }
    #NotImagePreviewInner {
        width: 100%;
        margin: 40px 0 180px 0;
        padding: 0;
        display: inline-flex;
    }    
    #CurrentImageContainer {
        margin: 0 5px 0 0;
        padding: 0;
    }
    .imageCoverEmail {        
        max-height: 191px;
        min-height: 191px;
        max-width: 191px;
        min-width: 191px;
    }
    .notifyImageOverlay {
        max-height: 191px;
        min-height: 191px;
        max-width: 191px;
        min-width: 191px;
        margin: -191px 0 0 0;
    } 
    #notifyPreviewWrapper1 {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #notifyPreviewWrapper2 {
        margin: 0 0 0 5px;
        padding: 0;
    }
    .ShortPreviewNotificationsB {
        margin: 0;
        padding: 0;
    }
    .imagePreview5b {
        min-height: 195px;    
        min-width: 195px; 
        max-width: 195px;
    }
    .notificationHighlightImageB {
        min-height: 195px;    
        min-width: 195px; 
        max-width: 195px;
        margin: -196px 0 0 0;
        padding: 0;
    }
    .shortPreviewNotify {
        height: 195px;
        min-width: 195px;
        max-width: 195px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid #333;
        background: none;
    }      
    #notifyAlertHolder {
        height: 18px;
        width: 100%;
        margin: 20px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 800px) and (max-width: 1023px) {

    #notificationsColumnInner {
        width: 100%;
        padding: 2px 0 15px 0;
    }
    #imagePreviewWrapper {
        margin: 0 0 -170px 0; 
        padding: 0;
    }
    #NotImagePreviewInner { 
        width: 100%;
        margin: 40px 0 180px 0;
        padding: 0;
        display: inline-flex;
    }    
    #CurrentImageContainer {
        margin: 0 5px 0 0;
        padding: 0;
    }
    .imageCoverEmail {        
        max-height: 191px;
        min-height: 191px;
        max-width: 191px;
        min-width: 191px;
    }
    .notifyImageOverlay {
        max-height: 191px;
        min-height: 191px;
        max-width: 191px;
        min-width: 191px;
        margin: -191px 0 0 0;
    } 
    #notifyPreviewWrapper1 {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #notifyPreviewWrapper2 {
        margin: 0 0 0 5px;
        padding: 0;
    }
    .ShortPreviewNotificationsB {
        margin: 0;
        padding: 0;
    }
    .imagePreview5b {
        min-height: 195px;    
        min-width: 195px; 
        max-width: 195px;
    }
    .notificationHighlightImageB {
        min-height: 195px;    
        min-width: 195px; 
        max-width: 195px;
        margin: -196px 0 0 0;
        padding: 0;
    }
    .shortPreviewNotify {
        height: 195px;
        min-width: 195px;
        max-width: 195px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid #333;
        background: none;
    }      
    #notifyAlertHolder {
        height: 18px;
        width: 100%;
        margin: 16px 0 0 0;
        padding: 0;
    }
}

/* ////////////////////////////////////////////////////////////// */


@media screen and (min-width: 1024px) and (max-width: 1279px) {

    #notificationsColumnInner {
        width: 100%;
        margin: 0;
        padding: 0 0 15px 0;
    }
    #imagePreviewWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #NotImagePreviewInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #CurrentImageContainer {
        width: 100%;
        margin: 30px 0 15px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .imageCoverEmail {        
        max-height: 201px;
        min-height: 201px;
        max-width: 201px;
        min-width: 201px;
    }
    .notifyImageOverlay {
        max-height: 201px;
        min-height: 201px;
        max-width: 201px;
        min-width: 201px;
        margin: -201px 0 0 0;
    }   
    #notifyPreviewWrapper1 {
        margin: 30px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #notifyPreviewWrapper2 {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .ShortPreviewNotificationsB {
        margin: 0;
        padding: 0;
    }
    .imagePreview5b {
        min-height: 205px;    
        min-width: 205px; 
        max-width: 205px;
    }
    .notificationHighlightImageB {
        min-height: 205px;    
        min-width: 205px; 
        max-width: 205px;
        margin: -206px 0 0 0;
        padding: 0;
    }
    .shortPreviewNotify {
        height: 205px;
        min-width: 205px;
        max-width: 205px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid #333;
        background: none;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1280px) {
    
    #notificationsColumnInner {
        width: 100%;
        margin: 0;
        padding: 0 0 15px 0;
    }    
    #NotiSelectImageWrapper {
        margin: 39px 0 24px 0; 
        text-align: center;
        padding: 0;
    }    
    #imagePreviewWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #NotImagePreviewInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #CurrentImageContainer {
        width: 100%;
        margin: 30px 0 15px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .imageCoverEmail {        
        max-height: 201px;
        min-height: 201px;
        max-width: 201px;
        min-width: 201px;
    }
    .notifyImageOverlay {
        max-height: 201px;
        min-height: 201px;
        max-width: 201px;
        min-width: 201px;
        margin: -201px 0 0 0;
    }       
    #notifyPreviewWrapper1 {
        margin: 30px 0 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #notifyPreviewWrapper2 {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .ShortPreviewNotificationsB {
        margin: 0;
        padding: 0;
    }
    .imagePreview5b {
        min-height: 205px;    
        min-width: 205px; 
        max-width: 205px;
    }
    .notificationHighlightImageB {
        min-height: 205px;    
        min-width: 205px; 
        max-width: 205px;
        margin: -206px 0 0 0;
        padding: 0;
    }
    .shortPreviewNotify {
        height: 205px;
        min-width: 205px;
        max-width: 205px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid #333;
        background: none;
    }
}
@media screen and (min-width: 1281px) {
    
    #notificationsColumnInner {
        width: 100%;
        margin: 0;
        padding: 0 0 15px 0;
    }
    #CurrentImageContainer {
        width: 100%;
        margin: 30px 0 15px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #notifyPreviewWrapper1 {
        margin: 30px 0 10px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #notifyPreviewWrapper2 {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

/* ////////////////////////////////////////////////// */

@media screen and (min-width: 1281px) and (max-width: 1439px) {
    
    #imagePreviewWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;      
    }
    #NotImagePreviewInner {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .shortPreviewNotify {
        height: 180px;
        min-width: 180px;
        max-width: 180px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid #333;
        background: none;
    }
    .ShortPreviewNotificationsB {
        margin: 0;
        padding: 0;
    }  
    .imageCoverEmail {        
        max-height: 176px;
        min-height: 176px;
        max-width: 176px;
        min-width: 176px;
    }
    .notifyImageOverlay {
        max-height: 176px;
        min-height: 176px;
        max-width: 176px;
        min-width: 176px;
        margin: -176px 0 0 0;
    }
    .imagePreview5b {
        min-height: 180px;
        min-width: 180px;
        max-width: 180px;
    }
    .notificationHighlightImageB {
        min-height: 180px;
        min-width: 180px;
        max-width: 180px;
        margin: -181px 0 0 0;
        padding: 0;
    } 
}
@media screen and (min-width: 1440px) {
   
    #imagePreviewWrapper {
        margin: 0; 
        padding: 0;
    }
    #NotImagePreviewInner {
        margin: 0;
        padding: 0;
    }
    .shortPreviewNotify {
        height: 195px;
        min-width: 195px;
        max-width: 195px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        border: 2px solid #333;
        background: none;
    }
    .ShortPreviewNotificationsB {
        margin: 0;
        padding: 0;
    }
    .imageCoverEmail {        
        max-height: 191px;
        min-height: 191px;
        max-width: 191px;
        min-width: 191px;
    }
    .notifyImageOverlay {
        max-height: 191px;
        min-height: 191px;
        max-width: 191px;
        min-width: 191px;
        margin: -191px 0 0 0;
    }
    .imagePreview5b {
        min-height: 195px;
        min-width: 195px;
        max-width: 195px;
    }
    .notificationHighlightImageB {
        min-height: 195px;
        min-width: 195px;
        max-width: 195px;
        margin: -195px 0 0 0;
        padding: 0;
    }  
}

/* // up to 1023px wide // */

@media screen and (max-width: 1023px) {

    #NotSubjectContainer {
        height: 95px;
        width: 100%;
        margin: 0;
        padding: 0;
    }    
    #NotTitleContainer {
        height: 95px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #NotTitleHolder {
        margin: 7px 0 0 0; 
        padding: 0;
    }
    #NotInputHolder {
        margin: 0; 
        padding: 0;
    }      
}

/* // @ and over 1024px wide // */ 

@media screen and (min-width: 1024px) and (max-width: 1024px) { 

    #NotSubjectContainer {
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #NotTitleContainer {
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #notifyAlertHolder {
        height: 18px;
        width: 100%;
        margin: 16px 0 0 0;
        padding: 0;
    }
    #NotTitleHolder {
        width: 100%;
        margin: 7px 0 0 0; 
        padding: 0;
    }
    #NotInputHolder {
        width: 100%;
        margin: 0; 
        padding: 0;
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1280px) { 

    #NotSubjectContainer {
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #NotTitleContainer { 
        height: 95px;
        margin: 0;
        padding: 0;
    }
    #notifyAlertHolder {/**/
        height: 18px;
        width: 100%;
        margin: 20px 0 0 0;
        padding: 0;
    }
    #NotTitleHolder {
        width: 100%;
        margin: 7px 0 0 0; 
        padding: 0;
    }
    #NotInputHolder {
        width: 100%;
        margin: 0; 
        padding: 0;
    } 
}
@media screen and (min-width: 1281px) { 

    #NotSubjectContainer {
        height: 95px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #NotTitleContainer { 
        height: 95px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #notifyAlertHolder { /*border: 1px solid red;*/
        height: 18px;
        width: 100%;
        margin: 20px 0 0 0;
        padding: 0;
    }
    #NotTitleHolder {
        width: 100%;
        margin: 7px 0 0 0; 
        padding: 0;
    }
    #NotInputHolder {
        width: 100%;
        margin: 0; 
        padding: 0;
    } 
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    
    #imagePreviewContainer {
        margin: 0 0 30px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #NotiSelectImageWrapper {
        margin: 39px 0 24px 0; 
        text-align: center;
    }
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    
    #imagePreviewContainer {
        margin: 0 0 20px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #NotiSelectImageWrapper {
        margin: 39px 0 24px 0; 
        text-align: center;
    }
}
@media screen and (min-width: 1280px) {

    #imagePreviewContainer {
        margin: -28px 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1280px) {

    #NotiSelectImageWrapper {
        margin: 39px 0 24px 0; 
        text-align: center;
        padding: 0;
    }    
}
@media screen and (min-width: 1281px) and (max-width: 1366px) {
    
    #NotiSelectImageWrapper {
        margin: 39px 0 24px 0; 
        text-align: center;
        padding: 0 0 0 7px;
    }
}
@media screen and (min-width: 1367px) {
   
    #NotiSelectImageWrapper {
        margin: 39px 0 24px 0; 
        text-align: center;
    }
}

#notiMessWrapper {
    margin: 0;
    padding: 0 4px 0 4px;
}

/* /// Save/Preveiw button /// */

@media screen and (min-width: 320px) and (max-width: 413px) {

    #NotSaveButtHolderLge {
        margin: 9px 0 0 0; 
        padding: 0 4px 0 4px;
        text-align: center; 
    }
    #NotSaveButtInner {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {

    #NotSaveButtHolderLge { 
        margin: 9px 0 0 0; 
        padding: 0 4px 0 4px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }
    #NotSaveButtInner { 
        width: 100%;
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1024px) {

    #NotSaveButtHolderLge {
        margin: 9px 0 0 0;
        padding: 0 4px 0 4px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
    }    
    #NotSaveButtInner {
        width: 100%;
        margin: 0; 
        padding: 0;
    }    
}
.savePreviewButt {
    width: 100%;
    margin: -2px 0 14px 0;
    padding: 10px 0 10px 0;    
    color: #ff9900;
    font-size: 14px;
    text-shadow: 0 0 0 #ff9900;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.savePreviewButt:hover {
    background-color: #111;   
    border: 2px solid #ff9900;
    cursor: pointer;    
}
.SelectImageNotifButt {
    width: 100%;
    margin: 0;
    padding: 11px 71px 11px 71px;    
    color: #999;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.SelectImageNotifButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #111;    
}
#selectImageNotifHolder {
    height: 70px;
    margin: 0; 
    padding: 0; 
}
.previewEmailButt {
    width: 100%;
    color: #ff9900;
    text-align: center;
    font-size: 14px;
    text-shadow: 0 0 0 #ff9900;
    margin: 0;
    padding: 10px 56px 10px 56px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.3s linear;
}
.previewEmailButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}

/* /// errors handles /// */

#ValidNotifiSubjectError,
#ValidNotifiTitleError {
    line-height: 1.4;
    margin: 8px 0 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;
    background-color: transparent;
}
#NotImageError {
    line-height: 1.4;
    margin: 8px 2px 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;
    background-color: transparent;    
}
#NotificationtextHolder {
    height: 24px;
    margin: 0;
}
#ValidNotificationtextError {
    line-height: 1.4;
    margin: 0 0 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;
    background-color: transparent;
}

/* /// For Display CSS goto (email-notify-display-style.css) /// */

/* ////////////////// END - NOTIFICATIONS PAGE ///////////////// */

/* ============================================================= */

/* ///////////////// START - PREVIEW EMAIL PAGE //////////////// */

#emailDisplayButtons {
    margin: 0 0 10px 0; 
    padding: 20px 20px 0 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#NEPtiersHolderLeft {

}
#NEPtiersHolderRight {

}
.NEPcheckboxWrapper {
    width: 100%; 
    margin: 3px 0 0 0; 
    padding: 0;
    text-align: left;
} 
#NEPradio {
    margin: -12px 0 0 0;
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #emailPreviewContainer {
        width: 100%; 
        margin: 75px 0 0 0; 
        padding: 0;
    }
    #emailPreviewWrapper {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #emailDisplayButtons {
        padding-bottom: 10px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
    #emailPreviewButtonsInner {
        margin: 20px 0 15px 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }   
    #emailDisplayButtonsleft {
        display: inline-flex;
        margin: 0; 
        padding: 0;
    }
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #NEPtiersHolder {
        padding: 0;
    }
    .NEPcheckboxWrapper {
        margin: 20px 0 0 0; 
    } 
    #emailPreviewdetsWrapperSE {
        margin: 10px 0 0 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #emailPreviewContainer {
        width: 100%;
        margin: 75px 0 0 0; 
        padding: 0;
    }    
    #emailPreviewWrapper {
        margin: 0;
        padding: 0 20px 0 20px;
    }
    #emailDisplayButtons {
        padding-bottom: 19px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
    #emailPreviewButtonsInner {
        margin: 20px 0 15px 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }    
    #emailDisplayButtonsleft {
        width: auto;
        display: inline-flex;
        margin: 0; 
        padding: 0;
    }
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    #NEPtiersHolder {
        padding: 0;
    }
    .NEPcheckboxWrapper {
        margin: 20px 0 0 0; 
    } 
    #emailPreviewdetsWrapperSE {
        margin: 0; 
        padding: 0;
        display: flex;
        align-items: center; 
        justify-content: center;
        flex-direction: column;    
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {

    #emailPreviewContainer {
        width: 752.75px;
        margin: 65px auto 0 auto; 
        padding: 0;
    }    
    #emailPreviewWrapper {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #emailDisplayButtons {
        padding-bottom: 19px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
    #emailPreviewButtonsInner {
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }    
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }  
    #emailDisplayButtonsleft {
        margin: 17px 0 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex;
        justify-content: space-evenly; 
    }
    #emailPreviewdetsWrapperSE {
        margin: 3px 0 0 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 800px) and (max-width: 812px) { /* 800 */

    #emailPreviewContainer {
        width: 752.75px;
        margin: 65px auto 0 auto;
        padding: 0;
    }    
    #emailPreviewWrapper {
        margin: 0; 
        padding: 0 15px 0 15px;
    }
    #emailDisplayButtons { 
        padding-bottom: 19px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
    #emailPreviewButtonsInner { 
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }    
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }  
    #emailDisplayButtonsleft { 
        margin: 17px 0 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex; 
        justify-content: space-evenly;
    }
    #emailPreviewdetsWrapperSE {
        margin: 3px 0 0 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 813px) and (max-width: 853px) { /* 823 */

    #emailPreviewContainer {
        width: 752.75px;
        margin: 65px auto 0 auto; 
        padding: 0;
    }    
    #emailPreviewWrapper {
        margin: 0; 
        padding: 0 13px 0 13px;
    }
    #emailDisplayButtons {
        padding-bottom: 19px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
    #emailPreviewButtonsInner {
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }    
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }  
    #emailDisplayButtonsleft {
        margin: 17px 0 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder {
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-flex; 
        justify-content: space-evenly;
    }
    #emailPreviewdetsWrapperSE {
        margin: 3px 0 0 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 854px) and (max-width: 960px) { /* 854 + 914 + 915 + 960 */

    #emailPreviewContainer {
        width: 752.75px;
        margin: 0 auto 0 auto; 
        padding: 0;
    }    
    #emailPreviewWrapper {
        margin: 65px auto 0 auto;
        padding: 0 4px 0 4px;
    }
    #emailDisplayButtons {
        padding-bottom: 19px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
    #emailPreviewButtonsInner {
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }  
    #emailDisplayButtonsleft {
        margin: 17px 0 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder { 
        width: 100%;
        margin: 0;
        padding: 0 20px 0 20px;
        display: inline-flex; 
        justify-content: space-evenly;
    }
    #emailPreviewdetsWrapperSE {
        margin: 3px 0 0 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}

@media screen and (min-width: 961px) and (max-width: 1024px) { /* 1024 */

    #emailPreviewContainer {
        width: 100%;
        margin: 0; 
        padding: 0;
    }    
    #emailPreviewWrapper {
        width: 752.75px;
        margin: 66px 0 0 0; 
        padding: 0 4px 0 7px;
    }
    #emailDisplayButtons {
        padding-bottom: 19px;
        border-radius: 20px;
        border: 2px solid #222; 
        background-color: #0a0a0a;
    }
    #emailPreviewButtonsInner {
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }   
    #emailDisplayButtonsleft {
        margin: 17px 0 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder {
        width: 100%;
        margin: 0;
        padding: 0 15px 0 18px;
        display: inline-flex; 
        justify-content: space-evenly;
    }
    #emailPreviewdetsWrapperSE {
        margin: 3px 0 0 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #emailPreviewContainer {
        width: 100%;
    }
    #emailPreviewWrapper {
        width: 752.75px;
        margin: 66px 0 0 -24px;
        padding: 0;
    }
    #emailDisplayButtons { 
        padding-bottom: 19px;
        border-radius: 20px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #emailPreviewButtonsInner {
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }    
    #emailDisplayButtonsleft {
        margin: 0 15px 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder { 
        width: 100%;
        margin: 0;
        padding: 0 8px 0 0;
        display: inline-flex; 
        justify-content: space-evenly;
    }
    #emailPreviewdetsWrapperSE {
        margin: 3px 0 0 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1200px) { /* 1180 */

    #emailPreviewContainer {
        width: 68.5%;
    }
    #emailPreviewWrapper {
        width: 752.75px;
        margin: 65px 0 0 66px;
        padding: 0;
    }
    #emailDisplayButtons {
        padding-bottom: 19px;
        border-radius: 20px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #emailPreviewButtonsInner {
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }    
    #emailDisplayButtonsleft {
        margin: 0 15px 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder { 
        width: 100%;
        margin: 0;
        padding: 0 5px 0 0;
        display: inline-flex; 
        justify-content: space-evenly;
    }
    #emailPreviewdetsWrapperSE {
        margin: 3px 0 0 0;
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}
@media screen and (min-width: 1201px) {

    #emailPreviewContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #emailPreviewWrapper {
        width: 65%;
        margin: 0 0 0 -24.5px;
        padding: 0;
    }
    #emailDisplayButtons { 
        padding-bottom: 19px;
        border-radius: 20px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #emailPreviewButtonsInner {
        width: 100%;
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    .NPsendEmailForm {
        display: flex;
        width: 100%;   
    }    
    #emailDisplayButtonsleft {
        margin: 0 10px 0 0; 
        padding: 0;
        display: inline-flex;
    }   
    #NEPnotifySelectHolder {
        width: 100%; 
        margin: 0; 
        padding: 0;
        display: inline-flex;
    }
    #NEPtiersHolder { 
        width: 100%;
        margin: 0;
        padding: 0 5px 0 5px 0;
        display: inline-flex; 
        justify-content: space-evenly;
    }
    #emailPreviewdetsWrapperSE { /*border: 1px solid red; */
        margin: 3px 0 0 0; 
        padding: 0;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
}

/* /////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .NEPDeleteButt {
        width: 80px;
        height: 32px;
        margin: 0 10px 0 0;
        color: #888;  
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #888;
        border-radius: 8px;        
        border: 2px solid #222; 
        background-color: #0d0d0d;        
        transition: all 0.3s linear;   
    }
    .NEPDeleteButt:hover {
        cursor: pointer;
        color: red;
        border: 2px solid red;
        background-color: #1a1a1a;
    }
    .NEPEditButt {  
        width: 80px;
        height: 32px;
        margin: 0;
        color: #888;  
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #888;
        border-radius: 8px;        
        border: 2px solid #222; 
        background-color: #0d0d0d;
        transition: all 0.4s linear;   
    }
    .NEPEditButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
    #NEPlineBreakTop {
        margin-top: 20px;
        /*margin-top: 7px;*/
        margin-bottom: 24px;
        border: 1px solid #222; 
    }
    #NEPlineBreakBottom {
        margin-bottom: 12px;
        border: 1px solid #222;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    .NEPDeleteButt {
        width: 80px;
        height: 32px;
        margin: 0 10px 0 0;
        color: #888;  
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #888;        
        border-radius: 8px;
        border: 2px solid #222; 
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .NEPDeleteButt:hover {
        cursor: pointer;
        color: #ff0000;
        border: 2px solid #ff0000;
        background-color: #1a1a1a;
    }
    .NEPEditButt {  
        width: 80px;
        height: 32px;
        margin: 0;   
        color: #888;  
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #888;
        border-radius: 8px;
        border: 2px solid #222; 
        background-color: #0d0d0d;
        transition: all 0.4s linear;   
    }
    .NEPEditButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
    #NEPlineBreakTop {
        display: none;
    }
    #NEPlineBreakBottom {
        display: none;
    }
}
@media screen and (min-width: 1025px) {
    
    .NEPDeleteButt {
        width: 80px;
        height: 32px;
        margin: 15px 10px 12px 0;
        color: #888;  
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #888;        
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #111;   
        transition: all 0.3s linear;   
    }
    .NEPDeleteButt:hover {
        cursor: pointer;
        border: 2px solid red;
        color: red;
        background-color: #1a1a1a;
    }
    .NEPEditButt {  
        width: 80px;
        height: 32px;
        margin: 15px 0 12px 0;
        color: #888;  
        font-size: 12px;
        text-align: center;
        text-shadow: 0 0 0 #888;        
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #111;   
        transition: all 0.4s linear;   
    }
    .NEPEditButt:hover {
        cursor: pointer;
        color: #0088FF; 
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
    #NEPlineBreakTop {
        display: none;
    }
    #NEPlineBreakBottom {
        display: none;
    }
}   

.headingHolder {
    margin: 0;
}
.previewDelete {
    width: 80px;
    height: 32px;
    margin: 0 5px 0 0;
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #000;   
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;
    transition: all 0.3s linear;   
}
.previewDelete:hover {
    cursor: pointer;
    border: 2px solid red;
    color: red;
    background-color: #111;
}
.previewEdit {  
    width: 80px;
    height: 32px;
    margin: 0 10px 0 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;    
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #111; 
    transition: all 0.4s linear;   
}
.previewEdit:hover {
    cursor: pointer;
    color: #0088FF;
    border: 2px solid #0088FF;
    background-color: #111;
    background-color: #1a1a1a; 
}
.emailPreviewlabel {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 600;        
    color: #999;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .NEPverifyEmailButt {  
        height: 35px;
        width: 140px;
        margin: 0;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 6px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .NEPverifyEmailButt:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 768px) {
    
    .NEPverifyEmailButt {  
        height: 35px;
        width: 140px;
        margin: 0;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 6px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .NEPverifyEmailButt:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}


/* /////////////////////////// */

.emailPreviewPostSM {
    width: 140px;
    height: 32px;
    margin: 0;
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #000;   
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #ff9900;
    transition: all 0.4s linear;   
}
.emailPreviewPostSM:hover {
    cursor: pointer;
    border: 2px solid #ff9900;
    color: #ff9900;       
    background-color: #111;
}
.emailPreviewPostSend {
    height: 32px;
    width: 134px;
    margin: 0;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 8px; 
    transition: all 0.4s linear;   
}
.emailPreviewPostSend:hover {
    cursor: pointer;
    border: 2px solid #ff9900;
    background-color: #1a1a1a;
}    

@media screen and (min-width: 320px) and (max-width: 767px) {

    .emailPreviewPostSend {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    .emailPreviewPostSend {
        border-bottom-right-radius: 17px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .emailPreviewPostSend {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {

    .emailPreviewPostSend { 
        border: 2px solid #333;
        background-color: #111;
    }
}

/* /// For Display CSS goto (email-event-anchor-style.css) /// */

/* //////////////// END - PREVIEW EMAIL PAGE ///////////////// */

/* =========================================================== */

/* ///////////////// NOTIFICATION HISTORY PAGE /////////////// */

#NotHistoryTableDisplay {
    height: 50%;
    margin: 0; 
    padding: 0;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 384px) {
    
    #NotHistoryContainer {
        margin: 0; 
        padding: 0;
    }
    #NotHistoryColumn {
        margin: 75px 10px 280px 10px; 
        padding: 0 0 11px 0;
    }  
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 385px) and (max-width: 599px) {
    
    #NotHistoryContainer {
        margin: 0; 
        padding: 0;
    }
    #NotHistoryColumn {
        margin: 75px 10px 280px 10px; 
        padding: 0 0 21px 0;
    }  
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 + 732 */
    
    #NotHistoryContainer {
        margin: 0; 
        padding: 0 20px 0 20px;
    }
    #NotHistoryColumn {
        margin: 75px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }  
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) {
    
    #NotHistoryContainer {
        margin: 0; 
        padding: 0 30px 0 30px;
    }
    #NotHistoryColumn {
        margin: 75px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }  
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 - navbar @ 50px high */

    #NotHistoryContainer {
        margin: 0 auto 0 auto; 
        padding: 0 20px 0 20px;
    }
    #NotHistoryColumn {
        margin: 65px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #NotHistoryContainer {
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #NotHistoryColumn {
        margin: 65px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */

    #NotHistoryContainer {
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #NotHistoryColumn {
        margin: 65px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 */

    #NotHistoryContainer {
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #NotHistoryColumn {
        margin: 65px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */

    #NotHistoryContainer {
        margin: 0; 
        padding: 0 0 0 250px;
    }
    #NotHistoryColumn {
        margin: 65px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #NotHistoryContainer {
        margin: 0 0 0 15px;
        padding: 0;
    }
    #NotHistoryColumn {
        margin: 66px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
    
    #NotHistoryContainer {
        margin: 0 0 0 11px; 
        padding: 0;
    }
    #NotHistoryColumn {
        margin: 66px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1179px) { /* 1138 */
    
    #NotHistoryContainer {
        margin: 0 0 0 15.5px; 
        padding: 0;
    }
    #NotHistoryColumn {
        height: 100%;
        margin: 66px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1180px) and (max-width: 1999px) { /* 1180 */
    
    #NotHistoryContainer {
        margin: 0 0 0 15px; 
        padding: 0;
    }
    #NotHistoryColumn {
        height: 100%;
        margin: 66px 10px 280px 10px; 
        padding: 0 20px 21px 20px;
    }
    #NotHistoryTableDisplay {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) {
    
    #NotHistoryContainer {
        margin: 66px 0 0 -34.5px; 
        padding: 0;
    }
    #NotHistoryColumn {
        height: 100%;
        margin: 0 10px 280px 10px; 
        padding: 0;
    }
    #NotHistoryTableDisplay {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

#NHHeadingHolder {
    margin: 0 0 15px 0;
    padding: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #NHHeadingHolder {
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .NHHeadingSm {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .NHHeadingLg {
        display: none;        
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #NHHeadingHolder {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .NHHeadingSm {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .NHHeadingLg {
        display: none;        
    }
}
@media screen and (min-width: 1025px) {
    
    #NHHeadingHolder {
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }    
    .NHHeadingSm {
        display: none;
    }
    .NHHeadingLg {
        margin: 0;
        padding: 13px 10px 14px 10px;
        font-size: 14px;
        color: #D0D0D0;
        border-radius: 10px;
        border: 2px solid #333;        
        background-color: #111;
    }
}

.NotHistBackbutt {
    float: left;
    height: 32px;  
    width: 100px;
    margin: 0;
    padding: 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;    
    border-radius: 8px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
    transition: all 0.4s linear;    
}
.NotHistBackbutt:hover {
    cursor: pointer;
    color: #0088FF;
    border: 2px solid #0088FF;
}
.DeletHistoryButt {
    float: right;
    height: 32px;  
    width: 100px;
    margin: 0;
    padding: 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;    
    border-radius: 8px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
    transition: all 0.4s linear; 
}
.DeletHistoryButt:hover {
    cursor: pointer;
    color: #ff0000;
    border: 2px solid #ff0000;
}

@media screen and (min-width: 320px) and (max-width: 991px) {   

    #NotHistButtHolder {
        margin: 0 0 46px 0; 
        padding: 0;
    }
    .NotHistBackbutt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .DeletHistoryButt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 992px) and (max-width: 1024px) {

    #NotHistButtHolder {
        margin: 0 0 16px 0; 
        padding: 0;
    }    
    .NotHistBackbutt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .DeletHistoryButt {
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) { 

    #NotHistButtHolder {
        margin: 0 0 16px 0; 
        padding: 0;
    }
    .NotHistBackbutt {
        border: 2px solid #333;
        background-color: #111; 
    }
    .DeletHistoryButt {
        border: 2px solid #333;
        background-color: #111; 
    }
}

/* /// Notification History - Table /// */

@media screen and (min-width: 320px) and (max-width: 991px) {

    #noNotificationsAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #noNotificationsAlertContainer {
        width: 100%;
        margin: 0 20px 0 20px;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    
    #noNotificationsAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 1200px) {
    
    #noNotificationsAlertContainer {
        margin: -2px 0 0 0;
        padding: 0;
    } 
}
.noNotificationsAlert {
    height: 60px;
    width: 100%;   
    margin: 0;
    padding: 20px 15px 20px 15px;
    color: #ff0000;
    text-align: center;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .noNotificationsAlert {   
        font-size: 12px; 
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .noNotificationsAlert {   
        font-size: 12px; 
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {
    
    .noNotificationsAlert {    
        font-size: 13px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

#notiDisplaytable {
    margin: 0;
}
#NotHistoryTableInner {
    margin: 0;
}
#NotHistoryTable table {
    width: 100%;
    border: transparent;
    border-collapse: collapse;
    background-color: transparent;
}
#NotHistoryTable thead {
    display: table;
    width: auto;
    table-layout: auto;
}
#NotHistoryTable tbody {
    overflow-x: hidden;
    display: block;
    width: 100%;
    overflow: auto;
    margin: -4px -5px 0 0; 
    padding: 0 10px 0 0;
}
.notifyButtholder {
    margin: 0;
    padding: 0 5px 0 5px;    
}
/*.NHopenButt {   
    color: #888;
    text-align: center;
    border-radius: 8px;   
    border: 2px solid #333;
    background-color: #111;          
    transition: all 0.4s linear;   
}
.NHopenButt:hover {
    cursor: pointer;
    color: #0088FF;
    border: 2px solid #0088FF;
    background-color: #1a1a1a;
}*/

@media screen and (min-width: 320px) and (max-width: 768px) {

    #NHtablefooterContainer {
        text-align: center;
        margin: 0 0 0 -5px;
        padding: 0; 
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    #NHtablefooterContainer {
        text-align: center;
        margin: 0; 
        padding: 0; 
    }  
}
@media screen and (min-width: 1025px) {

    #NHtablefooterContainer {
        text-align: center;
        margin: 0; 
        padding: 0; 
    }  
}

.NHmultiDeleteButtHolder {
    margin: 0; 
    padding: 0;
}
.NHmultiDelete {
    width: 130px;
    color: #666;
    font-size: 12px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.4s linear;   
}
.NHmultiDelete:hover {
    cursor: pointer;
    color: #ff0000;
    border: 2px solid #ff0000;       
    background-color: #111;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    .NHmultiDelete { 
        height: 32px;
        margin: 0 0 11px 1px;
        padding: 4px 0 4px 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {

    .NHmultiDelete {
        height: 32px;
        margin: 0 0 10px 1px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
      
    .NHmultiDelete {
        height: 32px;       
        margin: 0 0 5px 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
}
@media screen and (min-width: 1025px) {
         
    .NHmultiDelete {
        height: 32px;
        margin: 0 0 7px 0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
    }
}

@media screen and (min-width: 320px) and (max-width: 1023px) {

    #notiDisplaytable {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        border: none;
        background-color: none;
    }
    #NotHistoryTableInner {
        margin: 0;
        padding: 0 0 10px 0;
        background-color: #0a0a0a;
    }
    #NotHistoryTable {
        background-color: #0a0a0a;
    }
    #NotHistoryTable thead {
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotHistoryTable tbody {
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .NHopenButt {   
        color: #888;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #222;
        background-color: #0a0a0a;          
        transition: all 0.4s linear;   
    }
    .NHopenButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #notiDisplaytable {
        border-radius: 20px; 
        border: none;
        background-color: none;
    }
    #NotHistoryTableInner {
        margin: 0;
        padding: 5px 0 10px 0;
        background-color: #0a0a0a;
    }
    #NotHistoryTable {
        background-color: #0a0a0a;
    }
    #NotHistoryTable thead {
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    #NotHistoryTable tbody {
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
    }
    .NHopenButt {   
        color: #888;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #222;
        background-color: #0a0a0a;          
        transition: all 0.4s linear;   
    }
    .NHopenButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1025px) {

    #notiDisplaytable {
        border-radius: 20px; 
        border: none;
        background-color: none;
    }
    #NotHistoryTableInner {
        margin: 0;
        padding: 10px 0 10px 0;
        background-color: #111;
    }
    #NotHistoryTable {
        background-color: #111
    }
    #NotHistoryTable thead {
        border-bottom: 2px solid #222;
        background-color: #111;
    }
    #NotHistoryTable tbody {
        border-top: 2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
    .NHopenButt {   
        color: #888;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #111;          
        transition: all 0.4s linear;   
    }
    .NHopenButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}

/* ///// Only cells (1 + 2) ///// */ 

@media screen and (min-width: 320px) and (max-width: 340px) {

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 16%;
        padding-top: 7px;
        padding-right: 0;
        padding-left: 8px;   
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 16%;
        padding-right: 0;
        padding-left: 8px;   
    }
}
@media screen and (min-width: 341px) and (max-width: 381px) { 

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 14%;
        padding-top: 7px;
        padding-right: 0;
        padding-left: 8px;   
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 14%;
        padding-right: 0;
        padding-left: 8px;   
    }
}
@media screen and (min-width: 382px) and (max-width: 406px) {

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 13%;
        padding-top: 7px;
        padding-right: 0;
        padding-left: 8px;   
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 13%;
        padding-right: 0;
        padding-left: 8px;   
    }
}
@media screen and (min-width: 407px) and (max-width: 436px) {

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 12%;
        padding-top: 7px;
        padding-right: 0;
        padding-left: 8px;   
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 12%;
        padding-right: 0;
        padding-left: 8px;   
    }
}
@media screen and (min-width: 437px) and (max-width: 470px) {

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 11%;
        padding-top: 7px;
        padding-right: 0;
        padding-left: 8px;   
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 11%;
        padding-right: 0;
        padding-left: 8px;   
    }
}
@media screen and (min-width: 471px) and (max-width: 508px) { /* finish cell (1) */

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 10%;
        padding-top: 7px;
        padding-right: 0;
        padding-left: 8px;   
    }    
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 10%;
        padding-right: 0;
        padding-left: 8px;   
    }
}

@media screen and (min-width: 320px) and (max-width: 508px) {

    /*/////////////// Head + Body ///////////////*/

    #NotHistoryTable thead {
        margin: 0 10px 0 0;
    }
    #NotHistoryTable thead th {
        font-size: 9px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 306px;
    }
    #NotHistoryTable tbody td {
        font-size: 10px;
    }    
    .NHopenButt {
        height: 30px;
        width: 100%;
        margin: 0;
        padding: 3px 4px 4px 4px;     
        font-size: 12px;
    }
    .theadSpacer {
        padding-right: 0;
        padding-left: 0;
    }

    /*/////////////// Only cells (3 + 4 + 5) ///////////////*/

    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */ 
        width: 26.5%;
        padding-right: 0;
        padding-left: 5px;
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */ 
        width: 17%;
        padding-right: 0;
        padding-left: 5px;
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */
        width: 19%;
        padding-right: 0;
        padding-left: 0;
    }    
}
@media screen and (min-width: 509px) and (max-width: 574px) { /* Continue with whole table + change font size t0 11px */
    
    /*/////////////// Head + Body ///////////////*/

    #NotHistoryTable thead {
        margin: 0 10px 0 0;
    }
    #NotHistoryTable thead th {
        font-size: 11px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 306px;
    }
    #NotHistoryTable tbody td {
        font-size: 11px;
    }    
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 3.5px 4px 4px 4px;     
        font-size: 12px;
    }
    .theadSpacer {
        width: 100%;
        padding-right: 5px;
        padding-left: 5px;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 10%;
        padding-top: 7.5px;
        padding-right: 0;
        padding-left: 11px;   
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 10%;
        padding-right: 0;
        padding-left: 8px;   
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */ 
        width: 23%;
        padding-right: 0;
        padding-left: 8px;
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */
        width: 12%;
        padding-right: 0;
        padding-left: 5px;
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */
        width: 12%;
        padding-right: 0;
        padding-left: 0;
    }
}
@media screen and (min-width: 575px) and (max-width: 629px) { /* change font size to th-13px & td-12px */
    
    /*/////////////// Head + Body ///////////////*/

    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 306px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 2.5px 4px 4px 4px;     
        font-size: 12px;
    }
    .theadSpacer {
        width: 50px;
        margin: 0 10px 0 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 8%;
        padding-top: 7.5px;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */
        width: 21%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */
        width: 11%;
        padding-right: 0;
        padding-left: 11px;
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */
        width: 6%;
        padding-right: 0;
        padding-left: 0;  
    }
}
@media screen and (min-width: 630px) and (max-width: 722px) {
    
    /*/////////////// Head + Body ///////////////*/

    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 306px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 4px;     
        font-size: 12px;
    }
    .theadSpacer { 
        width: 50px;
        margin: 0 15px 0 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */ 
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */ 
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */
        width: 21%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */ 
        width: 11%;
        padding-right: 0;
        padding-left: 11px;
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */ 
        width: 6%;
        padding-right: 0;
        padding-left: 0;  
    }
}
@media screen and (min-width: 723px) and (max-width: 767px) {
    
    /*/////////////// Head + Body ///////////////*/
    
    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 306px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 4px;     
        font-size: 12px;
    }
    .theadSpacer { 
        width: 50px;
        margin: 0 15px 0 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */  
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */  
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */  
        width: 21%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */  
        width: 10%;
        padding-right: 0;
        padding-left: 11px;
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */  
        width: 6%;
        padding-right: 0;
        padding-left: 0;  
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) { /* 768 + 800 + 823 + 854 + 914 + 915 + 960 + 990 */
    
    /*/////////////// Head + Body ///////////////*/
    
    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 420px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 4px 0 4px 0;     
        font-size: 12px;
    }
    .theadSpacer {
        width: 50px;
        margin: 0 28px 0 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */ 
        width: 8%;
        padding-right: 0;
        padding-left: 15px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */ 
        width: 8%;
        padding-right: 0;
        padding-left: 15px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */ 
        width: 21%;
        padding-right: 0;
        padding-left: 11px;    
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */ 
        width: 10%;
        padding-right: 0;
        padding-left: 11px;    
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */ 
        width: 10%;
        padding-right: 0;
        padding-left: 0;    
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
    
    /*/////////////// Head + Body ///////////////*/
    
    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 420px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 4px 0 4px 0;     
        font-size: 12px;
    }
    .theadSpacer {
        width: 50px;
        margin: 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */ 
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */ 
        width: 21%;
        padding-right: 0;
        padding-left: 11px;    
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */ 
        width: 10.5%;
        padding-right: 0;
        padding-left: 11px;    
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */ 
        width: 10%;
        padding-right: 0;
        padding-left: 0;    
    }
}
@media screen and (min-width: 1025px) and (max-width: 1130px) { /* 1130 */
    
    /*/////////////// Head + Body ///////////////*/
    
    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 420px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 4px 0 4px 0;     
        font-size: 12px;
    }
    .theadSpacer {
        width: 50px;
        margin: 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */
        width: 21%;
        padding-right: 0;
        padding-left: 11px;    
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */
        width: 10.5%;
        padding-right: 0;
        padding-left: 11px;    
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */
        width: 10%;
        padding-right: 0;
        padding-left: 0;    
    }
}
@media screen and (min-width: 1131px) and (max-width: 1199px) { /* 1180 */
    
    /*/////////////// Head + Body ///////////////*/
    
    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 420px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 4px 0 4px 0;     
        font-size: 12px;
    }
    .theadSpacer {
        width: 50px;
        margin: 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */
        width: 21%;
        padding-right: 0;
        padding-left: 11px;    
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */
        width: 10.5%;
        padding-right: 0;
        padding-left: 11px;    
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */
        width: 10%;
        padding-right: 0;
        padding-left: 0;    
    }
}
@media screen and (min-width: 1200px) {
    
    /*/////////////// Head + Body ///////////////*/
    
    #NotHistoryTable thead th {
        font-size: 13px;
        color: #999;
    }
    #NotHistoryTable tbody {
        height: auto;
        max-height: 420px;
    }
    #NotHistoryTable tbody td {
        font-size: 12px;
    }
    .NHopenButt {
        height: 32px;
        width: 100%;
        margin: 0;
        padding: 4px 0 4px 0;     
        font-size: 12px;
    }
    .theadSpacer {
        width: 50px;
        margin: 0 23px 0 0;
        padding: 0;
    }

    #NotHistoryTable thead th:nth-child(1),
    #NotHistoryTable tbody td:nth-child(1) { /* Check box */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(2),
    #NotHistoryTable tbody td:nth-child(2) { /* Sent On */
        width: 8%;
        padding-right: 0;
        padding-left: 11px;
    }
    #NotHistoryTable thead th:nth-child(3),
    #NotHistoryTable tbody td:nth-child(3) { /* Subject */
        width: 21%;
        padding-right: 0;
        padding-left: 11px;    
    }
    #NotHistoryTable thead th:nth-child(4),
    #NotHistoryTable tbody td:nth-child(4) { /* Notified */
        width: 10%;
        padding-right: 0;
        padding-left: 11px;    
    }    
    #NotHistoryTable thead th:nth-child(5),
    #NotHistoryTable tbody td:nth-child(5) { /* Spacer */
        width: 10%;
        padding-right: 0;
        padding-left: 0;    
    }
}

/* // Notification history Table Scroll // */

/* //// firefox & chrome //// */

#NotHistoryTable tbody {
    scrollbar-width: none;
    scrollbar-color: #ff0000 #000000 !important;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #NotHistoryTable tbody tr:nth-child(odd) {
        background-color: #0a0a0a;
    }
    #NotHistoryTable tbody tr:nth-child(even) {
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    #NotHistoryTable tbody tr:nth-child(odd) {
        background-color: #101010;
    }
    #NotHistoryTable tbody tr:nth-child(even) {
        background-color: #101010;
    }
}

@media screen and (min-width: 320px) and (max-width: 574px) {

    .dataWrapper {
        padding-top: 9px;
        word-break: break-word;
    }
    .notifyWrapper {
        padding-top: 9px;
        word-break: break-word;
        color: #ff9900;
    }
}
@media screen and (min-width: 575px) and (max-width: 599px) {

    .dataWrapper {
        padding-top: 7px;
        word-break: break-word;
    }
    .notifyWrapper {
        padding-top: 7px;
        word-break: break-word;
        color: #ff9900;
    }
}
@media screen and (min-width: 600px) {

    .dataWrapper {
        padding-top: 7px;
        word-break: break-word;
    }
    .notifyWrapper {
        padding-top: 7px;
        word-break: break-word;
        color: #ff9900;
    }
}

#NotHistoryTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/* /// For Display CSS goto (email-history-select-style.css) /// */

/* //////////// END - Notification History - Table ///////////// */

/* ////////////// END - NOTIFICATION HISTORY PAGE ////////////// */

/* ============================================================= */

/* ////////////// NOTIFICATION HISTORY SELECT PAGE ///////////// */

#NotHistDisplayButtons {
    margin: 0 0 16px 0; 
    padding: 20px 20px 0 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;   
}

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #NotHistDisplayContainer {
        width: 100%; 
        margin: 75px 0 0 0; 
        padding: 0;
    }
    #NotHistDisplayColumn {
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #NotHistDisplayButtons {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) { /* 600 */
    
    #NotHistDisplayContainer {
        width: 100%; 
        margin: 75px 0 0 0; 
        padding: 0;
    }    
    #NotHistDisplayColumn {
        margin: 0; 
        padding: 0 30px 0 30px;
    }
    #NotHistDisplayButtons {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */
    
    #NotHistDisplayContainer {
        width: 752.75px;
        margin: 65px auto 0 auto; 
        padding: 0;
    }    
    #NotHistDisplayColumn {
        margin: 0; 
        padding: 0 38px 0 38px;
    }
    #NotHistDisplayButtons {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 800px) and (max-width: 812px) { /* 800 */
    
    #NotHistDisplayContainer {
        width: 752.75px;
        margin: 65px auto 0 auto; 
        padding: 0;
    }    
    #NotHistDisplayColumn {   
        margin: 0;
        padding: 0 38px 0 38px;
    }
    #NotHistDisplayButtons {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 813px) and (max-width: 853px) { /* 823 */
    
    #NotHistDisplayContainer {
        width: 752.75px; 
        margin: 65px auto 0 auto;  
        padding: 0;
    }    
    #NotHistDisplayColumn {
        margin: 0;
        padding: 0 36px 0 36px;
    }
    #NotHistDisplayButtons {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 854px) and (max-width: 960px) { /* 854 + 914 + 915 + 960 */
    
    #NotHistDisplayContainer {
        width: 752.75px;
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #NotHistDisplayColumn {
        margin: 65px auto 0 auto; 
        padding: 0 31px 0 31px;
    }
    #NotHistDisplayButtons {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
    
    #NotHistDisplayContainer {
        width: 100%;
        margin: 0; 
        padding: 0;
    }    
    #NotHistDisplayColumn {
        width: 752.75px;
        margin: 66px 0 0 0; 
        padding: 0 20px 0 7px;
    }
    #NotHistDisplayButtons {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #NotHistDisplayContainer {
        width: 100%;
    }
    #NotHistDisplayColumn {
        width: 752.75px;
        margin: 66px 0 0 -24px;
        padding: 0 20px 0 0;
    }
    #NotHistDisplayButtons {
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1200px) { /* 1180 */

    #NotHistDisplayContainer {
        width: 68.5%;
    }
    #NotHistDisplayColumn {
        width: 752.75px;
        margin: 65px 0 0 66px;
        padding: 0 20px 0 0;
    }
    #NotHistDisplayButtons {
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1201px) {
    
    #NotHistDisplayContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #NotHistDisplayColumn {
        width: 65%;
        margin: 0 0 0 -24.5px;
        padding: 0;
    }
    #NotHistDisplayButtons {
        border: 2px solid #333;
        background-color: #111;
    }
}

/* // END - NOTIFICATION HISTORY SELECT PAGE /// */

/* ============================================= */

/* ////////// SUPPORTED ARTIST PAGE //////////// */

#SupArtColumn {
    padding: 20px 20px 0 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#suggestedArtColumn {
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#suggestedArtistsContainer {
    margin: 0 0 13px 0;
    padding: 0;
}
#supportedTableFrame {
    width: 100%;
    padding: 0;
    margin-bottom: 0;
}

@media screen and (min-width: 320px) and (max-width: 475px) {
    
    #SupArtContainer {
        width: 100%;
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0;
        padding: 0;
    } 
    #SupArtColumnOuter {
        margin: 0; 
        padding: 0;        
    }
    #SupArtColumn {
        margin: 75px 10px 15px 10px; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        margin: 0 10px 15px 10px; 
        padding: 20px 20px 5px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }    
}
@media screen and (min-width: 476px) and (max-width: 599px) {
    
    #SupArtContainer {
        width: 100%;
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0; 
        padding: 0;
    } 
    #SupArtColumnOuter {
        margin: 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 75px 10px 15px 10px; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        margin: 0 10px 15px 10px; 
        padding: 20px 20px 5px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }    
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 */
    
    #SupArtContainer {
        width: 98%;
    }
    #SupArtHolder {
        margin: 0; 
        padding: 0;
    }  
    #SupArtColumnOuter {
        margin: 0 0 400px 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 75px 0 15px 0; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        float: left;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 20px 20px 6px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #supportedTableFrame {
        background-color: #0a0a0a;
    }   
    #fixUpdateTriangleSA {
        display: none; 
    }    
}
@media screen and (min-width: 733px) and (max-width: 767px) {

    #SupArtContainer {
        width: 90%;
    }
    #SupArtHolder {
        margin: 0; 
        padding: 0;
    }  
    #SupArtColumnOuter {
        margin: 0 0 400px 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 75px 0 15px 0; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        float: left;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 20px 20px 6px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }    
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */

    #SupArtContainer {
        width: 90%;
    }
    #SupArtHolder {
        margin: 0; 
        padding: 0;
    }    
    #SupArtColumnOuter {
        margin: 0 0 400px 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 65px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        float: left;
        height: 100%;
        width: 100%;
        margin: 0;  
        padding: 20px 20px 5px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #SupArtContainer {
        width: 90%;
    }
    #SupArtHolder {
        margin: 0; 
        padding: 0;
    }
    #SupArtColumnOuter {
        margin: 0 0 400px 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 65px 0 15px 0; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        float: left;
        height: 100%;
        width: 100%;
        margin: 0; 
        padding: 20px 20px 6px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }
}
@media screen and (min-width: 801px) and (max-width: 824px) { /* 823 */

    #SupArtContainer {
        width: 80%;
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0;
        padding: 0;
    }
    #SupArtColumnOuter {
        margin: 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 65px 0 15px 0; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        float: left;
        height: 100%;
        width: 100%;
        margin: 0; 
        padding: 20px 20px 6px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) { /* 854 + 960 */

    #SupArtContainer {
        width: 80%;
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0;
        padding: 0;
    }
    #SupArtColumnOuter {
        margin: 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 65px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        float: left;
        height: 100%;
        width: 100%;
        margin: 0; 
        padding: 20px 20px 6px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }
}
@media screen and (min-width: 961px) and (max-width: 991px) { /* 990 */

    #SupArtContainer {
        width: 70%;
        margin: 0 0 0 262px;
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0;
        padding: 0;
    }
    #SupArtColumnOuter {
        margin: 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 65px 0 15px 0; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        float: left;
        height: 100%;
        width: 100%;
        margin: 0; 
        padding: 20px 20px 5px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }    
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #SupArtContainer {
        width: 100%;
        margin: 0 0 0 9px;
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0;
        padding: 0;
    }
    #SupArtColumnOuter {
        width: 84%;
        margin: 0; 
        padding: 0; 
    }
    #SupArtColumn {
        margin: 66px 0 15px 0;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        height: 100%;
        width: 100%;
        margin: 0;  
        padding: 20px 20px 6px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        display: none; 
    }    
}

/* //////////////////////////////////////////////////////////// */

@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
    
    #SupArtContainer {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0;
        padding: 0;
    }
    #SupArtColumnOuter {
        width: 82%;
        margin: 66px 0 0 7px; 
        padding: 0 5px 0 0;        
    }
    #SupArtColumn {
        height: 100%;
        margin: 0 0 15px 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #suggestedArtColumn {
        height: 100%;
        width: 100%;
        margin: 0 0 20px 0;
        padding: 20px 20px 5px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #supportedTableFrame {
        background-color: #0a0a0a;
    }
    #fixUpdateTriangleSA {
        margin-left: -15px;
        margin-right: 4px;
        margin-bottom: 0.5px;
        font-size: 12px;  
    }    
}
@media screen and (min-width: 1025px) and (max-width: 1149px) { /* 1138 */
    
    #SupArtContainer {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #SupArtHolder {
        margin: 0 0 400px 0; 
        padding: 0;
    }
    #SupArtColumnOuter {
        width: 78%;
        margin: 66px 0 0 8px; 
        padding: 0 5px 0 0;        
    }
    #SupArtColumn {
        height: 100%;
        margin: 0 0 15px 0;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #suggestedArtColumn {
        height: 100%;
        width: 100%;
        margin: 0 0 20px 0; 
        padding: 20px 20px 5.5px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #supportedTableFrame {
        background-color: #111;
    }
    #fixUpdateTriangleSA {
        margin-right: 4px;
        margin-left: 0; 
        margin-bottom: 0.5px;
        font-size: 12px; 
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #SupArtContainer {
        width: 100%;
        margin: 0; 
        padding: 0;
    }   
    #SupArtHolder {
        margin: 0 0 400px 0; 
        padding: 0;
    }
    #SupArtColumnOuter {
        width: 75%;
        margin: 66px 0 0 -27px; 
        padding: 0 5px 0 0;        
    }       
    #SupArtColumn {
        height: 100%;
        margin: 0 0 15px 0;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #suggestedArtColumn {
        height: 100%;
        width: 100%;
        margin: 0 0 20px 0;
        padding: 20px 20px 6px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #supportedTableFrame {
        background-color: #111;
    }
    #fixUpdateTriangleSA {
        margin-right: 4px;
        margin-left: 0; 
        margin-bottom: 0.5px;
        font-size: 12px; 
    }
}
@media screen and (min-width: 1200px) {
    
    #SupArtContainer {
        margin: 66px 0 0 0;
        padding: 0 ;
    }
    #SupArtHolder {
        margin: 0 0 400px 0; 
        padding: 0;
    }
    #SupArtColumnOuter {
        margin: 0 0 0 -24.5px; 
        padding: 0;        
    }    
    #SupArtColumn {
        height: 100%;
        margin: 0 0 15px 0;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #suggestedArtColumn {
        height: 100%;
        width: 100%;
        margin: 0 0 20px 0;
        padding: 20px 20px 5px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #supportedTableFrame {
        background-color: #111;
    }
    #fixUpdateTriangleSA {
        margin-right: 4px;
        margin-left: 0; 
        margin-bottom: 0.5px;
        font-size: 12px; 
    }
}

/* ///// No Supported Artist Alert //// */

@media screen and (min-width: 320px) and (max-width: 991px) {

    #noSupArtAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

    #noSupArtAlertContainer {
        width: 100%;
        margin: 0 20px 0 20px;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    
    #noSupArtAlertContainer {
        margin: 0;
        padding: 0;
    } 
}
@media screen and (min-width: 1200px) {
    
    #noSupArtAlertContainer {
        margin: 0;
        padding: 0;
    } 
}

.noSupArtAlert {
    height: 60px;
    width: 100%;   
    margin: 10px 0 20px 0;
    padding: 20px 15px 20px 15px;
    color: #ff0000;
    text-align: center;
/*    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;*/
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    .noSupArtAlert {   
        font-size: 12px; 
        border-radius: 10px;
/*        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .noSupArtAlert {   
        font-size: 12px; 
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {
    
    .noSupArtAlert {    
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
    }
}

/*#emptySupArt {
    margin: 0;
    padding: 0;    
}
#emptySupArtHeading {
    height: 38px;
    width: 100%;
    margin: 0;
    padding: 10px 10px 9px 10px;
    color: #ff0000;
    border-radius: 8px;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    #emptySupArtHeading {   
        font-size: 12px; 
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {
    
    #emptySupArtHeading {    
        font-size: 13px;
        border: 2px solid #333;
        background-color: #111;
    }
}*/

.cancelledPledgeAlertArtist {
    width: auto;
    margin: -7px auto 8px auto;
    padding: 10px;
    color: #FF0000;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    text-align: center;
    border-radius: 6px;
    background-color: #111;        
}    

/* /////// Supported Artists Table /////// */

#supportedTable table {
    width: 100%;
    border-collapse: collapse;
    border: transparent;
    background-color: transparent;
}
#supportedTable thead {
    display: table;
    width: 100%;
    margin-right: 10px;
    table-layout: auto;
}
#supportedTable thead th {
    padding-top: 0;
    padding-bottom: 0;    
    color: #999;
    font-size: calc(10px + 0.2vw);     
    font-weight: 600;
}
#supportedTable th {
   background-color: transparent;
}
#supportedTable tbody {
    display: inline-block;
    width: 100%;
    margin: 4px 0 0 0; 
    padding: 0;
}
#supportedTable tbody tr td {
    padding-top: 2px;
    padding-bottom: 2px;
}
#supportedTable tbody tr td img {
    margin-top: 7.5px;
    margin-left: 16px;
}

/* ///////////// Supported Artists Table - Header ////////////// */

@media screen and (min-width:  320px) and (max-width:  359px) {

    #supportedTable thead th { 
        font-size: 10px;
        padding-left: 10px;
    }
}
@media screen and (min-width:  360px) and (max-width:  376px) {

    #supportedTable thead th { 
        font-size: 10px;
        padding-left: 10px;
    }
}
@media screen and (min-width:  377px) and (max-width:  413px) {
  
    #supportedTable thead th { 
        font-size: 10px;
        padding-left: 10px;
    }
}
@media screen and (min-width:  414px) and (max-width:  480px) {
      
    #supportedTable thead th { 
        font-size: 12px;
        padding-left: 10px;
    }     
}
@media screen and (min-width:  481px) and (max-width:  600px) {
            
    #supportedTable thead th { 
        font-size: 12px;
        padding-left: 10px;
    }
}
@media screen and (min-width:  601px) and (max-width:  732px) {
        
    #supportedTable thead th { 
        font-size: 12px;
        padding-left: 10px;
    }     
}
@media screen and (min-width:  733px) and (max-width:  767px) {
          
    #supportedTable thead th { 
        font-size: 12px;
        padding-left: 10px;
    }
}
@media screen and (min-width:  768px) and (max-width: 1023px) {
    
    #supportedTable thead th {
        font-size: 12px;
        padding-left: 10px;
    } 
}   
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #supportedTable thead th {
        padding-left: 10px;
    }
}
@media screen and (min-width: 1025px) {
      
    #supportedTable thead th {
        padding-left: 10px;
    }
}

/* ///////////// Supported Artists Table - Head + Body style //// */

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #supportedTable {
        background-color: #0a0a0a;
    }
    #supportedTable thead {
        border-bottom: 3px solid #0a0a0a;
    }
    #supportedTable tbody {
        border-radius: 10px;
        border-top: 2px solid #222;
    }
    #supportedTable tbody tr {
        background-color: #0a0a0a;
    }
    #supportedTable tbody tr:hover {   
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) {

    #supportedTable {
        background-color: #111;
    }
    #supportedTable thead {
        border-bottom: 3px solid #111;
    }
    #supportedTable tbody {
        border-radius: 10px;
        border-top: 2px solid #333;
    }
    #supportedTable tbody tr {
        background-color: #111;
    }
    #supportedTable tbody tr:hover {   
        background-color: #1c1c1c;
    }
}

#supportedTable thead th:nth-child(1), 
#supportedTable tbody td:nth-child(1) {
    width: 64%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#supportedTable thead th:nth-child(2),
#supportedTable tbody td:nth-child(2) {
    width: 25%;
}
#supportedTable thead th:nth-child(3),
#supportedTable tbody td:nth-child(3) {
    width: 25%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#supportedTable tbody td {
    border-top: transparent;
    border-bottom: 2px solid #0a0a0a;
}

/* //// END - Supported Artist Table //// */

/* //// START - current gigs scroller (Artist) //// */

#NextGigA {
    margin: 0;
    padding: 0;    
}
@media screen and (min-width: 320px) and (max-width: 431px) {

    #nextGigHeadingHolderA {
        margin: 0 10px 15px 10px;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;  
    }
    #currentGigsSmallA {
        margin: 0 0 15px 0;
        padding: 0;
    }
    #currentGigsMediumA {
        display: none;
    }
    #currentGigsLargeA {
        display: none;
    }  
    #currentGigsForArtist {
        margin: 0 10px 15px 10px;
        padding: 0 0 9.5px 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }
    .nextGigColumnInnerA {
        margin: 20px 0 15px 0;
        padding: 0;
    }

    /* no gigs */

    #nextGigColumnA {
        height: 100px;
        margin: 0;
        padding: 34px 20px 0 20px;
    }

    /* 1 to 4 gigs static */

    #nextGigColumnAstatic {
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nextGigColumnInnerAstatic { 
        margin: 15px 0 0 0;
        padding: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }
    
    /* 5 or more gigs auto-scroll */

    #nextGigColumnAscroll {    
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
    }
}
@media screen and (min-width: 432px) and (max-width: 475px) {

    #nextGigHeadingHolderA {
        margin: 0 10px 15px 10px;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a; 
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;  
    }
    #currentGigsSmallA {
        display: none;
    }
    #currentGigsMediumA {
        margin: 0 0 15px 0;
        padding: 0;
    }
    #currentGigsLargeA {
        display: none;
    }  
    #currentGigsForArtist {
        margin: 0 10px 15px 10px;
        padding: 0 0 9.5px 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }
    .nextGigColumnInnerA {
        margin: 20px 0 15px 0;
        padding: 0;
    }

    /* no gigs */

    #nextGigColumnA {
        height: 100px;
        margin: 0;
        padding: 34px 20px 0 20px;
    }

    /* 1 to 4 gigs static */

    #nextGigColumnAstatic {
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nextGigColumnInnerAstatic { 
        margin: 15px 0 0 0;
        padding: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }
    
    /* 5 or more gigs auto-scroll */

    #nextGigColumnAscroll {    
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
    }
}
@media screen and (min-width: 476px) and (max-width: 599px) {

    #nextGigHeadingHolderA {
        margin: 0 10px 15px 10px;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;  
    }
    #currentGigsSmallA {
        display: none;
    }
    #currentGigsMediumA {
        margin: 0 0 15px 0;
        padding: 0;
    }
    #currentGigsLargeA {
        display: none;
    }    
    #currentGigsForArtist {
        margin: 0 10px 15px 10px;
        padding: 0 0 9.5px 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }
    .nextGigColumnInnerA {
        margin: 20px 0 15px 0;
        padding: 0;
    }

    /* no gigs */

    #nextGigColumnA {
        height: 100px;
        margin: 0;
        padding: 34px 20px 0 20px;
    }

    /* 1 to 4 gigs static */

    #nextGigColumnAstatic {
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nextGigColumnInnerAstatic { 
        margin: 15px 0 0 0;
        padding: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }
    
    /* 5 or more gigs auto-scroll */

    #nextGigColumnAscroll {    
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #nextGigHeadingHolderA {
        margin: 0 0 15px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;  
    }
    #currentGigsSmallA {
        display: none;
    }
    #currentGigsMediumA {
        margin: 0 0 15px 0;
        padding: 0;
    }
    #currentGigsLargeA {
        display: none;
    } 
    #currentGigsForArtist {
        float: right;
        width: 100%;
        margin: 0 0 15px 15px;
        padding: 0 0 9.5px 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }
    .nextGigColumnInnerA {
        margin: 20px 0 15px 0;
        padding: 0;
    }

    /* no gigs */

    #nextGigColumnA {    
        overflow: hidden;
        height: 100px;
        margin: 0;
        padding: 34px 20px 0 20px;
    }
   
    /* 1 to 4 gigs static */

    #nextGigColumnAstatic {
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nextGigColumnInnerAstatic { 
        margin: 15px 0 0 0;
        padding: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }
    
    /* 5 or more gigs auto-scroll */

    #nextGigColumnAscroll {    
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    #nextGigHeadingHolderA {
        margin: 0 0 15px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;   
    }
    #currentGigsSmallA {
        display: none;
    }
    #currentGigsMediumA {
        display: none;
    }
    #currentGigsLargeA {
        margin: 0;
        padding: 0;
    }  
    #currentGigsForArtist { 
        float: right;
        width: 100%;
        margin: 0 0 15px 0;
        padding: 0 0 9.5px 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;
    }
    .nextGigColumnInnerA {
        margin: 20px 0 15px 0;
        padding: 0;
    }

    /* no gigs */

    #nextGigColumnA {    
        overflow: hidden;
        height: 100px;
        margin: 0;
        padding: 34px 20px 0 20px;
    }
    
    /* 1 to 4 gigs static */

    #nextGigColumnAstatic {
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nextGigColumnInnerAstatic { 
        margin: 15px 0 0 0;
        padding: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }
    
    /* 5 or more gigs auto-scroll */

    #nextGigColumnAscroll {    
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #nextGigHeadingHolderA {
        margin: 0 0 15px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px #1b1b1b;  
    }
    #currentGigsSmallA {
        display: none;
    }
    #currentGigsMediumA {
        display: none;
    }
    #currentGigsLargeA {
        margin: 0;
        padding: 0;
    }  
    #currentGigsForArtist {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 0 0 9.5px 0;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .nextGigColumnInnerA {
        margin: 20px 0 15px 0;
        padding: 0;
    }

    /* no gigs */

    #nextGigColumnA {    
        overflow: hidden;
        height: 100px;
        margin: 0;
        padding: 34px 20px 0 20px;
    }
    
    /* 1 to 4 gigs static */

    #nextGigColumnAstatic {
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nextGigColumnInnerAstatic { 
        margin: 15px 0 0 0;
        padding: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }
    
    /* 5 or more gigs auto-scroll */

    #nextGigColumnAscroll {    
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
    }
}
@media screen and (min-width: 1025px) {
    
    #nextGigHeadingHolderA {
        margin: 0 0 15px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;  
    }
    #currentGigsSmallA {
        display: none;
    }
    #currentGigsMediumA {
        display: none;
    }
    #currentGigsLargeA {
        margin: 0;
        padding: 0;
    }  
    #currentGigsForArtist {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 0 0 9.5px 0;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    .nextGigColumnInnerA {
        margin: 20px 0 15px 0;
        padding: 0;
    }

    /* no gigs */
    
    #nextGigColumnA {    
        overflow: hidden;
        height: 100px;
        margin: 0;
        padding: 34px 20px 0 20px;
    }

    /* 1 to 4 gigs static */
    
    #nextGigColumnAstatic {
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nextGigColumnInnerAstatic { 
        margin: 15px 0 0 0;
        padding: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }

    /* 5 or more gigs auto-scroll */
    
    #nextGigColumnAscroll {    
        overflow: hidden;
        margin: 0;
        padding: 0 15px 0 15px;
    }
}

/* //// Current Gigs Cradle Scroll (Artist) //// */

#nextGigCradleA {
    position: relative;
    overflow: hidden;
    height: 246px;
    margin: 0;
    padding: 0;
}
#nextGigCradleScrollA { /* content of scroll */
    position: absolute;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 110px;
    top: 0;  
}

@media screen and (min-width: 320px) and (max-width: 431px) {
    
    /* Small Screen */

    #nextGigCradleAsm {
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0;
        padding: 0;
    }
    #nextGigCradleScrollAsm {
        position: relative;
        display: inline-flex;
        height: 100%;
        width: auto;
        top: 0;
        left: 0;
        flex-wrap: nowrap;
    }

    /* Medium Screen */

    #nextGigCradleAmd {
        display: none;
    }
    #nextGigCradleScrollAmd {
        display: none;
    }

    /* Large Screen */

    #nextGigCradleAlg {
        display: none;
    }
    #nextGigCradleScrollAlg {
        display: none;  
    }    
}
@media screen and (min-width: 432px) and (max-width: 767px) {
    
    /* Small Screen */

    #nextGigCradleAsm {
        display: none;
    }
    #nextGigCradleScrollAsm {
        display: none;;
    }

    /* Medium Screen */

    #nextGigCradleAmd {
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0;
        padding: 0;
    }
    #nextGigCradleScrollAmd {
        position: relative;
        display: inline-flex;
        height: 100%;
        width: auto;
        top: 0;
        left: 0;
        flex-wrap: nowrap;
    }

    /* Large Screen */

    #nextGigCradleAlg {
        display: none;
    }
    #nextGigCradleScrollAlg {
        display: none;  
    }    
}
@media screen and (min-width: 768px) {
    
    /* Small Screen */

    #nextGigCradleAsm { /* container of scroll */
        display: none;
    }
    #nextGigCradleScrollAsm { /* content of scroll */
        display: none;  
    }

    /* Medium Screen */

    #nextGigCradleAmd { /* container of scroll */
        display: none; 
    }
    #nextGigCradleScrollAmd { /* Content of scroll */
        display: none; 
    }

    /* Large Screen */
    
    #nextGigCradleAlg {  /* container of scroll */
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0;
        padding: 0 0 0 0;
    }
    #nextGigCradleScrollAlg { /* Content of scroll */
        position: relative;
        display: inline-flex;
        height: 100%;
        width: auto; /* CRUCIAL: Must be auto to allow content to overflow */
        top: 0;
        left: 0;
        flex-wrap: nowrap; /* CRUCIAL: Ensures all cards are on one line */
    }
}

/* Hide horizontal scrollbar for the scroll-jacking effect */
#nextGigCradleAlg {
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
}
#nextGigCradleAlg::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
}

@media screen and (min-width: 320px) and (max-width: 1137px) {
    
    #nextGigCradleScrollAsm { /* content of scroll */
        padding-top: 0;
        padding-bottom: 0;    
    }
}
@media screen and (min-width: 1138px) {

    #nextGigCradleScrollAlg { /* content of scroll */
        padding-top: 0;
        padding-bottom: 0;      
    }
}

/* //// END - current gigs scroller (Artist) //// */

/*/////////////////////////////////////////////// */

/* //// Current Gigs Cradle Scroll (Artist) ///// */

/* //// gig card (Artist) //// */

.swiper-slide {
    flex-shrink: 0;
}
.artistCardNoGigs {
    text-align: center;
    border-radius: 12px;
    cursor: default;
}    
.artistCardGigStatic {
    border-radius: 12px;
    transition: all 0.3s linear; 
}
.artistCardGigStatic:hover {
    background-color: #000;
}
.artistCardGig {
    border-radius: 12px;
    transition: all 0.3s linear; 
}
.artistCardGig:hover {
    background-color: #000;
}
.nextGigArtistA {
    margin: 0 0 3px 0;
    padding: 0 6px 0 6px;
    color: #888;
    font-size: 11px;
    word-break: normal;
}
.nextGigTitleA {
    margin: 0;
    padding: 0 20px 0 20px;
    color: #fff;
    font-size: 11px;
    word-break: normal;
}
.nextGigVenueA {
    margin: 9px 0 0 0; 
    padding: 0;
    color: #D0D0D0;
    font-size: 10px;
}
.nextGigTimeCodeA {
    margin: 3px 0 6px 0;
    padding: 0;
    font-size: 9px; 
    color: #777;
} 

@media screen and (min-width: 320px) and (max-width: 360px) {

    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic { /* narrower from small screens 320 - 360 */
        position: relative;
        height: 240px;
        width: 128px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 105px;
        width: 105px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 205px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 90px;
        width: 86%;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 361px) and (max-width: 376px) {

    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 149px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 125px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 205px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 90px;
        width: 88%;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 377px) and (max-width: 431px) {
    
    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 149px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 125px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 220px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 110px;
        width: 88%;          
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigTitleA {
        padding: 0 10px 0 10px;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 432px) and (max-width: 475px) {
    
    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 117px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 85%;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig { /* taller from small screens 431 - 475 */
        position: relative;
        height: 230px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 110px;
        width: 88%;          
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigTitleA {
        padding: 0 10px 0 10px;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 476px) and (max-width: 599px) {
    
    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 132px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 85%;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 224px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 110px;
        width: 88%;          
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigTitleA {
        padding: 0 8px 0 8px;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 600px) and (max-width: 800px) {
    
    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 160px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 87%;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 224px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 110px;
        width: 88%;          
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigTitleA {
        padding: 0 8px 0 8px;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 149px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 125px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 224px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 110px;
        width: 88%;          
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigTitleA {
        padding: 0 22px 0 22px;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
     
    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 149px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 125px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 240px;
        width: 140px;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .artistGigPoster {
        height: 119px;
        width: 119px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 6px 0 0 0;
        padding: 0;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 10px;
        font-weight: 600;
    }
}
@media screen and (min-width: 1025px) {
    
    .artistCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    .artistCardGigStatic {
        position: relative;
        height: 240px;
        width: 149px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 5px 5px 5px;
        padding: 10px 0 0 0;
        border: 2px solid #333;
        background-color: #111;
    }
    .artistGigPosterStatic {
        height: 125px;
        width: 125px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .artistCardGig {
        position: relative;
        height: 240px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 15px 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #333;
        background-color: #111;
    }
    .artistGigPoster {
        height: 125px;
        width: 125px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataA {
        margin: 9px 0 0 0;
        padding: 0;
    }
    .nextGigDetailsA {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0;
    }
    .nextGigDateA {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 10px;
        font-weight: 600;
    }
}

/* //// END - current gigs scroller (Artist) //// */

/* /////// END - SUPPORTED ARTIST PAGE ////////// */

/* ============================================== */

/* ///////////// UNSUBCRIBE PAGE //////////////// */

#USubMainContainer {
    margin: 100px 0 100px 0; 
    padding: 0 auto 0 auto;
}
#USubContainerInner {
    margin: 40px auto 40px auto; 
    padding: 20px; 
    border: 2px solid #333; 
    border-radius: 6px;
    background-color: #000;
}
#AlertunsubConfirmHolder {
    height: 30px;
    text-align: center;
}
#USubWrapper {
    margin: 0 0 30px 0;
    padding: 20px 5px 20px 0;   
    border: 2px solid #333; 
    border-radius: 8px;
    background-color: #000;
}
#USubradioInline {
    margin: 0; 
    padding: 0 0 0 20px;
}
.USubText {
    margin: -8px 0 0 30px;
    padding: 0 8px 0 8px;
    font-size: calc(10px + 0.3vw);  
}
.USubButt {
    width: 100%;
    margin: 8px 0 10px 0;
    padding: 10px 0 10px 0;
    color: #ff9900;   
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #ff9900;
    background-color: #000;    
    transition: all 0.4s linear;
}
.USubButt:hover {
    cursor: pointer; 
    background-color: #111;
}
#unsubConfirmContainer {
    margin: 100px 0 0 0; 
    padding: 0 auto 0 auto;
    vertical-align: center;
}
#unsubConfirmHolder {
    margin: 100px auto 40px auto; 
    padding: 20px; 
    background-color: #000; 
    border: 2px solid #333; 
    border-radius: 6px;
}

/* /////////// END - UNSUBCRIBE PAGE //////////// */

/* ============================================== */

/* ///////////// PLEDGSTA HOME PAGE ///////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #smallPledgeName {
        margin: 0;
        padding: 0;
    }    
    #largePledgeName {
        display: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    
    #smallPledgeName {
        display: none;
    }     
    #largePledgeName {
        width: 100%;
        height: 190px;
        margin: 0 0 0 10px;
        padding: 0;
    }
}    
@media screen and (min-width: 961px) {
    
    #smallPledgeName {
        display: none;
    }    
    #largePledgeName {
        height: 190px;
        margin: 0 0 0 10px;
        padding: 0;

    }
}

/* blue to purple border color - #e81cff, #40c9ff, */

#pledgeProfileContainer { 
    border-radius: 34px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b; 
}
#pledgeProfileWrapper {
    margin: 0; 
    padding: 0;
}
.pledgeName {
    margin: 0;
    padding: 0;
}
.pledgeStats {
    margin: 0 0 5px 2px;
    padding: 0;
    color: #888;
}
#pledgeProfileInner {
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 362px) {

    #pledgeProfileContainer {
        margin: 72px 10px 50px 10px; 
        padding: 20px 15px 20px 15px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #pledgeProfileSetter {
        margin: 10px 0 0 0; 
        padding: 0;
    }
    .pledgeNameTitle {
        text-align: center;
        margin: 0 0 20px 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        height: auto;
        width: auto;
        margin: 0 0 20px 0;
        padding: 0;
        color: #FFF;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
    .pledgeProfileAvatar {        
        margin: 0;
        padding: 0;
        max-height: 220px;
        min-height: 220px;
        max-width: 220px;
        min-width: 220px;        
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #2d2d2d; 
    }    
    .pledgeStats {
        font-size: 12px;
    } 
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 24px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        margin: 20px 0 0 0;
        padding: 15px 15px 10px 15px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 363px) and (max-width: 599px) {

    #pledgeProfileContainer {
        margin: 78px 10px 50px 10px; 
        padding: 20px 15px 20px 15px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #pledgeProfileSetter {
        margin: 10px 0 0 0; 
        padding: 0;
    }
    .pledgeNameTitle {
        text-align: center;
        margin: 0 0 20px 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        height: auto;
        width: auto;
        margin: 0 0 20px 0;
        padding: 0;
        color: #FFF;
        display: flex; 
        align-items: center; 
        flex-direction: column;
    }
    .pledgeProfileAvatar {        
        margin: 0;
        padding: 0;
        max-height: 220px;
        min-height: 220px;
        max-width: 220px;
        min-width: 220px;        
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #2d2d2d; 
    }    
    .pledgeStats {
        font-size: 12px;
    } 
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 24px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        margin: 20px 0 0 0;
        padding: 15px 15px 10px 15px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #pledgeProfileContainer {
        margin: 72px 35px 50px 35px; 
        padding: 30px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #pledgeProfileSetter {
        margin: 0; 
        padding: 0;
    }
    .pledgeNameTitle {
        text-align: center;
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        margin: 0;
        padding: 0;        
    }
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        width: auto;
        height: auto;
        margin: 0; 
        padding: 0;
        color: #FFF;        
        display: flex; 
        align-items: center; 
        flex-direction: column;
        z-index: 8888 !important;
    }
    .pledgeProfileAvatar {        
        margin: 0;
        padding: 0;
        max-height: 255px;
        min-height: 255px;
        max-width: 255px;
        min-width: 255px;
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #2d2d2d; 
    }   
    .pledgeStats {
        font-size: 16px;
    }
    .pledgeName {
        font-size: 28px;
    }
    #yourArtists {
        margin: 25px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #222;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 768px) and (max-width: 824px) {

    #pledgeProfileWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgeProfileContainer {
        width: 84%;
        margin: 68px auto 50px auto;
        padding: 30px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgeProfileSetter {
        margin: 0;  
        padding: 0;
    }
    .pledgeNameTitle {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        display: inline-flex;
        margin: 0;
        padding: 0;        
    }
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        display: inline-flex;
        margin: 0 0 14px 0;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
        z-index: 8888 !important;
    }
    .pledgeProfileAvatar {
        margin: 0;
        padding: 0;
        max-height: 195px;
        min-height: 195px;
        max-width: 195px;
        min-width: 195px;
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #2d2d2d; 
    }    
    .pledgeStats {
        font-size: 12px;
    }
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 20px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        width: 100%;
        margin-top: 5px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #222;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) {

    #pledgeProfileWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgeProfileContainer {
        width: 76%;
        margin: 68px auto 50px auto;
        padding: 30px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgeProfileSetter {
        margin: 0;  
        padding: 0;
    }
    .pledgeNameTitle {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        display: inline-flex;
        margin: 0;
        padding: 0;        
    }
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        display: inline-flex;
        margin: 0 0 14px 0; 
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
        z-index: 8888 !important;
    }
    .pledgeProfileAvatar {
        margin: 0;
        padding: 0;
        max-height: 195px;
        min-height: 195px;
        max-width: 195px;
        min-width: 195px;
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #2d2d2d; 
    }    
    .pledgeStats {
        font-size: 12px;
    }
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 20px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        width: 100%;
        margin-top: 5px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #222;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #pledgeProfileWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgeProfileContainer {
        width: 75%;
        margin: 68px 14px 50px auto;
        padding: 30px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgeProfileSetter {
        margin: 0;  
        padding: 0;
    }
    .pledgeNameTitle {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        display: inline-flex;
        margin: 0;
        padding: 0;        
    }
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        margin: 0 0 14px 0; 
        padding: 0;
    }
    .pledgeProfileAvatar {
        margin: 0;
        padding: 0;
        max-height: 195px;
        min-height: 195px;
        max-width: 195px;
        min-width: 195px;        
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #2d2d2d; 
    }    
    .pledgeStats {
        font-size: 12px;
    } 
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 20px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        margin-top: 5px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #222;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #pledgeProfileWrapper {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileContainer {
        margin: 68px 0 50px -7px; 
        padding: 30px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }   
    #pledgeProfileSetter {
        margin: 0;
        padding: 0;
    }
    .pledgeNameTitle {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0;
        padding: 0;
    }    
    #pledgeProfileHolder {
        width: 100%;
        display: inline-flex;
        margin: 0;
        padding: 0;        
    }
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        margin: 0 0 14px 0; 
        padding: 0;
    }
    .pledgeProfileAvatar {
        margin: 0;
        padding: 0;
        max-height: 195px;
        min-height: 195px;
        max-width: 195px;
        min-width: 195px;        
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #2d2d2d; 
    }    
    .pledgeStats {
        font-size: 12px;
    } 
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 15px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        margin-top: 5px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #222;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #pledgeProfileWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgeProfileContainer {
        margin: 68px 0 50px -49.5px;
        padding: 30px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #pledgeProfileSetter {
        margin: 0;
        padding: 0;
    }
    .pledgeNameTitle {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        right: 0;
        margin: 0;
        padding: 0;        
    }  
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        margin: 0 0 14px 0; 
        padding: 0;
    }
    .pledgeProfileAvatar {
        margin: 0;
        padding: 0;
        max-height: 195px;
        min-height: 195px;
        max-width: 195px;
        min-width: 195px;        
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #3d3d3d;      
    }    
    .pledgeStats {
        font-size: 12px;
    }
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 20px 0 0 0; 
        padding: 0;
    }    
    #suggestedFor {
        margin-top: 5px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #333;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #pledgeProfileWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pledgeProfileContainer {
        margin: 68px 0 50px -60px;
        padding: 30px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #pledgeProfileSetter {
        margin: 0;
        padding: 0;
    }
    .pledgeNameTitle {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0 0 20px 0;
        padding: 0;
    }
    #pledgeProfileHolder {
        width: 100%;
        margin: 0;
        padding: 0;        
    }  
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        margin: 0 0 14px 0; 
        padding: 0;
    }
    .pledgeProfileAvatar {
        margin: 0;
        padding: 0;
        max-height: 195px;
        min-height: 195px;
        max-width: 195px;
        min-width: 195px;        
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #3d3d3d;      
    }    
    .pledgeStats {
        font-size: 12px;
    }
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 20px 0 0 0; 
        padding: 0;
    }    
    #suggestedFor {
        margin-top: 5px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #333;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}
@media screen and (min-width: 1200px) {

    #pledgeProfileContainer {
        margin: 68px 10px 50px -57px; 
        padding: 30px;
        border: 2px solid #333; 
        background-color: #111;
    }
    #pledgeProfileSetter {
        margin: 0;
        padding: 0;
    }
    .pledgeNameTitle {
        margin: 0;
        padding: 0;
    }
    #pledgeProfileAvatarwrapper {
        margin: 0 0 20px 0;
        padding: 0;
    }    
    #pledgeProfileHolder {
        width: 100%;
        margin: 0;
        padding: 0;        
    }  
    #pledgeProfilePlacement {
        margin: 0;
        padding: 0;
    }
    #AvatarMastheadPledgeProfile {
        margin: 0 0 14px 0; 
        padding: 0;
    }
    .pledgeProfileAvatar {
        margin: 0;
        padding: 0;
        max-height: 220px;
        min-height: 220px;
        max-width: 220px;
        min-width: 220px; 
/*        max-height: 195px;
        min-height: 195px;
        max-width: 195px;
        min-width: 195px;*/        
        object-fit: cover;
        border-radius: 16px;
        border: 2px solid #3d3d3d;      
    }    
    .pledgeStats {
        font-size: 12px;
    }
    .pledgeName {
        font-size: 24px;
    }
    #yourArtists {
        margin: 20px 0 0 0; 
        padding: 0;
    }
    #suggestedFor {
        margin-top: 5px;
        padding: 15px 15px 11px 15px;
        border-radius: 16px;
        border: 2px solid #333;
    }
    .topSpacer {
        margin: 0; 
        padding: 5px 0 5px 0;        
    }
}

/* ///////////////////////////////////////////// */
/* ///// Current Gigs Scroller (Pledgsta) ///// */

#NextGigP {
    position: relative; 
    z-index: 1;
    margin: 0;
    padding: 0;    
} 

@media screen and (min-width: 320px) and (max-width: 475px) {

    #currentGigsForPledgsta {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #currentGigsSmallP {
        display: flex;
        justify-content: right;
        margin: 0;
        padding: 0;
    }
    #currentGigsLargeP {
        display: none;
    }     
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    }    
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {
        height: 246px; 
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }*/
    /* 1 gig static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 272px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    /* 2 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 315px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }   
}
@media screen and (min-width: 476px) and (max-width: 599px) {

    #currentGigsForPledgsta {
        margin: 5px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
    #currentGigsSmallP {
        margin: 0 0 15px 0;
        padding: 0;
    }
    #currentGigsLargeP {
        display: none;
    } 
    .nextGigColumnInnerP {
        margin: 14px 0 13px 0;
        padding: 0;
    } 
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }*/
    /* 1 to 3 gigs static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 198px; /* height of window */
        margin: 0;
        padding: 0 20px 0 20px;
        border-radius: 20px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    /* 4 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 315px; /* height of window */
        margin: 0;
        padding: 0 20px 0 20px;
        border-radius: 20px;
        /*border-radius: 16px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #currentGigsForPledgsta {
        margin: 20px 0 0 0;
        padding-right: 0;
        padding-left: 0;
    }
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP {
        margin: 0;
        padding: 0;
    }      
    .nextGigColumnInnerP {
        margin: 14px 0 13px 0;
        padding: 0;
    } 
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }*/
    /* 1 to 3 gigs static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 198px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    /* 4 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 315px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
}
@media screen and (min-width: 768px) and (max-width: 824px) {

    #currentGigsForPledgsta {
        justify-items: right;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }    
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP {
        width: 100%;
        margin: 0;
        padding: 0;
    }  
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    } 
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {
        height: 246px;
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }*/
    /* 1 to 3 gigs static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 257px; /* height of window */
        width: 280px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    /* 4 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 246px; /* height of window */
        width: 280px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) {

    #currentGigsForPledgsta {
        justify-items: right;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }    
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP {
        width: 100%;
        margin: 0;
        padding: 0;
    }  
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    }
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {
        height: 246px;
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }*/
    /* 1 to 3 gigs static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 257px; /* height of window */
        width: 280px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    /* 4 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        width: 280px;
        height: 246px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #currentGigsForPledgsta {
        justify-items: right;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP {
        width: 100%;
        margin: 0;
        padding: 0;
    }  
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    }
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {
        height: 246px;
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }*/
    /* 1 to 3 gigs static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 255px; /* height of window */
        width: 280px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    /* 4 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 246px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #currentGigsForPledgsta {
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP {
        margin: 0;
        padding: 0;
    }  
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    }
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {
        height: 246px;     
        margin: 10px 0 0 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }   */
    /* 1 to 3 gigs static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 252px; /* height of window */
        width: 280px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    /* 4 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 246px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP { /* border: 1px solid orange;*/
        display: flex;
        justify-content: right;
        margin: 0;
        padding: 0;
    }  
    #currentGigsForPledgsta { /* border: 1px solid red;*/ 
        width: auto;
        margin: 0;
        padding: 0;
    }
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    }
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {    
        overflow: hidden;
        height: 246px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }*/
    /* 1 gig static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 256px; /* height of window */
        width: 280px;
        margin: 0;
        padding: 0 15px 9px 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    /* 2 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 246px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP {
        display: flex;
        justify-content: right;
        margin: 0;
        padding: 0;
    }  
    #currentGigsForPledgsta {
        width: auto;
        margin: 0;
        padding: 0;
    }
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    }
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {    
        overflow: hidden;
        height: 246px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }*/
    /* 1 gig static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 256px; /* height of window */
        width: 280px;
        margin: 0;
        padding: 0 15px 9px 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    /* 2 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 246px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) {
    
    #currentGigsForPledgsta {
        width: 100%;
        margin: 0;
        padding: 0;
    }    
    #currentGigsSmallP {
        display: none;
    }
    #currentGigsLargeP {
        display: flex;
        justify-content: right;
        margin: 0;
        padding: 0;
    }
    .nextGigColumnInnerP {
        margin: 15px 0 14px 0;
        padding: 0;
    }
    .nextGigColumnInnerPstatic {
        margin: 15px 0 0 0;
        padding: 0;
    }
    /* no gigs */
/*    #nextGigColumnP {    
        overflow: hidden;
        height: 246px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }*/
    /* 1 gig static */
    #nextGigColumnPstatic {    
        overflow: hidden;
        height: 272px; /* height of window */
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    /* 2 or more gigs auto-scroll */
    #nextGigColumnPscroll {    
        overflow: hidden;
        height: 272px;
        margin: 0;
        padding: 0 15px 0 15px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
}

#pledgstaCardGig {
    border-radius: 12px;
    transition: all 0.3s linear; 
}
#pledgstaCardGig:hover {
    background-color: #000;
}
.pledgstaCardNoGigs {
    text-align: center;
    border-radius: 12px;
    cursor: default;
}
.nextGigArtistP {
    margin: 0 0 3px 0;
    padding: 0 6px 0 6px;
    color: #888;
    font-size: 11px;
    word-break: normal;
}
.nextGigTitleP {
    margin: 0; 
    padding: 0 15px 0 15px;
    color: #fff;
    font-size: 11px;
    word-break: normal;
}
.nextGigVenueP {
    margin: 9px 0 0 0; 
    padding: 0;
    color: #D0D0D0;
    font-size: 10px;
}
.nextGigTimeCodeP {
    margin: 3px 0 6px 0;
    padding: 0;
    font-size: 9px; 
    color: #777;
} 

@media screen and (min-width: 320px) and (max-width: 376px) {
    
    .swiper-slide {
        flex-shrink: 0;
    }    
    .pledgstaCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    #pledgstaCardGig {
        position: relative;
        height: 220px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 0 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .pledgstaGigPoster {
        height: 90px;
        width: 90px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataP {
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigDetails {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateP {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 377px) and (max-width: 1023px) {
    
    .swiper-slide {
        flex-shrink: 0;
    }    
    .pledgstaCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    #pledgstaCardGig {
        position: relative;
        height: 220px;
        width: auto;
        flex-shrink: 0;
        text-align: center;
        margin: 0 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .pledgstaGigPoster {
        height: 110px;
        width: 110px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataP { /* border: 1px solid orange; */
        margin: 8px 0 0 0;
        padding: 0;
    }
    .nextGigDetails { /* border: 1px solid red; */
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0 9px 0 9px;
    }
    .nextGigDateP {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 9px;
        font-weight: 600;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .swiper-slide {
        flex-shrink: 0;
    }    
    .pledgstaCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    #pledgstaCardGig {
        position: relative;
        height: 240px;
        width: 140px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .pledgstaGigPoster {
        height: 119px;
        width: 119px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataP {
        margin: 6px 0 0 0;
        padding: 0;
    }
    .nextGigDetails {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0;
    }
    .nextGigDateP {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 10px;
        font-weight: 600;
    }
}
@media screen and (min-width: 1025px) {
    
    .swiper-slide {
        flex-shrink: 0;
    }    
    .pledgstaCardNoGigs {
        margin: 0;
        padding: 9px 0 9.5px 0;
        color: #777;
    }
    #pledgstaCardGig {
        position: relative;
        height: 240px;
        width: 140px;
        flex-shrink: 0;
        text-align: center;
        margin: 0 0 5px 0;
        padding: 9px 0 0 0;
        border: 2px solid #333;
        background-color: #111;
    }
    .pledgstaGigPoster {
        height: 119px;
        width: 119px;
        margin: 0;
        padding: 0;
        object-position: 50% 50%;
        object-fit: cover;
        border-radius: 6px;
        overflow: hidden;    
    }
    .nextGigDataP {
        margin: 6px 0 0 0;
        padding: 0;
    }
    .nextGigDetails {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        padding: 0;
    }
    .nextGigDateP {
        margin: 7px 0 9px 0;
        padding: 0;
        color: #999;
        font-size: 10px;
        font-weight: 600;
    }
}

/* //// Current Gigs Cradle Scroll (Pledgsta) //// */

@media screen and (max-width: 1024px) {

    .nextGigShadowP {
        position: relative;
        z-index: 2;
        height: 0;
        background: transparent;
        box-shadow: 0 0 8px 8px #0d0d0d;
    }
}
@media screen and (min-width: 1025px) {
    
    .nextGigShadowP {
        position: relative;
        z-index: 9999;
        background: transparent;
        box-shadow: inset 0 0 8px 8px rgba(17, 17, 17, 0.5);
    }
}

#nextGigCradleP {
    position: relative;
    overflow: hidden;
    height: 246px;
    margin: 0;
    padding: 0;
}
#nextGigCradleScrollP { /* content of scroll */
    position: absolute;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 110px;
    top: 0;  
}

@media screen and (min-width: 320px) and (max-width: 601px) {
    
    /* Small Screen */

    #nextGigCradlePsm { /* container of scroll */
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0;
        padding: 0;
    }
    #nextGigCradleScrollPsm { /* Content of scroll */
        position: relative;
        display: inline-flex;
        height: 100%;
        width: auto;
        top: 0;
        left: 0;
        flex-wrap: nowrap;
    }

    /* Large Screen */

    #nextGigCradlePlg { /* container of scroll */
        display: none;
    }
    #nextGigCradleScrollPlg { /* content of scroll */
        display: none;  
    }    
}
@media screen and (min-width: 602px) {
    
    /* Small Screen */

    #nextGigCradlePsm { /* container of scroll */
        display: none;
    }
    #nextGigCradleScrollPsm { /* content of scroll */
        display: none;  
    }

    /* Large Screen */
    
    #nextGigCradlePlg {  /* container of scroll */
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0;
        padding: 15px 0 0 0;
    }
    #nextGigCradleScrollPlg { /* Content of scroll */
        position: relative;
        display: inline-flex;
        height: 100%;
        width: auto; /* CRUCIAL: Must be auto to allow content to overflow */
        top: 0;
        left: 0;
        flex-wrap: nowrap; /* CRUCIAL: Ensures all cards are on one line */
        /* We will manipulate its LEFT property or TRANSFORMATION */
    }
}

/* Hide horizontal scrollbar for the scroll-jacking effect */
#nextGigCradlePlg {
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
}
#nextGigCradlePlg::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
}

@media screen and (min-width: 320px) and (max-width: 1137px) {
    
    #nextGigCradleScrollPsm { /* content of scroll */
        padding-top: 0;
        padding-bottom: 0;    
    }
}
@media screen and (min-width: 1138px) {

    #nextGigCradleScrollPlg { /* content of scroll */
        padding-top: 0;
        padding-bottom: 0;      
    }
}

/* //// END - current gigs scroller (Pledgsta) //// */

/* //// SUGGESTED-CARD //// */

#suggCardPublicWrapper {
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    .suggCardPublic {
        display: inline-block;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 9px 2px 9px 2px;
        border-radius: 6px;
        border-bottom: 2px solid #000;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.3s linear;        
    }
    .suggCardPublic:hover {
        cursor: pointer;
        background-color: #111;
    }    
    .suggAvatar {
        float: left;
        height: 41px;
        width: 41px;
        margin: 0 15px 0 2px;
        padding: 0;
        border-radius: 5px;
        transition: all 0.3s linear;
    }
    .suggAvatar:hover {
        cursor: pointer;
    }
    .suggCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
    }
    .suggCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        color: #888888;
        font-size: 11px;        
    }
    .suggtotalPledges {
        float: right;  
        margin: -23px 8px 0 0;   
    }    
    .suggCardPledges {
        width: 60px;
        margin: 0;
        padding: 0;
        color: #888888;        
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
    
    .suggCardPublic {
        display: inline-block;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 9px 6px 9px 6px;      
        border-radius: 6px;
        border-bottom: 2px solid #000;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/        
        transition: all 0.3s linear;
    }
    .suggCardPublic:hover {
        cursor: pointer;
        background-color: #111;
    }
    .suggAvatar {
        float: left;
        height: 41px;
        width: 41px;
        margin: 0 15px 0 2px;
        padding: 0;        
        border-radius: 6px;
        transition: all 0.3s linear;
    }
    .suggAvatar:hover {
        cursor: pointer;
    } 
    .suggCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
    }
    .suggCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        color: #888888;
        font-size: 11px;        
    }    
    .suggtotalPledges {
        float: right;  
        margin: -23px 10px 0 0;   
    }    
    .suggCardPledges {
        margin: 0 -5px 0 0;
        padding: 0;
        color: #888888;
        font-size: 12px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
       
    .suggCardPublic {
        display: inline-block;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 9px 6px 9px 6px;      
        border-radius: 8px;
        border-bottom: 2px solid #000;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
        transition: all 0.3s linear;
    }
    .suggCardPublic:hover {
        cursor: pointer;
        background-color: #131313;
    }
    .suggAvatar {
        height: 41px;
        width: 41px;
        margin: 0 15px 0 2px;
        padding: 0;        
        float: left;
        border-radius: 6px;
        transition: all 0.3s linear;
    }
    .suggAvatar:hover {
        cursor: pointer;
    } 
    .suggCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
    }
    .suggCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        color: #888888;
        font-size: 11px;        
    }    
    .suggtotalPledges {
        float: right;  
        margin: -23px 10px 0 0;   
    }
    .suggCardPledges {
        margin: 0 10px 0 0;
        padding: 0;
        color: #888888;
        font-size: 12px;
    }
}
@media screen and (min-width: 1025px) {
       
    .suggCardPublic {
        display: inline-block;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 9px 6px 9px 6px;      
        border-radius: 8px;
        border-bottom: 2px solid #000;        
        background-color: #111;
        transition: all 0.3s linear; 
    }
    .suggCardPublic:hover {
        cursor: pointer;
        background-color: #1c1c1c;
    }
    .suggAvatar {
        height: 41px;
        width: 41px;
        margin: 0 15px 0 2px;
        padding: 0;        
        float: left;
        border-radius: 6px;
        transition: all 0.3s linear;
    }
    .suggAvatar:hover {
        cursor: pointer;
    } 
    .suggCardName {
        margin: 6px 0 0 0;
        padding: 0;
        font-size: 12px;
    }
    .suggCardGenre {
        margin: 6px 0 0 0;
        padding: 0;
        color: #888888;
        font-size: 11px;        
    }    
    .suggtotalPledges {
        float: right;  
        margin: -23px 10px 0 0;   
    }
    .suggCardPledges {
        margin: 0 10px 0 0;
        padding: 0;
        color: #888888;
        font-size: 12px;
    }
}

/* ////////////////// END - SUGGESTED-CARD /////////////////// */

/* /////////////// PLEDGSTA PLEDGING TO TABLE //////////////// */

#pledgesTableFrame {
    width: 100%;
    padding: 11px 0 0 0;
    margin-bottom: 10px;
    /*border-radius: 16px;*/
}
#pledgesTable {
    background-color: transparent;
}
#pledgesTable table {
    width: 100%;
    border-collapse: collapse;
    border: transparent;
}
#pledgesTable thead {
    display: table;
    width: 100%;
    margin-right: 10px;
    table-layout: auto;
    border-bottom: 3px solid #111;
}
#pledgesTable thead th {
    padding-top: 0;
    padding-bottom: 5px;    
    color: #999;
    font-weight: 600;
}
#pledgesTable th {
    background-color: transparent;
}
.pledgesTableHeadSpacer {
    width: 30px;
    margin: 0;
    padding: 0;
}
.artistNameLong {
    position: relative;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}
.artistNameLong:before {
    content: '';
    position: absolute;
}
.artistPledgesTableHeadSpacer {
    margin: 0;
    padding: 0;
}  
#pledgesTable tbody {
    height: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: inline-block;
    width: 100%;
    margin: 0; 
    padding: 0;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #pledgesTableFrame {
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #pledgesTable tbody {
        border-top: 2px solid #222;
    }
    #pledgesTable tbody td {
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    #pledgesTable tbody tr:nth-child(odd) {
        background-color: #0a0a0a;
       /*background-color: #0d0d0d;*/
    }
    #pledgesTable tbody tr:nth-child(even) {
        background-color: #0a0a0a;
       /*background-color: #0d0d0d;*/
    }
    #pledgesTable tbody tr:hover {
        background-color: #131313;
    }
}
@media screen and (min-width: 1025px) {

    #pledgesTableFrame {
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    #pledgesTable tbody {
        border-top: 2px solid #333;
    }
    #pledgesTable tbody td {
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    #pledgesTable tbody tr:nth-child(odd) {
        background-color: #111;
    }
    #pledgesTable tbody tr:nth-child(even) {
        background-color: #111;
    }
    #pledgesTable tbody tr:hover {
        background-color: #1b1b1b;
    }    
}

@media screen and (min-width: 320px) and (max-width: 345px) {

    #pledgesTable thead th:nth-child(1) {
        width: 55%;  
    } 
    #pledgesTable tbody td:nth-child(1) {
        width: 55%;
    }
    #pledgesTable thead th:nth-child(2),
    #pledgesTable tbody td:nth-child(2) {
        width: 25%;
    }
    #pledgesTable thead th:nth-child(3),
    #pledgesTable tbody td:nth-child(3) {
        width: 20%;   
    }
}
@media screen and (min-width: 346px) {

    #pledgesTable thead th:nth-child(1), 
    #pledgesTable tbody td:nth-child(1) {  
        width: 64%;
    }
    #pledgesTable thead th:nth-child(2),
    #pledgesTable tbody td:nth-child(2) {
        width: 25%;
    }
    #pledgesTable thead th:nth-child(3),
    #pledgesTable tbody td:nth-child(3) {
        width: 25%;
    }
}

/* ///// Pledging Table Content ///// */

@media screen and (min-width: 320px) and (max-width: 345px) {

    .artistPledgesTableHeadSpacer {
        width: 55px;
    }    
    #pledgesTable thead th { 
        font-size: 11px;
        padding-left: 9px;
    }
    #pledgesTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 32px;
        width: 32px;
        margin: 0 0 0 17px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 80px;
        margin: 17px 0 0 8px;
        padding: 0;
        font-size: 9px;
    }
    .tableh1 {
        margin: 19px 0 0 0;
        padding: 0;
        font-size: 9px;    
    }
    .pledgesEditPP {  
        height: 30px;
        width: 55px;
        margin: 9px 2px 9px 0;
        padding: 1px 0 0 0;         
        color: #666;  
        font-size: 9.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222; 
        background-color: #0a0a0a;
        transition: all 0.3s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 30px;
        width: 55px;
        margin: 9px 2px 9px 0;
        padding: 1px 0 0 0; 
        color: #666;
        font-size: 9px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }    
}
@media screen and (min-width: 346px) and (max-width: 362px) {

    .artistPledgesTableHeadSpacer {
        width: 64px;
    }    
    #pledgesTable thead th { 
        font-size: 11px;
        padding-left: 9px;
    }
    #pledgesTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 32px;
        width: 32px;
        margin: 0 0 0 16px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 80px;
        margin: 17px 0 0 8px;
        padding: 0;
        font-size: 9px;
    }
    .tableh1 {
        margin: 19px 0 0 0;
        padding: 0;
        font-size: 9px;    
    }
    .pledgesEditPP {  
        height: 30px;
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 1px 0 0 0;         
        color: #666;  
        font-size: 9.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222; 
        background-color: #0a0a0a;
        transition: all 0.3s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 30px;
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 1px 0 0 0; 
        color: #666;
        font-size: 9.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    } 
}
@media screen and (min-width: 363px) and (max-width: 376px) {
    
    .artistPledgesTableHeadSpacer {
        width: 61px;
    }    
    #pledgesTable thead th {        
        font-size: 12px;
        padding-left: 10px;
    }
    #pledgesTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 32px;
        width: 32px;
        margin: 0 0 0 18px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 112px;
        margin: 17.5px 0 0 8px;
        padding: 0;
        font-size: 10px;
    }
    .tableh1 {
        margin: 19px 0 0 0;
        padding: 0;
        font-size: 10px; 
    }
    .pledgesEditPP {  
        height: 30px; 
        width: 60px;
        margin: 9px 2px 9px 0;        
        padding: 1px 0 0 0;         
        color: #666;  
        font-size: 10.5px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 60px;
        margin: 9px 2px 9px 0; 
        padding: 1px 0 0 0;
        color: #666;
        font-size: 10.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 377px) and (max-width: 413px) {

    .artistPledgesTableHeadSpacer {
        width: 63px;
    }    
    #pledgesTable thead th {        
        font-size: 12px;
        padding-left: 10px;
    }
    #pledgesTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 32px;
        width: 32px;
        margin: 0 0 0 18px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 112px;
        margin: 16.5px 0 0 8px;
        padding: 0;
        font-size: 11px;
    }
    .tableh1 {
        margin: 18px 0 0 0;
        padding: 0;
        font-size: 11px; 
    }
    .pledgesEditPP {  
        height: 30px; 
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 1px 0 0 0;         
        color: #666;  
        font-size: 11.5px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 1px 0 0 0;
        color: #666;
        font-size: 11px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 414px) and (max-width: 475px) {
    
    .artistPledgesTableHeadSpacer {
        width: 58px;
    }
    #pledgesTable thead th { 
        font-size: 12px;
        padding-left: 10px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 18px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 130px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {  
        height: 32px; 
        width: 60px;
        margin: 13px 2px 12.5px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 60px;
        margin: 4.5px 0;
        padding: 1px 0 0 0;
        color: #666;
        font-size: 9px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #1a1a1a;
    } 
}
@media screen and (min-width: 476px) and (max-width: 484px) {
    
    .artistPledgesTableHeadSpacer {
        width: 60px;
    }
    #pledgesTable thead th { 
        font-size: 12px;
        padding-left: 10px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 18px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 160px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {  
        height: 32px; 
        width: 60px;
        margin: 13px 2px 12.5px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 60px;
        margin: 4.5px 0;
        padding: 1px 0 0 0;
        color: #888;
        font-size: 9px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 485px) and (max-width: 599px) { /* 485 */
    
   .artistPledgesTableHeadSpacer {
        width: 94px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 23px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 158px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 60px;
        margin: 4.5px 0;
        padding: 1px 0 0 0;
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 600px) and (max-width: 732px) {
    
   .artistPledgesTableHeadSpacer {
        width: 100px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 23px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 158px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 0 0.5px 0;       
        color: #666;
        font-size: 12.5px;
        color: #666;
        font-size: 9px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) {
    
   .artistPledgesTableHeadSpacer {
        width: 100px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 23px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 158px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 60px;
        margin: 4.5px 0;
        padding: 1px;
        color: #888;
        font-size: 9px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 768px) and (max-width: 824px) {
    
   .artistPledgesTableHeadSpacer {
        width: 99px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 23px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 158px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 100px;
        margin: 4.5px 0;
        padding: 1px 0 0 0;
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 825px) and (max-width: 960px) {
    
   .artistPledgesTableHeadSpacer {
        width: 99px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 23px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 158px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 100px;
        margin: 4.5px 0;
        padding: 1px 0 0 0;
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {
    
   .artistPledgesTableHeadSpacer {
        width: 99px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 23px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        width: 158px;
        margin: 19.75px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 0 0.5px 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 100px;
        margin: 4.5px 0;
        padding: 1px 0 0 0;
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
   .artistPledgesTableHeadSpacer {
        width: 101px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 21px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        margin: 20.5px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22.75px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 32px;
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 0 0 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;     
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;
        width: 100px;
        margin: 4.5px 0;
        padding: 1px 0 0 0;
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

   .artistPledgesTableHeadSpacer {
        width: 103px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 21px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        margin: 20px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22.5px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 32px;
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 0 0 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;     
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;  
        width: 100px;
        margin: 4px 0 0 0;
        padding: 0;         
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;          
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
   .artistPledgesTableHeadSpacer {
        width: 107px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 21px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        margin: 20px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22.5px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 32px;
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 0 0 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;     
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;  
        width: 100px;
        margin: 4px 0 0 0;
        padding: 0;         
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;          
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1200px) { 
    
   .artistPledgesTableHeadSpacer {
        width: 107px;
    }         
    #pledgesTable thead th { 
        font-size: 14px;
        padding-left: 15px;
    }
    #pledgesTable tbody tr, td {
        padding-top: 0;
        padding-bottom: 0;
    }
    .smallPledgstaAvatar {
        height: 42px;
        width: 42px;
        margin: 0 0 0 21px; 
        padding: 0;
        border-radius: 6px;
    }
    .artistNameLong {
        height: 16px;
        margin: 20.25px 0 0 15px;
        padding: 0;
        font-size: 12px;
    }
    .tableh1 {
        margin: 22.75px 0 0 0;
        padding: 0;
        font-size: 12px; 
    }
    .pledgesEditPP {
        height: 32px;
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0;         
        color: #666;  
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;     
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;   
    }
    .pledgesEditPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
    .pledgesEditDisabledPP {
        height: 32px;  
        width: 100px;
        margin: 4px 24px 0 3px;
        padding: 0;         
        color: #888;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;          
        transition: all 0.4s linear;
    }
    .pledgesEditDisabledPP:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #1a1a1a;
    }
}

#pledgesTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/* ///// Pledging Table Alerts and Errors ///// */

/* ///// Top verify email Alert ///// */

@media screen and (min-width: 320px) and (max-width: 376px) {

    .tableRowVerifyEmail {
        height: 0;
    }
    #fixRow { /* if not here. The row element not used */ 
        margin: 0 0 -10px 0;
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #fixVerifyText {
        margin: 0 5px 0 5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePP1 {
        display: none; 
    }  
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixUpdateButtHolder {
        margin: 12px 0 20px 0; 
        padding: 0;         
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    .fixUpdateCardButtPP1 { 
        height: 28px; 
        width: 76px;
        margin: 0;
        padding: 1px 0 0 0;        
        color: #999; 
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
    .fixVerifyEmailButt {
        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 10px;
        padding: 7px 0 7px 0;        
        color: #ff0000;  
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;      
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 377px) and (max-width: 484px) { /* 414 + 415 + 474 */

    .tableRowVerifyEmail {
        height: 0;
    }
    #fixRow { /* if not here. The row element not used */ 
        margin: 0 0 -10px 0;
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #fixVerifyText {
        margin: 0 5px 0 5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePP1 {
        display: none; 
    } 
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixUpdateButtHolder {
        margin: 12px 0 20px 0; 
        padding: 0;         
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    .fixUpdateCardButtPP1 { 
        height: 28px; 
        width: 76px;
        margin: 0;
        padding: 1px 0 0 0;        
        color: #999; 
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
    .fixVerifyEmailButt {
        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 10px;
        padding: 7px 0 7px 0;        
        color: #ff0000;  
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;      
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 485px) and (max-width: 599px) {

    .tableRowVerifyEmail {
        height: 0;
    }
    #fixRow { /* if not here. The row element not used */ 
        margin: 5px 0 -15px 0;
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #fixVerifyText {
        margin: 0 15px 0 15px; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePP1 {
        display: none; 
    } 
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    }
    #fixBreakPP2 { /* for showing or hiding the break */
        display: none;
    }   
    #fixUpdateButtHolder {
        margin: 14px 0 24px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    .fixUpdateCardButtPP1 { 
        height: 30px;
        width: 80px;
        margin: 0;
        padding: 0;       
        color: #999;  
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
    .fixVerifyEmailButt {
        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 10px;
        padding: 7px 0 7px 0;        
        color: #ff0000;  
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;      
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    .tableRowVerifyEmail { 
        height: 0;
    }
    #fixRow { /* if not here. The row element not used */ 
        margin: 5px 0 -15px 0;
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #fixVerifyText {
        margin: 0 15px 0 15px; 
        padding: 0; 
        color: #ff0000;
        font-size: 14px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePP1 {
        display: none; 
    } 
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    }
    #fixBreakPP2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolder {
        margin: 14px 0 18px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    .fixUpdateCardButtPP1 {  
        height: 32px;
        width: 86px;
        margin: 0;
        padding: 0 0 1px 0;       
        color: #999;  
        font-size: 11px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
    .fixVerifyEmailButt {  
        height: 32px;
        width: 100px;
        margin: 6px 0 10px 4px;
        padding: 6px 0 7px 0;        
        color: #ff0000;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;      
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    .tableRowVerifyEmail {
        height: 0;
    }    
    #fixRow { /* if not here. The row element not used */ 
        margin: 5px 0 0 0; 
        padding: 5px 0 0 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #fixVerifyText {
        margin: 0 15px 15px 15px; 
        padding: 0; 
        color: #ff0000; 
        font-size: 14px;
        word-break: break-word;
    }
    #fixUpdateTrianglePP1 {
        margin-left: 0;
        margin-right: 6px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    }
    #fixBreakPP2 { /* for showing or hiding the break */
        display: none;
    }    
    #fixUpdateButtHolder {
        width: 114px;
        margin: 2px 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    .fixUpdateCardButtPP1 {  
        height: 32px;
        width: 100px;
        margin: 0;
        padding: 0 0 1px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
    .fixVerifyEmailButt {  
        height: 32px;
        width: 100px;
        margin: 10px 0 10px 4px;
        padding: 6px 0 7px 0;        
        color: #ff0000;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.3s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;    
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .tableRowVerifyEmail {
        height: 0;
    } 
    #fixRow { /* if not here. The row element not used */ 
        margin: 1px 0 0 0; 
        padding: 0; 
    }    
    #fixVerifyText {
        width: 79.25%;
        margin: 1px 0 2px 0; 
        padding: 7.5px 0 7px 25px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    #fixUpdateTrianglePP1 {
        margin-left: -2.5px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    }
    #fixBreakPP2 { /* for showing or hiding the break */
        display: none;
    }    
    #fixUpdateButtHolder {
        width: 114px;
        margin: 2px 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    .fixUpdateCardButtPP1 {  
        height: 32px;
        width: 100px;
        margin: 0;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
    .fixVerifyEmailButt {  
        height: 32px;
        width: 100px;
        margin: 0 0 0 -3px;
        padding: 7px 0 7px 0;        
        color: #ff0000;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.3s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;     
        background-color: #1a1a1a;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    .tableRowVerifyEmail {}  
    #fixRow { /* if not here. The row element not used */ 
        margin-top: 1px;        
    }    
    #fixVerifyText {
        margin: 1px 0 2px 0; 
        padding: 7px 0 0 36px; 
        color: #ff0000; 
        font-size: 12px;
    }
    #fixUpdateTrianglePP1 {
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    }
    #fixBreakPP2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolder {
        width: 115px;
        margin: 2px 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPP1 {  
        height: 32px;
        width: 100px;
        margin: 0 24px 0 3px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #000;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
    .fixVerifyEmailButt {
        height: 32px;
        width: 100px;
        margin: 0 15px 0 0;
        padding: 0;
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.3s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;    
        background-color: #111;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
    
    .tableRowVerifyEmail {}  
    #fixRow { /* if not here. The row element not used */ 
        margin-top: 1px;        
    }    
    #fixVerifyText {
        margin: 1px 0 2px 0; 
        padding: 7px 0 0 36px; 
        color: #ff0000; 
        font-size: 12px;
    }
    #fixUpdateTrianglePP1 {
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    }
    #fixBreakPP2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolder {
        width: 122px;
        margin: 2px 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPP1 {  
        height: 32px;
        width: 100px;
        margin: 0 24px 0 3px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #000;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
    .fixVerifyEmailButt {
        height: 32px;
        width: 100px;
        margin: 0 15px 0 0;
        padding: 0;
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.3s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;    
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) {
    
    .tableRowVerifyEmail {}  
    #fixRow {} /* if not here. The row element not used */
    #fixVerifyText { 
        margin: 1px 0 2px 0; 
        padding: 7.5px 0 0 36px; 
        color: #ff0000; 
        font-size: 12px;
    }
    #fixUpdateTrianglePP1 {
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }
    #fixBreakPP1 { /* for showing or hiding the break */
        display: none;
    }
    #fixBreakPP2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolder {
        width: 120px;
        margin: 2px 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPP1 {  
        height: 32px;
        width: 100px;
        margin: 0 24px 0 3px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #000;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP1:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
    .fixVerifyEmailButt {
        height: 32px;
        width: 100px;
        margin: 0 32px 0 5px;
        padding: 0;
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.3s linear;
    }
    .fixVerifyEmailButt:hover {
        cursor: pointer;    
        background-color: #111;
    }
}

/* /// In The Table Alerts /// */

@media screen and (min-width: 320px) and (max-width: 345px) {

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 100px;
        margin: 13px 0 0 2px;
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 13px 0 0 -9px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 34px;
        width: 55px;
        margin: 9px 2px 9px 0;
        padding: 2px 4px 0 4px;        
        color: #999;  
        font-size: 9px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 10px 0 0 -10px; 
        padding: 0 10px 0 10px; 
        color: #ff0000;
        font-size: 8px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0; */
        height: 34px;
        width: 55px;
        margin: 9px 2px 9px 0;
        padding: 2px 4px 0 4px;         
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 346px) and (max-width: 362px) {

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 100px;
        margin: 13px 0 0 2px;
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 13px 0 0 -9px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 34px;
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 2px 4px 0 4px;        
        color: #999;  
        font-size: 9px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 10px 0 0 -10px; 
        padding: 0 10px 0 10px; 
        color: #ff0000;
        font-size: 8px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0; */ 
        height: 34px;
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 2px 4px 0 4px;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 363px) and (max-width: 376px) {

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 110px;
        margin: 13px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 10px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 13px 0 0 -9px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 10px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 34px;
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 0 2px 0 2px;
        color: #999;  
        font-size: 10px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
    #verifyEmailBeforeCardTextPP {
        margin: 8px 0 0 -5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }   
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;*/
        height: 34px;
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 0 2px 0 2px;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 377px) and (max-width: 413px) {

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 120px;
        margin: 11px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 11px 0 0 -5px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 34px; 
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 0 2px 0 2px;        
        color: #999;  
        font-size: 11px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
    #verifyEmailBeforeCardTextPP {
        margin: 8px 0 0 -5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;   */
        height: 34px; 
        width: 60px;
        margin: 9px 2px 9px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 414px) and (max-width: 475px) { /* 414 + 415 */

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 150px;
        margin: 15px 0 0 -3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 15px 0 0 -5px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 38px; 
        width: 60px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;         
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 8px 0 0 -5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 112px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: auto;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0; */
        height: 38px; 
        width: 60px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 476px) and (max-width: 484px) {

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 150px;
        margin: 15px 0 0 -3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 15px 0 0 -5px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 38px; 
        width: 60px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;         
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 6px 0 0 -10px; 
        padding: 0; 
        color: #ff0000;
        font-size: 10px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0; */
        height: 38px; 
        width: 60px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }  
}
@media screen and (min-width: 485px) and (max-width: 599px) { /* 485 */

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 158px;
        margin: 11px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 11px 0 0 -5px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 6px 0 0 -10px; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;  */
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }  
}
@media screen and (min-width: 600px) and (max-width: 732px) {

    #fixUpdateTrianglePP2 {
        display: none; 
    }
    #fixUpdateTextPP {
        width: 158px;
        margin: 11px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        width: 50px;
        margin: 11px 0 0 -5px;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 12px 0 0 -10px; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0; */ 
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }  
}
@media screen and (min-width: 733px) and (max-width: 767px) {

    #fixUpdateTextPP {
        margin: 19px 0 0 6px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 19px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        width: 100px;
        margin: 12px 0 0 -25px; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP {
        margin: 0 15px 2px 15px; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }    
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;*/
        height: 30px;
        width: 96px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }   
}
@media screen and (min-width: 768px) and (max-width: 824px) {

    #fixUpdateTrianglePP2 {
        margin-left: 13px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixUpdateTextPP {
        margin: 20px 0 0 6px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 20.5px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 12px 0 0 0;  
        padding: 0; 
        color: #ff0000; 
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP { 
        margin: 2px 0 2px 0; 
        padding: 7px 0 7px 36px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0; */
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    } 
}
@media screen and (min-width: 825px) and (max-width: 960px) {

    #fixUpdateTrianglePP2 {
        margin-left: 13px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixUpdateTextPP {
        margin: 20px 0 0 6px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 20.5px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 12px 0 0 0;  
        padding: 0; 
        color: #ff0000; 
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP { 
        margin: 2px 0 2px 0; 
        padding: 7px 0 7px 36px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0; */
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }     
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #fixUpdateTrianglePP2 {
        margin-left: 13px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixUpdateTextPP {
        margin: 20px 0 0 6px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 20.5px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 12px 0 0 0;  
        padding: 0; 
        color: #ff0000; 
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP { 
        margin: 2px 0 2px 0; 
        padding: 7px 0 7px 36px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
/*        height: 32px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0; */
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
     
    #fixUpdateTrianglePP2 {
        margin-left: 12px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixUpdateTextPP {
        margin: 19.5px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 20.5px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        margin: 4px 0 2px 0; 
        padding: 7px 0 7px 0; 
        color: #ff0000; 
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP { 
        margin: 2px 0 2px 0; 
        padding: 7px 0 7px 36px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
        height: 32px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }   
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */ 
    
    #fixUpdateTrianglePP2 {
        margin-left: 12px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixUpdateTextPP {
        margin: 20px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 20.5px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        width: 100px;
        margin: 4.5px 0 2px 0; 
        padding: 7px 0 7px 0; 
        color: #ff0000; 
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP { 
        margin: 4px 0 2px 0; 
        padding: 7px 0 7px 36px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
        height: 32px;
        width: 100px;
        margin: 0 23px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #fixUpdateTrianglePP2 {
        margin-left: 12px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixUpdateTextPP {
        margin: 20px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 20.5px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP {
        width: 100px;
        margin: 4.5px 0 2px 0; 
        padding: 7px 0 7px 0; 
        color: #ff0000; 
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP { 
        margin: 4px 0 2px 0; 
        padding: 7px 0 7px 36px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
        height: 32px;
        width: 100px;
        margin: 0 23px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}
@media screen and (min-width: 1200px) {

    #fixUpdateTrianglePP2 {
        margin-left: 12px;
        margin-right: 8px; 
        margin-bottom: -2px;
        font-size: 18px; 
    }  
    #fixUpdateTextPP {
        margin: 19.5px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #UpdateCardTextPP {
        margin: 20.5px 0 0 0;
        padding: 0 ; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }
    .fixUpdateCardButtPP2 {
        height: 32px;
        width: 100px;
        margin: 13px 2px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPP2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    #verifyEmailBeforeCardTextPP { /* artist */
        width: 100px;
        margin: 4.5px 0 2px 0; 
        padding: 7px 0 7px 0; 
        color: #ff0000; 
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #verifyEmailTextPP { 
        margin: 4px 0 2px 0; 
        padding: 7px 0 7px 36px; 
        color: #ff0000; 
        font-size: 12px;
        word-break: break-word;
    }
    .verifyEmailButtPP {  
        height: 32px;
        width: 100px;
        margin: 0 23px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.2s linear;
    }
    .verifyEmailButtPP:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }
}

/* /////////////////////////// */

.canceledPledgeAlert {
    width: auto;
    margin: 3px auto 3px auto;
    padding: 10px;
    color: #FF0000;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
    text-align: center;
    border-radius: 6px;
    background: #111;        
}    
.adjustErrorAlert {
    margin: 5px 0 5px 1px;
    padding: 11px 10px 10px 10px;
    color: #ff0000; 
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word; 
    text-align: center; 
    border-radius: 6px; 
    background-color: #111;
}
.adjustErrorAlertP {
    margin: -3px 0 5px 1px;
    padding: 11px 10px 10px 10px;
    color: #ff0000; 
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word; 
    text-align: center; 
    border-radius: 6px; 
    background-color: #111;
}

/* ////////// END - PLEDGSTA HOME PAGE ////////// */

/* ============================================== */

/* ///////// PLEDGSTA EDIT PROFILE PAGE ///////// */

#saveContainerInnerPEP {
    margin: 0; 
    padding: 0 auto 0 auto;
}
/* //// Small screen //// */

@media screen and (min-height: 0) and (max-height: 319px) {
    
    #saveContainerPEP {
        display: none;
    }
    .saveButtPEP { 
        display: none;
    }
}
@media screen and (min-width: 320px) and (max-width: 599px) {

    #saveContainerPEP {
        position: fixed;
        width: 100%;
        padding: 0 10px 5px 0;
        right: 0;
        left: 0;
        bottom: -2px;
        z-index: 10000;
    }
    #saveButtonSidebarPEP {
        display: none;
    }
    .saveButtPEP {
        float: right;
        height: 70px;
        width: 70px;
        color: #999;   
        line-height: 1.5;
        text-align: center;
        font-size: 12px;
        margin: 10px 0 12px 0;
        padding: 5px 0 9px 0;
        border: 2px solid rgba(255, 0, 0, 0.6);
        border-radius: 12px;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px transparent;
        transition: all 0.4s linear;
    }
    .saveButtPEP:hover {
        cursor: pointer;    
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #saveContainerPEP {
        position: fixed;
        width: 100%;
        padding: 0;
        right: 0;
        left: 0;
        bottom: -2px;
        z-index: 10000;
    }
    #saveButtonSidebarPEP {
        display: none;
    }
    .saveButtPEP {
        float: right;
        height: 70px;
        width: 70px;
        color: #999;   
        line-height: 1.5;
        text-align: center;
        font-size: 12px;
        margin: 10px 0 12px 0;
        padding: 5px 0 9px 0;
        border: 2px solid rgba(255, 0, 0, 0.6);
        border-radius: 12px;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px transparent;
        transition: all 0.4s linear;
    }
    .saveButtPEP:hover {
        cursor: pointer;    
    }  
}

/* //// Large screen //// */

@media screen and (min-width: 768px) and (max-width: 960px) {
    
    #saveContainerPEP {
        position: fixed;
        width: 100%;
        padding: 0;
        right: 0;
        left: 0;
        bottom: -2px;
        z-index: 10000;
    }
    #saveButtonSidebarPEP {
        display: none;
    }
    .saveButtPEP {
        float: right;
        height: 70px;
        width: 70px;
        color: #999;   
        line-height: 1.5;
        text-align: center;
        font-size: 12px;
        margin: 10px 0 12px 0;
        padding: 5px 0 9px 0;
        border: 2px solid rgba(255, 0, 0, 0.6);
        border-radius: 12px;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px transparent;
        transition: all 0.4s linear;
    }
    .saveButtPEP:hover {
        cursor: pointer;    
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
    
    #saveContainerPEP {
        display: none;
    }  
    .saveButtonSidebarPEP {
        position: fixed;
        height: 105px;
        width: 170px; 
        bottom: 0;
        padding: 0;
    }
    .saveButtPEP {
        height: 38px;
        width: 165px;
        color: #D0D0D0;   
        text-align: center;
        font-size: 12px;
        margin: 40px 0 50px 0;
        padding: 0 10px 0 10px;
        border-radius: 8px;
        border: 2px solid rgb(255, 0, 0);
        background-color: #171717;    
        transition: all 0.3s linear;
    }
    .saveButtPEP:hover {
        background-color: rgba(255, 0, 0,.2);
        cursor: pointer;    
    }
}
@media screen and (min-width: 1025px) {
    
    #saveContainerPEP {
        display: none;
    }  
   .saveButtonSidebarPEP { /* border: 1px solid red;*/
        position: fixed;
        height: 105px;
        width: 170px; 
        bottom: 0;
        padding: 0;
    }
    .saveButtPEP {
        height: 38px;
        width: 165px;
        color: #D0D0D0;   
        text-align: center;
        font-size: 12px;
        margin: 40px 0 50px 0;
        padding: 0 10px 0 10px;
        border-radius: 8px;
        border: 2px solid rgb(255, 0, 0);
        background-color: #171717;    
        transition: all 0.3s linear;
    }
    .saveButtPEP:hover {
        background-color: rgba(255, 0, 0,.2);
        cursor: pointer;    
    }
}

.PEPsunkenShadow {
    margin-top: 8px;
    /*height: 214px;
    width: 214px;
    padding: 8px 1px 0 0;
    border-radius: 10px;
    background: #111111;
    box-shadow: inset -8px 8px 7px #070707,
                inset 8px -8px 7px #1b1b1b;*/
}
.PEPsunkenShadowShortpreview {
    height: 214px;
    width: 214px;
    margin: 0 auto 0 auto;
    padding: 8px 1px 0 0;
    border-radius: 10px;
    /*background: #111111;
    box-shadow: inset -8px 8px 7px #070707,
                inset 8px -8px 7px #1b1b1b;*/    
}
/*#pledgeEditProfileWrapper {
    margin: 0; 
    padding: 0;
}*/
#pEditMainWrapper {
    margin: 0;
    padding: 0;
}
#firstnameContainerPEP {
    margin: 0; 
    padding: 0;
}
#lastnameContainerPEP {
    margin: 0; 
    padding: 0;
}
#emailContainerPEP {
    margin: 0; 
    padding: 0;
}
#pledgeUsernameContainerPEP {
    margin: 0; 
    padding: 0;
}

/* ///// pledge avatar ///// */

#PEYourAvatarContainer {
    margin: 15px auto 0 auto;
/*    margin: 15px 15% 0 15%; */
    border-radius: 34px;
/*    border-radius: 20px;
    border-radius: 16px;*/
    box-shadow: 5px 5px 10px #000000,          
                -1px -1px 10px #1b1b1b;
}
#PECurrentAvatarContainer {
    margin-bottom: 0;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #PEYourAvatarContainer {
        padding: 20px 20px 40px 20px;
        /*padding: 20px 30px 40px 30px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d; */
    }
    #PECurrentAvatarContainer {
        margin-top: 60px;
    }
}
@media screen and (min-width: 1025px) {

    #PEYourAvatarContainer {
        padding: 20px 20px 40px 20px;
        /*padding: 20px 30px 40px 30px;*/
        border: 2px solid #333;
        background-color: #111;
    }
    #PECurrentAvatarContainer {
        margin-top: 87px;
    }
}

.PEPshortpreview {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.imageCoverPEP {
    min-height: 199px; 
    min-width: 199px;
    max-height: 199px; 
    max-width: 199px;
    margin-top: 0; 
    padding: -2px;
    border-radius: 16px;
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.PEPimageCover {
    min-height: 194px; 
    min-width: 194px;
    max-height: 194px; 
    max-width: 194px;
    margin-top: 0; 
    padding: -2px;
    border-radius: 16px;
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.imageCover {
    min-height: 196px; 
    min-width: 196px;
    max-height: 196px; 
    max-width: 196px;
    margin-top: 0; 
    padding: -2px;
    border-radius: 6px;
    /*background-image: url(https://pledgsta.com/assets/img/icons8-name-48-2.jpg);
    background-image: url(https://pledgsta.com/assets/img/icons8-name.jpg);*/
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.shortpreviewPEP {
    height: 200px;
    width: 200px;
    margin: 0 auto 0 auto;
}
#PEPimagePreview {
    height: 199px; 
    width: 199px;    
    margin: 0;
    padding: 0;
    border-radius: 16px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#selectImageHolderPEP {
    padding-bottom: 0;
    text-align: center;
}
#selectImageButtonContainerPEP {
    width: 195px;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .imageCoverPEP {
        border: 2px solid #222;
    }
    .PEPimageCover {
        border: 2px solid #222;
    }
    #PEPimagePreview {
        border: 2px solid #222;
    }
    #selectImageHolderPEP {
        margin: 10px 10px -25px 10px;
    }
    #selectImageButtonContainerPEP {
        margin: 10px auto 40px auto;
    }
}
@media screen and (min-width: 1025px) {

    .imageCoverPEP {
        border: 2px solid #333;
    }
    .PEPimageCover {
        border: 2px solid #333;
    }    
    #PEPimagePreview {
        border: 2px solid #333;
    }
    #selectImageHolderPEP {
        margin: 20px 10px -25px 10px;
    }
    #selectImageButtonContainerPEP {
        margin: 10px auto 20px auto;
    }
}

#PEPinvalidMsgImage {
    display: none;
    margin: 0; 
    padding: 0;
    border: transparent; 
    background: transparent;  
}
.PEPHighlightBack {
    background-color: #111;
}
.PEPHighlightImage {
    min-height: 200px;
    min-width: 200px;
    max-width: 200px;
    margin: -202px 35px 0 35px;
    padding: 0;
    color: #ff0000;
    font-size: 12px;
    border: 2px solid red;
    border-radius: 16px;
    background-color: rgb(0, 0, 0);
    text-align: center;
}
#PEPImageTriangle {
    margin-top: 80px;
    margin-bottom: 10px; 
    color: #ff0000; 
    font-size: 26px;
}
#pledgeDOBday {
    padding: 5px 5px 7px 8px; 
    color: #D0D0D0;
    background: none;
}
#pledgeDOByear {
    padding: 5px 5px 7px 7px;
    color: #D0D0D0;
    background: none;
}
#uploadFile {
    display: none;
}
#uploadFilePEP {
    display: none;
}
#uploadBackgroundFile {
    display: none;
}
#uploadBackgroundFile2 {
    display: none;
}
#PEPpostcode {
    width: 115px;
    color: #D0D0D0;
    background: none;    
}
#countryDOBContainerPEP {
    position: relative;
    margin: 0; 
}

/* ////////////////////////////////////////////////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {  
    
    #pledgePEPdayOB {
        width: 55px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        height: 60px;
        margin: 1px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB {
        width: 62px;
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px;
        font-size: 13px; 
        color: #fff;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #pledgePEPdayOB {
        width: 55px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        margin: 5px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB {
        width: 60px;
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px;
        font-size: 13px; 
        color: #fff;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {
    
    #pledgePEPdayOB {
        width: 55px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        margin: 5px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB {
        width: 60px;
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px;
        font-size: 13px; 
        color: #fff;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
  
    #pledgePEPdayOB {
        width: 55px;  
        padding: 0 5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 6px 5px 7px 8px;
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        margin: 5px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB {
        width: 60px;
        margin: 0 0 0 4.5px;
        padding: 0;
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 13px;
        color: #fff;
    }
} 
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledgePEPdayOB {
        width: 44px;
        padding: 0 4.5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 5px 5px 7px 8px; 
        font-size: 13px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        width: 91px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB {
        width: 55px;
        margin: 0 0 0 20px;
        padding: 0; 
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 13px; 
        color: #fff;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #pledgePEPdayOB {
        width: 44.5px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 6px 5px 7px 8px; 
        font-size: 12px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        width: 105px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB { 
        width: 53px; 
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 12px; 
        color: #fff;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1180px) { /* 1180 */

    #pledgePEPdayOB {
        width: 44.5px; 
        padding: 0 5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 6px 5px 7px 8px; 
        font-size: 12px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        width: 105px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB { 
        width: 53px; 
        margin: 0 0 0 5px;
        padding: 0;
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 12px; 
        color: #fff;
    }
}
@media screen and (min-width: 1181px) {
    
    #pledgePEPdayOB {
        width: 62px;
        padding: 0 5px 0 0;
        text-align: center;
    }
    #pledgeDOBday {
        padding: 6px 5px 7px 8px; 
        font-size: 12px; 
        color: #fff;
    }
    #DropDownContainerPEPMonth {
        width: 123px;
        margin: 5px 0 0 0;
        padding: 0;
    }
    #pledgePEPyearOB {
        min-width: 62px;
        margin: 0 0 0 4.5px;
        padding: 0; 
        text-align: center;
    }
    #pledgeDOByear {
        padding: 6px 5px 7px 10px; 
        font-size: 12px; 
        color: #fff;
    }
}


#pledgeDOBmonthPEP { /* Select */
    scrollbar-width: none;
}
#pledgeDOBmonthPEP option { /* Option */
    margin-right: 6px;
    border-radius: 4px;
    padding: 3px 5px 4px 4px;
    color: #D0D0D0;
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 341px) { 

    #pledgeDOBmonthPEP {
        width: 110px;
        margin: 4px 0 0 0;
        padding: 9px 0 10px 6px;
    }  
    #pledgeDOBmonthPEP option {
        font-size: 13px;
    }
}
@media screen and (min-width: 342px) and (max-width: 767px) { 

    #pledgeDOBmonthPEP {
        width: 110px;
        margin: 4px 0 0 0;
        padding: 9px 0 10.5px 6px;
    }  
    #pledgeDOBmonthPEP option {
        font-size: 13px;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #pledgeDOBmonthPEP {
        width: 118px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #pledgeDOBmonthPEP option {
        font-size: 13px;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {    
    
    #pledgeDOBmonthPEP {
        width: 118px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }
    #pledgeDOBmonthPEP option {
        font-size: 13px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
    
    #pledgeDOBmonthPEP {
        width: 120px;
        margin: 0;
        padding: 9px 0 10px 6px;
    }
    #pledgeDOBmonthPEP option {
        font-size: 13px;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledgeDOBmonthPEP {
        width: 105px;
        margin: 0;
        padding: 9px 0 10.5px 6px;
    }    
    #pledgeDOBmonthPEP option {
        font-size: 13px;            
    }
}
@media screen and (min-width: 1025px) {
    
    #pledgeDOBmonthPEP {
        margin: 0;
        padding: 6px 5px 7px 6px;
    }
    #pledgeDOBmonthPEP option {
        margin-right: 1px;
        font-size: 12px;
    }
}

/* ////////////////////////////////////////////////////////////////////////// */

#pEditMainInner {
    border-radius: 34px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;    
}
#pEditDetails {
    background: none;   
}
@media screen and (min-width: 320px) and (max-width: 384px) {

    #pledgeEditProfileWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeEditProfileContainer {
        margin: 0 10px 15px 10px; 
        padding: 0; 
    }
    #pEditMainInner {
        margin: 78px 0 0 0;
        /*margin: 72px 0 0 0; */
        padding: 16px 15px 80px 15px;
        /*padding: 20px 20px 80px 20px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }    
    #pEditAlertWrapper {
        display: none;
    }
    #pEditDetails {
        margin: 25px 10px 0 10px; 
        padding: 0; 
    }
    #pledgeEditProfile {
        height: 85px;
        margin: 20px 0 0 0;
        padding: 0;
    }
    #PledgeUsernamePEP {
        height: 95px;
        margin: 95px 0 0 0;
        padding: 0;      
    }   
    .pledgeEProUsernameInfo {        
        margin: 3px 0 2px 0; 
        padding: 0;        
        color: #888; 
        font-size: 12px; 
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify;
        background-color: transparent;
        border: none; 
    }
    #pledgeEProPassword {
        height: 110px;
        margin: 70px 0 30px 0;
        padding: 0;        
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        height: auto;
        margin: 10px 0 50px 0;
        padding: 0;
    }

    /* /// DOB /// */

    #PledgeDOBContainerPEP {
        margin: 25px 0 55px 0; 
        padding: 0;
    }   
    #DOBrowPEP {
        margin-top: 2px;
        padding: 0;
        justify-content: center;
    }

    /* /// Post Code /// */

    #PledgePostCodeContainerPEP {
        height: 100px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 0 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }
}
@media screen and (min-width: 385px) and (max-width: 767px) {

    #pledgeEditProfileWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeEditProfileContainer {
        margin: 0 10px 15px 10px; 
        padding: 0; 
    }
    #pEditMainInner {
        margin: 78px 0 0 0;
        /*margin: 72px 0 0 0; */
        padding: 20px 20px 80px 20px;
        /*padding: 20px 20px 80px 20px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d; */
    }    
    #pEditAlertWrapper {
        display: none;
    }
    #pEditDetails {
        margin: 25px 0 0 0;
        /*margin: 25px 10px 0 10px; */
        padding: 0; 
    }
    #pledgeEditProfile {
        height: 85px;
        margin: 20px 0 0 0;
        padding: 0;
    }
    #PledgeUsernamePEP {
        height: 95px;
        margin: 85px 0 0 0;
        padding: 0;      
    }   
    .pledgeEProUsernameInfo {        
        margin: 3px 0 2px 0; 
        padding: 0;        
        color: #888; 
        font-size: 12px; 
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify;
        background-color: transparent;
        border: none; 
    }
    #pledgeEProPassword {
        height: 110px;
        margin: 70px 0 30px 0;
        padding: 0;        
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        height: auto;
        margin: 10px 0 50px 0;
        padding: 0;
    }

    /* /// DOB /// */

    #PledgeDOBContainerPEP {
        margin: 25px 0 55px 0; 
        padding: 0;
    }   
    #DOBrowPEP {
        margin-top: 2px;
        padding: 0;
        justify-content: center;
    }

    /* /// Post Code /// */

    #PledgePostCodeContainerPEP {
        height: 100px;
        margin: 0 0 5px 0;
        padding: 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 0 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {
    
    #pledgeEditProfileWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgeEditProfileContainer {
        width: 70%;
        margin: 74px auto 0 auto;
        /*margin: 68px auto 0 auto;*/
        padding: 0;
    }
    #pEditMainInner {
        margin: 0; 
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
    #pEditDetails {
        margin: 25px 20px 0 20px; 
        padding: 0;    
    }
    #pEditAlertWrapper {
        display: none;
    }    
    #pledgeEditProfile {
        height: 95px;
        margin: 20px 0 0 0;
        padding: 0;
    }
    #PledgeUsernamePEP {
        height: 85px;
        margin: 72px 0 50px 0;
        padding: 0;
    }                 
    .pledgeEProUsernameInfo {        
        margin: 5px 0 2px 0; 
        padding: 0 5px 0 0;        
        color: #888; 
        font-size: 12px; 
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify;
        background-color: transparent;
        border: none; 
    }         
    #pledgeEProPassword {
        height: 132px;
        margin: 80px 0 0 0;
        padding: 0;
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        height: 170px;
        margin: 0;
        padding: 0;       
    }

    /* /// DOB /// */

    #PledgeDOBContainerPEP {
        height: 130px;
        margin: -30px 0 0 0; 
        padding: 0;
    }     
    #DOBrowPEP {
        margin: 0;
        padding: 0;
        justify-content: center;
    }  
    
    /* /// Post Code /// */

    #PledgePostCodeContainerPEP {
        height: 170px;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 0 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) {

    #pledgeEditProfileWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgeEditProfileContainer {
        width: 65%;
        margin: 74px auto 50px auto;
        /*margin: 68px auto 50px auto;*/
        padding: 0;
    }
    #pEditMainInner {
        margin: 0; 
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
    #pEditAlertWrapper {
        display: none;
    }
    #pEditDetails {
        margin: 25px 15px 0 15px; 
        padding: 0;    
    }
    #pledgeEditProfile {
        height: 95px;
        margin: 10px 0 0 0;
        padding: 0;
    }

    #PledgeUsernamePEP {
        height: 90px;
        margin: 67px 0 0 0;
        padding: 0; 
    } 
    .pledgeEProUsernameInfo {
        margin: 5px 0 2px 0; 
        padding: 0 40px 0 0;  
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: transparent;
        border: none; 
    }  
    #pledgeEProPassword {
        height: 132px;
        margin: 70px 0 0 0;
        padding: 0;
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        height: 170px;
        margin: 0;
        padding: 0;       
    }

    /* /// DOB /// */

    #PledgeDOBContainerPEP {
        height: 130px;
        margin: -30px 0 0 0; 
        padding: 0;
    }
    #DOBrowPEP {
        margin: 0;
        padding: 0;
        justify-content: center;
    }

    /* /// Post Code /// */

    #PledgePostCodeContainerPEP {
        height: 170px;
        margin: 0;
        padding: 0 15px 0 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 0 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }    
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #pledgeEditProfileWrapper {
        width: 54.5%;
    }
    #pledgeEditProfileContainer {
        width: 100%;
        margin: 74px auto 50px auto;
        /*margin: 68px auto 50px auto;*/
        padding: 0;
    }
    #pEditMainInner {
        margin: 0; 
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    #pEditAlertWrapper {
        display: none;
    }
    #pEditDetails {
        margin: 25px 10px 0 10px; 
        padding: 0;    
    }
    #pledgeEditProfile {
        height: 95px;
        margin: 10px 0 0 0;
        padding: 0;
    }
    #PledgeUsernamePEP {
        height: 90px;
        margin: 62px 15px 0 0;
        padding: 0; 
    } 
    .pledgeEProUsernameInfo {
        margin: 5px 0 2px 0; 
        padding: 0 40px 0 0;  
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: transparent;
        border: none; 
    }  

    #pledgeEProPassword {
        height: 132px;
        margin: 62px 15px 20px 0;
        padding: 0;
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        position: relative;
        height: 170px;
        margin: 10px 0 0 0;
        padding: 0 40px 0 0;        
    }

    /* /// DOB /// */

    #PledgeDOBContainerPEP {
        height: 170px;
        width: 100%;
        margin: 10px 0 0 0; 
        padding: 0;
    }
    #DOBrowPEP {
        margin: 0;
        padding: 0;
    }
    
    /* /// Post Code /// */

    #PledgePostCodeContainerPEP {
        margin: 0;
        padding: 0 15px 0 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 20px 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledgeEditProfileWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeEditProfileContainer {
        margin: 0 10px 15px -7px; 
        padding: 0; 
    }
    #pEditMainInner {
        margin: 74px 0 0 0;
        /*margin: 68px 0 0 0; */
        padding: 20px 20px 100px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #pEditAlertWrapper {
        display: none;
    }
    #pEditDetails {
        width: auto;
        margin: 25px 10px 0 10px; 
        padding: 0;    
    }
    #pledgeEditProfile {
        height: 95px;
        margin: 10px 0 0 0;
        padding: 0;
    }
    #PledgeUsernamePEP {
        height: 90px;
        margin: 62px 0 0 0;
        padding: 0; 
    } 
    .pledgeEProUsernameInfo {
        margin: 5px 0 2px 0; 
        padding: 0 40px 0 0;  
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background-color: transparent;
        border: none; 
    }  
    #pledgeEProPassword {
        height: 132px;
        margin: 62px 0 20px 0;
        padding: 0;
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        width: 100%;
        margin: 0;
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        position: relative;
        height: 200px;
        width: auto;
        margin: 10px 0 0 0;
        padding: 0;        
    }

    /* /// DOB /// */

    #PledgeDOBContainerPEP {
        float: right;
        height: 170px;
        width: 210px;
        margin: 10px 0 0 0; 
        padding: 0;
    }
    #DOBrowPEP {
        margin: 0;
        padding: 0;
    }

    /* /// Post Code /// */
    
    #PledgePostCodeContainerPEP {
        height: 100px;
        width: 100%;
        margin: 0;
        padding: 0 15px 0 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 20px 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1180px) { /* 1138 + 1180 */

    #pledgeEditProfileWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeEditProfileContainer {
        margin: 0 10px 15px -7px; 
        padding: 0; 
    }
    #pEditMainInner {
        margin: 74px 0 0 0;
        /*margin: 68px 0 0 0; */
        padding: 20px 20px 100px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #pEditAlertWrapper {}
    
    #pEditDetails {
        width: auto;
        margin: 55px 10px 0 10px; 
        padding: 0;            
    }
    #pledgeEditProfile {
        height: 110px;
        margin: 0;
        padding: 0;
    }
    #PledgeUsernamePEP {
        height: 110px;
        margin: 0;
        padding: 0; 
    }
    .pledgeEProUsernameInfo {
        margin: 5px 0 2px 0; 
        padding: 0 40px 0 0;  
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background: none;
        border: none; 
    }       
    #pledgeEProPassword {
        height: 110px;
        margin: 0;
        padding: 0; 
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        width: 100%;
        margin: 0;
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        height: 190px;
        margin: 10px 0 0 0;
        padding: 0 40px 0 0;      
    }

    /* /// DOB /// */
    
    #PledgeDOBContainerPEP {
        float: right;
        height: 170px;
        width: 210px;
        margin: 10px 0 0 0; 
        padding: 0;
    }
    #DOBrowPEP {
        margin: 0;
        padding: 0;
    }

    /* /// Post Code /// */

    #PledgePostCodeContainerPEP {
        height: 100px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 20px 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }
}
@media screen and (min-width: 1181px) {

    #pledgeEditProfileWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeEditProfileContainer {
        margin: 0 10px 15px -57px; 
        padding: 0; 
    }
    #pEditMainInner {
        margin: 74px 0 0 0;
        /*margin: 68px 0 0 0; */ 
        padding: 20px 20px 100px 20px;
        border: 2px solid #333;
        background-color: #111; 
    }
    #pEditAlertWrapper {}
    
    #pEditDetails {
        width: auto;
        margin: 20px 15px 0 15px; 
        padding: 30px 0 0 0;           
    }
    #pledgeEditProfile {
        height: 80px;
        margin: 5px 0 15px 0;
        padding: 0;
    }
    #PledgeUsernamePEP {
        height: 95px;
        margin: 5px 0 0 0; 
        padding: 0;
    }
    .pledgeEProUsernameInfo {
        margin: 5px 0 2px 0; 
        padding: 0 40px 0 0;  
        color: #888; 
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word; 
        text-align: justify; 
        background: none;
        border: none; 
    }       
    #pledgeEProPassword {
        height: 70px;
        margin: 5px 0 20px 0;
        padding: 0;
    }

    /* /// Country /// */

    #countryDOBContainerPEP {
        width: 100%;
        margin: 0;
        padding: 0; 
    }
    #PledgeCountryContainerPEP {
        height: 190px;
        margin: 10px 0 0 0;
        padding: 0 40px 0 0;      
    }

    /* /// DOB /// */

    #PledgeDOBContainerPEP {
        float: right;
        height: 170px;
        margin: 10px 0 0 0; 
        padding: 0;
    }     
    #DOBrowPEP {
        margin: 0;
        padding: 0;
    }

    /* /// Post Code /// */

    #PledgePostCodeContainerPEP {
        height: 100px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #PledgeRegoPostCodePEP {
        margin: 2px 0 0 0; 
        padding: 0;    
    }

    /* /// Current Avatar /// */

    #selectImageHolderPEP {
        margin: 20px 0 -25px 0; 
        padding-bottom: 0;
        text-align: center;
    }
}

/* // Pledsta Country // */

#pledge_counrtyPEP { /* select */
    scrollbar-width: none;
}
#pledge_counrtyPEP option { /* Option */
    margin-right: 6px;
    border-radius: 4px;
    padding: 3px 5px 4px 4px;
    color: #D0D0D0;
    cursor: pointer;
}

@media screen and (min-width: 320px) and (max-width: 800px) {

    #pledge_counrtyPEP {
        padding: 9px 0 10.5px 6px;
    }    
    #pledge_counrtyPEP option {
        font-size: 13px; 
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {

    #pledge_counrtyPEP {
        padding: 9px 0 10px 6px;
    }
    #pledge_counrtyPEP option {
        font-size: 13px; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledge_counrtyPEP {
        padding: 9px 0 10px 6px;
    }
    #pledge_counrtyPEP option {
        font-size: 13px; 
    }
}
@media screen and (min-width: 1025px) {

    #pledge_counrtyPEP {
        padding: 6px 0 7px 6px;
    }
    #pledge_counrtyPEP option {
        font-size: 12px; 
    }
}
@media screen and (min-width: 768px) {
    
    #PEDropDownContainer {
        height: 110px;
        margin: 0 15px 0 15px;
        padding: 0;
    }
    #PEDropDownContainer option{
        cursor: pointer;
    }
}

/* /// pledge edit profile custom Scroll /// */

#pledgeDOBmonthPEP::-webkit-scrollbar {
    border-radius: 6px;
    width: 12px;
    background-color: rgba(0,0,0);
}
#pledgeDOBmonthPEP::-webkit-scrollbar-button {
    border-radius: 5px;
    background-color: #000;
}
#pledgeDOBmonthPEP::-webkit-scrollbar-thumb {    
    height: 70px;
    border: 2px solid #000;
    border-radius: 5px;
    background-color: #111;
}
#PEDropDownInner {
    position: relative;
    margin: 0 0 0 -15px; 
    padding: 0 15px 0 0; 
    z-index: 1000;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .restrictedAlert {
        height: auto;
        width: 165px;
        margin: 0 0 11px 2px;
        padding: 9px 0 9px 0;
        color: #FF0000;
        font-size: 12px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
    }
    .restrictedAlert:hover {
        cursor: default;
    }
    .suspendedAlert {
        height: auto;
        width: 180px;
        margin: 8px 0 3px 20px;
        padding: 8px 10px 8px 10px;
        font-size: 12px;
        color: #ff0000;
        text-align: center;
        background-color: #000; 
        border: 2px solid #333;
        border-radius: 6px;
    }
    .suspendedAlert:hover {
        cursor: default;
    }
}
@media screen and (min-width: 1025px) {
    
    .restrictedAlert {
        height: 38px;
        width: 165px;
        margin: 10px 0 15px 0;
        padding: 8px 10px 8px 10px;
        font-size: 12px;
        color: #ff0000;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111; 
    }
    .restrictedAlert:hover {
        cursor: default;
    }
    .suspendedAlert {
        height: 38px;
        width: 165px;
        margin: 10px 0 15px 0;
        padding: 8px 10px 8px 10px;
        font-size: 12px;
        color: #ff0000;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;         
    }
    .suspendedAlert:hover {
        cursor: default;
    }
} 

/* // END - PLEDGSTA OPTIONS/EDIT PROFILE PAGE // */

/* ============================================== */

/* ///////// PLEDGSTA/ARTIST UPDATE CARD PAGE ////////// */

#updateCContainer {
    margin: 0 0 120px 0; 
    padding: 0;
}
#UpdateCConfirmWrapper {
    margin: 0; 
    padding: 0;
}
#fixErrorContainer {
    margin-bottom: 5px;
    padding: 0;  
    background-color: #111; 
    border-radius: 8px;
}
#fixErrorText {
    margin: 7px 0 0 5px; 
    padding: 10px 0 10px 20px; 
    color: #ff0000; 
    font-size: 12px; 
    line-height: 1.4; 
    word-break: break-word;  
}
#fixErrorButtHolder {
    margin: 5px 0 10px -5px; 
    padding: 0;
}
.fixErrorButt {  
    height: 32px;
    width: 100px;
    float: right;
    margin: 5px 10px 0 5px;
    padding-top: 3px;        
    border-radius: 6px;   
    border: 2px solid red;
    background-color: #000;   
    color: #999;  
    font-size: calc(8px + 0.2vw);
    text-align: center;
    transition: all 0.4s linear;
}
.fixErrorButt:hover {
    cursor: pointer;
    color: #999;       
    background-color: #222;
}
#fixErrorEmailText {
    margin: 13px 0 13px 0; 
    color: #ff0000; 
    font-size: 12px; 
    line-height: 1.4; 
    word-break: break-word;
    text-align: center;
    transition: all 0.4s linear;
}
#fixErrorEmailText:hover {
    cursor: pointer;
    color: #999;       
    background-color: #111;
}
#fixUpdateContainer {
    margin-bottom: 2px;
    padding: 0; 
    border: 2px solid red; 
    background-color: #111; 
    border-radius: 8px;
}
.cardSuccessAlertPUC {
    margin: 10px 0 0 0; 
    padding: 11px 10px 10px 10px; 
    color: #0088FF; 
    font-size: calc(9px + 0.3vw); 
    text-align: center;
    border-radius: 6px; 
    background-color: #111;
}

#UpdateCtableContainer { 
    border-radius: 34px;
    box-shadow: 5px 5px 10px #000000,
              -1px -1px 10px #1b1b1b;    
}

@media screen and (min-width: 320px) and (max-width: 359px) {

    #updtateCWrapper {
        margin: 0; 
        padding: 0;
    }
    #UpdateCtableContainer {
        margin: 72px 10px 100px 10px;
        padding: 16px 15px 5px 15px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
}
@media screen and (min-width: 360px) and (max-width: 767px) {

    #updtateCWrapper {
        margin: 0; 
        padding: 0;
    }
    #UpdateCtableContainer {
        margin: 72px 10px 100px 10px; 
        padding: 16px 15px 5px 15px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */

    #updateCContainer {
        width: 100%;
    }
    #updtateCWrapper {
        margin: 0;
        padding: 0;
    }
    #UpdateCtableContainer {
        width: 70%;
        margin: 68px auto 165px auto;
        padding: 20px 20px 10px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #updateCContainer {
        width: 100%;
    }
    #updtateCWrapper {
        margin: 0;
        padding: 0;
    }
    #UpdateCtableContainer {
        width: 70%;
        margin: 68px auto 165px auto;
        padding: 20px 20px 10px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) { /* 960 */

    #updateCContainer {
        width: 100%;
    }
    #updtateCWrapper {
        margin: 0;
        padding: 0;
    }
    #UpdateCtableContainer {
        width: 65%;
        margin: 68px auto 135px auto;
        padding: 20px 20px 10px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #updtateCWrapper {
        margin: 0 0 0 220px; 
        padding: 0;
    }
    #UpdateCtableContainer {
        margin: 68px 0 135px 0; 
        padding: 20px 20px 20px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

    #updtateCWrapper {
        margin: 0 0 0 235px; 
        padding: 0;
    }
    #UpdateCtableContainer {
        margin: 67px 0 135px 0;
        padding: 20px 20px 10px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
     #updtateCWrapper {
        margin: 0 0 0 -7px; 
        padding: 0;
    } 
    #UpdateCtableContainer {
        /*margin: 74px 0 100px 0;*/
        margin: 68px 0 100px 0; 
        padding: 20px 20px 10px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1180px) { /* 1180 */
    
     #updtateCWrapper {
        margin: 0 0 0 -7px; 
        padding: 0;
    } 
    #UpdateCtableContainer {
        /*margin: 74px 0 100px 0; */
        margin: 68px 0 100px 0; 
        padding: 20px 20px 10px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1181px) and (max-width: 1200px) { /* 1200 */
    
     #updtateCWrapper {
        margin: 0 0 0 -57px; 
        padding: 0;
    } 
    #UpdateCtableContainer {
        /*margin: 74px 0 100px 0; */
        margin: 68px 0 100px 0;  
        padding: 20px 20px 10px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1201px) {
    
     #updtateCWrapper {
        margin: 0 0 0 -57px; 
        padding: 0;
    } 
    #UpdateCtableContainer {
        /*margin: 74px 0 100px 0; */
        margin: 68px 0 100px 0; 
        padding: 20px 20px 10px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
}

/* ///// Pledgsta Update Card Table ///// */

#pledgesCardTable { 
    margin: 20px 0 10px 0;
    padding: 13px 0 10px 0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 17px;
    border-bottom-left-radius: 17px;
}
#pledgesCardTableFrame {
    margin: 0;
    padding: 0 0 5px 0;

}
#pledgesCardTable table { 
    table-layout: auto;
    width: 100%;
    margin: 0;
    padding: 0;    
    border-collapse: collapse;
}
#pledgesCardTable thead th:nth-child(1) {
    width: 70%;
    color: #999;
}
#pledgesCardTable thead th:nth-child(2) {
    width: 15%;
    color: #999;
}
#pledgesCardTable thead th:nth-child(3) {
    width: 1%;
    margin: 0;
    padding-left: 8px;
    color: #999;
}
#pledgesCardTable thead th {
    padding: 0 0 5px 0;
}
#fixUpdateEmailText {
    margin: 13px 0 13px 0; 
    color: #ff0000; 
    font-size: 12px; 
    line-height: 1.4; 
    word-break: break-word;
    text-align: center;
    transition: all 0.4s linear;
}
#fixUpdateEmailText:hover {
    cursor: pointer;
    color: #999;       
    background-color: #111;
}
.updatecardArtistTitle {
    position: relative;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}
.updatecardArtistTitle:before {
    content: '';
    position: absolute;
}
@media screen and (min-width: 320px) and (max-width: 823px) {

    .pledgesEditUDC {  
        width: 60px;
        height: 32px;
        margin: 0 10px 0 5px;
        padding: 2px 0 0 0;         
        color: #888;  
        font-size: calc(8px + 0.2vw);
        text-align: center;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;
        transition: all 0.4s linear;   
    }
    .pledgesEditUDC:hover {
        cursor: pointer;
        border: 2px solid #0088FF;
        color: #0088FF;       
        background-color: #111;
    }
}
@media  screen and (min-width: 824px) {
    
    .pledgesEditUDC {  
        width: 100px;
        height: 32px;
        margin: 0 10px 0 5px;
        padding-top: 2px;         
        color: #888;
        font-size: calc(8px + 0.2vw);
        text-align: center;
        border-radius: 6px;   
        border: 2px solid #333;
        background-color: #000;          
        transition: all 0.4s linear;   
    }
    .pledgesEditUDC:hover {
        cursor: pointer;
        border: 2px solid #0088FF;
        color: #0088FF;       
        background-color: #111;
    }
}

/* ////////////// Update Card Table Screen Sizes ////////////// */

@media screen and (min-width: 320px) and (max-width: 599px) {

    #pledgesCardTable thead th:nth-child(1) {
        padding-left: 10px;
    }
    #pledgesCardTable {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgesCardTableFrame {
        background-color: #0a0a0a;
    }
    #pledgesCardTable table {
        background-color: #0a0a0a;
    }
    #pledgesCardTable thead th {
        border-bottom: 2px solid #222;
    }
    #pledgesCardTable tbody tr:nth-child(odd) {
        background-color: #0a0a0a;
    }
    #pledgesCardTable tbody tr:nth-child(even) {
        background-color: #0a0a0a;
    }
    #pledgesCardTable tbody tr:hover {
        background-color: #141414;
    }
    #pledgesCardTable tbody td {
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }
}
@media screen and (min-width: 600px) and (max-width: 1023px) {

    #pledgesCardTable thead th:nth-child(1) {
        padding-left: 13px;
    }
    #pledgesCardTable {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgesCardTableFrame {
        background-color: #0a0a0a;
    }
    #pledgesCardTable table {
        background-color: #0a0a0a;
    }
    #pledgesCardTable thead th {
        border-bottom: 2px solid #222;
    }
    #pledgesCardTable tbody tr:nth-child(odd) {
        background-color: #0a0a0a;
    }
    #pledgesCardTable tbody tr:nth-child(even) {
        background-color: #0a0a0a;
    }
    #pledgesCardTable tbody tr:hover {
        background-color: #141414;
    }
    #pledgesCardTable tbody td {
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledgesCardTable thead th:nth-child(1) {
        padding-left: 13px;
    }
    #pledgesCardTable {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #pledgesCardTableFrame {
        background-color: #0a0a0a;
    }
    #pledgesCardTable table {
        background-color: #0a0a0a;
    }
    #pledgesCardTable thead th {
        border-bottom: 2px solid #222;
    }
    #pledgesCardTable tbody tr:nth-child(odd) {
        background-color: #0a0a0a;
    }
    #pledgesCardTable tbody tr:nth-child(even) {
        background-color: #0a0a0a;
    }
    #pledgesCardTable tbody tr:hover {
        background-color: #141414;
    }
    #pledgesCardTable tbody td {
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;      
    }
}
@media screen and (min-width: 1025px) {

    #pledgesCardTable thead th:nth-child(1) {
        padding-left: 13px;
    }
    #pledgesCardTable {
        border: 2px solid #333;
        background-color: #111; 
    }
    #pledgesCardTableFrame {
        background-color: #111;  
    }
    #pledgesCardTable table {
        background-color: #111;
    }
    #pledgesCardTable thead th {
        border-bottom: 2px solid #333;
    }
    #pledgesCardTable tbody tr:nth-child(odd) {
        background-color: #111;
    }
    #pledgesCardTable tbody tr:nth-child(even) {
        background-color: #111;
    }
    #pledgesCardTable tbody tr:hover {
        background-color: #1b1b1b;
    }
    #pledgesCardTable tbody td {
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }
}

#pledgesCardTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/* ///////////////// Update Card Table Data ///////////////// */

@media screen and (min-width: 320px) and (max-width: 345px) {    

    #pledgesCardTable { 
        margin-top: 15px;
        /*border-radius: 10px;*/
    }
    #pledgesCardTableFrame {
        padding-bottom: 0; 
    }        
    #UpdateCtableWrapper {
        margin: 0;
        padding: 0;
    }
    #pledgesCardTable thead th {
        font-size: 11px; 
    }    
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }       
    .UpdateCardAvatar {
        width: 32px;
        height: 32px;
        margin: 10px 0 10px 16px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: 65px;
        margin: 19.75px 0 0 8px;
        font-size: 9px;
    }
    .cardIcon {
        height: 20px;
        width: auto;
        margin: 16.5px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 3px;
    }    
    .UpdateCardtableh1 {
        margin: 21px 0 0 1px;
        font-size: 9px;            
    } 
    .UpdateCardButt {
        height: 28px;
        width: 46px;
        margin: 12px 0 12px -14px;
        padding: 0.5px 0 0 0; 
        color: #666;
        font-size: 9.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #252525;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 346px) and (max-width: 362px) {    
    
    #pledgesCardTable { 
        margin-top: 15px;
        /*border-radius: 10px;*/
    }
    #pledgesCardTableFrame {
        padding-bottom: 0; 
    }    
    #UpdateCtableWrapper {
        margin: 0;
        padding: 0;
    }
    #pledgesCardTable thead th {
        font-size: 11px; 
    }    
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }       
    .UpdateCardAvatar {
        width: 32px;
        height: 32px;
        margin: 10px 0 10px 16px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: 85px;
        margin: 19.75px 0 0 8px;
        font-size: 9px;
    }
    .cardIcon {
        height: 20px;
        width: auto;
        margin: 16.5px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 3px;
    }    
    .UpdateCardtableh1 {
        margin: 21px 0 0 1px;
        font-size: 9px;            
    }
    .UpdateCardButt {
        height: 28px;
        width: 48px;
        margin: 12px 0 12px -9px;
        padding: 0.5px 0 0 0; 
        color: #666;
        font-size: 9.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #252525;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 363px) and (max-width: 376px) {

    #pledgesCardTable { 
        margin-top: 15px;
        /*border-radius: 10px;*/
    }
    #pledgesCardTableFrame {
        padding-bottom: 0; 
    }    
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 11.5px; 
    }    
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }       
    .UpdateCardAvatar {
        width: 32px;
        height: 32px;
        margin: 10px 8px 10px 17px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: 85px;
        margin: 19.5px 0 0 0;
        font-size: 10px;
    }
    .cardIcon {
        height: 20px;
        width: auto;
        margin: 16.5px 0 0 4px;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 21px 0 0 0;
        font-size: 10px;            
    } 
    .UpdateCardButt {
        height: 30px;
        width: 54px;
        margin: 11px 0 11px -12px;
        padding: 0.5px 0 0 0; 
        color: #666;
        font-size: 10.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #252525;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 377px) and (max-width: 413px) {    

    #pledgesCardTable { 
        margin-top: 15px;
        /*border-radius: 10px;*/
    }
    #pledgesCardTableFrame {
        padding-bottom: 0; 
    }    
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 12px; 
    }    
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }       
    .UpdateCardAvatar {
        width: 32px;
        height: 32px;
        margin: 10px 8px 10px 17px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: 88px;
        margin: 19.5px 0 0 0;
        font-size: 11px;
    }
    .cardIcon {
        height: 22px;
        width: auto;
        margin: 16px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }
    .UpdateCardtableh1 {
        margin: 21px 0 0 1px;
        font-size: 11px;            
    } 
    .UpdateCardButt {
        height: 30px;
        width: 54px;
        margin: 11px 5px 11px 0;
        padding: 0.5px 0 0 0; 
        color: #666;
        font-size: 11.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #252525;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 414px) and (max-width: 475px) {

    #pledgesCardTable { 
        margin-top: 15px;
        /*border-radius: 10px;*/
    }   
    #pledgesCardTableFrame {
        padding-bottom: 0; 
    }        
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 12px; 
    }    
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 10px 10px 17px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: 98px;
        margin: 22px 0 0 0;
        font-size: 11px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 2px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 24px 0 0 1px;
        font-size: 11px;            
    }
    .UpdateCardButt {
        height: 30px;
        width: 64px;
        margin: 14px 2px 14px 0;
        padding: 0.5px 0 0 0; 
        color: #666;
        font-size: 11.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #252525;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }    
}
@media screen and (min-width: 476px) and (max-width: 599px) {

    #pledgesCardTable { 
        margin-top: 15px;
        /*border-radius: 10px;*/
    }
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 13px; 
    }    
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 10px 10px 17px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: 108px;
        margin: 19.75px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18.5px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 30px;
        width: 88px;
        margin: 14px 5px 14px 0;
        padding: 0.5px 0 0 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #252525;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 1px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 + 732 */

    #pledgesCardTable { 
        margin-top: 15px;
    }
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 12px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 88px;
        margin: 13px 5px 13px 0;
        padding: 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 733px) and (max-width: 767px) {

    #pledgesCardTable { 
        margin-top: 15px;
    }
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 12px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 88px;
        margin: 13px 5px 13px 0;
        padding: 0 0 0 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */

    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 12px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 0 0 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 15px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 0 0 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) { /* 960 */

    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 15px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
   
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 15px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 100px;
        margin: 13px 7px 13px 0;
        padding: 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) { 
 
    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 15px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 24px;
        width: auto;
        margin: 18px 0 0 4px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 100px;
        margin: 13px 7px 13px 0;
        padding: 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) { 

    #UpdateCtableWrapper {
        margin: 0; 
        padding: 0;
    }  
    #pledgesCardTable thead th {
        font-size: 14px; 
    }
    #pledgesCardTable tbody tr td {
        padding-top: 0;
        padding-bottom: 0; 
    }
    .UpdateCardAvatar {        
        height: 38px;
        width: 38px;
        margin: 10px 15px 10px 20px;
        padding: 0;
        border-radius: 6px;
    }
    .updatecardArtistTitle {
        height: 16px;
        width: auto;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cardIcon {
        height: 26px;
        width: auto;
        margin: 16px 0 0 3px;
        padding: 0;
        border: none;
        border-radius: 4px;
    }  
    .UpdateCardtableh1 {
        margin: 22.5px 0 0 1px;
        font-size: 12px;            
    }
    .UpdateCardButt {
        height: 32px;
        width: 100px;
        margin: 13px 7px 13px 0;
        padding: 0; 
        color: #666;
        font-size: 12.5px;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;   
    }
    .UpdateCardButt:hover {
        cursor: pointer;
        color: #0088FF;
        border: 2px solid #0088FF;
        background-color: #111;
    }
}

/* //////////// Update Card Alerts - Top Of Table ///////////// */

@media screen and (min-width: 320px) and (max-width: 345px) {

    #fixUpdateRow {
        margin: 0 0 8px 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #fixUpdateTextPUC {
        margin: 0 5px 0 5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePUC {
        display: none; 
    }    
    #fixBreakPUC1 {
        display: none;
    }
    #fixUpdateButtHolderPUC {
        width: 100%;
        margin: 10px 0 10px 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 { 
        height: 28px;
        width: 76px;
        margin: 0;
        padding: 0;        
        color: #999; 
        font-size: 10px;
        text-align: center;
        line-height: 1.2;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }       
}
@media screen and (min-width: 346px) and (max-width: 362px) {

    #fixUpdateRow { 
        margin: 0 0 8px 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #fixUpdateTextPUC {
        margin: 0 5px 0 5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePUC {
        display: none; 
    }    
    #fixBreakPUC1 {
        display: none;
    }
    #fixUpdateButtHolderPUC {
        width: 100%;
        margin: 10px 0 10px 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 { 
        height: 28px;
        width: 76px;
        margin: 0;
        padding: 0;        
        color: #999; 
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }   
}
@media screen and (min-width: 363px) and (max-width: 376px) {

    #fixUpdateRow { 
        margin: 0 0 8px 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #fixUpdateTextPUC {
        margin: 0 5px 0 5px; 
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePUC {
        display: none; 
    }    
    #fixBreakPUC1 {
        display: none;
    }
    #fixUpdateButtHolderPUC {
        width: 100%;
        margin: 10px 0 10px 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 { 
        height: 28px;
        width: 76px;
        margin: 0;
        padding: 0;        
        color: #999; 
        font-size: 10px;
        text-align: center;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }   
}
@media screen and (min-width: 377px) and (max-width: 413px) {

    #fixUpdateRow {
        width: 100%;
        margin: 0 0 5px 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #fixUpdateTextPUC {
        margin: 0; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePUC {
        display: none; 
    }    
    #fixBreakPUC1 {
        display: none;
    } 
    #fixUpdateButtHolderPUC {
        width: 100%;
        margin: 10px 0 10px 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 {  
        height: 30px; 
        width: 88px;
        margin: 4px 0 0 0;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 11px;
        text-align: center;
        line-height: 1.2;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }       
}
@media screen and (min-width: 414px) and (max-width: 475px) {

    #fixUpdateRow {
        width: 100%;
        margin: 0 0 5px 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #fixUpdateTextPUC {
        margin: 0; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12.5px;
        text-align: center;
    }
    #fixUpdateTrianglePUC {
        display: none; 
    }    
    #fixBreakPUC1 {
        display: none;
    } 
    #fixUpdateButtHolderPUC {
        width: 100%;
        margin: 10px 0 10px 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 {  
        height: 32px; 
        width: 82px;
        margin: 4px 0 0 0;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 11px;
        text-align: center;
        line-height: 1.2;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }  
}
@media screen and (min-width: 476px) and (max-width: 599px) {

    #fixUpdateRow { /* if not here. The row element not used */ 
        margin: 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    } 
    #fixUpdateTextPUC {
        margin: 0; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePUC {
        display: none; 
    }    
    #fixBreakPUC1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixBreakPUC2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolderPUC {
        margin: 14px 0 15px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 {  
        height: 32px;
        width: 94px;
        margin: 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    } 

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }       
}
@media screen and (min-width: 600px) and (max-width: 767px) { /* 600 + 640 + 732 */
 
    #fixUpdateRow { /* if not here. The row element not used */
        margin: 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #fixUpdateTextPUC {
        margin: 0; 
        padding: 0 15px 0 15px; 
        color: #ff0000;
        font-size: 13px;
        text-align: center;
        word-break: break-word;
    }
    #fixUpdateTrianglePUC {
        display: none; 
    }
    #fixBreakPUC1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixBreakPUC2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolderPUC {
        margin: 15px 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 {  
        height: 32px;
        width: 94px;
        margin: 0;
        padding: 0 2px 0 2px;       
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    } 

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 6px 10px 10px 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }      
}
@media screen and (min-width: 768px) and (max-width: 1023px) { /* 768 + 800 + 960 */

    #fixUpdateRow { /* if not here. The row element not used */ 
        margin: 0 0 10px 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #fixUpdateTextPUC { 
        margin: 0 15px 15px 15px; 
        padding: 0; 
        color: #ff0000; 
        font-size: 13px;
        word-break: break-word;
    } 
    #fixUpdateTrianglePUC {
        display: none; 
    }
    #fixBreakPUC1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixBreakPUC2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolderPUC {
        margin: 2px 0 10px 0; 
        padding: 0;
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .fixUpdateCardButtPUC1 {  
        height: 32px;
        width: 100px;
        margin: 0;
        padding: 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    .fixUpdateCardButtPUC3 {  
        height: 32px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    }   
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #fixUpdateRow { /* if not here. The row element not used */
        width: 100%;
        margin: 0 0 8px 0;
        padding: 0;
    }   
    #fixUpdateTextPUC {
        width: auto;
        margin: 8px 0 0 0; 
        padding: 0 0 0 20px; 
        color: #ff0000; 
        font-size: 13px;
    }
    #fixUpdateTrianglePUC {
        margin-left: 0;
        margin-right: 10px; 
        margin-bottom: -2px;
        font-size: 18px; 
    } 
    #fixBreakPUC1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixBreakPUC2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolderPUC {/* border: 2px solid red;*/
        width: 131px;
        margin: 2px 0 10px 0;
        padding: 0;
        text-align: right;
    }
    .fixUpdateCardButtPUC1 { 
        height: 32px;
        width: 100px;
        margin: 0;
        padding: 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    } 
}
@media screen and (min-width: 1025px) and (max-width: 1140px) {

    #fixUpdateRow { /* if not here. The row element not used */
        width: 100%;
        margin: 0 0 8px 0;
        padding: 0;
    }   
    #fixUpdateTextPUC {
        width: auto;
        margin: 8px 0 0 0; 
        padding: 0 0 0 20px; 
        color: #ff0000; 
        font-size: 13px;
    }
    #fixUpdateTrianglePUC {
        margin-left: 0;
        margin-right: 10px; 
        margin-bottom: -2px;
        font-size: 18px; 
    } 
    #fixBreakPUC1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixBreakPUC2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolderPUC {/* border: 2px solid red;*/
        width: 131px;
        margin: 2px 0 10px 0;
        padding: 0;
        text-align: right;
    }
    .fixUpdateCardButtPUC1 { 
        height: 32px;
        width: 100px;
        margin: 0;
        padding: 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    } 
}
@media screen and (min-width: 1141px) and (max-width: 1199px) {
    
    #fixUpdateRow { /* if not here. The row element not used */
        width: 100%;
        margin: 0 0 8px 0;
        padding: 0;
    }   
    #fixUpdateTextPUC {
        width: auto;
        margin: 8px 0 0 0; 
        padding: 0 0 0 20px; 
        color: #ff0000; 
        font-size: 13px;
    }
    #fixUpdateTrianglePUC {
        margin-left: 0;
        margin-right: 10px; 
        margin-bottom: -2px;
        font-size: 18px; 
    } 
    #fixBreakPUC1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixBreakPUC2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolderPUC {/* border: 2px solid red;*/
        width: 131px;
        margin: 2px 0 10px 0;
        padding: 0;
        text-align: right;
    }
    .fixUpdateCardButtPUC1 { 
        height: 32px;
        width: 100px;
        margin: 0;
        padding: 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    } 
}
@media screen and (min-width: 1200px) {
    
    #fixUpdateRow { /* if not here. The row element not used */
        width: 100%;
        margin: 0;
        padding: 0;
        display: inline-block;
    }   
    #fixUpdateTextPUC {
        width: auto;
        margin: 8px 0 0 0; 
        padding: 0 0 0 20px; 
        color: #ff0000; 
        font-size: 13px;
    }
    #fixUpdateTrianglePUC {
        margin-left: 0;
        margin-right: 10px; 
        margin-bottom: -2px;
        font-size: 18px; 
    } 
    #fixBreakPUC1 { /* for showing or hiding the break */
        display: none;
    } 
    #fixBreakPUC2 { /* for showing or hiding the break */
        display: none;
    }
    #fixUpdateButtHolderPUC { 
        float: right;
        width: 115px;
        margin: 2px 0 10px 0;
        padding: 0;
    }
    .fixUpdateCardButtPUC1 { 
        height: 32px;
        width: 100px;
        margin: 0;
        padding: 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC1:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }

    .fixUpdateCardButtPUC3 {  
        height: 35px;
        width: 100px;
        margin: 0 28px 0 5px;
        padding: 7px 0 7px 0;        
        color: #999;  
        font-size: 12px;
        text-align: center;
        border-radius: 8px;   
        border: 2px solid red;
        background-color: #000;
        transition: all 0.4s linear;
    }
    .fixUpdateCardButtPUC3:hover {
        cursor: pointer;
        color: #999;       
        background-color: #222;
    } 
}

/* /////////// Update Card Alerts - In The Table ///////////// */

@media screen and (min-width: 320px) and (max-width: 345px) {

    #fixUpdateTextPUC2 {
        width: 102px;
        margin: 16px 0 0 0;
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 30px;
        margin: 16px 0 0 -10px;
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 34px; 
        width: 46px;
        margin: 12px 0 12px -14px;
        padding: 1.5px 0 0 0;      
        color: #999;  
        font-size: 9px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
}
@media screen and (min-width: 346px) and (max-width: 362px) {

    #fixUpdateTextPUC2 {
        width: 102px;
        margin: 16px 0 0 0;
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 30px;
        margin: 16px 0 0 -10px;
        padding: 0; 
        color: #ff0000;
        font-size: 9px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 34px; 
        width: 48px;
        margin: 12px 0 12px -9px;
        padding: 1.5px 0 0 0;      
        color: #999;  
        font-size: 9px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }    
}
@media screen and (min-width: 363px) and (max-width: 376px) {

    #fixUpdateTextPUC2 {
        width: 116px;
        margin: 14px 0 0 3px;
        padding: 0; 
        color: #ff0000;
        font-size: 10px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 30px;
        margin: 14px 0 0 -10px;
        padding: 0; 
        color: #ff0000;
        font-size: 10px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 34px; 
        width: 54px;
        margin: 11px 0 11px -12px;
        padding: 0.5px 2px 0 2px;      
        color: #999;  
        font-size: 10px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}
@media screen and (min-width: 377px) and (max-width: 413px) {

    #fixUpdateTextPUC2 {
        width: 100%;
        margin: 13px 0 0 0;
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 36px;
        margin: 13px 0 0 -11px;
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 34px; 
        width: 54px;
        margin: 11px 5px 11px 0;
        padding: 0.5px 2px 0 2px;      
        color: #999;  
        font-size: 11px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}
@media screen and (min-width: 414px) and (max-width: 475px) {

    #fixUpdateTextPUC2 {
        width: 100%;
        margin: 13px 0 0 0;
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 36px;
        margin: 13px 0 0 -11px;
        padding: 0; 
        color: #ff0000;
        font-size: 11px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 34px; 
        width: 64px;
        margin: 12px 5px 12px 0;
        padding: 0.5px 2px 0 2px;      
        color: #999;  
        font-size: 11px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  

}
@media screen and (min-width: 476px) and (max-width: 599px) {

    #fixUpdateTextPUC2 {
        width: 160px;
        margin: 13px 0 0 -2px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 36px;
        margin: 13px 0 0 -10px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 30px; 
        width: 88px;
        margin: 14px 5px 14px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 1px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 1px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}
@media screen and (min-width: 600px) and (max-width: 732px) { /* 600 + 732 */

    #fixUpdateTextPUC2 {
        margin: 20px 0 0 6px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }  
    #UpdateCardTextPUC {
        width: 74px;
        margin: 20px 0 0 -26px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 88px;
        margin: 13px 5px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}
@media screen and (min-width: 733px) and (max-width: 767px) { /* 733 */

    #fixUpdateTextPUC2 {
        margin: 20px 0 0 6px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }  
    #UpdateCardTextPUC {
        width: 74px;
        margin: 20px 0 0 -26px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 88px;
        margin: 13px 5px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        word-break: break-word;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */

    #fixUpdateTextPUC2 {
        width: 160px;
        margin: 13px 0 0 0;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 36px;
        margin: 13px 0 0 -9px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        line-height: 1.2;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}  
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #fixUpdateTextPUC2 {
        width: 160px;
        margin: 13px 0 0 0;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 36px;
        margin: 13px 0 0 -9px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        word-break: break-word;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}  
@media screen and (min-width: 801px) and (max-width: 1023px) { /* 960 */

    #fixUpdateTextPUC2 {
        width: 160px;
        margin: 13px 0 0 0;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 36px;
        margin: 13px 0 0 -9px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 100px;
        margin: 13px 5px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        word-break: break-word;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}   
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #fixUpdateTextPUC2 {
        width: 100%;
        margin: 20px 0 0 12px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 80px;
        margin: 20.5px 0 0 -30px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 100px;
        margin: 13px 7px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        word-break: break-word;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #fixUpdateTextPUC2 {
        width: 100%;
        margin: 20px 0 0 12px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 80px;
        margin: 20.5px 0 0 -30px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 100px;
        margin: 13px 7px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        word-break: break-word;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}
@media screen and (min-width: 1200px) {

    #fixUpdateTextPUC2 {
        width: 100%;
        margin: 20px 0 0 12px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        word-break: break-word;
    }  
    #UpdateCardTextPUC {
        width: 80px;
        margin: 20.5px 0 0 -30px;
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
        text-align: center;
        word-break: break-word;
    }
    .fixUpdateCardButtPUC2 {
        height: 32px; 
        width: 100px;
        margin: 13px 7px 13px 0;
        padding: 0 2px 0 2px;      
        color: #999;  
        font-size: 12px;
        text-align: center;
        word-break: break-word;
        border-radius: 8px;   
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #0d0d0d;
        transition: all 0.3s linear; 
    }
    .fixUpdateCardButtPUC2:hover {
        cursor: pointer;
        color: #999;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }  
}

/* /////// END PLEDGSTA - UPDATE CARD PAGE //////// */

/* ============================================== */

/* ///// PLEDGSTA - UPDATE CARD-SELECT PAGE /////// */

#UCSconfirmWrapper {
    margin: 19px 0 0 0;
    padding: 0;
    border-radius: 14px;
    border: 2px solid transparent;
    background: linear-gradient(#111, #111) padding-box, 
                linear-gradient(145deg, #ff9900, #ff0000, #6700d4 65%) border-box;
}
.UCScardSuccessAlert {
    width: 100%;
    margin: 0; 
    padding: 10px; 
    color: #999;
/*    color: #0088FF; 
    font-size: 13.5px;*/
    font-size: calc(9px + 0.3vw);
    text-align: center; 
}
#updateCSWrapper {
    /*border-radius: 20px;*/
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#updateCSWrapperP {
    border-radius: 34px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b;
}
#UCScontainerInner {
    margin: 0; 
    padding: 0;    
}
#UCScontainerInnerP {
    margin: 0; 
    padding: 0 10px 0 10px;
}

/* /// Avatar /// */

.UDCStitle {
    position: relative;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}
.PledgenameInfoUCS {
    margin: 0;
    padding: 0;
}
#avatarAjust {
    min-height: 95px; 
    max-height: 95px;
    min-width: 95px; 
    max-width: 95px; 
    border-radius: 8px;
    border: 2px solid #444;
}

/* /// Body /// */

@media screen and (min-width: 320px) and (max-width: 413px) {

    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0 10px 0 10px;
    } 
    #updtateCSContainerP { /* pledgsta */
        margin: 72px auto 0 auto;
        padding: 0 10px 0 10px;
    } 
    #UCSwrapperMain {
        margin: 0 auto 0 auto;
        padding: 0;
    } 
    #updateCSWrapper { /* artist */
        margin: 74px 0 50px 0;
        padding: 15px 15px 0 15px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 0 0 50px 0;
        padding: 15px 15px 0 15px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 15px; 
        padding: 0 14px 0 14px; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
    #UCSBreak {
        display: none;
    }
    .UCSgreyCell {
        margin: 10px 0 20px 0; 
        padding: 20px 10px 20px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        margin: 0 0 20px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: -16px 0 -5px -4px;
        padding: 0;
    }    
    .logoCardsInner {
       display: flex;
       margin-top: 10px;
       margin-bottom: 4px; 
       justify-content: center;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline {
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 0;
        color: #777;
        font-size: 12px;
        text-align: center;
    }
    #newCardis {
        margin: 15px 0 0 0;
        color: #0088FF;
        font-size: 12px;
        text-align: center;
    }
    #cardParagraph {
        margin: 40px 0 0 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    } 
}
@media screen and (min-width: 414px) and (max-width: 480px) {
    
    #updtateCSContainer { /* artist */
        margin: 0; 
        padding: 0 10px 0 10px;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 72px 0 0 0;
        padding: 0 10px 0 10px;
    }
    #UCSwrapperMain {
        margin: 0;
        padding: 0;
    } 
    #updateCSWrapper { /* artist */
        margin: 72px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 0 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 15px; 
        padding: 0 26px 0 26px; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
    #UCSBreak {
        display: none;
    }
    .UCSgreyCell {
        margin: 10px 0 20px 0; 
        padding: 20px 10px 20px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        margin: 0 0 20px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: -16px 0 -5px -4px;
        padding: 0;
    }    
    .logoCardsInner {
       display: flex;
       margin-top: 10px;
       margin-bottom: 4px; 
       justify-content: center;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline {
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 0;
        color: #777;
        font-size: 14px;
        text-align: center;
    }
    #newCardis {
        margin: 15px 0 0 0;
        color: #0088FF;
        font-size: 14px;
        text-align: center;
    }
    #cardParagraph {
        margin: 40px 0 0 0;
        color: #D0D0D0;
        font-size: 13px;
        text-align: center;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    } 
}
@media screen and (min-width: 481px) and (max-width: 599px) {
    
    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0 10px 0 10px;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 72px auto 0 auto;
        padding: 0 10px 0 10px;
    }
    #UCSwrapperMain {
        width: 456px;
        margin: 0 auto 0 auto;
        padding: 0;
    } 
    #updateCSWrapper { /* artist */
        margin: 72px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 0 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center;
        font-size: 12px;
    }
    #UCSBreak {
        display: none;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo { 
        height: 85px;
        width: auto;
        margin: 0 0 0 -10px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0; 
        padding: 27px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 35px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 35.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 35px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 13px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 13px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 13px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}
@media screen and (min-width: 600px) and (max-width: 600px) { /* 600 */
    
    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 72px auto 0 auto; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0 auto 0 auto;
        padding: 0;
    } 
    #updateCSWrapper { /* artist */
        margin: 72px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 0 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
    #UCSBreak {
        display: none;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}
@media screen and (min-width: 601px) and (max-width: 767px) {
    
    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 72px auto 0 auto; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0 auto 0 auto;
        padding: 0;
    }       
    #updateCSWrapper { /* artist */
        margin: 72px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 0 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 21px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    } 
}
@media screen and (min-width: 768px) and (max-width: 799px) { /* 768 */
    
    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0 auto 0 auto;
        padding: 0;
    }       
    #updateCSWrapper { /* artist */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 21px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    } 
}
@media screen and (min-width: 800px) and (max-width: 800px) { /* 800 */

    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0 auto 0 auto;
        padding: 0;
    }       
    #updateCSWrapper { /* artist */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 21px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }  
}
@media screen and (min-width: 801px) and (max-width: 959px) {
    
    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0 auto 0 auto;
        padding: 0;
    }       
    #updateCSWrapper { /* artist */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 21px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}
@media screen and (min-width: 960px) and (max-width: 1023px) { /* 960 */
    
    #updtateCSContainer { /* artist */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 0 auto 0 auto; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0 auto 0 auto;
        padding: 0;
    }       
    #updateCSWrapper { /* artist */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 68px 0 50px 0;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 10px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */
    
    #updtateCSContainer { /* artist */
        margin: 0; 
        padding: 0;
    }
    #updtateCSContainerP { /* pledgsta */
        margin: 0; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0;
        padding: 0;
    }        
    #updateCSWrapper { /* artist */
        width: 100%;
        margin: 66px 0 50px 21px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #updateCSWrapperP { /* pledgsta */
        width: 100%;
        margin: 67px 0 50px -7px;
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 10px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #222;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */
    
    #updtateCSContainer { /* artist */
        width: 100%;
        margin: 0; 
        padding: 0;
    }  
    #updtateCSContainerP { /* pledgsta */
        margin: 0; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 476px;
        margin: 0;
        padding: 0;
    }  
    #updateCSWrapper { /* artist */
        width: 100%;
        margin: 68px 0 50px 10px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #updateCSWrapperP { /* pledgsta */
        width: 100%;
        margin: 68px 0 50px -7px;
        padding: 20px 20px 0 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 10px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #333;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #updtateCSContainer { /* artist */
        width: 100%;
        margin: 0; 
        padding: 0;
    } 
    #updtateCSContainerP { /* pledgsta */
        margin: 0; 
        padding: 0;
    }
    #UCSwrapperMain {
        width: 486px;
        margin: 0;
        padding: 0;
    }  
    #updateCSWrapper { /* artist */
        margin: 68px 0 50px -27px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 68px 0 50px -7px;
        padding: 20px 20px 0 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 10px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #333;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-23px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}
@media screen and (min-width: 1200px) {
    
    #updtateCSContainer { /* artist */
        margin: 66px 0 0 0;
        padding: 0;
    } 
    #updtateCSContainerP { /* pledgsta */
        margin: 68px 0 0 0;
        padding: 0;
    } 
    #UCSwrapperMain {
        width: 486px;
        margin: 0;
        padding: 0;
    }  
    #updateCSWrapper { /* artist */
        margin: 0 0 50px -24.5px;
        padding: 20px 20px 0 20px;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #updateCSWrapperP { /* pledgsta */
        margin: 0 0 50px -57px;
        padding: 20px 20px 0 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    .UCSdisclaimer1 {
        margin-top: 10px; 
        margin-bottom: 20px; 
        padding: 0; 
        color: #999; 
        text-align: center; 
        font-size: 12px;
    }
   .UCSgreyCell {
        margin: 0 0 20px 0; 
        padding: 5px 10px 18px 10px;
        border-radius: 16px;
        border: 2px solid #333;
        background-color: #111;
    }
    .logoCardsOuter {
        display: inline-flex;
        width: 100%;
        margin: 0;
        padding: 0;
    } 
    .UCSStripeLogo {
        height: 85px;
        width: auto;
        margin: 0 0 0 -5px;
        padding: 0;
    }
    .logoCardsInner {
        height: 85px;
        margin: 0 0 0 21px; 
        padding: 25px 0 0 0;
    }
    #creditCardIconsVisa {
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0; 
        border-radius: 6px;
    }
    #creditCardIconsMast {   
        height: 37.25px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 8px;
        border: 2px solid #333;
    }
    #creditCardIconsAmex {   
        height: 37px;
        width: auto;
        object-fit: cover;
        margin: 0 0 0 4px; 
        border-radius: 6px;
    }
    .greyline { /* shared with stripe payment page */
        height: 1.5px; 
        margin: 0 15px 0 15px;
        border: 0;
        background: #333;
    }
    #currentCardis {
        margin: 15px 0 0 15px;
        color: #777;
        font-size: 14px;
    }
    #newCardis {
        margin: 15px 0 0 15px;
        color: #0088FF;
        font-size: 14px;
    }
    #cardParagraph {
        margin: 35px 0 0 15px;
        color: #D0D0D0;
        font-size: 14px;
    }   
    #cardDisplay {
        height: 35px; 
        width: auto; 
        margin:-20px 10px 0 0;
        border-radius: 6px;
        border: 2px solid #333; 
    }
}

/* //////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 413px) {    

    #UCScontainerInnerP {
        margin: 0; 
        padding: 0;
    }
    .pledgeSelectAvatarUCS {
        height: auto;
        width: auto;
        margin: 0 0 7px 0;
        padding: 0;
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #avatarAjust {
        min-height: 155px; 
        max-height: 155px;
        min-width: 155px; 
        max-width: 155px; 
        margin: 4px 0 4px 0;
        padding: 0;
        border-radius: 10px;
    }
    .PledgenameInfoUCS {
        text-align: center;
    }
    .UCSheader {
        margin: 15px 0 0 0;
        color: #666; 
        font-size: 15px; 
        font-weight: 600;
    }
    .UDCStitle {
        margin: 2px 0 0 0;
        font-size: 22px;
    }
}
@media screen and (min-width: 414px) and (max-width: 480px) {

    #UCScontainerInnerP {
        margin: 0; 
        padding: 0;
    }
    .pledgeSelectAvatarUCS {
        height: auto;
        width: auto;
        margin: 0 0 7px 0;
        padding: 0;
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #avatarAjust {
        min-height: 155px; 
        max-height: 155px;
        min-width: 155px; 
        max-width: 155px; 
        margin: 4px 0 4px 0;
        padding: 0;
        border-radius: 10px;
    }
    .PledgenameInfoUCS {
        text-align: center;
    }
    .UCSheader {
        margin: 15px 0 0 0;
        color: #666; 
        font-size: 15px; 
        font-weight: 600;
    }
    .UDCStitle {
        margin: 2px 0 0 0;
        font-size: 22px;
    }
}
@media screen and (min-width: 481px) and (max-width: 599px) {

    #UCScontainerInnerP {
        margin: 0; 
        padding: 0;
    }
    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        min-height: 125px; 
        max-height: 125px;
        min-width: 125px; 
        max-width: 125px; 
        margin: 4px 20px 4px 0;
        padding: 0;
        border-radius: 10px;   
    }
    .UCSheader {
        margin: 82px 0 0 0;
        color: #666; 
        font-size: 15px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0; 
        font-size: 20px;
    }  
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #UCScontainerInnerP {
        margin: 0; 
        padding: 0;
    }
    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        min-height: 125px; 
        max-height: 125px;
        min-width: 125px; 
        max-width: 125px; 
        margin: 4px 20px 4px 0;
        padding: 0;
        border-radius: 10px;   
    }
    .UCSheader {
        margin: 82px 0 0 0;
        color: #666; 
        font-size: 15px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0; 
        font-size: 20px;
    }  
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #UCScontainerInnerP {
        margin: 0; 
        padding: 0;
    }
    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        margin-left: 0;
    }
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 16px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 20px;
    }  
}
@media screen and (min-width: 800px) and (max-width: 800px) {

    #UCScontainerInnerP {
        margin: 0; 
        padding: 0;
    }
    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        margin-left: 0;
    }  
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 16px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 20px;
    }   
}
@media screen and (min-width: 801px) and (max-width: 959px) {

    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        margin-left: 0;
    }  
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 16px; 
        font-weight: 600; 
    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 20px;
    }      
}
@media screen and (min-width: 960px) and (max-width: 1023px) {

    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        margin-left: 0;
    }
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 16px; 
        font-weight: 600;

    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 20px;
    }      
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        margin-left: 0;
    }
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 16px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 20px;
    }      
}
@media screen and (min-width: 1025px) and (max-width: 1140px) {

    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        margin-left: 0;
    }
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 16px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 20px;
    }      
}
@media screen and (min-width: 1141px) and (max-width: 1199px) {

    .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    }
    #avatarAjust {
        margin-left: 0;
    }
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 16px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 20px;
    }     
}
@media screen and (min-width: 1200px) {

/*    #UCScontainerInnerP {
        margin: 0; 
        padding: 0 20px 0 20px;
    }*/
   .pledgeSelectAvatarUCS {
        display: inline-flex;
        margin: 0 0 7px 1px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
    } 
    #avatarAjust {
        margin-left: 0;
    }
    .UCSheader {
        margin: 46px 0 0 1px;
        color: #666; 
        font-size: 15px; 
        font-weight: 600;
    }
    .UDCStitle {
        width: 300px;
        margin: 0 0 0 1px; 
        font-size: 22px;
    }    
}

/* /// Card Element and Footer /// */

#cardElementContainer {
    margin: 0; 
    padding: 0;
}
#cardElementContainerP {
    margin: 0; 
    padding: 0 10px 0 10px;
}

@media screen and (min-width: 320px) and (max-width: 330px) {

    #cardElementContainerP {
        margin: 0; 
        padding: 0;
    }
    #cardElementInfo {
        margin: 0;
        padding: 0;
        color: #D0D0D0;
        font-size: 12px;
        font-weight: 500;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .cardElementAlert {
        height: 20px;
        margin: 6px 0 0 0; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }
    .UCSdisclaimer2 {
        margin: 20px 0 15px 0; 
        padding: 0; 
        color: #999; 
        text-align: justify; 
        font-size: 10px;
    }
    #UCSfooterBoxMain {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .UCSfooterBoxInner {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterLink1 {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterPowered {
        margin-top: 1px; 
        color: #999; 
        font-size: 9px;
        /*font-size: 10px;*/
    }
    .UCSfooterLogo {
        height: auto;
        width: 32px;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }
    .UCSfooterBreaker {
        margin: 0 25px 0 20px;
    }
    .UCSfooterTermsLinks {
        display: inline-flex; 
        margin: 0 0 15px 0;
    }
    .UCSfooterTerms {
        color: #999; 
        font-size: 9px;
    }
    .UCSfooterPrivacy {
        margin: 0 0 0 20px; 
        color: #999; 
        font-size: 9px;
    }
}
@media screen and (min-width: 331px) and (max-width: 480px) {

    #cardElementContainerP {
        margin: 0; 
        padding: 0;
    }
    #cardElementInfo {
        margin: 0;
        padding: 0;
        color: #D0D0D0;
        font-size: 13px;
        font-weight: 500;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .cardElementAlert {
        height: 20px;
        margin: 6px 0 0 0; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }
    .UCSdisclaimer2 {
        margin: 20px 0 15px 0; 
        padding: 0; 
        color: #999; 
        text-align: justify; 
        font-size: 10px;
    }
    #UCSfooterBoxMain {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .UCSfooterBoxInner {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterLink1 {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterPowered {
        margin-top: 2px; 
        color: #999; 
        font-size: 10px;
    }
    .UCSfooterLogo {
        height: auto;
        width: 40px;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }
    .UCSfooterBreaker {
        margin: 0 25px 0 20px;
    }
    .UCSfooterTermsLinks {
        display: inline-flex; 
        margin: 0 0 15px 0;
    }    
    .UCSfooterTerms {
        color: #999; 
        font-size: 10px;
    }
    .UCSfooterPrivacy {
        margin: 0 0 0 20px; 
        color: #999; 
        font-size: 10px;
    }
}
@media screen and (min-width: 481px) and (max-width: 599px) {

    #cardElementContainerP {
        margin: 0; 
        padding: 0;
    }
    #cardElementInfo {
        margin: 0;
        color: #D0D0D0;
        font-size: 13px;
        font-weight: 500;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .cardElementAlert {
        height: 20px;
        margin: 6px 0 0 0; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }
    .UCSdisclaimer2 {
        margin: 20px 0 15px 0; 
        padding: 0; 
        color: #999; 
        text-align: justify; 
        font-size: 10px;
    }
    #UCSfooterBoxMain {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .UCSfooterBoxInner {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterLink1 {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterPowered {
        margin-top: 1.5px; 
        color: #999; 
        font-size: 11px;
    }
    .UCSfooterLogo {
        height: auto;
        width: 40px;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }
    .UCSfooterBreaker {
        margin: 0 25px 0 20px;
    }
    .UCSfooterTermsLinks {
        display: inline-flex; 
        margin: 0 0 15px 0;
    }    
    .UCSfooterTerms {
        color: #999; 
        font-size: 11px;
    }
    .UCSfooterPrivacy {
        margin: 0 0 0 20px; 
        color: #999; 
        font-size: 11px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #cardElementContainerP {
        margin: 0; 
        padding: 0;
    }
    #cardElementInfo {
        margin: 0;
        color: #D0D0D0;
        font-size: 14px;
        font-weight: 500;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .cardElementAlert {
        height: 20px;
        margin: 6px 0 0 0; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }
    .UCSdisclaimer2 {
        margin: 20px 0 15px 0; 
        padding: 0; 
        color: #999; 
        text-align: justify; 
        font-size: 10px;
    }
    #UCSfooterBoxMain {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .UCSfooterBoxInner {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterLink1 {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterPowered {
        margin-top: 1.5px; 
        color: #999; 
        font-size: 11px;
    }
    .UCSfooterLogo {
        height: auto;
        width: 40px;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }
    .UCSfooterBreaker {
        margin: 0 25px 0 20px;
    }
    .UCSfooterTermsLinks {
        display: inline-flex; 
        margin: 0 0 15px 0;
    }    
    .UCSfooterTerms {
        color: #999; 
        font-size: 11px;
    }
    .UCSfooterPrivacy {
        margin: 0 0 0 20px; 
        color: #999; 
        font-size: 11px;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {

    #cardElementContainerP {
        margin: 0; 
        padding: 0;
    }
    #cardElementInfo {
        margin: 0;
        color: #D0D0D0;
        font-size: 14px;
        font-weight: 500;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .cardElementAlert {
        height: 20px;
        margin: 6px 0 0 0; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }
    .UCSdisclaimer2 {
        margin: 20px 0 15px 0; 
        padding: 0; 
        color: #999; 
        text-align: justify; 
        font-size: 10px;
    }
    #UCSfooterBoxMain {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .UCSfooterBoxInner {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterLink1 {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterPowered {
        margin-top: 1.5px; 
        color: #999; 
        font-size: 11px;
    }    
    .UCSfooterLogo {
        height: auto;
        width: 40px;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }
    .UCSfooterBreaker {
        margin: 0 25px 0 20px;
    }
    .UCSfooterTermsLinks {
        display: inline-flex; 
        margin: 0 0 15px 0;
    }
    .UCSfooterTerms {
        color: #999; 
        font-size: 11px;
    }
    .UCSfooterPrivacy {
        margin: 0 0 0 20px; 
        color: #999; 
        font-size: 11px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {

    #cardElementInfo {
        margin: 0;
        color: #D0D0D0;
        font-size: 14px;
        font-weight: 500;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .cardElementAlert {
        height: 20px;
        margin: 6px 0 0 0; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }
    .UCSdisclaimer2 {
        margin: 20px 0 15px 0; 
        padding: 0; 
        color: #999; 
        text-align: justify; 
        font-size: 10px;
    }
    #UCSfooterBoxMain {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .UCSfooterBoxInner {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterLink1 {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterPowered {
        margin-top: 1.5px; 
        color: #999; 
        font-size: 11px;
    }    
    .UCSfooterLogo {
        height: auto;
        width: 40px;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }
    .UCSfooterBreaker {
        margin: 0 25px 0 20px;
    }
    .UCSfooterTermsLinks {
        display: inline-flex; 
        margin: 0 0 15px 0;
    }
    .UCSfooterTerms {
        color: #999; 
        font-size: 11px;
    }
    .UCSfooterPrivacy {
        margin: 0 0 0 20px; 
        color: #999; 
        font-size: 11px;
    }
}
@media screen and (min-width: 1025px) {

    #SPcardElementInfo {
        margin: 0 0 10px 2px;
        color: #D0D0D0;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
    }
    #cardElementInfo {
        margin: 0;
        color: #D0D0D0;
        font-size: 14px;
        font-weight: 500;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .cardElementAlert {
        height: 20px;
        margin: 6px 0 0 0; 
        padding: 0; 
        color: #ff0000;
        font-size: 12px;
    }
    .UCSdisclaimer2 {
        margin: 25px 0 15px 0; 
        padding: 0; 
        color: #999; 
        text-align: justify; 
        font-size: 10px;
    }
    #UCSfooterBoxMain {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
    }
    .UCSfooterBoxInner {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterLink1 {
        display: inline-flex; 
        color: #999;
    }
    .UCSfooterPowered {
        margin-top: 1.5px; 
        color: #999; 
        font-size: 11px;
    }        
    .UCSfooterLogo {
        height: auto;
        width: 40px;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    } 
    .UCSfooterBreaker {
        margin: 0 25px 0 20px;
    }
    .UCSfooterTermsLinks {
        display: inline-flex; 
        margin: 0 0 15px 0;
    }    
    .UCSfooterTerms {
        color: #999; 
        font-size: 11px;
    }
    .UCSfooterPrivacy {
        margin: 0 0 0 20px; 
        color: #999; 
        font-size: 11px;
    }
}

/* //// Stripe Update Card Select Button  //// */

#UDSpaymentButtHolder {
    width: 100%;
}
.UDSpaymentButton {
    width: 100%;
    margin: 0;
    padding: 10px 60px 10px 59px;    
    color: #ff9900;   
    text-align: center;
    font-size: 14px;
    transition: all 0.3s linear;
}
.UDSpaymentButton:hover {
    cursor: pointer;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    #UDSpaymentButtHolder {
        margin: 5px 0 25px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .UDSpaymentButton {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.3s linear;
    }
    .UDSpaymentButton:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;     
    }
}
@media screen and (min-width: 1025px) {

    #UDSpaymentButtHolder {
        margin: 5px 0 25px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid transparent;
        overflow: hidden;
    }
    .UDSpaymentButton {
        border-radius: 10px;
        border: 2px solid #333; 
        background-color: #111;
        transition: border 0.6s ease-in;
    }
    .UDSpaymentButton:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 153, 0, 0.7);
    }
}

/* ///// END - PLEDGSTA UPDATE CARD-SELECT PAGE ///// */

/* ================================================== */

/* ///////////// PLEDGSTA TICKETS PAGE ////////////// */

#pledgeTicketsMainInner {
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000, 
              -1px -1px 10px #1b1b1b; 
}
.pledgeTicketsText {
    color: #ff9900;
/*    color: #666;*/
    margin: 5px 0 0 5px; 
    font-size: 22px; 
/*    font-weight: 600; */
    text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
}
.pledgeTicketsTitle {
    color: #D0D0D0;
    width: 300px;
    margin: 0 0 0 5px; 
    font-size: 22px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    #pledgeTicketsWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeTicketsContainer {
        margin: 0 10px 15px 10px; 
        padding: 0; 
    }
    #pledgeTicketsMainInner {
        margin: 72px 0 0 0; 
        padding: 20px 20px 80px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
    #pledgeTicketsDetails {
        margin: 25px 10px 0 10px; 
        padding: 0; 
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {
    
    #pledgeTicketsWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgeTicketsContainer {
        width: 70%;
        margin: 68px auto 0 auto;
        padding: 0;
    }
    #pledgeTicketsMainInner {
        margin: 0; 
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #pledgeTicketsDetails {
        margin: 25px 20px 0 20px; 
        padding: 0;    
    }
}
@media screen and (min-width: 801px) and (max-width: 960px) {

    #pledgeTicketsWrapper {
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #pledgeTicketsContainer {
        width: 65%;
        margin: 68px auto 50px auto;
        padding: 0;
    }
    #pledgeTicketsMainInner {
        margin: 0; 
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
    #pledgeTicketsDetails {
        margin: 25px 15px 0 15px; 
        padding: 0;    
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {

    #pledgeTicketsWrapper {
        width: 54.5%;
    }
    #pledgeTicketsContainer {
        width: 100%;
        margin: 68px 0 50px 0;
        padding: 0;
    }
    #pledgeTicketsMainInner {
        margin: 0; 
        padding: 20px 20px 0 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/ 
    }
    #pledgeTicketsDetails {
        margin: 25px 10px 0 10px; 
        padding: 0;    
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledgeTicketsWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeTicketsContainer {
        margin: 0 10px 15px -7px; 
        padding: 0; 
    }
    #pledgeTicketsMainInner {
        margin: 68px 0 0 0; 
        padding: 20px 20px 100px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    #pledgeTicketsDetails {
        width: auto;
        margin: 25px 10px 0 10px; 
        padding: 0;    
    }
}
@media screen and (min-width: 1025px) and (max-width: 1180px) { /* 1138 + 1180 */

    #pledgeTicketsWrapper {
        margin: 0; 
        padding: 0;
    }
    #pledgeTicketsContainer {
        margin: 0 10px 15px -7px; 
        padding: 0; 
    }
    #pledgeTicketsMainInner {
        margin: 68px 0 0 0; 
        padding: 20px 20px 100px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #pledgeTicketsDetails {
        width: auto;
        margin: 55px 10px 0 10px; 
        padding: 0;            
    }
}
@media screen and (min-width: 1181px) {

    #pledgeTicketsWrapper {
        margin: 68px 0 0 0; 
        padding: 0;
    }
    #pledgeTicketsContainer {         
        margin: 0 10px 15px -57px; 
        padding: 0; 
    }
    #pledgeTicketsMainInner {    
        margin: 68px 0 0 0; 
        padding: 20px 20px 25px 20px;
        border: 2px solid #333;
    }
    #pledgeTicketsPosterInner {        
        width: 100%;
        margin: 0; 
        padding: 0;        
    }
    #pledgeTicketsDetails {      
        width: auto;
        margin: 15px 0 0 5px; 
        padding: 30px 0 0 0;           
    }
}

/* ///// Event Create Tickets ///// */

/* ////////// END - PLEDGSTA TICKETS PAGE /////////// */

/* ================================================== */

/* ////////// PLEDGSTA / PLEDGE-EDIT PAGE /////////// */

#pledgeEditWrapper {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 34px;
    border-bottom-left-radius: 34px;
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b; 
}
#PPEWrapper {
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;
} 
#PPEbuttonHolder {
    margin: 0;
    padding: 0;
}   
.accountDelete {
    height: 35px;
    margin: 0 0 15px 0;
    padding: 7px 0 7px 0;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.5s linear;
}
.accountDelete:hover {
    cursor: pointer;   
    border: 2px solid rgba(255, 0, 0, 0.7);
    background-color: #1a1a1a;
}
#cancelPledgeButtHolder {
    border-radius: 20px;
    margin: 15px 0 14px 0;
}
.cancelPledgeButt {
    width: 100%;
    height: 35px;
    margin: 0 0 15px 0;
    padding: 7px 35px 7px 35px;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    border-radius: 10px;   
    transition: all 0.4s linear;
}
.cancelPledgeButt:hover {
    cursor: pointer;      
    border: 2px solid #ff0000;
    background-color: #1a1a1a;
}  

@media screen and (min-width: 320px) and (max-width: 413px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0 10px 0 10px;
    }
    #pledgeEditWrapper {
        margin: 75px auto 0 auto; 
        padding: 20px 20px 5px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }     
    #PPEWrapper {
        margin: 60px 10px 0 10px; 
        padding: 20px 15px 10px 15px;
    }
    #PPEbuttonHolder {
        width: 100%;
    } 
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 100%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 414px) and (max-width: 479px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0 10px 0 10px;
    }
    #pledgeEditWrapper {
        margin: 75px auto 0 auto; 
        padding: 20px 20px 5px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }      
    #PPEWrapper {
        margin: 60px 20px 0 20px; 
        padding: 20px 15px 10px 15px;
    }
    #PPEbuttonHolder {
        width: 92%;
    } 
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 92%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 480px) and (max-width: 599px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0 10px 0 10px;
    }
    #pledgeEditWrapper {
        margin: 75px auto 0 auto; 
        padding: 20px 20px 5px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }       
    #PPEWrapper {
        margin: 60px 50px 0 50px; 
        padding: 20px 15px 10px 15px;
    }
    #PPEbuttonHolder {
        width: 78%;
    } 
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 78%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0;
    }
    #pledgeEditWrapper {
        width: 80%;
        margin: 75px auto 0 auto; 
        padding: 20px 20px 5px 20px; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }   
    #PPEWrapper {
        margin: 68px 110px 150px 110px; 
        padding: 20px 15px 10px 15px;
    }
    #PPEbuttonHolder {
        width: 70%;
    } 
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 70%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0;
    }
    #pledgeEditWrapper {
        width: 70%;
        margin: 65px auto 0 auto; 
        padding: 20px 20px 5px 20px; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PPEWrapper {
        margin: 68px 0 0 230px; 
        padding: 20px 30px 10px 30px;
    }
    #PPEbuttonHolder {
        width: 70%;
    } 
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 70%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0;
    }
    #pledgeEditWrapper {
        width: 70%;
        margin: 65px auto 0 auto; 
        padding: 20px 20px 5px 20px; 
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PPEWrapper {
        margin: 68px 0 0 230px; 
        padding: 20px 30px 10px 30px;
    }
    #PPEbuttonHolder {
        width: 70%;
    } 
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 70%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 801px) and (max-width: 959px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0;
    }
    #pledgeEditWrapper {
        width: 70%;
        margin: 65px auto 0 auto; 
        padding: 20px 20px 5px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px; 
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PPEWrapper {
        margin: 68px 0 0 230px; 
        padding: 20px 30px 10px 30px;
    }    
    #PPEbuttonHolder {
        width: 70%;
    } 
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 70%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 960px) and (max-width: 989px) {

    #pledgeEditContainer {
        margin: 0 auto 150px auto; 
        padding: 0;
    }   
    #pledgeEditWrapper {
        width: 70%;
        margin: 65px auto 0 auto;
        padding: 20px 20px 5px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px; 
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PPEWrapper {
        margin: 68px 0 0 230px; 
        padding: 20px 30px 10px 30px;
    }    
    #PPEbuttonHolder {
        width: 80%;
    }
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 80%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 990px) and (max-width: 1023px) {

    #pledgeEditContainer {
        width: 50%;
        margin-bottom: 150px;
    }   
    #pledgeEditWrapper {
        width: 100%;
        margin: 65px 0 0 0;
        padding: 20px 20px 5px 20px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px; 
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PPEWrapper {
        margin: 68px 0 0 230px; 
        padding: 20px 30px 10px 30px;
    }    
    #PPEbuttonHolder {
        width: 80%;
    }
    #cancelPledgeButtHolder {
        padding: 25px 30px 10px 30px;
        text-align: center;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 80%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #pledgeEditContainer {
        width: 100%;
        margin: 0 0 150px 0; 
        padding: 0;
    }    
    #pledgeEditWrapper {
        margin: 66px 0 0 7.5px;
        padding: 20px 20px 8px 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PPEWrapper  {
        margin: 68px 0 0 -10px; 
        padding: 20px 30px 10px 30px;
    }
    #cancelPledgeButtHolder {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        padding: 25px 0 10px 0;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .accountDelete {
        width: 100%;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138 */

    #pledgeEditContainer {
        width: 100%;
        margin: 0 0 150px 0; 
        padding: 0;
    }
    #pledgeEditWrapper {
        margin: 66px 0 0 8px;
        padding: 20px 20px 8px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #PPEWrapper {
        margin: 68px 10px 0 -60px; 
        padding: 20px 30px 10px 30px;
    }
    #cancelPledgeButtHolder {       
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        padding: 25px 0 10px 0;
        border: 2px solid #333;
        background-color: #111;
    }
    .accountDelete {
        width: 100%;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */

    #pledgeEditContainer {
        width: 100%;
        margin: 0 0 150px 0; 
        padding: 0;
    }
    #pledgeEditWrapper {
        margin: 66px 0 0 -27px;
        padding: 20px 20px 8px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #PPEWrapper {
        margin: 68px 10px 0 -60px; 
        padding: 20px 20px 10px 20px;
    }
    #cancelPledgeButtHolder {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column;
        padding: 25px 0 10px 0;
        border: 2px solid #333;
        background-color: #111; 
    }
    .accountDelete {
        width: 100%;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1200px) {

    #pledgeEditContainer {
        margin: 66px 0 150px 0; 
        padding: 0;
    }
    #pledgeEditWrapper {
        margin: 0 10px 0 -24.5px;
        padding: 20px 20px 8px 20px;
        border: 2px solid #333;
        background-color: #111;
    }
    #PPEWrapper {
        margin: 68px 10px 0 -60px; 
        padding: 20px 30px 10px 30px;
    }
    #cancelPledgeButtHolder {        
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: column; 
        padding: 25px 0 10px 0;
        border: 2px solid #333;
        background-color: #111;
    }
    .accountDelete {
        width: 100%;
        border: 2px solid #333;
        background-color: #111;
    }
}

/* ////////////////////////////// */

@media screen and (min-width: 320px) and (max-width: 380px) {
    
    #PEinnerContainer {
        margin: 20px 0 7px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PEbuttonsContainer {
        margin: 0 0 20px 0;
        padding: 0 10px 0 10px;
    }
    #PPElowerContainer {
        margin: 20px 0 0 0;
        padding: 5px 15px 5px 15px;
        border-radius: 20px;
        /*border-radius: 12px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #PEnotifyContainer {
        margin: 0;
        padding: 12px 0 10px 0;
        text-align: center;
    }    
    .cancelPledgeButt {
        border: 2px solid #222;
        background-color: #0d0d0d;        
    }
}
@media screen and (min-width: 381px) and (max-width: 1023px) {
    
    #PEinnerContainer {
        margin: 20px 0 7px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PEbuttonsContainer {
        margin: 0 0 20px 0;
        padding: 0 10px 0 10px;
    }
    #PPElowerContainer {
        margin: 20px 0 0 0;
        padding: 15px 30px 15px 30px;
        border-radius: 20px;
        /*border-radius: 12px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }    
    #PEnotifyContainer {
        margin: 0;
        padding: 12px 0 10px 0;
        text-align: center;
    }    
    .cancelPledgeButt {
        border: 2px solid #222;
        background-color: #0d0d0d;        
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #PEinnerContainer {
        margin: 20px 0 7px 0;
        padding: 0;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #PPElowerContainer {
        margin: 20px 0 0 0;
        padding: 15px 0 15px 0;
        border-radius: 20px;
        /*border-radius: 12px;*/
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    #PEbuttonsContainer {
        margin: 20px 0 20px 0;
        padding: 0;
    }    
    #PEnotifyContainer {
        margin: 0;
        padding: 10px 0 10px 0;
        text-align: center;
    }
    .cancelPledgeButt {
        border: 2px solid #222;
        background-color: #0d0d0d;        
    }
}
@media screen and (min-width: 1025px) {

    #PEinnerContainer {
        margin: 20px 0 7px 0;
        padding: 0;
        border-radius: 12px;
        border: 2px solid #333;
        background-color: #111; 
    }
    #PPElowerContainer {
        margin: 15px 0 0 0;
        padding: 15px 0 15px 0;
        border-radius: 20px;
        /*border-radius: 12px;*/
        border: 2px solid #333;
        background-color: #111;
    }    
    #PEbuttonsContainer {
        margin: 20px 0 20px 0;
        padding: 0;
    }    
    #PEnotifyContainer {
        margin: 0;
        padding: 10px 0 12px 0;
        text-align: center;
    }
    .cancelPledgeButt {
        border: 2px solid #333;
        background-color: #111;        
    }
}

.PEaccountDelete {  
    width: 204px;
    height: 35px;
    margin: 1px 0 20px 0;
    padding: 7px 0 7px 0;
    color: red;
    font-size: calc(10px + 0.3vw);
    text-align: center;
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #000;   
    transition: all 0.3s linear;
}
.PEaccountDelete:hover {
    cursor: pointer;
    color: red;       
    border: 2px solid red;
    background-color: #111;
}
.APEconfirmEmailLink {
    width: auto;
    margin: 10px auto 0 auto;
    padding: 6px;
    color: #ff0000;
    font-size: 12px;
    border: 2px solid red;
    border-radius: 6px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.4s linear;
}
.APEconfirmEmailLink:hover {
    background: #000;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #confirmNotifyText {
        margin: 7px 0 0 0;
        color: #ff9900;
        font-size: calc(10px + 0.3vw);
    }
}
@media screen and (min-width: 768px) {
    
    #confirmNotifyText {
        margin: 6px 0 0 0; 
        color: #ff9900;
        font-size: calc(10px + 0.3vw);
    }
}
.PPEnotifyOnText {
    font-size: 12px; 
    color: #999;
}
@media screen and (min-width: 320px) and (max-width: 340px) {

    .PPEnotifyOnButt {
        width: 100%;
        height: 38px;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #0088FF;  
        font-size: 10px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .PPEnotifyOnButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
    .PPEnotifyOffButt {
        height: 38px;
        width: 100%;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #D0D0D0;
        font-size: 10px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .PPEnotifyOffButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 341px) and (max-width: 380px) {

    .PPEnotifyOnButt {
        width: 100%;
        height: 38px;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #0088FF;  
        font-size: 11px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .PPEnotifyOnButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
    .PPEnotifyOffButt {
        height: 38px;
        width: 100%;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #D0D0D0;
        font-size: 11px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .PPEnotifyOffButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 381px) and (max-width: 1024px) {

    .PPEnotifyOnButt {
        width: 100%;
        height: 38px;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #0088FF;  
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .PPEnotifyOnButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;  
    }
    .PPEnotifyOffButt {
        height: 38px;
        width: 100%;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .PPEnotifyOffButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) {
    
    .PPEnotifyOnButt {
        width: 100%;
        height: 38px;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #0088FF;  
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;
    }
    .PPEnotifyOnButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;  
    }
    .PPEnotifyOffButt {
        height: 38px;
        width: 100%;
        margin: 0;
        padding: 9px 0 9px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;
    }
    .PPEnotifyOffButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;  
    }
}

/* /////// END - PLEDGSTA / PLEDGE-EDIT PAGE //////// */

/* ================================================ */

/* /////// PLEDGSTA - PLEDGE SELECT PAGE /////// */

#PSMainContainer {
    margin: 0 auto 50px auto; 
    padding: 0;
}

#pledgeSelectInner {
    margin: 0;
    padding: 17px 25px 40px 25px;
    border-radius: 20px;
/*    border-radius: 16px;*/
    border: 2px solid #333;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b;
}
.pledgeSelectHeader {
    height: 200px; 
    margin-top: 15px; 
    border: 2px solid #333; 
    border-radius: 12px;
}
.leftPledgeSelect {
    display: flex;
    align-items: left;
    justify-content: left;
    flex-direction: column;
}
.PledgeOptionsTitle {
    color: #ff9900; 
    font-size: calc(12px + 0.3vw);
    border: 2px solid #333; 
    background-color: #111;
}
#selectWrapperPS {
    width: 100%; 
    height: 12px;
    margin: 20px 0 0 0;
    border-bottom: 2px solid #333; 
    text-align: center;
}
#PSBasicFormCell {
    margin: 10px 0 0 0; 
    padding: 0 5px 0 0;    
}
#PSAAAFormCell {
    margin: 10px 0 0 0; 
    padding: 0 5px 0 5px;   
}
#PSVIPFormCell {
    margin: 10px 0 0 0; 
    padding: 0 0 0 5px;   
}
.PSBasicFormCellinner {
    margin: 10px 0 0 0; 
    padding: 0 15px 15px 15px;   
    border: 2px solid #333; 
    border-radius: 12px; 
    background-color: #111;    
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.PSAAAFormCellinner {
    margin: 10px 0 0 0; 
    padding: 0 15px 15px 15px;   
    border: 2px solid #333; 
    border-radius: 12px; 
    background-color: #111;    
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.PSVIPFormCellinner {
    margin: 10px 0 0 0; 
    padding: 0 15px 15px 15px;   
    border: 2px solid #333; 
    border-radius: 12px; 
    background-color: #111;    
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.PSBasicFormlabel {
    margin: 20px 0 15px 0;  
    padding: 0; 
    font-size: 18px; 
    font-weight: 600;        
    color: #D0D0D0;
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.PSBasicFormlabel span {
    color: #999;
    font-size: 13px;
}
.PSAAAFormlabel {
    margin: 20px 0 15px 0; 
    padding: 0; 
    font-size: 20px; 
    font-weight: 600;        
    color: #ff9900;
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.PSAAAFormlabel span {
    margin-top: -5px;
    color: #999;
    font-size: 13px;
}
.PSVIPFormlabel {
    margin: 20px 0 15px 0;  
    padding: 0; 
    font-size: 18px; 
    font-weight: 600;        
    color: #D0D0D0;
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.PSVIPFormlabel span {
    color: #999;
    font-size: 13px;
}
.PledgeSAButtContainerPS {
    margin-top: -20px;
    text-align: center;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #pledgeSelectContainer {
        margin: 0;     
        padding: 0 10px 0 10px;
    }
    .pledgeSelectAvatar {
        margin: -170px 0 7px 0;
        padding: 0;
        width: auto;
        height: auto;
        text-align: left;
        color: #FFF;
        z-index: 8888 !important;
    }
    .PledgenameInfoPSelect {
        margin: 0;
        padding: 0;
    }
    .PledgenameInfoPSelect p {
        margin: 5px 0 0 3px; 
        font-size: 16px; 
        font-weight: 600; 
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
    }
    .PledgenameInfoPSelect h1 {
        margin: 0 0 0 3px; 
        font-size: 22px; 
        font-weight: 600; 
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
    }
    #linedSelectPS {
        margin: 0; 
        padding: 0 10px 10px 10px; 
        color: #999; 
        font-size: 14px; 
        font-weight: 600; 
        background-color: #000;
    }
    .FormlabelSelectAmtPS {
        margin: 10px 0 20px 0; 
        padding: 0; 
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }
    .FormlabelSelectAmtPS5 {
        margin: 10px 0 20px 0; 
        padding: 0 6px 0 6px; 
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }
    .FormlabelSelectAmtPS2 {
        margin: 10px 0 20px 0; 
        padding: 0 6px 0 6px; 
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }
    #selectedAmountContainerPS {
        display: flex; 
        justify-content: center;
    }
    #selectedAmtWrapPS {
        width: 170px;
        margin: 0; 
        padding: 0 10px 0 10px;
        text-align: center;        
    }
    #SelAmtErrContainerPS {
        display: flex; 
        justify-content: center;        
        height: 30px; 
        margin: 5px 0 15px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {   
    
    #pledgeSelectContainer {
        margin: 0; 
        padding: 0 130px 0 130px;    
    }    
    .pledgeSelectAvatar {
        display: inline-flex;
        margin: -144px 0 7px 20px;
        padding: 0;
        width: auto;
        text-align: left;
        color: #FFF;
        z-index: 8888 !important;
    }
    .PledgenameInfoPSelect {
        margin: 0;
        padding: 0;
    }
    .PledgenameInfoPSelect p {
        margin: 52px 0 0 1px; 
        font-size: 20px; 
        font-weight: 600; 
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
    }
    .PledgenameInfoPSelect h1 {
        margin-top: 0; 
        font-size: 30px;
        font-weight: 600; 
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
    }
    #linedSelectPS {
        margin: 0; 
        padding: 0 10px 10px 10px; 
        color: #999; 
        font-size: 16px; 
        font-weight: 600; 
        background-color: #000;
    }
    .FormlabelSelectAmtPS {
        margin: 10px 0 20px 0; 
        padding: 0 12px 0 12px; 
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }    
    .FormlabelSelectAmtPS5 {
        margin: 10px 0 20px 0; 
        padding: 0 12px 0 12px; 
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }     
    .FormlabelSelectAmtPS2 {
        margin: 10px 0 20px 0; 
        padding: 0 12px 0 12px; 
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }
    #selectedAmountContainerPS {
        display: flex; 
        justify-content: center;
    }
    #selectedAmtWrapPS {
        width: 170px;
        margin: 0; 
        padding: 0 7px 0 7px;
        text-align: center;        
    }    
    #SelAmtErrContainerPS {
        display: flex; 
        justify-content: center;        
        height: 30px; 
        margin: 5px 0 10px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1024px) { 
    
    #pledgeSelectContainer {
        margin: 0;     
    }
    .pledgeSelectAvatar {
        display: inline-flex;
        margin: -144px 0 7px 20px;
        padding: 0;
        width: 100%;
        color: #FFF;
    }
    .PledgenameInfoPSelect {
        margin: 0;
        padding: 0;
    }
    .PledgenameInfoPSelect p {
        margin: 50px 0 0 0; 
        font-size: 20px; 
        font-weight: 600; 
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
    }
    .PledgenameInfoPSelect h1 {
        margin-top: 0; 
        font-size: 30px; 
        font-weight: 600; 
        text-shadow: 1.5px 3px 2px rgba(0,0,0, 0.6);
    }
    #linedSelectPS {
        margin: 0; 
        padding: 0 10px 0 10px; 
        color: #999; 
        font-size: 16px; 
        font-weight: 600; 
        background-color: #000;
    }
    .FormlabelSelectAmtPS {
        margin: 10px 0 20px 0;
        padding: 0;
        color: #D0D0D0;
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }    
    .FormlabelSelectAmtPS5 {
        margin: 10px 0 20px 0;
        padding: 0;
        color: #D0D0D0;
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }    
    .FormlabelSelectAmtPS2 {
        margin: 10px 0 20px 0;
        padding: 0;
        color: #D0D0D0;
        font-size: 11px; 
        line-height: 1.5;
        word-break: break-word;
        text-align: center;
    }
    #selectedAmountContainerPS {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
    }    
    #selectedAmtWrapPS {
        width: 170px;
        margin: 0; 
        padding-top: 7px; 
        padding-bottom: 7px;
    }    
    #SelAmtErrContainerPS {
        text-align: center;
        height: 20px; 
        margin: 5px 0 10px 0; 
        padding: 0;
    }
}

/* ////// END - PLEDGSTA - PLEDGE-SELECT PAGE /////// */

/* ================================================== */

/* /////// PLEDGSTA - EDIT PLEDGE SELECT PAGE /////// */


/* /// 1024px width adjustment /// */
@media screen and (max-width: 1023px) {
    
    #EPSnormal {
        margin: 0;
        padding: 0;        
    }
    #EPSwidener {
        display: none;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {  

    #EPSnormal {
        display: none;
    }
    #EPSwidener {
        margin: 0;
        padding: 0;        
    }
}
@media screen and (min-width: 1025px) {

    #EPSnormal {
        margin: 0;
        padding: 0;        
    }
    #EPSwidener {
        display: none;
    }
}

/* /// END - 1024px width adjustment /// */

.greylineEPS1 {
    height: 1.5px;
    margin: 10px 10px 0 10px;
    border: 0px; 
}
#youAreCurrentlyContainer {
    margin: 17px 0 0 0; 
    padding: 8px 0 18px 0;
    border-radius: 12px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;   
}
@media screen and (min-width: 320px) and (max-width: 1024px) {  

    #youAreCurrentlyContainer {    
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) {

    #youAreCurrentlyContainer {    
        border: 2px solid #333;
        background-color: #111; 
    }
}


.EPSYACouter { /* border: 1px solid red; */
    display: inline-flex;
    margin: 0; 
    padding: 0 0 0 4px;
}
.EPSYACtitleHolder { /* border: 1px solid orange; */
    width: 130px;
    float: right; 
    margin: 0; 
    padding: 0; 
    text-align: right;
}
.EPSYACdataHolder { /* border: 1px solid orange; */
    width: 130px;
    float: left; 
    margin: 0; 
    padding: 0; 
    text-align: left;
}
.youAreCurrently {
    margin: 5px 2px 0 0;
    color: #D0D0D0;
    font-weight: 500;
    line-height: 1.4;    
}
.YACData {
    margin: 5px 0 0 2px;
    /*color: #0088FF;*/
    color: #ff9900;
    /*color: #999;*/
    font-weight: 500;
    line-height: 1.4;    
}
.customerPortalLink {
    margin: 20px 0 0 0;
    padding: 8px 20px 8px 20px;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;     
    background-color: #111;
    transition: all 0.3s linear;
}
.customerPortalLink:hover {
    background-color: #222;
    cursor: pointer;
}
.greylineEPS2 {
    height: 1.5px;
    margin: 25px 15px 10px 15px;
    border: 0px; 
    background: #333;
}
#selectPledgeContainer {
    margin: 0 0 20px 0; 
    padding: 0;
}
/*#editPSContainer {
    margin: 66px 0 0 0;
    padding: 0;
}*/
.upgradeQuery { 
    margin: 15px 0 15px 0;
    color: #D0D0D0;
    font-size: 12px;
}
.downgradeQuery {
    margin: 15px 0 15px 0;
    color: #D0D0D0;
    font-size: 12px;
}
#upgradeWrapperCell {
    margin: 0;
    padding: 0 0 30px 0;
    border-radius: 12px;     
}
@media screen and (min-width: 320px) and (max-width: 1024px) {  

    #upgradeWrapperCell {    
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    #upgradeWrapperCell {    
        border: 2px solid #333;
        background-color: #111; 
    }
}

#upgradeWrapper {
    margin: 15px 0 0 0;
    padding: 0;
}
.EPSbuttHolder {
    margin: 0 0 -4px 0; 
    padding: 0;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
.EPSbuttHolder2 {
    margin: 10px 0 0 0; 
    padding: 0;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}
#selectWrapper {
    width: 100%; 
    height: 12px;
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #333; 
    text-align: center;
}
#linedSelect {
    margin: 0; 
    padding: 0 10px 10px 10px; 
    color: #999; 
    font-size: 16px; 
    font-weight: 600; 
    background-color: #000;
}
#orWrapperOuter {
    width: 100%;
    margin: 20px 0 30px 0;
    padding: 0 16% 0 16%;    
}
#orWrapperOuter2 {
    width: 100%;
    margin: 20px 0 10px 0;
    padding: 0 16% 0 16%;    
}
#orWrapper {
    height: 11px;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
#linedOR {
    margin: 0; 
    padding: 0 10px 10px 10px; 
    color: #999; 
    font-size: 14px; 
    font-weight: 600; 
}
#linedOR2 {
    margin: 0; 
    padding: 0 10px 10px 10px; 
    color: #999; 
    font-size: 14px; 
    font-weight: 600; 
}
@media screen and (min-width: 320px) and (max-width: 1024px) {  

    #orWrapper {
        border-bottom: 2px solid #222; 
    }
    #linedOR { 
        background-color: #0a0a0a;
    }
    #linedOR2 {
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    #orWrapper {
        border-bottom: 2px solid #333;
    }
    #linedOR {
        background-color: #111;
    }
    #linedOR2 {
        background-color: #111;
    }
}

.upgradePledge {
    height: 42px;
    margin: 0 0 0 0;
    padding: 0;
    color: #0088FF;
    font-size: 12px;
    text-align: center;
    border-radius: 10px;
}
.dngradePledge {
    height: 42px;
    margin: 0;
    padding: 0;
    color: #ff0000;
    font-size: 12px;
    text-align: center;
    border-radius: 10px;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    .upgradePledge {  
        width: 69%;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .upgradePledge:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;   
    }

    .dngradePledge {  
        width: 69%;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPReset:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;   
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .upgradePledge {  
        width: 55%;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .upgradePledge:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;   
    }

    .dngradePledge {  
        width: 55%;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .EPReset:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;   
    }
}
@media screen and (min-width: 1025px) {
    
    .upgradePledge {  
        width: 55%;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;
    }
    .upgradePledge:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;  
    } 

    .dngradePledge {  
        width: 55%;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.3s linear;
    }
    .dngradePledge:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;   
    }  
}



@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #EPSAlertHolder {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        height: 25px;
        margin: -10px 0 10px 0; 
        padding: 0;
    }    
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #EPSAlertHolder {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        height: 25px;
        margin: 4px 0 10px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (min-width: 1024px) {    
    
    #EPSAlertHolder {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        height: 25px;
        margin: -10px 0 10px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {    
    
    #EPSAlertHolder {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        height: 25px;
        margin: -10px 0 10px 0; 
        padding: 0;
    }
}


@media screen and (min-width: 320px) and (max-width: 767px) {

    .youAreCurrently {
        font-size: 11px;
    }
    .YACData {
        font-size: 11px;
    }
    .FormlabelSelectAmt {
        margin: 10px 0 10px 0;
        padding: 0 12px 0 12px; 
        color: #D0D0D0;
        font-size: 11px;
        font-weight: 500;
        word-break: break-word;
        text-align: center;
    }
    #selectedAmountHolder {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        margin-bottom: 15px;
    }
    #selectedAmountWrap {
        margin: 10px 0; 
        padding: 0 7px 0 7px;
        text-align: center;
    }
    .selectedAmount {
        display: block;
        width: 100%;
        height: 32px;
        padding: 10px 5px 10px 5px;
        font-size: 12px;
        line-height: 1.4;
        color: #FFF;
        vertical-align: middle;
        resize: none;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-left: none;
        background-color: #000;
        transition: all 0.3s linear;
    }
    .selectedAmount:hover {
        cursor: text;
    }
    .FormlabelDownAmt {
        margin: 10px 0 15px 0; 
        padding: 0; 
        font-size: 12px;
        font-weight: 500;         
        color: #D0D0D0;
        text-align: center;
    }
}
@media screen and (min-width: 768px) and (min-width: 1024px) {    
    
    .youAreCurrently {
        font-size: 12px;
    }
    .YACData {
        width: 160px;
        font-size: 12px;
    }
    .FormlabelSelectAmt {
        margin: 14px 0 15px 0; 
        padding: 0 12px 0 12px;
        color: #D0D0D0;
        font-weight: 500; 
        font-size: 12px;
        text-align: center;
    }
    #selectedAmountHolder {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        margin-bottom: 15px;
    }    
    #selectedAmountWrap {
        width: 170px;
        margin: 0; 
        padding: 0 7px 0 7px;
        text-align: center;
    }
    .selectedAmount {
        display: block;
        width: 100%;
        height: 32px;
        padding: 10px 5px 10px 5px;
        font-size: 12px;
        line-height: 1.4;
        color: #FFF;
        vertical-align: middle;
        resize: none;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-left: none;
        background-color: #000; 
        transition: all 0.3s linear;
    }
    .selectedAmount:hover {
        cursor: text;
    }
}
@media screen and (min-width: 1025px) {    
    
    .youAreCurrently {
        font-size: 12px;
    }
    .YACData {
        width: 160px;
        font-size: 12px;
    }
    .FormlabelSelectAmt {
        margin: 14px 0 15px 0; 
        padding: 0 12px 0 12px;
        color: #D0D0D0;
        font-weight: 500; 
        font-size: 12px;
        text-align: center;
    }
    #selectedAmountHolder {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        margin-bottom: 15px;
    }    
    #selectedAmountWrap {
        width: 170px;
        margin: 0; 
        padding: 0 7px 0 7px;
        text-align: center;
    }
    .dngradePledge {
        width: 55%;
    }
    .selectedAmount {
        display: block;
        width: 100%;
        height: 32px;
        padding: 10px 5px 10px 5px;
        font-size: 12px;
        line-height: 1.4;
        color: #FFF;
        vertical-align: middle;
        resize: none;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
        background-color: #0d0d0d; 
        transition: all 0.3s linear;
    }
    .selectedAmount:hover {
        cursor: text;
    }
}

#editPSWrapper {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 34px;
    border-bottom-left-radius: 34px;
    box-shadow: 5px 5px 10px #000000, 
               -1px -1px 10px #1b1b1b; 
}

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #editPSContainer {
        margin: 0;
        /*margin: 66px 0 0 0;*/
        padding: 0;
    }
    #editPSWrapper {
        margin: 75px 10px 150px 10px;
        padding: 20px 20px 10px 20px;
        /*margin: 60px 10px 150px 10px; 
        padding: 20px 15px 10px 15px;*/
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #selectedAmountFix {}
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #editPSContainer {
        margin: 0;
        /*margin: 66px 0 0 0;*/
        padding: 0;
    }   
    #editPSWrapper {
        margin: 75px 10px 150px 10px;
        padding: 20px 20px 10px 20px;
        /*margin: 60px 10px 150px 10px; 
        padding: 20px 15px 10px 15px;*/
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #selectedAmountFix {}
}
@media screen and (min-width: 768px) and (max-width: 799px) {

    #editPSContainer {
        margin: 0;
        /*margin: 66px 0 0 0;*/
        padding: 0;
    }
    #editPSWrapper {
        margin: 68px 120px 150px 140px;
        /*margin: 63px 120px 150px 140px; */
        padding: 20px 30px 10px 30px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #selectedAmountFix {
        width: 116px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 800px) and (max-width: 800px) {

    #editPSContainer {
        margin: 0;
        /*margin: 66px 0 0 0;*/
        padding: 0;
    }
    #editPSWrapper {
        margin: 68px 0 120px 230px;
        /*margin: 63px 0 120px 230px; */
        padding: 20px 30px 10px 30px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #selectedAmountFix {
        width: 116px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 801px) and (max-width: 1023px) {

    #editPSContainer {
        margin: 0;
        /*margin: 66px 0 0 0;*/
        padding: 0;
    }
    #editPSWrapper {
        margin: 68px 0 150px 230px;
        /*margin: 63px 0 150px 230px; */
        padding: 20px 30px 10px 30px;
        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #selectedAmountFix {
        width: 116px;
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {  

    #editPSContainer {
        margin: 0;
        /*margin: 66px 0 0 0;*/
        padding: 0;
    }
    #editPSWrapper {
        margin: 68px 10px 150px -60px; 
        /*margin: 63px 10px 150px -60px; */
        padding: 20px 25px 10px 25px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    #selectedAmountFix {
        width: 130px;
        margin: 0;
        padding: 0;
    }    
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {  

    #editPSContainer {
        margin: 0;
        /*margin: 66px 0 0 0;*/
        padding: 0;
    }
    #editPSWrapper {
        margin: 68px 10px 150px -60px;
        /*margin: 2px 10px 150px -60px;*/
        padding: 20px 25px 10px 25px;
        border: 2px solid #333;
        background-color: #111; 
    }
    #selectedAmountFix {
        width: 130px;
        margin: 0;
        padding: 0;
    }    
}
@media screen and (min-width: 1201px) {  

    #editPSContainer {
        margin: 66px 0 150px 0; 
        padding: 0;
    }
    #editPSWrapper {
        margin: 0 10px 0 -24.5px;
        padding: 20px 20px 10px 20px;
        border: 2px solid #333;
        background-color: #111;
    }



/*    #editPSContainer {
        margin: 66px 0 0 0;
        padding: 0;
    }
    #editPSWrapper {
        margin: 2px 10px 150px -60px;
        padding: 20px 25px 10px 25px;
        border: 2px solid #333;
        background-color: #111; 
    }*/
    #selectedAmountFix {
        width: 130px;
        margin: 0;
        padding: 0;
    }    
}

/* //////////////////////////////////// */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .FormlabelDownAmt {
        margin: 15px 0 15px 0; 
        padding: 0; 
        font-size: 11px;
        font-weight: 500;         
        color: #D0D0D0;
        text-align: center;
    }
}
@media screen and (min-width: 1025px) {
    
    .FormlabelDownAmt {
        margin: 15px 0 15px 0; 
        padding: 0; 
        font-size: 12px;
        font-weight: 500;         
        color: #D0D0D0;
        text-align: center;
    }
}

#selectAmt_addon {
    height: 32px;    
    padding: 2px 6px 0 10px;
    font-size: 12px;
    color: #999;    
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #selectAmt_addon {
        border-top: 2px solid #222;
        border-left:2px solid #222;
        border-bottom: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 1025px) {

    #selectAmt_addon {
        border-top: 2px solid #333;
        border-left:2px solid #333;
        border-bottom: 2px solid #333;
        background-color: #111;
    }
}

.upgradeConfirm {
    margin: -3px 0 5px 0;
    padding: 11px 10px 10px 10px;
    color: #0088FF;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;     
    text-align: center;
    border-radius: 6px;
    background-color: #111;
}
.upgradeConfirmA {
    margin: -5px 0 10px 0;    
    padding: 11px 10px 10px 10px;
    color: #0088FF;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;     
    text-align: center;
    border-radius: 6px;
    background-color: #111;
}
.apaCardErrorAlert {
    margin: 5px 0 5px 0;
    padding: 11px 10px 10px 10px; 
    color: #ff0000; 
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;     
    text-align: center;
    border-radius: 6px;
    background-color: #111;
}
.CardErrorAlertP {
    margin: -3px 0 5px 0;
    padding: 11px 10px 10px 10px; 
    color: #ff0000; 
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;     
    text-align: center;
    border-radius: 6px;
    background-color: #111;
}
.CardErrorAlertA {
    margin: -5px 0 10px 0;
    padding: 11px 10px 10px 10px; 
    color: #ff0000; 
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;     
    text-align: center;
    border-radius: 6px;
    background-color: #111;
}

@media screen and (min-width: 320px) and (max-width: 408px) {
    
    #feather { 
        margin: -4px 0 4px 0;
        font-size: 20px; 
    }
    .upgradeConfirm p {
        margin: 0 10px 0 10px;
    }
    .upgradeConfirmA p {
        margin: 0 10px 0 10px;
    }
}
@media screen and (min-width: 409px) {
    
    #feather { 
        margin: -1px 0 0 20px;
        float: left;
        font-size: 20px; 
    }
    .upgradeConfirm p {
        margin: 0;
    }
    .upgradeConfirmA p {
        margin: 0;
    }
}
@media screen and (max-width: 799px) {    
    
    #ValidAmount {
        line-height: 1.4;
        margin: 0 0 0 0;
        font-size: 12px;
        color: #0088FF;       
        word-break: break-word;
    }
    #EPSValidAmount {
        line-height: 1.4;
        margin: 0 0 0 0;
        font-size: 12px;
        /*color: #ff9900;*/
        color: #0088FF;       
        word-break: break-word;     
    }
    #ValidAmountinfo {
        line-height: 1.4;
        margin: 0 0 0 0;
        font-size: 12px;
        color: #ff9900;
        word-break: break-word;
        text-align: justify;       
    }
    #ValidAmountError {
        line-height: 1.4;
        margin: 0 0 0 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
    }
}
@media screen and (min-width: 800px) {
    
    #ValidAmount {
        line-height: 1.4;
        margin: 0 2px 0 0;
        font-size: 12px;
        text-shadow: 0 0 0 #0088FF;
        color: #0088FF;
        word-break: break-word;
    }
    #EPSValidAmount {
        line-height: 1.4;
        margin: 0 2px 0 0;
        font-size: 12px;
        /*text-shadow: 0 0 0 #ff9900;
        color: #ff9900;*/
        text-shadow: 0 0 0 #0088FF;
        color: #0088FF; 
        word-break: break-word;
    }    
    #ValidAmountinfo {
        line-height: 1.4;
        margin: 0 2px 0 0;
        font-size: 12px;
        text-shadow: 0 0 0 #ff0000;
        color: #ff0000;
        word-break: break-word;
        text-align: justify;        
    }    
    #ValidAmountError {
        line-height: 1.4;
        margin: 0 2px 0 0;
        font-size: 12px;
        color: #ff0000;
        word-break: break-word;    
    }
}

/* //// END - PLEDGSTA EDIT-PLEDGE-SELECT PAGE //// */

/* ================================================ */

#labelCell {
    margin: 13px 0 0 0; 
    padding: 0;
}
.shortpreview {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.EPshortpreview {    
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 67px auto 0 auto; 
    padding: 0 auto 0 auto;
}
.AEPshortpreview {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 auto 0 auto; 
    padding: 0 auto 0 auto;    
}
.shortpreview2 {
    height: 200px;
    width: 200px;
    margin: 0 0 20px 0;
}
.shortpreviewC { /* edit */
    height: 240px; 
    width: 240px;
    margin: 0;
    padding: 0;
    text-align: center;
}
.shortpreview-Backround {
    margin: 0;
    padding: 0;
}
  

@media screen and (min-width: 320px) and (max-width: 767px) {

    #imagePreview3 {    
        height: 254px; 
        width: 254px;
        margin: 0;
        padding: 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

    #imagePreview3 {    
        height: 244px; 
        width: 244px;
        margin: 0;
        padding: 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1024px) {
 
    #imagePreview3 {    
        height: 195px; 
        width: 195px;
        margin: 0;
        padding: 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
}
@media screen and (min-width: 1025px) {

    #imagePreview3 {    
        height: 244px; 
        width: 244px;
        margin: 0;
        padding: 0;
        border-radius: 8px;
        border: 2px solid #333;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
}

/*.imageCover {
    min-height: 196px; 
    min-width: 196px;
    margin-top: 0; 
    padding: -2px;
    border-radius: 6px;
    background-image: url(https://pledgsta.com/assets/img/icons8-name-48-2.jpg);
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}*/
#imagePreview2 {    
    height: 27%;
    width: 100%;
    float: right;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    border: 2px solid #333;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}




#uploadImagePreview3 {
    margin: 0;
    padding: 0;
}
#uploadImagePreview5 {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#uploadPosterPreview {
    margin: 0 auto 0 auto;
    padding: 0;
}
#uploadImagePreview, 
#uploadImagePreview2, 
#uploadBackgroundImagePreview {
    display: none;
}
.submit {
    width: 100%;
    color: #FF9900;
    padding: 7px 0 7px 0;
    margin: 0 0 10px 0;
    font-weight: 500;
    font-size: 12px;
    border-radius: 6px;
    border: 2px solid #FF9900;
    background-color: #000;
    transition: all 0.4s linear;
}
.submit:hover {
    cursor: pointer;
    color: #FF9900;
    background-color: #111;
    border: 2px solid #FF9900; 
}
.submit2 {
    width: 100%;
    color: #FF9900;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 6px;
    border: 2px solid #FF9900;
    background-color: #000;
    transition: all 0.4s linear;
}
.submit2:hover {
    cursor: pointer;
    color: #FF9900;
    background-color: #111;
    border: 2px solid #FF9900; 
}
#SubmitButtonPledge {
    margin-right: 0;
    margin-top: -40px;
}

/* /////////////// END EDIT-PAGES ////////////// */

/* ============================================= */

/* ////////////// START REPORT PAGES /////////// */

/* //// REPORT PLAYER //// */

#RPmainContainer {
    margin: 0 auto 0 auto;
    padding: 0 10px 0 10px;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#RPmainContainerInner {
    border-radius: 12px;
    border: 2px solid red;
    /*border: 2px solid #333;*/
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}
.greyHeadingReport {
    margin: 0;
    padding: 14px 10px 14px 10px;
    color: #999;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111; 
}
.copyrightButt {
    height: 49px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #999;
    font-size: 12px;
    font-weight: 600;/**/
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;    
    transition: all 0.3s linear;
}
.copyrightButt:hover {
    cursor: pointer;
    background-color: #1b1b1b;
}
#reportColSendbutton {
    margin: 0;
    padding: 0;
    text-align: center;
}  
.RPSendButt {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 9px 0 9px 0;
    color: #ff0000;
    font-size: 14px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;   
    transition: all 0.3s linear;
}
.RPSendButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1b1b1b;
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #RPmainContainerInner {
        width: 100%;
        margin: 75px 0 0 0;
        padding: 20px 15px 20px 15px;
    }
    #alertemptyContainer {
        height: 30px;
        margin: 15px 0 0 0;
        padding: 0;
    }    
    #reportCol1 {
        margin: 0; 
        padding: 0;
    }
    #reportCol2 {
        margin: 0; 
        padding: 0;
    }
    #RPcopyrightButtHolder {
        margin: 10px 0 30px 0;
        padding: 0; 
    }
    #reportColBackbutton {
        display: none;
    }
    .RPbackButt {
        display: none;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    
    #RPmainContainerInner {
        width: 60%;
        margin: 75px 0 60px 0;
        padding: 20px;
    }
    #alertemptyContainer {
        height: 30px;
        margin: 15px 0 0 0;
        padding: 0;
    }    
    #reportCol1 {
        margin: 0; 
        padding: 0;
    }
    #reportCol2 {
        margin: 0; 
        padding: 0;
    }
    #RPcopyrightButtHolder {
        margin: 10px 0 30px 0;
        padding: 0; 
    }
    #reportColBackbutton {
        display: none;
    }
    .RPbackButt {
        display: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #RPmainContainerInner {
        width: 60%;
        margin: 75px 0 60px 0;
        padding: 20px;
    }
    #alertemptyContainer {
        height: 30px;
        margin: 15px 0 0 0;
        padding: 0;
    }    
    #reportCol1 {
        margin: 0; 
        padding: 0;
    }
    #reportCol2 {
        margin: 0; 
        padding: 0;
    }
    #RPcopyrightButtHolder {
        margin: 10px 0 30px 0;
        padding: 0;
    }    
    #reportColBackbutton {
        display: none;
    }
    .RPbackButt {
        display: none;
    } 
}
@media screen and (min-width: 800px) and (max-width: 1023px) {

    #RPmainContainerInner {
        width: 60%;
        margin: 75px 0 60px 0;
        padding: 20px;
    }
    #alertemptyContainer {
        height: 30px;
        margin: 15px 0 0 0;
        padding: 0;
    }
    #reportCol1 {
        margin: 0; 
        padding: 0;
    }
    #reportCol2 {
        margin: 0; 
        padding: 0;
    }
    #RPcopyrightButtHolder {
        margin: 10px 0 30px 0;
        padding: 0;
    }
    #reportColBackbutton {
        display: none;
    }
    .RPbackButt {
        display: none;
    } 
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #RPmainContainerInner {
        margin: 75px 0 60px 0;
        padding: 20px;
    }
    #alertemptyContainer {
        height: 30px;
        margin: 10px 0 5px 0;
        padding: 0;
    }     
    #reportCol1 {
        margin: 0; 
        padding: 0 5px 0 0;
    }
    #reportCol2 {
        margin: 0; 
        padding: 0 0 0 5px;
    } 
    #RPcopyrightButtHolder {
        margin: 10px 0 30px 0;
        padding: 0 5px 0 0; 
    }
    #reportColBackbutton {
        display: none;
    }
    .RPbackButt {
        display: none;
    }
} 
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #RPmainContainerInner {
        margin: 75px 0 60px 0;
        padding: 20px;
    }
    #alertemptyContainer {
        height: 30px;
        margin: 10px 0 5px 0;
        padding: 0;
    }     
    #reportCol1 {
        margin: 0; 
        padding: 0 5px 0 0;
    }
    #reportCol2 {
        margin: 0; 
        padding: 0 0 0 5px;
    } 
    #RPcopyrightButtHolder {
        margin: 10px 0 30px 0;
        padding: 0 5px 0 0; 
    }
    #reportColBackbutton {
        display: none;
    }
    .RPbackButt {
        display: none;
    }
} 
@media screen and (min-width: 1200px) {

    #RPmainContainerInner { 
        width: 44%;
        margin: 75px 0 60px 0;
        padding: 20px;
    }
    #alertemptyContainer {
        height: 30px;
        margin: 10px 0 5px 0;
        padding: 0;
    }     
    #reportCol1 {
        margin: 0; 
        padding: 0 5px 0 0;
    }
    #reportCol2 {
        margin: 0; 
        padding: 0 0 0 5px;
    } 
    #RPcopyrightButtHolder {
        margin: 10px 0 30px 0;
        padding: 0 5px 0 0; 
    }
    #reportColBackbutton {
        display: none;
    }
    .RPbackButt {
        display: none;
    }    
    /*#reportColBackbutton {
        margin: 10px 0 20px 0;
        padding: 0 0 0 5px; 
    }
    .RPbackButt {
        height: 49px;
        width: 100%;    
        margin: 0;
        padding: 0;
        color: #0088FF;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.3s linear;
        border: 2px solid #111;
        background-color: #111;
    }
    .RPbackButt:hover {
        /*cursor: pointer;
        background-color: #1b1b1b;
    }*/
}

#RPcheckboxContainer {
    margin: 10px 0 0 0;
    padding: 10px 10px 5px 0;

    border-radius: 8px;
    border: 2px solid #333; 
    background-color: #111;
}
#RPcheckboxContainerCOPRT {
    margin: 5px 0 20px 0;
    padding: 10px 0 5px 0;
    border-radius: 6px;
    border: 2px solid #333; 
    background-color: #000;
}
#RPcontainer_chk {
    height: 18px; 
    width: 0; 
    margin-left: -10px;
}
#categoryTitle {
    font-size: 12px;
    font-weight: 600;/**/
    color: #999;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
   
    #reportColCopyright {
        margin: 0; 
        padding: 0;
    }
    #reportColBackbutton {
        margin: 0;
        padding: 0; 
    }
    #reportColSendbutton {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #trackNoCol {
        padding: 0; 
        margin: -10px 0 15px 0;
    }
    #trackNameCol {
        padding: 0; 
        margin: -10px 0 15px 0;
    }
}
@media screen and (min-width: 768px) {    
      
    #reportColCopyright {
        margin: 0; 
        padding: 0 5px 0 0;   
    }
    #trackNoCol {
        padding: 0; 
        margin: -10px 0 20px 0;
    }
    #trackNameCol {
        margin: -10px 0 20px 0;
        padding: 0; 
    }
}

/* // JS error alert // */

.reportfieldAlert {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #ff0000;
}
#ValidSelectError {
    margin: 8px 0 0 1px;
    font-size: 12px;
    color: #ff0000;
    word-break: break-word;    
    background-color: #000;
}

/*///// END - REPORT PLAYER /////*/


/*///// REPORT(POSTS) PAGE  /////*/

#RPmainContainer {
    margin: 0 auto 0 auto;
    padding: 0 10px 0 10px;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#RPmainContainerInner {
    width: 100%;
    margin: 75px 0 0 0;
    padding: 20px 15px 20px 15px;    
    border-radius: 12px;
    border: 2px solid red;
    /*border: 2px solid #333;*/
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}


#reportContainerInner {
    margin: 0;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid red;
    /*border: 2px solid #333;*/
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}
#RPostscheckboxContainer {
    margin: 10px 0 0 0;
    padding: 10px 10px 5px 0;
    border: 2px solid #333; 
    border-radius: 8px;
    background-color: #111;
}



@media screen and (min-width: 320px) and (max-width: 599px) {

    #reportMainContainer {
        margin: 75px auto 0 auto; 
    }
    #reportContainerOuter {
        margin: 0; 
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #reportMainContainer {
        margin: 60px auto 0 auto; 
    }
    #reportContainerOuter {
        margin: 0; 
        padding: 0 100px 0 100px;
    }
}

@media screen and (min-width: 768px) and (max-width: 823px) {

    #reportMainContainer {
        margin: 70px auto 0 auto;
        padding: 0; 
    }
    #reportContainerOuter {
        margin: 0; 
        padding: 0 140px 0 140px;
    }
}

@media screen and (min-width: 824px) and (max-width: 1023px) {

    #reportMainContainer {
        margin: 70px auto 0 auto; 
    }
    #reportContainerOuter {
        margin: 0; 
        padding: 0 130px 0 170px;
    }
}
@media screen and (min-width: 1024px) {

    #reportMainContainer {
        margin: 75px auto 0 auto; 
    }
    #reportContainerOuter {
        margin: 0; 
        padding: 0;
    }
}

/*// END - REPORT (POSTS) PAGE //*/

/*//////// COPYRIGHT PAGE ///////*/

#copyrightContainer {  
    border-radius: 12px;
    border: 2px solid red;
    /*border: 2px solid #333;*/
    background-color: #111;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;
}

.copyrightHeading {
    margin: 10px 0;
    padding: 14px 10px 14px 10px;
    color: #999;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;
}  

@media screen and (min-width: 320px) and (max-width: 599px) {
    
    #copyrightContainer {
        margin: 75px 0 60px 0;
        padding: 10px 20px 30px 20px;      
    }   
    #copyrightForm {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #copyrightContainer {
        margin: 75px 130px 60px 130px;
        padding: 10px 20px 30px 20px;        
    } 
    #copyrightForm {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 823px) {

    #copyrightContainer {
        margin: 75px 140px 60px 140px;
        padding: 10px 20px 30px 20px;        
    }  
    #copyrightForm {
        margin: 0;
        padding: 0;
    }
}
@media screen and (min-width: 824px) and (max-width: 1023px) {

   #copyrightContainer {
        margin: 75px 150px 60px 150px;
        padding: 10px 26px 30px 26px;      
    }   
    #copyrightForm {
        margin: 0;
        padding: 0 0 10px 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {

   #copyrightContainer {
        width: 40%;
        margin: 75px 0 60px -25px;
        padding: 10px 20px 20px 20px;      
    } 
    #copyrightForm {
        margin: 0;
        padding: 0 0 10px 0;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {

    #copyrightContainer {
        width: 40%;
        margin: 75px 0 60px -25px;
        padding: 10px 26px 20px 26px;
    }
    #copyrightForm {
        margin: 0;
        padding: 0 0 10px 0;
    }
}
@media screen and (min-width: 1200px) {

    #copyrightContainer {
        margin: 75px 0 60px 0;
        padding: 10px 26px 20px 26px;
    }
    #copyrightForm {
        margin: 0;
        padding: 0 0 10px 0;
    }
}
#copyrightlabel {
    margin-left: 4px;
    color: #999; 
    font-size: 12px;
    /*font-weight: 500;*/
}
#copyrightInput {
    margin-top: 5px;
    color: #D0D0D0;
}
.copyrightButtHolder {
    width: 100%;
    margin: 40px 0 0 0;
    padding: 0;
    text-align: center; 
}
.copyrightSendButt {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 9px 0 9px 0;
    color: #ff0000;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;   
    transition: all 0.3s linear;
}
.copyrightSendButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}
.reportButt {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 9px 0 9px 0;
    color: #ff0000;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;   
    transition: all 0.3s linear;
}
.reportButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a;
}
/*.reportButt {
    width: 100%;
    height: 35px;
    margin: 0 0 15px 0;
    padding: 7px 0 7px 0;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;   
    border: 2px solid #333;
    background-color: #000;   
    transition: all 0.3s linear;
}
.reportButt:hover {
    cursor: pointer;      
    border: 2px solid #f00000;
    background-color: #111;
}*/
.copyrightAlertHolder {
    height: 30px;
    margin: 15px 0 0 0;
    padding: 0;    
}
.copyrightfieldAlert {
    margin:0;
    padding: 0;
    font-size: 12px;
    color: #ff0000;
}

/*//// END - COPYRIGHT PAGE ////*/

/*//// THANK YOU FOR REPORT PAGE ////*/

#thankyouContainer {
    margin-top: 100px; 
    margin-bottom: 50px;
    padding:0 auto 0 auto; 
    vertical-align: center;
}
@media screen and (min-width: 320px) and (max-width: 374px) {
    
    #thankyouMessage {
        height: 108px; 
        margin: 40px auto 40px auto; 
        padding: 20px; 
        font-weight: 600;
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }
}
@media screen and (min-width: 375px) and (max-width: 767px) {
    
    #thankyouMessage {
        height: 150px; 
        margin: 40px auto 40px auto; 
        padding: 50px 20px 0 20px; 
        font-weight: 600;
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }
}
@media screen and (min-width: 768px) {
    
    #thankyouMessage {
        height: 150px; 
        margin: 40px auto 40px auto; 
        padding: 60px 20px 20px 20px; 
        background-color: #000; 
        border: 2px solid #333; 
        border-radius: 6px;
    }
}
.thankyouText {
    color: #ff9900;
}

/* /////// END - THANK YOU FOR REPORT PAGE ///// */

/* ///////////// END REPORT PAGES ////////////// */

/* ============================================= */

/* ///////// Reset Password Container ////////// */

.main { 
    max-width: 600px;
    min-height: auto;
    margin: 80px auto 40px auto;
    padding: 10px 50px 40px 50px;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;
}
.login-footer {
    max-height: 40px;
    margin: 0;
}

/* //////// END Reset Password Container //////// */

/* ============================================= */

/* ///////////////// MORE MISC ///////////////// */

.y btn btn-primary {
    position: relative;
    overflow: hidden;
    height: auto;
    width: 100%;    
    margin: 0;
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #ff9900;    
    background-color: rgba(255, 153, 0, 0.2);
}
.inputButton {
    padding: 0px;
    margin: -30px 0px 0px 0px;
    height: 30px;
    width: 100%;
    font-size: 50px;
    opacity: 0;
    right: 0px;
    top: 0px;
}
.post-video {
   padding-left: 4px;
}
.videoPosts-post {
    color: #FF9900;
    width: 600px;
    border: 2px solid #333;                       
    border-radius: 8px;
    margin: 0px 360px 24px 360px;
    padding: 0px 15px 20px 15px;
    background-color: #000;
    z-index: 1;
} 
.bio-text {
    color: #FF9900;
    width: 100%;
    border: 2px solid #333;                       
    border-radius: 8px;
    margin: 10px 0px 0px 0px;
    padding: 15px; 
    background-color: #000;
}
.bio-text h3 {
    text-align: center;
    font-size: 18px;
    margin-left: 0px;
    margin-top: 8px;
}
.bio-text p {
    text-align: left;
}
#saveContainerInner {
    margin: 0; 
    padding: 0 auto 0 auto;
}

@media screen and (min-height: 0) and (max-height: 319px) {
    
    #saveContainer {
        display: none;
    }
    .saveButtEP { 
        display: none;
    }
}

@media screen and (min-width: 768px) {
    
    .saveButtonSidebarEP {
        position: fixed;
        height: 105px;
        width: 170px; 
        bottom: 0;
        padding: 0;
    }   
}

/* //// Small screen //// */

@media screen and (min-width: 320px) and (max-width: 599px) {

    #privacyText {
        display: inline-block;
        font-size: 11px;
        margin: 5px 0 10px 0; 
    }
    #saveText {
        display: none;
    }
    #saveEditbutton {
        padding: 0;
        margin: 0 0 0 10px;
    }
    #saveContainer {
        position: fixed;
        width: 80px;
        padding: 5px 17px 10px 0;
        /*padding: 5px 15px 10px 0;*/
        right: 0;
        float: right;
        bottom: -2px;
        z-index: 7777;
    }
    .saveButtEP {
        float: right;
        height: 70px;
        width: 70px;
        color: #999;   
        line-height: 1.5;
        text-align: center;
        font-size: 12px;
        margin: 10px 0 12px 0;
        padding: 5px 0 9px 0;
        border: 2px solid rgba(255, 0, 0, 0.6);
        border-radius: 16px;
        /*border-radius: 12px;*/
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px transparent;
        /*transition: 200ms;*/
        /*transition: all 0.4s linear;*/
    }
    .saveButtEP:hover {
        /*transform: scale(1.2);*/
        cursor: pointer;    
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {

    #privacyText {
        display: inline-block;
        font-size: 11px;
        margin: 5px 0 10px 0; 
    }
    #saveText {
        display: none;
    }
    #saveEditbutton {
        padding: 0;
        margin: 0 0 0 10px;
    }
    #saveContainer {
        position: fixed;
        width: 80px;
        padding: 5px 0 10px 0;
        right: 0;
        float: right;
        bottom: -2px;
        z-index: 7777;
    }  
    .saveButtEP {
        float: right;
        height: 70px;
        width: 70px;
        color: #999;   
        line-height: 1.5;
        text-align: center;
        font-size: 12px;
        margin: 10px 0 12px 0;
        padding: 5px 0 9px 0;
        border: 2px solid rgba(255, 0, 0, 0.6);
        border-radius: 12px;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                   -1px -1px 10px transparent;
        transition: all 0.4s linear;
    }
    .saveButtEP:hover {
        cursor: pointer;    
    }  
}

/* //// Large screen //// */

@media screen and (min-width: 768px) and (max-width: 960px) {
    
    #privacyText {
        display: inline-block;        
        font-size: 14px;
    }   
    #saveText {
        font-size: 17px;
        color: red;
        margin: 8px 0 0 0;
        padding: 0;
    }
    #saveEditbutton {
        width: 100%;
        padding: 0;
        margin: 0;
        background-color: #000;
        border-radius: 6px;
    }
    #saveContainer {
        position: fixed;
        width: 80px;
        padding: 5px 15px 10px 0;
        right: 0;
        float: right;
        bottom: -2px;
        z-index: 7777;
    }
    .saveButtEP {
        float: right;
        height: 70px;
        width: 70px;
        color: #999;   
        line-height: 1.5;
        text-align: center;
        font-size: 12px;
        margin: 10px 0 12px 0;
        padding: 5px 0 9px 0;
        border: 2px solid rgba(255, 0, 0, 0.6);
        border-radius: 12px;
        background-color: #111;
        box-shadow: 5px 5px 10px #000000, 
                    -1px -1px 10px transparent;
        transition: all 0.4s linear;
    }
    .saveButtEP:hover {
        cursor: pointer;    
    }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
    
    #privacyText {
        display: inline-block;        
        font-size: 14px;
    }    
    #saveText {
        font-size: 16px;
        color: red;
        margin: 8px 0 0 18px;
        padding: 0;
    }
    #saveContainer {
        display: none;
    }
    #saveEditbutton {
        width: 195px;
        padding: 0;
        margin: 0 0 0 10px;
        background-color: #000;
        border-radius: 6px;
    }
    .saveButtEP {
        height: 38px;
        width: 165px;
        color: #D0D0D0;   
        text-align: center;
        font-size: 12px;
        margin: 40px 0 50px 0;
        padding: 0 10px 0 10px;
        border-radius: 10px;
        border: 2px solid rgb(255, 0, 0);
        background-color: #171717;    
        transition: all 0.3s linear;
    }
    .saveButtEP:hover {
        background-color: rgba(255, 0, 0,.2);
        cursor: pointer;    
    }
}
@media screen and (min-width: 1025px) {
    
    #privacyText {
        display: inline-block;        
        font-size: 14px;
    }    
    #saveText {
        font-size: 16px;
        color: red;
        margin: 8px 0 0 18px;
        padding: 0;
    }
    #saveContainer {
        display: none;
    }
    #saveEditbutton {
        width: 195px;
        padding: 0;
        margin: 0 0 0 10px;
        background-color: #000;
        border-radius: 6px;
    }
    .saveButtEP {
        height: 38px;
        width: 165px;
        color: #D0D0D0;   
        text-align: center;
        font-size: 12px;
        margin: 40px 0 50px 0;
        padding: 0 10px 0 10px;
        border-radius: 8px;
        border: 2px solid rgb(255, 0, 0);
        background-color: #171717;    
        transition: all 0.3s linear;
    }
    .saveButtEP:hover {
        background-color: rgba(255, 0, 0,.2);
        cursor: pointer;    
    }
}
#saveButtonInner {
    margin: 0; 
    padding: 0 auto 0 auto;
}

/* ////////////// END - MORE MISC ////////////// */

/* ============================================= */

/* /////// TICKETBUD Instruction Images  /////// */

/* Styles the thumbnail */

a.lightbox img {
    height: 356px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    margin: 0;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
    position: fixed;
    top: -100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    overflow: hidden;
    z-index: 10000;
}

/* Styles the lightbox image, centers it vertically and horizontally, 
adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    max-height: 0%;
    max-width: 0%;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    box-sizing: border-box;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
    display: block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    background: transparent;
    color: white;
    text-decoration: none;
    position: absolute;
    top: -80px;
    right: 0px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
    content: "";
    display: block;
    height: 30px;
    width: 2px;
    background: white;
    position: absolute;
    left: 26px;
    top: 10px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
    content: "";
    display: block;
    height: 30px;
    width: 2px;
    background: white;
    position: absolute;
    left: 26px;
    top: 10px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
    opacity: 1;
    top: 0px;
    bottom: 0px;
}

.lightbox-target:target img {
    max-height: 100%;
    max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
    top: 0px;
}

/* //// END - TICKETBUD Instruction Images  //// */

/* ============================================= */

/* //////////////// More Buttons /////////////// */

.artistposts {
    color: #FF9900;
    border: 2px solid #333;                       
    border-radius: 6px;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    background-color: #000;
    overflow: hidden;
}
.artistposts p {  
    padding: 0px 10px 10px 10px;
    font-size: 13px;
}
.uploadButt {
    width: 100%;    
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 7px 53px 7px 53px;
    color: #ff9900;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.uploadButt:hover {
    cursor: pointer;
    background-color: #111;
    border: 2px solid #444;   
}
.uploadButtE {
    width:200px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 500; 
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
    -webkit-font-smoothing: antialiased;
}
.uploadButtE:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}
.uploadButtAV {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 500; 
    margin: 10px 0 10px 0;
    padding: 7px 39px 7px 39px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
    -webkit-font-smoothing: antialiased;
}
.uploadButtAV:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}



.uploadButtEP {
    width: 100%;    
    margin: 0 0 10px 0;
    padding: 9px 60px 9px 59px;
    color: #FFF;   
    font-size: 12px;
    font-weight: 500; 
    text-align: center;
    border-radius: 8px;
    border: 2px solid #ff9900;
    background-color: #000;    
    transition: all 0.4s linear;
}
.uploadButtEP:hover {
    cursor: pointer;
    color: #ff9900;
    border: 2px solid #ff9900;
    background-color: #111;   
}

.uploadButtUGSel {
    width: 100%;    
    margin: 10px 0 0 0;
    padding: 6px 56px 6px 56px;
    color: #ff9900;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #ff9900;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.3s linear;
}
.uploadButtUGSel:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    cursor: pointer;    
}

.uploadButtUP {
    width: 100%;
    color: #ff9900;
    text-align: center;
    font-size:calc(8px + 0.3vw);
    font-weight: 500;
    margin: 10px 0 0 0;
    padding: 6px 22px 6px 22px;
    border-radius: 8px;
    border: 2px solid #ff9900;
    background-color: #000;    
    transition: all 0.3s linear;
}
.uploadButtP:hover {
    background-color: #111;
    cursor: pointer;    
}

.LoadMoreButt {
    width: 100%;
    color: #ff9900;
    text-align: center;
    font-size: 12px;
    font-weight: 500; 
    margin: 10px 0 0 0;
    padding: 6px 42px 6px 42px;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.3s linear;
}
.LoadMoreButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}
.SettingsButt {
    width: 100%;
    color: #ff9900;
    text-align: center;
    font-size: 13px;
    font-weight: 500; 
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 8px;
    border: 2px solid #ff9900;
    background-color: #000;    
    transition: all 0.4s linear;
}
.SettingsButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    color: #ff9900;
    cursor: pointer;    
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .upgradeButt {
        height: 38px;
        width: 100%;
        margin: 10px 0 10px 0;
        padding: 8px 0 9px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
        transition: all 0.4s linear;
    }
    .upgradeButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px)  {

    .upgradeButt {
        height: 38px;
        width: 100%;
        margin: 10px 0 10px 0;
        padding: 8px 0 9px 0;
        color: #D0D0D0;
        font-size: 12px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.4s linear;
    }
    .upgradeButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;
    }    
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .upgradeButtAPE {
        height: 38px;
        width: 100%;
        margin: 20px 0 10px 0;
        padding: 9px 0 9px 0;        
        color: #ff9900;
        text-align: center;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.4s linear;
    }
    .upgradeButtAPE:hover {
        background-color: #000;
        cursor: pointer;    
    }
}
@media screen and (min-width: 768px) {
    
    .upgradeButtAPE {
        height: 38px;
        width: 100%;
        margin: 10px 0 10px 0;
        padding: 9px 0 9px 0;
        color: #ff9900;
        text-align: center;
        font-size: calc(10px + 0.3vw);
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;    
        transition: all 0.4s linear;
    }
    .upgradeButtAPE:hover {
        background-color: #000;
        cursor: pointer;    
    }
}


@media screen and (min-width: 320px) and (max-width: 340px) {
    
    .upgradeButtToFix {
        height: 38px;
        width: 100%;
        color: #ff0000;
        text-align: center;
        font-size: 10px;
        font-weight: 500; 
        margin: 10px 0 10px 0;
        padding: 9px 0 8px 0;
        border-radius: 10px;
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #000;    
        transition: all 0.3s linear;
    }
    .upgradeButtToFix:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
}
@media screen and (min-width: 341px) and (max-width: 380px) {
    
    .upgradeButtToFix {
        height: 38px;
        width: 100%;
        color: #ff0000;
        text-align: center;
        font-size: 11px;
        font-weight: 500; 
        margin: 10px 0 10px 0;
        padding: 9px 0 8px 0;
        border-radius: 10px;
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #000;    
        transition: all 0.3s linear;
    }
    .upgradeButtToFix:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
}
@media screen and (min-width: 381px) and (max-width: 1024px) {
    
    .upgradeButtToFix {
        height: 38px;
        width: 100%;
        color: #ff0000;
        text-align: center;
        font-size: 12px;
        font-weight: 500; 
        margin: 10px 0 10px 0;
        padding: 8px 0 9px 0;
        border-radius: 10px;
        border: 2px solid rgba(255, 0, 0, 0.7);
        background-color: #000;    
        transition: all 0.3s linear;
    }
    .upgradeButtToFix:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) {

    .upgradeButtToFix {
        height: 38px;
        width: 100%;
        color: #ff0000;
        text-align: center;
        font-size: 12px;
        font-weight: 500; 
        margin: 10px 0 10px 0;
        padding: 8px 0 9px 0;
        border-radius: 10px;
        border: 2px solid rgba(255, 0, 0, 0.6);
        background-color: #000;    
        transition: all 0.4s linear;
    }
    .upgradeButtToFix:hover {
        cursor: pointer;
        border: 2px solid rgba(255, 0, 0, 1);
        background-color: #1a1a1a;
    }
}

#Ueditlink {
    margin: 20px 0 15px 0; 
    padding: 20px 20px 20px 20px;
    background-color: #000; 
    border: 2px solid #333; 
    border-radius: 8px;
    text-align: center;
    transition: all 0.4s linear;
}
#Ueditlink:hover  {
    background-color: #111;
    border: 2px solid #ff9900;
    cursor: pointer;
}
.UlinkButt { /*Universe link */
    width: 100%;
    max-width: 120px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 15px 5px 15px;
    color: #ff9900;
    text-align: center;
    font-size: 13px;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #000;    
    transition: all 0.4s linear;
}
.UlinkButt:hover {
    background-color: #111;
    border: 2px solid #ff9900;
    cursor: pointer;
}
.universeLogoButton2 {
    height: 50px;
    width: auto;
    margin-right: 30px;
    margin-top: 10px; 
    border-radius: 8px;
}
@media screen and (min-width: 320px) and (max-width: 823px) {
    
    #CreateEditContainer {
        margin: 0; 
        padding: 0 0 10px 0;
    }
}
@media screen and (min-width: 824px) {
    
    #CreateEditContainer {
        margin: 0; 
        padding: 0 20px 0 0;
    }
}
.comments {  
    margin-top: 100px;
    text-align: center;
}


@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    /* //////// Posts Report button /////// */ 
    
    .dropdownPosts {
        float: right;
        margin: 0 0 5px 0;
        padding: 0;        
    }
    .reportButtonPosts { 
        width: 40px;
        max-height: 15px;
        min-height: 15px;
        margin: 0 1px 0 0;
        padding: 0 4px 0.5px 4px;
        font-size: 36px;
        letter-spacing: 2.5px;
        line-height: 0;        
        border-radius: 8px; 
        border: 2px solid #333;
        background-color: #000;
        text-align: center;
        transition: all 0.4s linear;
    }
    .reportButtonPosts:hover {
        cursor: pointer;
        border: 2px solid red;
        color: red;       
        background-color: #111;
    }
    .reportButtondotsPosts {
        color: #333;
        margin: -10.7px 0 0 0;
        padding: 0;
        text-align: center;
        transition: all 0.4s linear; 
    }
    .reportButtondotsPosts:hover {
        cursor: pointer;
        color: red;
    }    

    /*//////// Posts Edit button ///////*/    
    
    .commentEdit {  
        width: 100px;
        height: 32px;
        margin-right: 10px;
        margin-left: 5px;
        padding-top: 2px;         
        border-radius: 8px; 
        border: 2px solid #333;
        background-color: #000;   
        color: #888;  
        font-weight: 500;
        font-size: calc(8px + 0.2vw);
        text-align: center;
        transition: all 0.4s linear;   
    }
    .commentEdit:hover {
        cursor: pointer;
        border: 2px solid #0088FF;
        color: #0088FF;       
        background-color: #111;
    }
}
@media screen and (min-width: 1024px) {
    
    /* //////// Posts Report button /////// */
    
    .dropdownPosts {
        margin: 8px 0 5px 0;
        padding: 0;        
        float: right;
    }
    .reportButtonPosts {  
        width: 44px;
        max-height: 16.75px;
        min-height: 16.75px;
        margin: 0 1px 0 0;
        padding: 0 0 0 2.75px;
        font-size: 36px;
        letter-spacing: 2.8px;
        line-height: 0;
        border-radius: 8px;  
        border: 2px solid #333;
        background-color: #000;   
        transition: all 0.4s linear;
    }
    .reportButtonPosts:hover {
        cursor: pointer;
        border: 2px solid red;
        color: red;       
        background-color: #111;
    }
    .reportButtondotsPosts { /* -10.7px */
        color: #333;
        margin: -11px 0 0 0;
        padding: 0.1875px 0 0 0;
        text-align: center;
        transition: all 0.4s linear; 
    }
    .reportButtondotsPosts:hover {
        cursor: pointer;
        color: red;
    }

    /*//////// Posts Edit button ///////*/ 

    .commentEdit {  
        width: 100px;
        height: 32px;
        margin-right: 10px;
        margin-left: 5px;
        padding-top: 2px;        
        border-radius: 8px; 
        border: 2px solid #333;
        background-color: #000;   
        color: #666;  
        font-size: calc(8px + 0.2vw);
        text-align: center;
        transition: all 0.4s linear;
    }
    .commentEdit:hover {
        cursor: pointer;
        border: 2px solid #0088FF;
        color: #0088FF;       
        background-color: #111;
    }
    
   
}

/*//////// Posts Delete button ///////*/

@media screen and (min-width: 290px) and (max-width: 823px) {
    
    .commentDelete {  
        width: 100px;
        height: 32px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #000;   
        color: #888;  
        font-size:calc(8px + 0.3vw);
        text-align: center;
        transition: all 0.3s linear;   
    }
    .commentDelete:hover {
        cursor: pointer;
        border: 2px solid red;
        color: red;       
        background-color: #111;
    }
}
@media screen and (min-width: 824px) {
    
    .commentDelete {  
        width: 100px;
        height: 32px;
        padding-top: 2px;
        border-radius: 8px; 
        border: 2px solid #333;
        background-color: #000;   
        color: #666;
        font-size: calc(8px + 0.2vw);
        text-align: center;
        transition: all 0.3s linear;   
    }
    .commentDelete:hover {
        cursor: pointer;
        border: 2px solid red;
        color: red;       
        background-color: #111;
    }
}

/*/////////////////////////////////////////*/


.ReplyEditSave {  
    width: 235px;
    height: 32px;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 8px;
    border: 2px solid #888;
    background-color: #000;   
    color: #888;  
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    transition: all 0.3s linear;
}
.ReplyEditSave:hover {
    cursor: pointer;
    border: 2px solid #FF9900;
    color: #FF9900;
}
.comment-box {  
    width: 180px;
    padding: 20px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    background-color: #fff;
    border-radius: 4px;
}
.comment-box p {  
    font-size: 14px;
    font-weight: 100;
    line-height: 16px;
    color: #282828;
}
.uploaded-images {
    width: 200px;
    height: 200px;
}

/* ///////////// END - more buttons //////////// */

/* /// END POST MESSAGES, IMAGE, EMBED VIDEO /// */

/* ============================================= */

/* /// misc /// */

.medium-profile-avatar {  
    margin: 0 20px 0 0;
    max-height: 110px;
    min-height: 110px;
    max-width: 110px;
    min-width: 110px;
    border-radius: 8px;
    border: 2px solid #FFF;
}
#smallProfileAvatar {
    margin-top: 0;
}
#smallProfileAvatarContainer {
    margin-top: 0;
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .small-profile-avatar {
        width: 38px;
        height: 38px;
        margin: -6px 0 0 0;
        padding: 0;
        border-radius: 6px;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    
    .small-profile-avatar {
        width: 31px;
        height: 31px;
        margin: -5px 10px 0 0;
        padding: 0;
        border-radius: 6px;
    }
}
@media screen and (min-width: 961px) {
    
    .small-profile-avatar {
        width: 31px;
        height: 31px;
        margin: -5px 5px 0 0;
        padding: 0;
        border-radius: 4px;
    }
}
.small3-profile-avatar {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    transition: all 0.5s linear;
}
.pledging-to-wrapper { 
    display: inline-flex;
    margin-top: 10px;
    padding-right: 6px;
}
.togglePledge {
    width: 80px;   
    border: 2px solid #333;
    border-radius: 4px;
    margin-left: 4px;
    color: #FFF;
    background-color: #2E86C1;
}
.Ah-Snap {
    width: 298px; 
    text-align: center;
    margin-left: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid red;
    padding: 18px;
    border-radius: 4px;
    background-color: rgba(255, 0, 0, 0.1);
}
.sorry  {
    font-weight: 600;
    font-size: 18px;
    color: #FFF;
    width: 600px;
    border-radius: 8px;
    border: 2px solid rgba(255, 0, 0, 0.5);
    margin-left: 5px;
    margin-top: 180px;
    padding: 10px 10px 10px 10px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.1);
    background-size: cover; 
}
.post-Button {
    width: 80px;
    height: 32px;
    padding-top: 5px;
    float: left;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;
    color: #FFF;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    transition: all 0.3s linear;
}
.post-Button:hover {
    cursor: pointer;
    border: 2px solid #FF9900;
    color: #FF9900;       
}
.form-post {   
    height: 100px;
    width: 302px;
    border-radius: 4px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: auto;  
    resize: none;  
}
#messageSuccess {
    display: none;
}
#messageFail {
    display: none;
}


/* ///////// Nav Tab Buttons Small ///////// */

@media screen and (max-width: 767px) {
    
    /* Create four equal columns that sits next to each other */
    
    .column {
        -ms-flex: 50%; /* IE 10 */
        flex: 50%;
        padding: 0 4px;
    }
}
@media screen and (min-width: 768px) {
    

    /* Create four equal columns that sits next to each other */
    
    .column {
        -ms-flex: 25%; /* IE 10 */
        flex: 25%;
        padding: 0 4px;
    }
}


/* ============================================= */

/* //////////////// MAIN FOOTER //////////////// */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .footer {
        position: relative;
        height: 479px;
        width: 100%;
        bottom: 0;
        margin: 120px 0 0 0;
        padding: 0;
        line-height: 30px;
        z-index: 5;
    }
    #footercontainer {
        width: 100%;
        margin: 0;
        padding: 100px 0 30px 30px;
        bottom: 0;
        background-color: #0a0a0a;
    }
    #pushFooter {
        margin-left: 0;
    }
    #pushFooterEV {       
        margin-left: 0;
    }      
    #pushFooterPLG {
        margin-left: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    
    .footer {
        position: relative;
        height: 479px;
        width: 100%;
        bottom: 0;
        margin: 250px 0 0 0;
        padding: 0;
        line-height: 30px;
        z-index: 5;
    }    
    #footercontainer {
        width: 100%;
        margin: 0;
        padding: 100px 82px 30px 82px;
        bottom: 0;
        background-color: #0a0a0a;
    }
    #pushFooter {
        margin-left: 0;
    }
    #pushFooterEV {       
        margin-left: 0;
    }      
    #pushFooterPLG {
        margin-left: 0;
        bottom: 0;
    }
}
@media screen and (min-width: 961px) and (max-width: 1023px) {
    
    .footer {
        position: relative;
        height: 479px;
        width: 100%;
        margin: 400px 0 0 0;
        padding: 0;
        bottom: 0;
        line-height: 30px;
        z-index: 5;
    }    
    #footercontainer {
        width: 100%;
        margin: 0;
        padding: 100px 82px 30px 82px;
        bottom: 0;
        background-color: #0a0a0a;
    }
    #pushFooter {
        margin: 0 0 0 265px;
        padding: 0;
        bottom: 0;
    }
    #pushFooterEV {     
        margin: 0 0 -50px 265px;
        padding: 0;
        bottom: 0;
    }            
    #pushFooterPLG {
        margin-left: 205px;
        bottom: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .footer {
        position: relative;
        height: 324px;
        width: 100%;
        margin: 400px 0 0 0;
        padding: 0;
        bottom: 0;
        line-height: 30px;
        z-index: 5;
    }   
    #footercontainer {
        width: 100%;
        margin: 0;
        padding: 100px 0 30px 0;
        bottom: 0;
        background-color: #0a0a0a;
    }
    #pushFooter {
        margin: 0 0 0 265px;
        padding: 0;
        bottom: 0;
    }
    #pushFooterEV {     
        margin: 0 0 -50px 265px;
        padding: 0;
        bottom: 0;
    }            
    #pushFooterPLG {
        margin-left: 205px;
        bottom: 0;
    }
}    
@media screen and (min-width: 1025px) {
    
    .footer {
        position: relative;
        height: 324px;
        width: 100%;
        bottom: 0;
        margin: 100px 0 0 0;
        padding: 0;
        line-height: 30px;
        z-index: 0;
    }   
    #footercontainer {
        width: 100%;
        margin: 0;
        padding: 100px 0 30px 0;
        bottom: 0;
        background-color: #111;
    }
    #pushFooter {      
        margin: 0 0 0 265px;
    } 
    #pushFooterEV {        
        margin: 0 0 -60px 265px;
    }        
    #pushFooterPLG {
        margin-left: 205px;
    }  
}

#footercontainerInner {
    margin: 0; 
    padding: 0;
}
#footerSocialIcon {
    font-size: 30px;
}
#pageLinksHolder {
    padding: 0;
}
.footerCopyRight {
    margin: 80px 0 0 0;
    padding: 0;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    /*text-align: center;*/
    letter-spacing: 0.7;
}

/*#footercontainer h3 {
    margin: 80px 0 0 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.7;
    color: #666;
}*/
.pageLinks {
    margin: 80px 0 0 0;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.7;
    transition: all 0.3s linear;
}
.pageLinks:hover {
    color: #fff;
}

/* ///////////// END - MAIN FOOTER ///////////// */

/* ============================================= */

.btn {
    color: #FF9900;
    font-size: 14px;
    border-radius: 6px;
    border: 2px solid red;
    background-color: #FF9900;
    transition: all 0.3s linear;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .btn-primary {
        height: 32.5px;
        padding: 7px 12px 6px 12px;
        color: #FF9900;
        font-size: 11px;
        line-height: 1.4;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
        transition: all 0.4s linear;
    }
    .btn-primary:active:hover,
    .btn-primary.active:hover,
    .open > .dropdown-toggle.btn-primary:hover,
    .btn-primary:active:focus,
    .btn-primary.active:focus,
    .open > .dropdown-toggle.btn-primary:focus,
    .btn-primary:active.focus,
    .btn-primary.active.focus,
    .open > .dropdown-toggle.btn-primary.focus {
        color: #FF9900;
        border: 2px solid #444;
        background-color: #111;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #FF9900;
        border: 2px solid #444;
        background-color: #111;
    }
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #FF9900;
        border: 2px solid #444;
        background-color: #111;
    }
}
@media screen and (min-width: 1025px) {

    .btn-primary {
        height: 32.5px;
        padding: 7px 12px 6px 12px;
        color: #FF9900;
        font-size: 11px;
        line-height: 1.4;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
        transition: all 0.4s linear;
    }
    .btn-primary:active:hover,
    .btn-primary.active:hover,
    .open > .dropdown-toggle.btn-primary:hover,
    .btn-primary:active:focus,
    .btn-primary.active:focus,
    .open > .dropdown-toggle.btn-primary:focus,
    .btn-primary:active.focus,
    .btn-primary.active.focus,
    .open > .dropdown-toggle.btn-primary.focus {
        color: #FF9900;
        border: 2px solid #555;
        background-color: #111;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #FF9900;
        border: 2px solid #555;
        background-color: #111;
    }
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #FF9900;
        border: 2px solid #555;
        background-color: #111;
    }
}


/* Animation (slide in the modal) */

@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0} 
    to {top: 0; opacity: 1}
}
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

/* End SignUp Modal  */
        
/* Start Log In modal */

.lmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */

.login-modal-content {   
    position: relative;
    background-color: #111;
    margin: 4% auto;   
    padding-bottom: 50px;
    height: 500px;
    width: 800px;
    border-radius: 8px;
    border: 1px solid #888;
    text-align: center;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Modal Header */

.login-modal-header h5 {
    font-weight: lighter;
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 25px; 
    margin-right: 65px;
    margin-left: 65px;
    text-align: center; 
    color: #666666;
}
.login-modal-header hr {
    margin-top: 0;
    margin-right: 65px;
    margin-left: 65px;
    margin-bottom: 25px;
}

/* Modal Body */

.login-modal-body {
    height: 200px;
    margin: auto;   
}

/* log In Alert Window */

#loginAlert {
    display: none;
    width: 250px;
    height: 50px;  
    padding-top: 14px;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 65px;
    margin-left: 65px;
    font-size: 14px;
    text-overflow: 
}

/* Login Modal Form */

.login-modal-body form {
    margin-top: 8px;    
}
.login-form-group input {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 16px;
}
.login-form-control {
    width: 350px;
    height: 40px;
    margin: 4px ;
    padding: 6px;
    border: 1px solid #999999;
    border-radius: 4px;
    overflow: none;
}

/* Login Modal Footer */

.login-modal-footer {
    margin-top: 120px;
}
.login-modal-footer ul {
    /*display: inline-block; */   
}
.login-modal-footer li {
    list-style: none;
}
.login-modal-footer p {
 /*   display: inline;*/
}
 /* The Log Me In Button */
#postMessageButton {
    width: 260px;
    height: 40px;
    margin-top: 10px;
    margin-right: 10px; 
    margin-bottom: 17px;
    margin-left: 10px;  
    padding-top: 8px;
    border-radius: 4px;
    border-radius: 4px;
    border: 2px solid #FF9900;
    background-color: #FF9900;   
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    color: #222222;      
    transition: all 0.3s linear;   
}
#postMessageButton:hover {
    cursor: pointer;  
    color: #FFFFFF;
    background-color: #111;
    border: 2px solid #333333;
}
/* The login Close Button */
#lcloseButton {
    width: 260px;
    height: 40px; 
    margin-top: 10px;
    margin-right: 10px; 
    margin-bottom: 17px;
    margin-left: 10px;  
    padding-top: 2px;
    border-radius: 4px;
    border: 1px solid #999999;
    background-color: #FFFFFF;    
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    color: #000000;   
    transition: all 0.2s linear; 
}
#lcloseButton:hover {
    cursor: pointer;
    background-color: #E5E5E5;
    
}
/* The Close (X) Button */
.lclose {
    margin-right: 6px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.lclose:hover,
.lclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Fake link to sign up */

.needtoSignup {
    font-size: 14px;
}
.signuptoggle { 
    color: blue;
    font-size: 14px;
}
.signuptoggle:hover {
    cursor: pointer;
}

/*  Animation (slide in the modal) */

@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0} 
    to {top: 0; opacity: 1}
}
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
.main-profile-pic {  
    width: 100%;
    height: 426px;
    background: url(Images/Backgrounds_887.png) no-repeat center top;
    background-size: cover;
    text-align: center;
}

/* ============================================= */

/* //// Result Table on SEARCH PAGE ///// */

/*.parallax-window {
    width: 100%;
    min-height: 100%;
    background: transparent;
}*/
#SearchResultTable {
    margin: 0 0 15px 0;
    padding: 0 0 15px 0;
    border: none; 
}
#SearchResultTable table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    background-color: #000;
}
#SearchResultTable thead {
    border-bottom: 3px solid #333;
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    #SearchResultTable thead th:nth-child(1),
    #SearchResultTable tbody td:nth-child(1) {    
        width: 6%;
    }
    #SearchResultTable thead th:nth-child(2), 
    #SearchResultTable tbody td:nth-child(2) {   
        width: 5%;
    }
    #SearchResultTable thead th:nth-child(3), 
    #SearchResultTable tbody td:nth-child(3) {   
        width: 15%;
    }
    #SearchResultTable thead th:nth-child(4), 
    #SearchResultTable tbody td:nth-child(4) {   
        width: 5%;
    }
}
@media screen and (min-width: 768px) {
   
    #SearchResultTable thead th:nth-child(1) {
        width: 6%;
    }
    #SearchResultTable thead th:nth-child(2) {
        width: 25%;
    }
    #SearchResultTable thead th:nth-child(3) {
        width: 25%;
    }
    #SearchResultTable thead th:nth-child(4) {
        width: 5%;
    }
}
#SearchResultTable th, td {
    padding: 0 10px 10px 10px;
}
#SearchResultTable tbody tr:nth-child(odd) {
    background-color: #101010;
    transition: all 0.4s linear;
}
#SearchResultTable tbody tr:nth-child(even) {
    background-color: #101010;
    transition: all 0.4s linear;
}
#SearchResultTable tbody tr:hover {
    background-color: rgba(255, 153, 0, 0.8);
}

#SearchResultTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/*//// Marketing Table on Admin page /////*/

#MarketTable  {
    margin-top: 200px;
    border: none;
}
#MarketTable table {
    table-layout: auto;
    width: 100%;     
    border-collapse: collapse;
    background-color: #000;
}
#MarketTable thead {
    border-bottom: 3px solid #333;
}
#MarketTable thead th:nth-child(1) {
    width: 10%;
}
#MarketTable thead th:nth-child(2) {
    width: 15%;
}
#MarketTable thead th:nth-child(3) {
    width: 15%;
}
#MarketTable thead th:nth-child(4) {
    width: 15%;
}
#MarketTable thead th:nth-child(5) {
    width: 15%;
}
#MarketTable thead th:nth-child(6) {
    width: 15%;
}
#MarketTable thead th:nth-child(7) {
    width: 15%;
}
#MarketTable thead th:nth-child(8) {
    width: 15%;
}
#MarketTable thead th:nth-child(9) {
    width: 15%;
}
#MarketTable thead th:nth-child(10) {
    width: 15%;
}
#MarketTable thead th:nth-child(11) {
    width: 15%;
}
#MarketTable th, td {
    padding: 0 10px 10px 10px;
}
#MarketTable tbody tr:nth-child(odd) {
    background-color: #101010;
}
#MarketTable tbody tr:nth-child(even) {
    background-color: #101010;
}
#MarketTable tbody tr:hover {
    background-color: #000;
}
#MarketTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/*//// Post Report Table on Admin page /////*/

#PostReportTable  {
    margin-top: 200px;
    border: none;
}
#PostReportTable table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
}
#PostReportTable thead {
    border-bottom: 3px solid #333;
}
#PostReportTable thead th:nth-child(1) {
    width: 4%;
}
#PostReportTable thead th:nth-child(2) {
    width: 4%;
}
#PostReportTable thead th:nth-child(3) {
    width: 5%;
}
#PostReportTable thead th:nth-child(4) {
    width: 5%;
}
#PostReportTable thead th:nth-child(5) {
    width: 5%;
}
#PostReportTable thead th:nth-child(6) {
    width: 5%;
}
#PostReportTable thead th:nth-child(7) {
    width: 5%;
}
#PostReportTable thead th:nth-child(8) {
    width: 5%;
}
#PostReportTable thead th:nth-child(9) {
    width: 5%;
}
#PostReportTable thead th:nth-child(10) {
    width: 5%;
}
#PostReportTable thead th:nth-child(11) {
    width: 5%;
}
#PostReportTable thead th:nth-child(12) {
    width: 5%;
}
#PostReportTable thead th:nth-child(13) {
    width: 5%;
}
#PostReportTable th, td {
    padding: 0 10px 10px 5px;
}
#PostReportTable tbody tr:nth-child(odd) {
    background-color: #101010;
}
#PostReportTable tbody tr:nth-child(even) {
    background-color: #101010;
}
#PostReportTable tbody tr:hover {
    background-color: #000;
}
#PostReportTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/*//// Track Report Table on Admin page /////*/

#TrackReportTable  {
    margin-top: 200px;
    border: none;
}
#TrackReportTable table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
}
#TrackReportTable thead {
    border-bottom: 3px solid #333;
}
#TrackReportTable thead th:nth-child(1) {
    width: 4%;
}
#TrackReportTable thead th:nth-child(2) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(3) {
    width: 7%;
}
#TrackReportTable thead th:nth-child(4) {
    width: 4%;
}
#TrackReportTable thead th:nth-child(5) {
    width: 4%;
}
#TrackReportTable thead th:nth-child(6) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(7) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(8) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(9) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(10) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(11) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(12) {
    width: 3%;
}
#TrackReportTable thead th:nth-child(13) {
    width: 3%;
}
#TrackReportTable th, td {
    padding: 0 10px 10px 5px;
}
#TrackReportTable tbody tr:nth-child(odd) {
    background-color: #101010;
}
#TrackReportTable tbody tr:nth-child(even) {
    background-color: #101010;
}
#TrackReportTable tbody tr:hover {
    background-color: #000;
}
#TrackReportTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/*//// Copyright Report Table on Admin page /////*/

#CopyrightReportTable  {
    margin-top: 200px;
    border: none;
}
#CopyrightReportTable table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    background-color: #000000;
}
#CopyrightReportTable thead {
    border-bottom: 3px solid #333333;
}
#CopyrightReportTable thead th:nth-child(1) {
    width: 4%;
}
#CopyrightReportTable thead th:nth-child(2) {
    width: 4%;
}
#CopyrightReportTable thead th:nth-child(3) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(4) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(5) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(6) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(7) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(8) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(9) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(10) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(11) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(12) {
    width: 5%;
}
#CopyrightReportTable thead th:nth-child(13) {
    width: 5%;
}
#CopyrightReportTable th, td {
    padding: 0 10px 10px 5px;
}
#CopyrightReportTable tbody tr:nth-child(odd) {
    background-color: #101010;
}
#CopyrightReportTable tbody tr:nth-child(even) {
    background-color: #101010;
}
#CopyrightReportTable tbody tr:hover {
    background-color: #000;
}
#CopyrightReportTable tbody tr, td{
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/*//// Artist Count Table on Admin page /////*/

#CountTableA table {
    margin-top: 20px;
    border: none; 
}

#CountTableA table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
}
#CountTableA thead {
    border-bottom: 3px solid #000;    
}
#CountTableA th, td {
    padding: 0;
}
#CountTableA thead th:nth-child(1) {
    width: auto;
}
#CountTableA tbody tr:nth-child(1) {
    background-color: #000;
}
#CountTableA tbody tr:nth-child(2) {
    background-color: #000;
}

/* //// Pledgsta Count Table on Site Map page ///// */

#CountTableP {    
    margin-top: 20px;
    border: none; 
}
#CountTableP table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
}
#CountTableP thead {
    border-bottom: 3px solid #000;    
}
#CountTableP th, td {
    padding: 0;
}
#CountTableP thead th:nth-child(1) {
    width: auto;
}
#CountTableP tbody tr:nth-child(1) {
    background-color: #000;
}
#CountTableP tbody tr:nth-child(2) {
    background-color: #000;
}

#CountTableP tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/* /////////////// Webhook table /////////////// */

#WebHookTable table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
}
#WebHookTable thead {
    border-bottom: 3px solid #333;
}
#WebHookTable thead th:nth-child(1) {
    width: 5%;
}
#WebHookTable thead th:nth-child(2) {
    width: 5%;
}
#WebHookTable thead th:nth-child(3) {
    width: 8%;
}
#WebHookTable thead th:nth-child(4) {
    width: 9%;
}
#WebHookTable thead th:nth-child(5) {
    width: 11%;
}
#WebHookTable thead th:nth-child(6) {
    width: 4%;
}
#WebHookTable thead th:nth-child(7) {
    width: 2%;
}
#WebHookTable thead th:nth-child(8) {
    width: 9%;
}
#WebHookTable thead th:nth-child(9) {
    width: 2%;
}
#WebHookTable thead th:nth-child(10) {
    width: 2%;
}
#WebHookTable thead th:nth-child(11) {
    width: 6%;
}
#WebHookTable th {
    padding: 0 0 10px 10px;
    font-size: 11px;
}
#WebHookTable td {
    padding: 0 10px 10px 10px;
}
#WebHookTable tbody tr:nth-child(odd) {
    background-color: #101010;
    transition: all 0.4s linear;
}
#WebHookTable tbody tr:nth-child(even) {
    background-color: #101010;
    transition: all 0.4s linear;
}
#WebHookTable tbody tr:hover {
    background-color: #000;
}
#WebHookTable tbody tr, td {
    border-top: 2px solid #0a0a0a;
    border-bottom: 2px solid #0a0a0a;
}

/* //////////// General Table //////////// */

table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
    font-size: 11px;
}
thead {
    border-bottom: 2px solid #333;    
}
thead th:nth-child(1) {
    width: 4%;
}
thead th:nth-child(2) {
    width: 8%;
}
thead th:nth-child(3) {
    width: 30%;
}
thead th:nth-child(4) {
    width: 30%;
}
thead th:nth-child(5) {
    width: 20%;
}
thead th:nth-child(6) {
    width: 2%;
}
th, td {
    padding: 0 20px 20px 20px;
}
tbody tr:nth-child(odd) {
    background-color: #101010;
}
tbody tr:nth-child(even) {
    background-color: #101010;
}
/*tbody tr, td {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}*/
@media screen and (min-width: 320px) and (max-width: 823px) {
    
    table {
        border: transparent;
    }
    thead th {
        font-size: calc(8px + 0.3vw);
    }
    tbody tr, td {
        font-size: calc(7px + 0.3vw);
    }
    tbody tr, td, img {
        margin-top: 1px;
        height: 30px;
        width: 30px;
    }
    .chkboxWrapper {
        margin-top: 6px; 
        margin-left: 11px;
    }
}
@media screen and (min-width: 824px) {
    
    th {
        font-size: 14px;
        color: #999;
    }
    .chkboxWrapper {
        margin-top: 10px; 
        margin-left: 11px;
    }
}

/* ///////////////// End Tables //////////////// */

/* ============================================= */

/* /////////// Pledge select checkbox ////////// */

#confirmAmtText {
    font-size: calc(8px + 0.3vw);
}

@media screen and (min-width: 320px) and (max-width: 599px) {

    #checkboxStipePay {
        height: 18px; 
        width: 0; 
    }
    #confirmAmtText {
        margin: 7.5px 0 0 0;
    }    
}
@media screen and (min-width: 600px) and (max-width: 600px) {

    #checkboxStipePay {
        height: 18px; 
        width: 0; 
    }
    #confirmAmtText {
        margin: 7px 0 0 0;
    }     
}
@media screen and (min-width: 601px) and (max-width: 767px) {

    #checkboxStipePay {
        height: 18px; 
        width: 0;
    }
    #confirmAmtText {
        margin: 6px 0 0 0;
    }       
}
@media screen and (min-width: 768px) {

    #checkboxStipePay {
        height: 18px; 
        width: 0;
    }
    #confirmAmtText {
        margin: 6px 0 0 0;
    }       
}
/* The container */
.container_chk {
    display: block;
    position: relative;
    margin-right: 15px;
    margin-bottom: 12px;
    padding-left: 20px;
    cursor: pointer;
    font-size: 3.0vh;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default checkbox */
.container_chk input {
    margin: 0 0 0 -10px;
    padding: 0;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #0d0d0d;
    /*border: 2px solid #0088FF;
    background-color: #000;*/
    
    
}
/* On mouse-over, add a grey background color
.container:hover input ~ .checkmark {
    background-color: #111;
}*/
/* When the checkbox is checked, add a grey background */
.container_chk input:checked ~ .checkmark {
    background-color: #111;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.container_chk input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.container_chk .checkmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* /////// END - Pledge select checkbox /////// */

/* ============================================ */

/* /////// Artist Rego Form checkbox ////////// */

.container_chkARF {
    display: block;
    position: relative;
    margin-right: 15px;
    margin-bottom: 12px;
    padding-left: 20px;
    /*cursor: pointer;*/
    font-size: 3.0vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.container_chkARF input {
    margin: 0 0 0 -10px;
    padding: 0;
    position: absolute;
    opacity: 0;
    /*cursor: pointer;*/
}
.checkmarkARF {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
    /*border: 2px solid #444;
    background-color: #111;*/
}
.container_chkARF input:checked ~ .checkmarkARF {
    background-color: #000;
}
.checkmarkARF:after {
    content: "";
    position: absolute;
    display: none;
}
.container_chkARF input:checked ~ .checkmarkARF:after {
    display: block;
}
.container_chkARF .checkmarkARF:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .checkmarkARF {
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .container_chkARF input:checked ~ .checkmarkARF {
        border: 2px solid #222;
        /*border: 2px solid #333;*/
    }
}
@media screen and (min-width: 1025px) {
    
    .checkmarkARF {
        border: 2px solid #333;
        background-color: #111;
    } 
    .container_chkARF input:checked ~ .checkmarkARF {
        border: 2px solid #333;
        /*border: 2px solid #444;*/
    } 
}


/* ////// END - Artist Rego Form checkbox ///// */

/* ============================================ */

/* /////////// Event notify checkbox ////////// */

.checkmarkESM {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    /*border: 2px solid #333;
    background-color: #111;*/ 
    border-radius: 6px;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .checkmarkESM {
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .container_chk input:checked ~ .checkmarkESM {
        border: 2px solid #333;
    }
}
@media screen and (min-width: 1025px) {
    
    .checkmarkESM {
        border: 2px solid #333;
        background-color: #111;
    } 
    .container_chk input:checked ~ .checkmarkESM {
        border: 2px solid #444;
    } 
}

.checkmarkESM:after {
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .checkmarkESM:after {
    display: block;
}
.container_chk .checkmarkESM:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* //// END - Event notify checkbox //// */

/* ===================================== */

/* ////////// Artist checkbox ////////// */

.container_Bchk {
    display: block;
    position: relative;
    margin-bottom: 12px;
    padding-left: 0;
    cursor: pointer;
    font-size: 3.0vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.container_Bchk input {
    position: absolute;
    margin: 0 0 0 -10px;
    padding: 0;    
    opacity: 0;
    cursor: pointer;
}
.Bcheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 6px;
}
.container_Bchk input:checked ~ .Bcheckmark {
    background-color: #111;
    border: 2px solid #444;
}
.Bcheckmark:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_Bchk input:checked ~ .Bcheckmark:after {
    display: block;
}
.container_Bchk .Bcheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* /////////// End Artist checkbox /////////// */

/* =========================================== */

/* ///////// Report Player checkboxs ///////// */

.RPcheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;
}
.container_chk input:checked ~ .RPcheckmark {
    border: 2px solid #444;
}
.RPcheckmark:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .RPcheckmark:after {
    display: block;
}
.container_chk .RPcheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ///// END - Report Player checkboxs ///// */

/* ========================================= */

/* ///// Upload Music Select checkboxs ///// */

@media screen and (min-width: 320px) and (max-width: 768px) {
    
    #MusSelcontainer_chk {
        height: 0; 
        width: 0; 
        margin: 0 23px 0 -3px;
        padding: 0;
    }
    /* ////// Check-Row Box /////// */

    .MusSelCheckmarkRow {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        border-radius: 6px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*border-radius: 4px;*/
    }
    .container_chk input:checked ~ .MusSelCheckmarkRow {
        background-color: #111;
        border: 2px solid #333;
    }
    .MusSelCheckmarkRow:after {   
        content: "";
        position: absolute;
        display: none;
    }
    .container_chk input:checked ~ .MusSelCheckmarkRow:after {
        display: block;
    }
    .container_chk .MusSelCheckmarkRow:after {
        left: 6.5px;
        top: 3px;
        width: 5px;
        height: 9px;        
        border: solid #ff9900;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        
    }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
    
    #MusSelcontainer_chk {
        height: 0; 
        width: 0; 
        margin: 0 23px 0 -3px;
        padding: 0;
    }
    /* ////// Check-Row Box /////// */

    .MusSelCheckmarkRow {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        border-radius: 6px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*border-radius: 4px;*/
    }
    .container_chk input:checked ~ .MusSelCheckmarkRow {
        background-color: #111;
        border: 2px solid #333;
    }
    .MusSelCheckmarkRow:after {   
        content: "";
        position: absolute;
        display: none;
    }
    .container_chk input:checked ~ .MusSelCheckmarkRow:after {
        display: block;
    }
    .container_chk .MusSelCheckmarkRow:after {
        left: 6.5px;
        top: 3px;
        width: 5px;
        height: 9px;        
        border: solid #ff9900;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        
    }
}
@media screen and (min-width: 1025px) {
    
    #MusSelcontainer_chk {
        height: 0; 
        width: 0; 
        margin: 0 15px 0 0;
        padding: 0;
    }
    
    /* ////// Check-Row Box /////// */

    .MusSelCheckmarkRow {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        border-radius: 6px;
        border: 2px solid #333;
        background-color: #0a0a0a;
        /*border-radius: 4px;*/
    }
    .container_chk input:checked ~ .MusSelCheckmarkRow {
        background-color: #111;
        border: 2px solid #444;
    }
    .MusSelCheckmarkRow:after {   
        content: "";
        position: absolute;
        display: none;
    }
    .container_chk input:checked ~ .MusSelCheckmarkRow:after {
        display: block;
    }
    .container_chk .MusSelCheckmarkRow:after {
        left: 6px;
        top: 3px;
        width: 5px;
        height: 9px;  
        border: solid #ff9900;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

/* /////// Check-all Box /////// */

.MusSelCheckmarkAll {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 4px;
}
.container_chk input:checked ~ .MusSelCheckmarkAll {
    background-color: #111;
    border: 2px solid #444;
}
.MusSelCheckmarkAll:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .MusSelCheckmarkAll:after {
    display: block;
}
.container_chk .MusSelCheckmarkAll:after {
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #ff9900;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* // END - Upload Music Select checkboxs // */

/* ========================================= */

/* //////// Gallery Locked checkboxs /////// */

.GalleryCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
}
.container_chk input:checked ~ .GalleryCheckmark {
    /*border: 2px solid #444;*/
}
.GalleryCheckmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .GalleryCheckmark:after {
    display: block;
}
.container_chk .GalleryCheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* //// END - Gallery Locked checkboxs ///// */

/* ========================================= */

/* //////// Posts Locked checkboxs ///////// */

.PostCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
}
.container_chk input:checked ~ .PostCheckmark {
    /*border: 2px solid #444;**/
}
.PostCheckmark:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .PostCheckmark:after {
    display: block;
}
.container_chk .PostCheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* //////// notify of Track checkbox ///////// */

.notifyTrackCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
}
.container_chk input:checked ~ .notifyTrackCheckmark {
    /*border: 2px solid #444;*/
}
.notifyTrackCheckmark:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .notifyTrackCheckmark:after {
    display: block;
}
.container_chk .notifyTrackCheckmark:after {
    left: 8px;
    top: 3.5px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#TrackNotify_chk {
    height: 18px; 
    width: 0; 
    margin-left: -10px;
}

/* //////// notify of Post checkbox ///////// */

.notifyPostCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
}
.container_chk input:checked ~ .notifyPostCheckmark {
    /*border: 2px solid #444;*/
}
.notifyPostCheckmark:after {   
    content: "";
    position: absolute;
    display: none;
}
.container_chk input:checked ~ .notifyPostCheckmark:after {
    display: block;
}
.container_chk .notifyPostCheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* //////// Agree to terms checkbox /////// */

.AgreeContainer_chk {
    margin: 0 0 7px 3px;
    padding: 0;
    cursor: pointer;
    font-size: 3.0vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.AgreeContainer_chk input {
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.agreeCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 6px;
}
.agreeCheckmark:after {
    content: "";
    position: absolute;
    display: none;
}
.AgreeContainer_chk input:checked ~ .agreeCheckmark:after {
    display: block;
}
.AgreeContainer_chk .agreeCheckmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #ff9900;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .agreeCheckmark {
        border-radius: 6px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .AgreeContainer_chk input:checked ~ .agreeCheckmark {
        background-color: #000;
    }

    .notifyTrackCheckmark,
    .GalleryCheckmark,
    .PostCheckmark,
    .notifyPostCheckmark {
        border: 2px solid #222;
    }
    .container_chk input:checked ~ .notifyTrackCheckmark,
    .container_chk input:checked ~ .GalleryCheckmark,
    .container_chk input:checked ~ .PostCheckmark,
    .container_chk input:checked ~ .notifyPostCheckmark {
        border: 2px solid #333;
    }
}
@media screen and (min-width: 1025px) {

    .agreeCheckmark {
        border: 2px solid #333;
        background-color: #111;
    }
    .AgreeContainer_chk input:checked ~ .agreeCheckmark {
        background-color: #0d0d0d;
    }

    .notifyTrackCheckmark,
    .GalleryCheckmark,
    .PostCheckmark,
    .notifyPostCheckmark {
        border: 2px solid #333;
    }
    .container_chk input:checked ~ .notifyTrackCheckmark,
    .container_chk input:checked ~ .GalleryCheckmark,
    .container_chk input:checked ~ .PostCheckmark,
    .container_chk input:checked ~ .notifyPostCheckmark {
        border: 2px solid #444;
    }
}

/* ///// END - Posts Locked checkboxs ///// */

/* ========================================= */

.row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 4px 0 0;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* ============================================= */

/* ////////////// CROP AVATAR PAGES ///////////// */

.shortpreviewCI {
    height: 200px;
    width: 200px;
    margin: 0 auto 0 auto;
}
.imageCoverCI {
    min-height: 199px; 
    min-width: 199px;
    max-height: 199px; 
    max-width: 199px;
    margin-top: 3px;  
    padding: -2px;
    border-radius: 12px;
    /*border-radius: 10px;*/
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.AEPimageCoverCI {
    min-height: 196px; 
    min-width: 196px;
    margin-top: 13px; 
    padding: -2px;
    border-radius: 12px;
    /*border-radius: 10px;*/
    object-fit: cover;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}
#imagePreviewCI {
    height: 199px; 
    width: 199px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    /*border-radius: 10px;*/
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .imageCoverCI {
        border: 2px solid #222;
    }
    #imagePreviewCI {
        border: 2px solid #222;
    }
}
@media screen and (min-width: 1025px) {
    
    .imageCoverCI {
        border: 2px solid #333;
    }    
    #imagePreviewCI {
        border: 2px solid #333;
    }
}

/* ///////// Crop Buttons ///////// */

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .SelectButtEP {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 9px 56px 9px 56px;
        color: #ff9900;
        font-size: 12px;
        font-weight: normal;    
        text-align: center;   
        transition: all 0.4s linear;
    }
    .SelectButtEP:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
    .SelectImageCropButt {
        width: 100%;
        margin: 0;
        padding: 15px 49px 15px 49px;
        /*padding: 15px 56px 15px 56px; */
        color: #ff9900;
        font-size: 14px;
        /*font-size: 12px;*/
        font-weight: 500;
        text-align: center;
        transition: all 0.4s linear;
    }
    .SelectImageCropButt:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111; 
    }
    .uploadButtCrop {
        width: 100%;    
        margin: 20px 0 28px 0;
        padding: 10px 0 10px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center;    
        transition: all 0.3s linear;
    }
    .uploadButtCrop:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111; 
    }
    .ButtCrop {
        position: relative;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 9px 0 9px 0;
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        z-index: 7777;
        transition: all 0.4s linear;
    }
    .ButtCrop:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111;
    }
    .uploadButtCropAdmin {
        width: 100%;    
        margin: 20px 0 10px 0;
        padding: 10px 0 10px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center;    
        transition: all 0.3s linear;
    }
    .uploadButtCropAdmin:hover {
        cursor: pointer;
        border: 2px solid #333;
        background-color: #111; 
    }
}
@media screen and (min-width: 1025px) {

    .SelectButtEP {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 8.5px 56px 9.5px 56px;
        color: #ff9900;
        font-size: 12px;
        font-weight: normal;    
        text-align: center;   
        transition: all 0.4s linear;
    }
    .SelectButtEP:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;
    }
    .SelectImageCropButt {
        width: 100%;
        margin: 0;
        padding: 9px 56px 9px 56px; 
        color: #ff9900;
        font-size: 12px;
        font-weight: 500;
        text-align: center;   
        transition: all 0.4s linear;
    }
    .SelectImageCropButt:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515; 
    }
    .uploadButtCrop {
        width: 100%;    
        margin: 20px 0 28px 0;
        padding: 10px 0 10px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center;    
        transition: all 0.3s linear;
    }
    .uploadButtCrop:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;
    }
    .ButtCrop {
        position: relative;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 9px 0 9px 0;
        color: #ff9900;
        font-size: 12px;
        text-align: center;
        z-index: 7777;
        transition: all 0.4s linear;
    }
    .ButtCrop:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515;
    }
    .uploadButtCropAdmin {
        width: 100%;    
        margin: 20px 0 10px 0;
        padding: 10px 0 10px 0;
        font-size: 12px;
        font-weight: 500;
        color: #ff9900;
        text-align: center;    
        transition: all 0.3s linear;
    }
    .uploadButtCropAdmin:hover {
        cursor: pointer;
        border: 2px solid #444;
        background-color: #151515; 
    }
}

/* //////// END - Crop Buttons ///////// */

/* /// ////// Image Info Cells ///////// */

.PEPjpegInfo {
    width: 100%;    
    margin: 0 0 10px 0;
    padding: 10px 0 10px 0;
    font-size: 12px;
    font-weight: 500;
    color: #ff0000;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #333;
    background-color: #111;     
}
.AvatarImageInfo {
    width: 100%;    
    margin: 20px 0 10px 0;
    padding: 10px 0 10px 0;
    color: #666;
    text-align: center;    
}

/* //////// End - Image Info Cells //////// */

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    /* buttons */
    
    .SelectButtEP {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
    .SelectImageCropButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .uploadButtCrop {
        border-radius: 12px;
        /*border-radius: 10px;*/
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .ButtCrop {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .uploadButtCropAdmin {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;    
    }

    /* info cells */

    .AvatarImageInfo {
        font-size: 11px;
        font-weight: 500;
        border-radius: 12px;
        /*border-radius: 10px;*/
        border: 2px solid #222;
        background-color: #0d0d0d;
    }    
}
@media screen and (min-width: 1025px) {
    
    /* buttons */    
    
    .SelectButtEP {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
    }
    .SelectImageCropButt {
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;   
    }
    .uploadButtCrop {
        border-radius: 10px;
        /*border-radius: 8px;*/
        border: 2px solid #333;
        background-color: #111;
    }
    .ButtCrop {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #000;
    }
    .uploadButtCropAdmin {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #000;    
    }

    /* info cells */

    .AvatarImageInfo {
        font-size: 11px;
        font-weight: 600;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
    }
}


#CIselectImageContainer {
    text-align: center;
}
.FormlabelImgPreviewCI {
    margin-bottom: 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #999;
}

/* original for index page in crop */

.AEPpreviewCover {
    min-height: 196px; 
    min-width: 196px;
    margin-top: 13px; 
    padding: -2px;
    border-radius: 8px;
    background-image: url(https://pledgsta.com/assets/img/icons8-name-48-2.jpg);
    object-fit: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;    
}
.cropHighlightImage {
    min-height: 200px;
    min-width: 200px;
    max-width: 200px;
    margin: -202px 35px 0 35px;
    padding: 0;
    color: #ff0000;
    font-size: 12px;
    border: 2px solid red;
    border-radius: 8px;
    background-color: rgba(255, 0, 0, 0.1);
    text-align: center;
}
#cropImageTriangle {
    margin-top: 80px;
    margin-bottom: 10px;
    color: #ff0000; 
    font-size: 26px;
}
#CurrentAvatarContainer {
    margin: 0 0 15px 0;
}

@media screen and (min-width: 320px) and (max-width: 540px) {

    #cropContainerMain {
        margin: 0;
        padding: 0 10px 0 10px;
    }
}
@media screen and (min-width: 541px) and (max-width: 767px) {
    
    #cropContainerMain {
        margin: 0;
        padding: 0 80px 0 80px;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    #cropContainerMain {
        margin: 0;
        padding: 0 80px 0 100px;
    }
}
@media screen and (min-width: 800px) and (max-width: 812px) {
    
    #cropContainerMain {
        margin: 0;
        padding: 0 80px 0 130px;
    }
}
@media screen and (min-width: 813px) and (max-width: 853px) {
    
    #cropContainerMain {
        margin: 0;
        padding: 0 60px 0 130px;
    }
}
@media screen and (min-width: 854px) and (max-width: 1023px) {
    
    #cropContainerMain {
        margin: 0;
        padding: 0 70px 0 160px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    
    #cropContainerMain {
        margin: 0;
        padding: 0 40px 0 18px;
    }
}
@media screen and (min-width: 1280px) {
    
    #cropContainerMain {
        margin: 0 0 0 -25px;
        padding: 0;
    }
}

/* /// CROP PAGE /// */

@media screen and (min-width: 320px) and (max-width: 479px) { /* Not avalible at less than 480px */

    #cropPageContainerMain {
        margin: -18px 0 70px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }     
    #cropPageContainerOuter {
        width: auto;
        margin: 0;
        padding: 0 10px 0 10px;
    } 
    .widthNotice {
        height: auto;
        width: 280px;
        margin: 170px 0 100px 0;
        padding: 15px 15px 15px 15px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b;
    }
    .widthNotice h4 {
        width: 100%; 
        margin: 0;  
        padding: 15px 10px 15px 10px;
        color: #ff9900; 
        font-size: 14px; 
        line-height: 1.4;
        word-break: break-word;
    } 
    #cropContainer {
        display: none;
    }
    #cropBox {
        height: auto; 
        width: 100%;
    }
    #cropContainerI {
        margin: 67px 0 20px 0;
        padding: 20px 20px 30px 20px;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b;
    }      
    #currentAvatarContainer {
        margin-top: 20px;
        text-align: center;
    }
    #CIselectImageWrapper {
        margin: 25px 0 0 0; 
        padding: 0; 
        text-align: center;
    } 
} 
@media screen and (min-width: 480px) and (max-width: 767px) {

    #cropPageContainerMain {
        margin: -18px 0 70px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }     
    #cropPageContainerOuter {
        width: auto;
        margin: 0;
        padding: 0 10px 0 10px;
    }            
    #cropContainer {
        width: 100%;
        margin: 110px 0 0 0;
        padding: 20px;        
        align-items: center;
        text-align: center;

        border-top-right-radius: 34px;
        border-top-left-radius: 34px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;

        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b;
    }
    .widthNotice {
        display: none;
    } 
    #cropbox {
        height: auto; 
        width: 100%;     
        margin: 0; 
        padding: 0;
    }
    #cropContainerI {
        margin: 100px 0 20px 0;
        padding: 20px 20px 30px 20px;
        border-radius: 12px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b; 
    }
    #currentAvatarContainer {
        margin-top: 67px;
        text-align: center;
    }
    #CIselectImageWrapper {
        margin: 25px 0 0 0; 
        padding: 0; 
        text-align: center;
    }          
    .footerContainerCrop {
        width: 180%;
        padding: 0;
        margin: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

    #cropPageContainerMain {
        width: 100%;
        margin: 0 0 70px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }     
    #cropPageContainerOuter {
        width: auto;
        margin: 0;
        padding: 0;
    }
    .widthNotice {
        display: none;
    }
    #cropContainer {
        margin: 80px 0 0 0;
        padding: 20px 20px 20px 20px;        
        align-items: center;
        text-align: center;
        border-radius: 34px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b;
    }
    #cropbox {
        height: auto; 
        width: 100%;
        margin: 0; 
        padding: 0;
    }
    #cropContainerI {
        margin: 62px 0 20px 0;
        padding: 20px 20px 30px 20px;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b;
    }    
    #currentAvatarContainer {
        margin-top: 40px;
        text-align: center;
    }
    #CIselectImageWrapper {
        margin: 25px 0 0 0; 
        padding: 0; 
        text-align: center;
    }  
}

@media screen and (min-width: 1024px) and (max-width: 1024px) {

    #cropPageContainerMain {
        margin: 0 0 70px 0;
        padding: 0;
    }     
    #cropPageContainerOuter {
        width: auto;
        margin: -14px 0 0 6px;
    }             
    .widthNotice {
        display: none;
    }
    #cropContainer {
        width: 100%;
        align-items: center;
        text-align: center;
        margin: 80px 0 0 0;
        padding: 20px;
        border-radius: 20px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b;
    }
    #cropbox {
        height: auto; 
        width: 100%;
        margin: 0; 
        padding: 0;
        align-items: center;
        text-align: center;
    }
    #cropContainerI {
        width: 80%;
        margin: 62px 0 20px 250px;
        padding: 20px 20px 30px 20px;
        border-radius: 8px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        box-shadow: 5px 5px 10px #000000,
                   -1px -1px 10px #1b1b1b;
    }    
    #currentAvatarContainer {
        margin-top: 67px;
        text-align: center;
    }
    #CIselectImageWrapper {
        margin: 6px 0 24px 0; 
        padding: 0; 
        text-align: center;
    }   
}
@media screen and (min-width: 1025px) and (max-width: 1140px) {

    #cropPageContainerMain {
        margin: 0 0 70px 0;
        padding: 0;
    }    
    #cropPageContainerOuter {
        width: auto;
        margin: 66px 0 0 10px;
    }      
    .widthNotice {
        display: none;
    }
    #cropContainer {
        margin: 0 0 0 0;
        padding: 20px;
        align-items: center;
        text-align: center;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;  
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #cropbox {
        height: auto; 
        width: 100%;
        margin: 0; 
        padding: 0;
        align-items: center;
        text-align: center;
    }
    #cropContainerI {
        margin-top: 62px;
        margin-bottom: 20px;
        padding: 21px 20px 30px 20px;
        background-color: #000;
        border: 2px solid #333; 
        border-radius: 8px;
    }    
    #currentAvatarContainer {
        margin-top: 67px;
        text-align: center;
    }
    #CIselectImageWrapper {
        margin: 6px 0 24px 0; 
        padding: 0; 
        text-align: center;
    }  
}
@media screen and (min-width: 1141px) and (max-width: 1180px) {

    #cropPageContainerMain {
        margin: 0 0 70px 0;
        padding: 0;
    }    
    #cropPageContainerOuter {
        width: auto;
        margin: 66px 0 0 10.25px;
    }      
    .widthNotice {
        display: none;
    }
    #cropContainer {
        margin: 0 0 0 0;
        padding: 20px;
        align-items: center;
        text-align: center;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;  
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #cropbox {
        height: auto; 
        width: 100%;
        margin: 0; 
        padding: 0;
        align-items: center;
        text-align: center;
    }
    #cropContainerI {
        margin-top: 62px;
        margin-bottom: 20px;
        padding: 21px 20px 30px 20px;
        background-color: #000;
        border: 2px solid #333; 
        border-radius: 8px;
    }    
    #currentAvatarContainer {
        margin-top: 67px;
        text-align: center;
    }
    #CIselectImageWrapper {
        margin: 6px 0 24px 0; 
        padding: 0; 
        text-align: center;
    }  
}
@media screen and (min-width: 1181px) {

    #cropPageContainerMain {
        margin: 66px 0 0 -39.5px;
        padding: 0;
    }     
    #cropPageContainerOuter {
        width: auto;
        margin: 0;
    }      
    .widthNotice {
        display: none;
    }
    #cropContainer {
        margin: 0 0 0 0;
        padding: 20px;
        align-items: center;
        text-align: center;
        border-radius: 20px;
        border: 2px solid #333;
        background-color: #111;  
        box-shadow: 5px 5px 10px #000000, 
                  -1px -1px 10px #1b1b1b;
    }
    #cropbox {
        height: auto; 
        width: 100%;
        margin: 0; 
        padding: 0;
        align-items: center;
        text-align: center;
    }
    #cropContainerI {
        margin-top: 62px;
        margin-bottom: 20px;
        padding: 21px 20px 30px 20px;
        background-color: #000;
        border: 2px solid #333; 
        border-radius: 8px;
    }    
    #currentAvatarContainer {
        margin-top: 67px;
        text-align: center;
    }
    #CIselectImageWrapper {
        margin: 6px 0 24px 0; 
        padding: 0; 
        text-align: center;
    }  
}

#cropBackButtonHolder {
    margin: 0 0 20px 0; 
    padding: 10px; 
}
.cropBackButt {  
    width: 80px;
    height: 32px;
    margin: 0 10px 0 0;
    color: #888;  
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 0 #888;    
    border-radius: 8px;
    transition: all 0.4s linear;   
}
.cropBackButt:hover {
    cursor: pointer;
    color: #0088FF;
    border: 2px solid #0088FF;
    background-color: #1a1a1a; 
}
#goLiveCropBackButtonHolder {
    margin: -47px 0 0 0; 
    padding: 0;
}
.goLiveCropBackButt {  
    width: 198px;
    margin: 0 0 11px 0;
    padding: 9.5px 20px 9.5px 20px;
    color: #0088FF;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    transition: all 0.4s linear;   
}
.goLiveCropBackButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #151515;
}
.cropSaveButt {
    position: relative; 
    z-index: 6;
    width: 200px;    
    margin: 20px 0 0 0;
    padding: 9px 10px 10px 10px;
    font-size: 12px;
    color: #ff9900;
    text-align: center;
    transition: all 0.3s linear;
}
.cropSaveButt:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a; 
}
.cropSaveButtPledge {
    position: relative; 
    z-index: 6;
    width: 200px;    
    margin: 20px 0 0 0;
    padding: 9px 10px 10px 10px;
    font-size: 12px;
    color: #ff9900;
    text-align: center;
    transition: all 0.3s linear;
}
.cropSaveButtPledge:hover {
    cursor: pointer;
    border: 2px solid #444;
    background-color: #1a1a1a; 
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
    
    #cropBackButtonHolder {
        border-top-right-radius: 17px;
        border-top-left-radius: 17px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    .cropBackButt { 
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goLiveCropBackButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
    .cropSaveButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .cropSaveButtPledge {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }  
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    #cropBackButtonHolder {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }    
    .cropBackButt { 
        border: 2px solid #222;
        background-color: #0d0d0d; 
    }
    .goLiveCropBackButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;   
    }
    .cropSaveButt {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }
    .cropSaveButtPledge {
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0d0d0d;
    }  
}
@media screen and (min-width: 1025px)  {

    #cropBackButtonHolder {
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111; 
    }    
    .cropBackButt {
        border: 2px solid #333;
        background-color: #111;   
    }
    .goLiveCropBackButt {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;   
    }
    .cropSaveButt {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
    .cropSaveButtPledge {
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }
}

/* /////////////// Normalize CSS ///////////////

/* 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.*/
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/* Remove the gray background on active links in IE 10.*/
a {
  background-color: transparent;
}
/* 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
/* Remove the border on images inside links in IE 10.*/
img {
  border-style: none;
}
/* 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/* Show the overflow in IE.
 * 1. Show the overflow in Edge.*/
button,
input { /* 1 */
  overflow: visible;
}
/* Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.*/
button,
select { /* 1 */
  text-transform: none;
}
/* Correct the inability to style clickable types in iOS and Safari.*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/* Remove the inner border and padding in Firefox.*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/* Restore the focus styles unset by the previous rule.*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/* Correct the padding in Firefox.*/
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/* Add the correct vertical alignment in Chrome, Firefox, and Opera.*/
progress {
  vertical-align: baseline;
}
/* Remove the default vertical scrollbar in IE 10+.*/
textarea {
  overflow: auto;
}
/* 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.*/

[type="checkbox"],
[type="radio"] {
  
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/* Correct the cursor style of increment and decrement buttons in Chrome.*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
/* 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.*/
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}
/* Remove the inner padding in Chrome and Safari on macOS.*/
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
/* 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.*/
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}
/* Add the correct display in IE 10. */
[hidden] {
    display: none;
}

/* //////////////// START FORMS //////////////// */

.form-container {
    width: 500px;
    border-radius: 8px;
    border: 2px solid #333;
    margin-left: auto;
    margin-right: auto;
    padding-left: 150px;
    padding-right: auto;
}
.form-control {
    box-shadow: none !important; 
    display: inline-block;
    height: 33px;
    margin-top: 7px;
    margin-left: 0;
    padding-left: 10px;
    padding-bottom: 7px;
    font-size: 11px;
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 6px; 
    transition: all 0.3s linear;
}
.form-control:hover {
    cursor: text;
    background-color: #111;
    border: 2px solid #555;
}
input[type=date]:hover {
    cursor-color: #000;
    caret-color: red;
}

.PSOformControl,
.PSOformControlDOB,
.PSOformControlDOBmonth,
.PSOformControlCountry {
    box-shadow: none;
    display: inline-block;
    width: 100%;
    margin: 7px 0 0 0;
    padding: 10px;
    color: #D0D0D0;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}


@media screen and (min-width: 320px) and (max-width: 1024px) {

    .PSOformControl {
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
    .PSOformControlDOB,
    .PSOformControlDOBmonth,
    .PSOformControlCountry {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    } 
}
@media screen and (min-width: 1025px) {

    .PSOformControl,
    .PSOformControlDOB,
    .PSOformControlDOBmonth,
    .PSOformControlCountry {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    } 
}
.PSOformControl:hover,
.PSOformControlDOB:hover,
.PSOformControlCountry:hover {
    cursor: text;
    border: 2px solid #444;
}
.PSOformControlDOBmonth:hover {
    cursor: pointer;
    border: 2px solid #444;
}

/* /// login form /// */

.formControlLogin {
    box-shadow: none;
    display: inline-block;
    width: 100%;
    margin: 7px 0 0 0;
    padding: 10px;
    font-size: 14px;
    color: #FFF;
    resize: none;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.formControlLogin:hover {
    cursor: text;
    border: 2px solid #444;
} 

@media screen and (min-width: 320px) and (max-width: 1024px) {

    .formControlLogin {
        height: 40px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    .formControlLogin {
        height: 38px;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
    }
}

/* /// Artist Sign On forms  /// */

.formControlArtistSignOn,
.ASOformControlDOBday,
.ASOformControlDOBmonth,
.ASOformControlDOByear {
    font-style: normal !important; 
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin-top: 7px;
    margin-left: 0;
    padding-left: 10px;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.formControlArtistSignOn:hover,
.ASOformControlDOBday:hover,
.ASOformControlDOByear:hover {
    cursor: text;
    border: 2px solid #444;
}
.ASOformControlDOBmonth:hover {
    cursor: pointer;
    border: 2px solid #444;
}
.ASOformControlCountry {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin-top: 7px;
    margin-left: 0;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.ASOformControlCountry:hover {
    cursor: pointer;
    border: 2px solid #444;
}
.ASOformControlGenre {
    box-shadow: none;
    display: inline-block;
    width: 100%;    
    margin-top: 7px;
    margin-left: 0;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.ASOformControlGenre:hover {
    cursor: pointer;
    border: 2px solid #444;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {
    
    .formControlArtistSignOn {
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
    .ASOformControlDOBday,
    .ASOformControlDOBmonth,
    .ASOformControlDOByear,
    .ASOformControlCountry,
    .ASOformControlGenre {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 1025px) {

    .formControlArtistSignOn,
    .ASOformControlDOBday,
    .ASOformControlDOBmonth,
    .ASOformControlDOByear,
    .ASOformControlCountry,
    .ASOformControlGenre {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    } 
}


.form-control-ArtSignOn2 {
    box-shadow: none !important; 
    display: inline-block;
    height: 33px;
    width: 100%;    
    margin-top: 7px;
    margin-left: 0;
    padding-left: 10px;
    font-size: 12px;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    background-color: #000;
    border: 2px solid #333;
    border-radius: 6px; 
    transition: all 0.3s linear;
}
.form-control-ArtSignOn2:hover {
    cursor: text;
}
.form-control-uploadSelect {
    box-shadow: none;
    display: block;
    width: 100%;
    height: 32px;
    padding: 0 6px 0 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #FFF;
    vertical-align: middle;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333; 
    border-left: none;
    background-color: #000; 
    transition: all 0.3s linear;
}
.form-control-uploadSelect:hover {
    background-color: #111;
}

/* /// End artist sign on /// */

/* /// Edit Profile forms /// */

.formControlEditProfile {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin: 5px 0 0 0;
    padding: 0 0 0 9px;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.formControlEditProfile:hover {
    cursor: text;
    border: 2px solid #444;
}
.EPformControlDOBday {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin: 5px 0 0 0;
    padding: 0 0 0 7px;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.EPformControlDOBday:hover {
    cursor: text;
    border: 2px solid #444;
}
.EPformControlDOBmonth {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin-top: 7px;
    margin-left: 0;
    padding-left: 10px;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.EPformControlDOBmonth:hover {
    cursor: pointer;
    border: 2px solid #444;
}
.EPformControlDOByear {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin: 5px 0 0 0;
    padding: 0 0 0 7px;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.EPformControlDOByear:hover {
    cursor: text;
    border: 2px solid #444;
}
.EPformControlCountry {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin-top: 7px;
    margin-left: 0;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.EPformControlCountry:hover {
    cursor: pointer;
    border: 2px solid #444;
}
.EPformControlGenre {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin-top: 7px;
    margin-left: 0;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.EPformControlGenre:hover {
    cursor: pointer;
    border: 2px solid #444;
}
.form-control-editC {
    box-shadow: none;
    width: 100%;
    min-height: 100px;
    padding: 5px 10px 5px 10px;
    font-size: 12px;
    line-height: 1.428571429;
    color: #FFF;
    resize: none;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #000; 
    transition: all 0.3s linear;
}
.form-control-editC:hover {
    cursor: text;
    border: 2px solid #555;
    background-color: #111;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {

    .formControlEditProfile,
    .EPformControlDOBday,
    .EPformControlDOBmonth,
    .EPformControlDOByear,
    .EPformControlCountry,
    .EPformControlGenre {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    } 
}
@media screen and (min-width: 1025px) {

    .formControlEditProfile,
    .EPformControlDOBday,
    .EPformControlDOBmonth,
    .EPformControlDOByear,
    .EPformControlCountry,
    .EPformControlGenre {
        height: 33px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    } 
}

/* // Cancel Artist Account form // */

.formControlCAA {
    box-shadow: none;
    display: inline-block;
    width: 100%;
    margin: 7px 0 0 0;
    padding: 10px;
    font-size: 14px;
    color: #FFF;
    resize: none;
    vertical-align: middle;
    transition: all 0.3s linear;
}
.formControlCAA:hover {
    cursor: text;
    border: 2px solid #444;
} 

/*@media screen and (min-width: 320px) and (max-width: 1024px) {

    .formControlCAA {
        height: 40px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 1025px) {

    .formControlCAA {
        height: 38px;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;
    }
}*/

/* // Upload Music form // */

.form_control_UM {
    box-shadow: none;
    display: inline-block;
    width: 100%;  
    margin: 0;  
    padding: 0 0 0 7px;
    line-height: 1.4;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border: 2px solid #333; 
    transition: all 0.3s linear;
}
.form_control_UM:hover {
    cursor: text;
    border: 2px solid #444;
}

/* // Your Posts form // */

.form_control_embedYP {
    box-shadow: none;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 10px;
    line-height: 1.4;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.form_control_embedYP:hover {
    cursor: text;
    border: 2px solid #444;
}

/* // Events form // */

.form_control_EVT {
    box-shadow: none;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 10px;
    line-height: 1.4;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    transition: all 0.3s linear;
}
.form_control_EVT:hover {
    cursor: text;
    border: 2px solid #444;
}

/* // Upload Cause form // */

.form_control_causes {
    box-shadow: none;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 10px;
    line-height: 1.4;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border: 2px solid #333;
    transition: all 0.3s linear;
}
.form_control_causes:hover {
    cursor: text;
    border: 2px solid #444;
}

/* // Edit Cause form // */

.form_control_edit_cause {
    box-shadow: none; 
    display: inline-block;
    width: 100%;    
    margin: 0;
    padding: 10px;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    border: 2px solid #333;
    transition: all 0.3s linear;
}
.form_control_edit_cause:hover {
    cursor: text;
    border: 2px solid #444;
}

/*// Notifications form //*/

.form_control_notifications {
    box-shadow: none; 
    display: inline-block;
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    padding-left: 10px;
    color: #FFF;
    line-height: 1.4;
    vertical-align: middle;
    resize: none;
    border: 2px solid #333;
    transition: all 0.3s linear;
}
.form_control_notifications:hover {
    cursor: text;
    border: 2px solid #444;
}

/*// General Upload Button //*/

.form_control_upload {
    display: block;
    width: 100%;
    color: #FFF;
    line-height: 1.4;
    border-left: none;
    box-shadow: none;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    .formControlCAA,
    .form_control_UM,
    .form_control_embedYP,
    .form_control_EVT,
    .form_control_causes,
    .form_control_edit_cause,
    .form_control_notifications {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }

    /*// General Upload //*/

    #uploadGroupButt {
        height: 39.5px;
        padding: 9px 12px 5.75px 12px;
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }    
    .form_control_upload {
        height: 39.5px;
        padding: 0 6px 1px 12px;
        font-size: 13px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
    }
}
@media screen and (min-width: 768px) and (max-width: 799px) {
    
    .formControlCAA,
    .form_control_UM,
    .form_control_embedYP,
    .form_control_EVT,
    .form_control_causes,
    .form_control_edit_cause,
    .form_control_notifications {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
    }

    /*// General Upload //*/

    #uploadGroupButt {
        height: 39.5px;
        padding: 9px 12px 5.75px 12px;
        font-size: 13px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }    
    .form_control_upload {
        height: 39.5px;
        padding: 0 6px 0 12px;
        font-size: 13px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
    
    .formControlCAA,
    .form_control_UM,
    .form_control_embedYP,
    .form_control_EVT,
    .form_control_causes,
    .form_control_edit_cause,
    .form_control_notifications {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    /*// General Upload //*/

    #uploadGroupButt {
        height: 39.5px;
        font-size: 13px;
        padding: 9px 12px 5.75px 12px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }    
    .form_control_upload {
        height: 39.5px;
        padding: 0 6px 0.5px 12px;
        font-size: 13px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }    
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
    
    .formControlCAA,
    .form_control_UM,
    .form_control_embedYP,
    .form_control_EVT,
    .form_control_causes,
    .form_control_edit_cause,
    .form_control_notifications {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
        border: 2px solid #222;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }

    /*// General Upload //*/

    #uploadGroupButt {
        height: 39.5px;
        font-size: 13px;
        padding: 9.75px 12px 5px 12px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }    
    .form_control_upload {
        height: 39.5px;
        padding: 2px 6px 1px 12px;
        font-size: 13px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #0a0a0a;
        /*background-color: #0d0d0d;*/
    }   
}
@media screen and (min-width: 1025px) {
    
    .formControlCAA {
        height: 36px;
        font-size: 12px;
        border-radius: 10px;
        border: 2px solid #333;
        background-color: #111;        
    }
    .form_control_UM,
    .form_control_embedYP,
    .form_control_EVT,
    .form_control_causes,
    .form_control_edit_cause,
    .form_control_notifications {
        height: 32px;
        font-size: 12px;
        border-radius: 8px;
        border: 2px solid #333;
        background-color: #111;
    }

    /*// General Upload //*/

    #uploadGroupButt {
        height: 32.5px;
        font-size: 12px;
        padding: 5.5px 12px 5px 12px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }      
    .form_control_upload {
        height: 32.5px;
        padding: 5px 12px 5px 12px;
        font-size: 12px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #111;
    }
}

.form-control-edit {
    box-shadow: none;
    display: block;
    width: 100%;
    max-height: 120px;
    min-height: 30px;
    padding: 0 0 0 10px;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: calc(8px + 0.4vw);
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border-radius: 6px;
    border: 2px solid #333;
    background-color: #111;
    transition: all 0.3s linear;
}
.form-control-edit:hover {
    cursor: text;
    border: 2px solid #555;
}




.form-control-edit-web {
    box-shadow: none;
    display: block;
    width: 100%;
    height: 36px;
    padding: 13px 18px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333; 
    border-left: none;
    background-color: #000; 
    transition: all 0.3s linear;
}
.form-control-edit-web:hover {
    cursor: text;
    border-top: 2px solid #555;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    border-left: none;
    color: #FF9900;       
    background-color: #111;
}

/* /////////////////////////////////////////////////////////////////////////////////// */

.form-control-login {
    box-shadow: none !important;
    display: inline-block;
    height: 38px;
    /*display: block;
    height: 32px;*/
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px;
    line-height: 1.428571429;
    color: #FFF;
    font-size: 14px;
    vertical-align: middle;
    resize: none;
    border-radius: 8px;
    /*border-radius: 6px;*/
    border: 2px solid #333;
    background-color: #111;
    /*background-color: #000;*/
    transition: all 0.3s linear;
}
.form-control-login:hover {
    cursor: text;
    border: 2px solid #444;
    /*border: 2px solid #555;
    background-color: #111;*/
}

.formControlReportTrack {
    box-shadow: none !important;
    display: inline-block;
    height: 38px;    
    /*display: block;
    height: 32px;*/
    width: 100%;
    margin: 0;
    padding: 8px 5px 0 10px;
    line-height: 1.428571429;
    font-size: 13px;
    color: #D0D0D0;
    vertical-align: middle;
    border-radius: 8px;
    /*border-radius: 6px;*/
    border: 2px solid #333;
    background-color: #111;
    /*background-color: #000;*/ 
}

.formControlReport {
    box-shadow: none !important;
    display: inline-block;
    height: 38px;
    /*display: block;
    height: 32px;*/
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px;
    line-height: 1.428571429;
    color: #FFF;
    font-size: 13px;
    vertical-align: middle;
    resize: none;
    border-radius: 8px;
    /*border-radius: 6px;*/
    border: 2px solid #333;
    background-color: #111;
    /*background-color: #000;*/
    transition: all 0.3s linear;
}
.formControlReport:hover {
    cursor: text;
    border: 2px solid #444;
    /*border: 2px solid #555;
    background-color: #111;*/
}


/* /////////////////////////////////////////////////////////////////////////////////// */

.form-control-embed {
    box-shadow: none !important;
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    margin: 0 0 20px 0;
    font-size: 12px;
    line-height: 1.4;
    color: #FFF;
    vertical-align: middle;
    resize: none;
    background: transparent;
    border: 2px solid #333;
    border-radius: 6px; 
    transition: all 0.3s linear;
}
.form-control-embed:hover {
    cursor: text;
    background-color: #111;
    border: 2px solid #555;  
}


/* // Pledge rego form & pledgsta edit profile form // */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #DropDownContainer {
        height: auto;
        margin: -50px 0 -50px 0;
        padding: 0;
    }
    #DropDownContainerP {
        height: auto;
        margin: 10px 0 0 0;
        padding: 0;
    }
    #CountryContainer {
        height: auto;
        margin: 70px 0 0 0;
        padding: 0;
    }
    #GenreContainer {
        height: auto;
        margin: 30px 0 0 0;
        padding: 0;
    }
    #Genrelabel {
        margin: 0 0 0 2px;
        padding: 0;
        color: #999;
    }
    #GenreField {
        margin-left: 0;
        padding: 6px 5px 5px 6px;
    }
    .FormlabelCharMiss { /* edit cause page */
        margin: 0 0 15px 0; 
        padding: 0; 
        font-size: 12px; 
        font-weight: 600;        
        color: #999;
        text-align: center;
    }
    .FormlabelStep {
        margin: 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;        
        color: #fff;
    }
}
@media screen and (min-width: 768px) {
    
    #DropDownContainer {
        height: 150px;
        margin: 0;
        padding: 0;
    }
    #DropDownContainer option {
        cursor: pointer;
    }
    #DropDownContainerP {
        height: 130px;
        margin: 0;
        padding: 0;
    }
    #Genrelabel {
        margin: 0;
        padding: 0;
        color: #999;
    }
    #GenreField {
        margin-left: 0;
        padding: 5px 5px 7px 6px;
    }
    .FormlabelCharMiss {
        margin: 0 0 15px 0; 
        padding: 0; 
        font-size: 12px; 
        font-weight: 600;        
        color: #999;
        text-align: center;
    }        
    .FormlabelStep {
        margin: 0; 
        padding: 0; 
        font-size: 14px; 
        font-weight: 600;        
        color: #fff;
    }
}
@media screen and (min-width: 768px) and (max-width: 824px) {
    
    #CountryContainer {
        margin: 8px 0 5px 0;
        padding: 0;
    }     
    #GenreContainer{
        margin: 25px 0 5px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 825px) and (max-width: 1023px) {
    
    #CountryContainer {
        margin: 8px 0 5px 0;
        padding: 0;
    }    
    #GenreContainer {  
        margin: 25px 0 5px 0; 
        padding: 0;
    }
}
@media screen and (min-width: 1024px) {
    
    #CountryContainer {
        margin: 25px 0 5px 0;
        padding: 0 30px 0 0;
    }    
    #GenreContainer{      
        margin: 25px 0 5px 0; 
        padding: 0 0 0 20px;
    }
}
.Formlabel {
    margin-bottom: 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #999;
}
#Genrelabel {
    font-size: calc(8px + 0.4vw);
}
#PeditProfileLabel {
    margin-bottom: 5px;
    font-size: 14px; 
    font-weight: 600;
    color: #999;    
}
#PledgeRegolabel {
    font-size: 14px; 
    font-weight: 600;
    color: #999;
}
#Countrylabel {
    font-size: 14px; 
    font-weight: 600;
    color: #999;
}
#CountrylabelP {
    margin: 0; 
    padding: 0 0 0 2px;
    color: #999;
    font-size: 11px;
}
#CAAlabelHolder1 {
    margin: 0 0 13px 0; 
    padding: 0;
    text-align: center;
}
#CAAlabelHolder2 {
    margin: 13px 0 0 0; 
    padding: 0;
    text-align: center;
}
.CAAFormlabel {
    margin-bottom: 10px;
    padding: 0;
    font-size: 12px;
    color: #999;
}

/* ///////////////// END FORMS ///////////////// */

/* ============================================= */

/* //////////////////// WORK SPACE /////////////////////// */

/* //////////////// Small Screen Sizes /////////////////// */

@media screen and (min-width: 320px) and (max-width: 359px) {
    
}
@media screen and (min-width: 360px) and (max-width: 410px) {
    
}
@media screen and (min-width: 411px) and (max-width: 413px) {
    
}
@media screen and (min-width: 414px) and (max-width: 479px) {

}
@media screen and (min-width: 480px) and (max-width: 567px) {
 
}
@media screen and (min-width: 568px) and (max-width: 599px) {

}
@media screen and (min-width: 600px) and (max-width: 639px) {

}
@media screen and (min-width: 640px) and (max-width: 730px) {

}
@media screen and (min-width: 731px) and (max-width: 767px) {
 
}

/* //////////////// Large Screen Sizes /////////////////// */

@media screen and (min-width: 768px) and (max-width: 800px) {
    
}
@media screen and (min-width: 801px) and (max-width: 960px) {

}
@media screen and (min-width: 961px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1024px){

}
@media screen and (min-width: 1024px) and (max-width: 1024px) { /* 1024 */

}
@media screen and (min-width: 1025px) and (max-width: 1140px) { /* 1138  */

}
@media screen and (min-width: 1141px) and (max-width: 1199px) { /* 1180 */
     
}
@media screen and (min-width: 1200px) {

}