@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: url(0dcbd9c9e117b6666471.eot);
    src: local('Play Regular'), local(Play-Regular), url(0dcbd9c9e117b6666471.eot?#iefix) format("embedded-opentype"), url(ce6a319e8e97969f0f94.woff2) format("woff2"), url(e839033ef280a1154d0e.woff) format("woff"), url(3c612cfc10d88ecf9a6d.ttf) format("truetype"), url(cbea5eea7d51019530ef.svg#Play) format("svg")
}

html {
    font-family: 'Play', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

.material-icons {
    display: none
}

#recaptcha {
    display: none
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
optgroup,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

/* Code added in commit: 6dbb7bb0d38b4558d48fd0427a5c862901c0670a by @Shankhadeep Dey */
/* Removing, as it is causing input radio-buttons of tempo-chooser to disappear */
/* input {
    -webkit-appearance: none;
} */

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre,
textarea {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

.pure-button,
input {
    line-height: normal
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    accent-color: #70ECCB;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

.pure-button,
.pure-form input:not([type]),
.pure-menu {
    box-sizing: border-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend,
td,
th {
    padding: 0
}

legend {
    border: 0
}

/* Playlist Page, Artist Page and Search Page Title Section Start */

.header {
    padding: .6em;
    text-align: left;
    border-bottom: 1px solid #ebebeb;
    background: #252525;
    letter-spacing: .05em
}

.header h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0
}

.header .material-icons {
    font-size: 24px
}

.header h2 {
    font-size: 120%;
    font-weight: 100;
    line-height: 1.5;
    margin: 0;
    color: #dfdfdf;
    letter-spacing: -.02em
}

/* Playlist Page, Artist Page and Search Page Title Section End */

.hidden,
[hidden] {
    display: none !important
}

/* Not found in any element  */
.pure-menu-fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3
}

/* Menu Bar Styles Start  */
.pure-menu-item,
.pure-menu-list {
    position: relative
}

.pure-menu-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.pure-menu-item {
    padding: 0;
    margin: 0;
    height: 100%;
    /* font-size: 120% */
}

.pure-menu-item .material-icons {
    font-size: 18px;
}

.pure-menu-heading,
.pure-menu-link {
    display: block;
    text-decoration: none;
    white-space: nowrap
}

.pure-menu-item .pure-menu-item {
    display: block
}

.pure-menu-children {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 3
}

.pure-menu-horizontal .pure-menu-children {
    left: 0;
    top: auto;
    width: inherit
}

.pure-menu-active>.pure-menu-children,
.pure-menu-allow-hover:hover>.pure-menu-children {
    display: block;
    position: absolute
}

.pure-menu-has-children>.pure-menu-link:after {
    padding-left: .5em;
    content: "\25B8";
    font-size: small
}

.pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after {
    content: "\25BE"
}

.pure-menu-scrollable {
    overflow-y: scroll;
    overflow-x: hidden
}

.pure-menu-scrollable .pure-menu-list {
    display: block
}

.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
    display: inline-block
}

.pure-menu-horizontal.pure-menu-scrollable {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: .5em 0
}

.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
    display: none
}

.pure-menu-horizontal .pure-menu-children .pure-menu-separator,
.pure-menu-separator {
    background-color: #ccc;
    height: 1px;
    margin: .3em 0
}

.pure-menu-horizontal .pure-menu-separator {
    width: 1px;
    height: 1.3em;
    margin: 0 .3em
}

.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
    display: block;
    width: auto
}

.pure-menu-heading {
    text-transform: uppercase;
    color: #565d64
}

.pure-menu-link {
    color: #777
}

.pure-menu-children {
    background-color: #fff
}

.pure-menu-disabled,
.pure-menu-heading,
.pure-menu-link {
    padding: .5em 1em
}

.pure-menu-disabled {
    opacity: .5
}

.pure-menu-disabled .pure-menu-link:hover {
    background-color: transparent
}

.pure-menu-active>.pure-menu-link,
.pure-menu-link:focus,
.pure-menu-link:hover {
    background-color: #eee
}

.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
    color: #000
}
.sidebar_logout {
    border-top: 1px solid #2f2f2f;
    border-bottom: 1px solid #2f2f2f;
}
/* Menu Bar Styles End  */

* {
    box-sizing: border-box
}

:before,
:after {
    box-sizing: border-box
}

html,
button,
input,
select,
textarea,
.pure-g[class *=pure-u] {
    font-family: 'Play', sans-serif
}

body {
    min-width: 320px;
    background-color: #252525;
    color: #777;
    line-height: 1.6;
    /* XRAY-186: #new app -> UI error -> two insignificant bars appearing respectively in Home & View more footer */
    /* box-shadow: inset 0px -10px 0 0px #161616; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: #4b4b4b
}

h3 {
    font-size: 1.25em
}

h4 {
    font-size: 1.125em
}

a {
    color: #3b8bba;
    text-decoration: none
}

a:visited {
    color: #265778
}

dt {
    font-weight: 700
}

dd {
    margin: 0 0 10px
}

aside {
    background: #1f8dd6;
    margin: 1em 0;
    padding: .3em 1em;
    border-radius: 3px;
    color: #fff
}

aside a,
aside a:visited {
    color: #a9e2ff
}

#layout {
    position: relative;
    padding-left: 0
}

#layout.active #menu {
    right: 0;
    width: 250px;
    padding-top: 0;
    z-index: 9
}

/* Whole layout container styles start */

#layout,
#menu,
.menu-link {
    transition: all .2s ease-out
}

/* Navbar Search box Start  */
#searchContainer {
    float: right;
    width: calc(100% - 230px);
}

/* Navbar Search box End  */

/* Navbar User Avatar Start */
#topBarUserImg {
    height: 44px;
    width: 44px;
    border-radius: 25px;
    border: 1px solid #9E9E9E;
    margin: 6.5px 10px 6.5px 1px;
    float: right;
    display: inline-block;
    background-size: cover;
    background-repeat: round;
    cursor: pointer;
}

/* Navbar User Avatar End */

/* Navbar Search box Start  */
#search-bar {
    position: relative;
    height: 55px;
    display: inline-block;
    vertical-align: middle;
    float: right;
    padding-right: 10px;
    max-width: 100%;
    width: 264px
}

/* Navbar Search box End  */

/* Search Input used for both search bar start */
#search-input,
#search-input-home {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 15px;
    padding-left: 1em;
    padding-right: 2.8em;
    background: #eaeaea;
    border: 1px solid #a7a7a7;
    color: #4e5860;
    font-size: .9em;
    height: 40px;
    margin-top: 7.5px;
    width: 100%
}

#search-input:focus,
#search-input-home:focus,
button:focus {
    outline-width: 0
}

#search-input::-moz-placeholder, #search-input-home::-moz-placeholder {
    color: #989898
}

#search-input::placeholder,
#search-input-home::placeholder {
    color: #989898
}

[placeholder] {
    text-overflow: ellipsis
}

/* Search Input used for both search bar end */

/* Search Box on navbar search button start  */
#search-button {
    position: absolute;
    top: 7.5px;
    color: #8d9aa5;
    height: 40px;
    margin-left: -41px;
    border: none;
    background: rgba(0, 0, 0, 0);
    padding: 0;
    border-left: 1px solid #d5d5d5
}

#search-button:focus {
    outline-width: 0
}

/* Search Box on navbar search button end  */

/* Hamburger Menu Start  */
#menu {
    height: 100vh;
}

#menu {
    width: 250px;
    position: fixed;
    top: 0;
    right: -250px;
    bottom: 0;
    z-index: 9;
    background: #191919;
    border-right: 1px solid #282828;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

#menu {
    overflow-x: hidden;
}

#menu::-webkit-scrollbar {
    width: 7px;
}

#menu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3)
}

#menu::-webkit-scrollbar-thumb {
    background-color: #2d2c2c;
    border: 1px solid black;
    border-radius: 10px
}

#menu a {
    color: #999;
    border: none;
    white-space: normal;
    cursor: pointer;
}

#menu .pure-menu-open {
    background: transparent;
    border: 0
}

#menu .pure-menu ul {
    border: none;
    background: transparent;
    display: block;
    padding-top: 55px
}

#menu .pure-menu .menu-item-divided {
    border-bottom: 1px solid #1f2323
}

#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
    background: #052e33;
    background-image: linear-gradient(rgba(41, 41, 41, 0.12), #043636), linear-gradient(135deg, #053e49, #01262c);
    border-left: 5px solid #8BC34A;
    color: #dfe6ec
}

/* Hamburger Menu End  */

/* Top Navbar Start  */
#topnavbar {
    display: block;
    width: 100%;
    height: 55px;
    position: fixed;
    background: #093431;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), linear-gradient(135deg, #0d4c49, #0d4c49);
    z-index: 998
}

#topnavbar.navbar-show {
    opacity: 1;
    transition: transform .25s, background 2s, color .3s;
    transform: translate(0, 0)
}

#topnavbar.navbar-hide {
    opacity: 0;
    transition: transform .2s, background .3s, color .3s, opacity 0 .3s;
    transform: translate(0, -60px)
}

/* ChordU Title on Navbar Start  */
#topnavbar .title-area {
    display: inline-block;
    vertical-align: middle;
    height: 55px;
    padding: 8px
}

#topnavbar a {
    text-decoration: none;
    font-size: 26px;
    font-weight: 600;
    color: #e8e8e8;
    position: relative;
}

#topnavbar #logo {
    line-height: 39px
}

/* ChordU Title on Navbar End  */
/* Top Navbar End  */

/* Hamburger menu item styles start  */
.menu-link {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0);
    font-size: 18px;
    z-index: 999;
    width: 55px;
    height: 55px;
    padding: 10px
}

.menu-link:hover,
.menu-link:focus {
    background: rgba(0, 0, 0, 0)
}

.menu-link span {
    position: relative;
    display: block;
    margin-top: .9em
}

.menu-link span,
.menu-link span:before,
.menu-link span:after {
    background-color: #fff;
    width: 100%;
    height: .2em;
    transition: all .4s
}

.menu-link span:before,
.menu-link span:after {
    position: absolute;
    top: -.55em;
    content: " "
}

.menu-link span:after {
    top: .55em
}

.menu-link.active span {
    background: transparent
}

.menu-link.active span:before {
    transform: rotate(45deg) translate(.5em, .4em)
}

.menu-link.active span:after {
    transform: rotate(-45deg) translate(.4em, -.3em)
}

#menu .pure-menu-heading {
    display: block;
    font-size: 125%;
    font-weight: 300;
    letter-spacing: .1em;
    color: #fff;
    margin-top: 0;
    padding: .5em .8em;
    text-transform: uppercase
}

#menu .pure-menu-heading:hover,
#menu .pure-menu-heading:focus {
    color: #999
}

#menu .pure-menu-selected {
    background: #2d3233
}

#menu .pure-menu-selected a {
    color: #c5c5c5
}

#menu li.pure-menu-selected a:hover,
#menu li.pure-menu-selected a:focus {
    background: none
}

div#userinfo {
    width: 249px;
    float: left;
    padding: 10px 5px 10px 10px
}

.userimageContainer {
    position: relative;
    width: 100%;
    float: left
}

.userimage {
    width: 80px;
    border-radius: 40px;
    border: 1px solid #08414b;
    float: left
}

.username {
    float: left;
    width: calc(100% - 80px);
    font-size: 18px;
    color: #b0bec5;
    padding-left: 10px
}

.username p {
    font-size: 16px;
    margin: 0;
    text-transform: capitalize;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

/* Hamburger menu item styles end  */

/* Overlay wrapper used on all modals start */
#page_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(255, 255, 255, 0.11);
    text-align: center;
    z-index: 8;
    display: none
}

#cloadingconatiner {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 8;
    display: none;
    background-image: url(6f9ac78cafe081e51d36.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100px 100px
}

/* Overlay wrapper used on all modals end */

/* All modal common styles start */
#infoModalContent {
    padding: 15px 2px;
    color: #bdbdbd;
}

#infoModal .modal-content {
    background: radial-gradient(rgb(22, 22, 22), rgb(25, 30, 33));
    padding: 15px;
    border-radius: 7px;
}

#shareModal,
#tuneModal,
#loginModal {
    padding-top: calc(50vh - 220px);
    z-index: 1005
}

/* .modal-content {
    background-color: #fefefe;
    text-align: center;
    margin: auto;
    padding: 10px;
    width: 100%;
    max-width: 500px
} */

.modal {
    display: none;
    position: fixed;
    z-index: 1002;
    padding: 100px 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5)
}

.modal-content .close, .modal-content #subCloseModal {
    color: #aaa;
    float: right;
    font-weight: 700
}
#subpremModal .close, #miscModal .close, #loopModal .close {
    color:  #BABBBB;
}
#subpremModal .close:hover, #miscModal .close:hover {
    color:  #e8400c;
}
#subpremModal .close:active, #miscModal .close:active {
    transform: scale(.95);
}
#subpremModal .know_more {
    color:  #21A783;
}
#subpremModal .know_more:hover {
    color:  #3b8bba;
    text-decoration: underline;
}
#subpremModal .prem_modal_demo_btn {
    display: inline-block;
    cursor: pointer;
    color: #BABBBB;
    background-color: #2f2f2f;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 10px 15px; 
    font-weight: bold;
}
#subpremModal .prem_modal_demo_btn:hover {
    background-color: #1f2f2f;  
}
#subpremModal .prem_modal_Subscribe_btn {
    font-size: 20px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 7px 32px;
    border-radius: 10px;
    color: #FFFFFF;
    display: inline-block;
    background: radial-gradient(50% 50% at 50% 50%, #0B4440 0%, #00796B 100%);
    border: 2px solid #21a783;
}
#subpremModal .prem_modal_Subscribe_btn:hover {
    background: radial-gradient(65% 65% at 50% 50%, #21A5A7 0%, #21A783 100%);
}
#subpremModal .prem_modal_demo_btn:active, #subpremModal .prem_modal_Subscribe_btn:active,button#modalOkay:active, #miscModal .view_my_request_btn:active {
transform: scale(.95);
}
#subpremModal .modal-content {
    background-color: #252525;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #3d3d3d;
    max-width: 400px;
}
.clearHead {
    padding-top: 1px;
    margin-right: -9px;
}

.modalHead {
    margin-top: -10px;
    margin-left: -15px;
    margin-bottom: 8px;
    width: calc(100% + 30px);
    padding: 12px 16px 12px 16px;
    color: #9E9E9E;
    line-height: 1;
    font-size: 20px;
    /* font-weight: normal; */
    border-radius: 2px;
    background: #171717;
    border: 1px solid #252525;
    border-bottom-color: rgba(233, 236, 239, 0);
}

/* XRAY-238: diabled cursor pointer for multiple modals */
/* .modalHead .material-icons {
    cursor: pointer;
} */

.modal-content .close:hover,
.modal-content .close:focus, .modal-content #subCloseModal:hover, .modal-content #subCloseModal:focus {
    color: #e8400c;
    text-decoration: none;
    cursor: pointer
}

/* Deprecated tune modal start */
#tuneModal .modal-content .close:hover,
.modal-content .close:focus {
    color: #f6f6f6
}

.tuner_in_content .modal-content .close,
#shareModal,
#tuneModal,
#loginModal.tuner_in_content_box .modal-content .close,
.tuner_in_content h3,
.tuner_in_content_box h3 {
    display: none;
}

/* Deprecated tune modal end */

button.close.modalPromptButton {
    float: none;
    color: #dedede;
    padding: 3px 20px;
    font-size: 18px;
    border: 0;
    border-radius: 3px;
    background-color: #076a6a;
    box-shadow: 0 0 5px 0 #262626;
}

img {
    border: 0
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

/* Information Modal Start */
#miscModalContent {
    clear: both;
    display: none;
    max-width: 420px;
    margin: 50px auto 40px auto;
    color: #BABBBB;
}
#miscModal .modal-content {
    max-width: 460px;
    background-color: #252525;
    padding-bottom: 20px;
    border-radius: 4px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIyIiBoZWlnaHQ9IjQ0NSIgdmlld0JveD0iMCAwIDYyMiA0NDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNTUzNF8xNzU1MikiPgo8cGF0aCBkPSJNMTMzLjk2MiAyNzcuNzg3QzE1NS44NDUgMjY0LjE5MiAyMjAuMDYzIDI3MC4xNDcgMjMwLjU2NSAyODEuMTgxQzIzNC42ODIgMjkzLjI4OSAxOTcuNDMzIDM1OC40MjcgMTcyLjk5MiAzNjMuODE4QzE1Mi4zNjggMzY3LjE4MSAxMzguMDE4IDM1Mi43ODQgMTI3LjEyOCAzMzIuMjk2QzExMy43NDEgMzAzLjQ3NiAxMTkuNjA3IDI4Ni43MDUgMTMzLjk2MiAyNzcuNzg3WiIgZmlsbD0iIzIxMkEyOSIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIxX2RfNTUzNF8xNzU1MikiPgo8cGF0aCBkPSJNNzkuNDY3NCAxOTAuNzUyQzEwNC41NzEgMTg0Ljk2NCAxNjMuNDEzIDIxMS4zNjYgMTY5Ljc4MiAyMjUuMjAzQzE2OS43NjMgMjM3Ljk5MiAxMTMuNDUxIDI4Ny41ODQgODguNTc5OCAyODQuNzgyQzY3Ljk3NjIgMjgxLjI5NSA1OS4wNTI3IDI2My4wMzEgNTUuMzczNCAyNDAuMTIyQzUyLjAyNTkgMjA4LjUyMSA2Mi45OTk4IDE5NC41NDggNzkuNDY3NCAxOTAuNzUyWiIgZmlsbD0iIzIxMkEyOSIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIyX2RfNTUzNF8xNzU1MikiPgo8cGF0aCBkPSJNMTQ1LjM3NCA2Ny4xNTExQzE2Ny42NDcgNTQuMjA1NSAyMzEuNjYyIDYyLjA0NyAyNDEuODM1IDczLjM4NDhDMjQ1LjU5NCA4NS42MDkgMjA2LjQ0NSAxNDkuNjIzIDE4MS44NTcgMTU0LjI5M0MxNjEuMTQzIDE1Ny4wNDggMTQ3LjIyMiAxNDIuMjM1IDEzNi45NCAxMjEuNDM2QzEyNC40MDYgOTIuMjM0NCAxMzAuNzYyIDc1LjY0MzEgMTQ1LjM3NCA2Ny4xNTExWiIgZmlsbD0iIzIxMkEyOSIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIzX2RfNTUzNF8xNzU1MikiPgo8cGF0aCBkPSJNMjI0LjE5NSAxNzIuNjAxQzI0OC40MjYgMTgxLjM1MiAyODMuNTQ3IDIzNS40NDQgMjgxLjM5NSAyNTAuNTIzQzI3NC40NDMgMjYxLjI1OCAyMDAuMjM3IDI3Mi4zODggMTgwLjg2IDI1Ni41NDdDMTY1LjQ0IDI0Mi40NDQgMTY3Ljg0NyAyMjIuMjU5IDE3Ny4xNzggMjAxLjAxN0MxOTEuNTAyIDE3Mi42NSAyMDguMyAxNjYuODYxIDIyNC4xOTUgMTcyLjYwMVoiIGZpbGw9IiMyMTJBMjkiLz4KPC9nPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyNF9kXzU1MzRfMTc1NTIpIj4KPHBhdGggZD0iTTEyMi43MjUgMTAwLjQ3MkMxNDQuMDIxIDExNC45NyAxNjQuNTk1IDE3Ni4wOTQgMTU4Ljc2MyAxOTAuMTY1QzE0OS4zNjEgMTk4LjgzNiA3NC43MTcxIDE5MS4xNzMgNTkuODg1NCAxNzEuMDEzQzQ4LjQ1NDUgMTUzLjUyIDU1LjgwMyAxMzQuNTY2IDcwLjEyMTMgMTE2LjMxQzkxLjA0NjIgOTIuMzkzNyAxMDguNzU2IDkwLjk2MTMgMTIyLjcyNSAxMDAuNDcyWiIgZmlsbD0iIzIxMkEyOSIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXI1X2RfNTUzNF8xNzU1MikiPgo8cGF0aCBkPSJNMzI0LjMzOSAzNjIuMDY4QzMyMy4yMTUgMzM2LjMzIDM1OS44ODIgMjgzLjI3NCAzNzQuNjQ3IDI3OS41MjhDMzg3LjIxOSAyODEuODc0IDQyNS43MzggMzQ2LjI2OSA0MTguNDU4IDM3MC4yMTVDNDExLjI4MSAzODkuODQgMzkxLjY5OCAzOTUuMjkyIDM2OC41MDIgMzk0Ljc0MkMzMzYuODIgMzkyLjI4NCAzMjUuMDc3IDM3OC45NTEgMzI0LjMzOSAzNjIuMDY4WiIgZmlsbD0iIzIxMkEyOSIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXI2X2RfNTUzNF8xNzU1MikiPgo8cGF0aCBkPSJNNDA3LjA1OSAyNjUuNTUxQzQyNC44NzUgMjQ2Ljk0MyA0ODguNTU4IDIzNi43NDYgNTAxLjQ3MyAyNDQuODIzQzUwOC40NzEgMjU1LjUyOCA0ODguNTg0IDMyNy44ODEgNDY2LjI1MSAzMzkuMTc5QzQ0Ny4xMTEgMzQ3LjU2MyA0MjkuNjMyIDMzNy4xODUgNDEzLjk5MSAzMjAuMDQ4QzM5My44NTkgMjk1LjQ2IDM5NS4zNzIgMjc3Ljc1OCA0MDcuMDU5IDI2NS41NTFaIiBmaWxsPSIjMjEyQTI5Ii8+CjwvZz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjdfZF81NTM0XzE3NTUyKSI+CjxwYXRoIGQ9Ik0yNzUuMTI1IDI0Ny41MzhDMzAwLjg4MyAyNDcuMDI2IDM1My4wNTIgMjg0Ljk0NSAzNTYuNDQ1IDI5OS43OTRDMzUzLjgwMSAzMTIuMzA4IDI4OC41MDggMzQ5LjI4NCAyNjQuNzQyIDM0MS40MzdDMjQ1LjI5MyAzMzMuNzk1IDI0MC4zMDkgMzE0LjA4OCAyNDEuNDEgMjkwLjkxMkMyNDQuNjIgMjU5LjI5NyAyNTguMjI5IDI0Ny44NzQgMjc1LjEyNSAyNDcuNTM4WiIgZmlsbD0iIzIxMkEyOSIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXI4X2RfNTUzNF8xNzU1MikiPgo8cGF0aCBkPSJNNDU0LjU5OSAzMzQuMzM3QzQ3OS43MyAzMjguNjY4IDUzOC40NDYgMzU1LjM0OSA1NDQuNzUgMzY5LjIxNUM1NDQuNjcgMzgyLjAwNSA0ODguMTI0IDQzMS4zMjkgNDYzLjI2NiA0MjguNDFDNDQyLjY4IDQyNC44MjUgNDMzLjg0MyA0MDYuNTE4IDQzMC4yNzIgMzgzLjU5M0M0MjcuMDc0IDM1MS45NzcgNDM4LjExNCAzMzguMDU2IDQ1NC41OTkgMzM0LjMzN1oiIGZpbGw9IiMyMTJBMjkiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzU1MzRfMTc1NTIiIHg9IjExNS42MDkiIHk9IjI2OS45MyIgd2lkdGg9IjExOS4yNzMiIGhlaWdodD0iMTAyLjM3NSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI0Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTUzNF8xNzU1MiIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd181NTM0XzE3NTUyIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXIxX2RfNTUzNF8xNzU1MiIgeD0iNTAuNzczNCIgeT0iMTg5LjkzOCIgd2lkdGg9IjEyMy4wMDgiIGhlaWdodD0iMTAyLjk2MSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI0Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTUzNF8xNzU1MiIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd181NTM0XzE3NTUyIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXIyX2RfNTUzNF8xNzU1MiIgeD0iMTI2LjI1IiB5PSI2MC40NDUzIiB3aWR0aD0iMTE5LjgzNiIgaGVpZ2h0PSIxMDIuMTgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeT0iNCIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzU1MzRfMTc1NTIiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTUzNF8xNzU1MiIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyM19kXzU1MzRfMTc1NTIiIHg9IjE2NS43MzQiIHk9IjE3MC42MDIiIHdpZHRoPSIxMTkuNzU4IiBoZWlnaHQ9IjEwMS44NDQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeT0iNCIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzU1MzRfMTc1NTIiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTUzNF8xNzU1MiIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyNF9kXzU1MzRfMTc1NTIiIHg9IjUwLjI3MzQiIHk9Ijk0Ljk5MjIiIHdpZHRoPSIxMTMuNDkyIiBoZWlnaHQ9IjEwNi43MDMiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeT0iNCIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzU1MzRfMTc1NTIiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTUzNF8xNzU1MiIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyNV9kXzU1MzRfMTc1NTIiIHg9IjMyMC4zMTIiIHk9IjI3OS41MzEiIHdpZHRoPSIxMDMuMDU1IiBoZWlnaHQ9IjEyMy4yNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI0Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTUzNF8xNzU1MiIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd181NTM0XzE3NTUyIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXI2X2RfNTUzNF8xNzU1MiIgeD0iMzk0LjUwOCIgeT0iMjQyLjAzMSIgd2lkdGg9IjExMi4zOTEiIGhlaWdodD0iMTA4LjEwOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI0Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTUzNF8xNzU1MiIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd181NTM0XzE3NTUyIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXI3X2RfNTUzNF8xNzU1MiIgeD0iMjM3LjI2NiIgeT0iMjQ3LjUzMSIgd2lkdGg9IjEyMy4xOCIgaGVpZ2h0PSIxMDIuOTg0IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjQiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd181NTM0XzE3NTUyIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzU1MzRfMTc1NTIiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjhfZF81NTM0XzE3NTUyIiB4PSI0MjUuNzE5IiB5PSIzMzMuNTU1IiB3aWR0aD0iMTIzLjAzMSIgaGVpZ2h0PSIxMDIuOTc3IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjQiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd181NTM0XzE3NTUyIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzU1MzRfMTc1NTIiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#miscModal .view_my_request_btn {
    display: inline-block;
    margin: 40px 0;
    background: linear-gradient(#1F1F1F, #1F1F1F) padding-box, linear-gradient(to right, #21A5A7, #21A783) border-box;
    border: 2px solid transparent;
    padding: 4px 20px;
    border-radius: 10px;
    color: #21A5A7;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}
#miscModal .view_my_request_btn:hover {
    background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(to right, #1d8e90, #1a8468) border-box;
}
/* Information Modal End */

/* Request Chords Modal Start */
#is_play_when_done {
    margin-right: 7px;
    margin-top: -2px;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    cursor: pointer
}

button#modalOkay {
    float: none;
    padding: 5px 25px;
    font-size: 18px;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 0 5px 0 #262626;
    color: #FFFFFF;
    background: #0B4440;
    letter-spacing: 1px;
}
button#modalOkay:hover {
    background: #00796B;
}
/* button#modalOkay:hover {
    background-color: #0f845d
} */

/* Request Chords Modal End */

#editSelectList .modal-content,
#chooseJamList .modal-content {
    background-color: #252525;
    border-radius: 5px;
}

#editSelectList h3,
#chooseJamList h3 {
    margin: 0 0 12px 0;
    border-bottom: 1px solid #202020;
    color: #9E9E9E;
    text-align: left;
    padding-bottom: 3px;
    padding-left: 5px;
    background: linear-gradient(45deg, #1f1f1f, transparent);
}

#editListWrapper {
    text-align: left;
}

#editJamlists,
#editLovedTracks,
.removeFevBtn {
    cursor: pointer;
}
.removeFevBtn:hover {
    color: #da3d3d;
}

.removeFev {
    display: none;
    width: 44px;
    float: right;
    height: 90px;
    border-bottom: 1px solid #313131;
    overflow: hidden;
    padding: 33px 10px;
    font-size: 18px;
    color: #ff4e24;
    cursor: pointer;
}

.ecsuser_info {
    width: 100%;
    display: inline-block;
    color: #bbbbbb;
    padding: 5px 10px 5px 6px;
    background: rgba(135, 135, 135, 0.1);
    border-radius: 5px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.ecsuser_info:active {
    transform: scale(0.95);
}

.ecsusername {
    height: 32px;
    width: calc(100% - 60px);
    display: inline-block;
    float: left;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deleteListItem {
    display: none;
    float: right;
    height: 30px;
    line-height: 32px;
    padding: 4px 2px;
    color: #ff4e24;
}

/* All modal common styles end */

/* Create new jamlist start  */
#jamlistinput {
    width: 100%;
    height: 31px;
    margin-bottom: 4px;
    border-radius: 5px;
    border: 1px solid #000000;
    box-shadow: inset 0px 0px 2px 1px #484848;
    background: rgb(37, 37, 37);
    color: #e2e2e2;
    padding: 7px;
    font-size: 15px;
    outline: none;
}

#newjamlistsave {
    display: inline-block;
    width: 25%;
    font-size: 15px;
    vertical-align: sub;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: #00e4cf;
    cursor: pointer;
}

#newjamlistsave:active {
    transform: scale(0.9);
}

#ownjamList::-webkit-scrollbar,
#usernoteinput::-webkit-scrollbar {
    width: 5px;
    border-radius: 5px
}

#ownjamList::-webkit-scrollbar-track,
#usernoteinput::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)
}

#ownjamList::-webkit-scrollbar-thumb,
#usernoteinput::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    border-radius: 5px
}

/* Create new jamlist end  */

/* Reusable snackbar start  */
#snackbar {
    visibility: hidden;
    width: 100%;
    margin-left: -50%;
    text-align: center;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 180px;
    z-index: 9
}

#snackbar.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout .5s 3.5s;
    z-index: 1005;
}

/* Reusable snackbar end  */

/* Reusable toast start  */
#toastMsg {
    display: inline-block;
    background-color: #333;
    background: radial-gradient(#444343, #1c1c1c);
    color: #ececec;
    border-radius: 15px;
    padding: 8px 14px;
    font-size: 18px;
    border: 1px solid #21a5a7;
    box-shadow: 1px 1px 5px 1px #000;
    margin: 0 15px;
    word-break: break-word;
}

/* Reusable toast end  */

/* Footer start */
#footer {
    color: #777e83;
    font-size: .85em;
    position: relative
}

#footer .copyright {
    display: inline-block;
    font-size: 14px;
    color: #0ba798
}

#footer #footer-container {
    padding: 1em;
    margin-top: 1em;
    width: 100%;
    text-align: center;
    background: #252525
}

#footer {
    color: #777e83;
    font-size: .85em;
    position: relative
}

#footer .footnote {
    padding-bottom: 5px;
    font-size: 16px;
}

#footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    font-weight: 600;
    justify-content: space-evenly;
    max-width: 1024px;
    margin: 2px auto 16px;
}

#footer .footer-links a {
    color: #75a39f;
}

#footer .FbPageIcon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-image: url(59584c3e39af9ffba67f.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 4px 0 6px;
    display: inline-block;
    vertical-align: -4px;
}

/* Footer end */

/* Song Item Chord snipper start */
.chrd_snip {
    font-weight: 600;
    color: #de6944;
    display: inline-block;
    height: 26px;
}

/* Song Item Chord snipper end */

/* Facebook page iframe start  */


/* Facebook page iframe end  */

/* Full page loader animation start  */

@keyframes lds-ripple {
    0% {
        top: 90px;
        left: 90px;
        width: 0;
        height: 0;
        opacity: 1
    }

    90% {
        top: 15px;
        left: 15px;
        width: 150px;
        height: 150px;
        opacity: 0
    }
    
    100% {
        top: 90px;
        left: 90px;
        width: 0;
        height: 0;
        opacity: 0
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.animation-spin {
    animation: spin 1s linear infinite;
}
.lds-ripple {
    position: relative
}

.lds-ripple div {
    box-sizing: content-box;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite
}

.lds-ripple div:nth-child(1) {
    border-color: #fff
}

.lds-ripple div:nth-child(2) {
    border-color: #fff;
    animation-delay: -1s
}

/* Full page loader animation end */

/* Premium Modal Plan Switch Start */
div#platSwitch {
    width: 100%;
    float: left;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 17px;
}

/* Premium Modal Plan Switch End */

/* All Modal style start */
.modal-content {
    background-color: #fefefe;
    text-align: center;
    margin: auto;
    padding: 10px;
    width: 100%;
    max-width: 500px;
}

/* All Modal style end */

/* Radio switch start */
.switch, .transposeSwitch, .autosaveTransposeSwitch, .autoshiftSwitch, .handed_switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
    margin-right: 8px
}
.transposeSwitch, .autosaveTransposeSwitch, .autoshiftSwitch, .handed_switch {
    width: 45px;
    height: 16px;
    margin: 0 5px;
    vertical-align: middle;
}

.switch input, .transposeSwitch input, .autosaveTransposeSwitch input, .handed_switch input, .autoshiftSwitch input {
    display: none
}

.slider, .transposeSlider, .autosaveSlider, .handed_slider, .autoshiftSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #BABBBB;
    transition: .4s
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s
}
.transposeSlider:before, .autosaveSlider:before, .handed_slider:before, .autoshiftSlider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: -3px;
    bottom: -4.5px;
    background-color: #0B4440;
    transition: .4s;
}
.autoshiftSlider:before, .autosaveSlider:before {
    background-color: #3f3f3f;
}
input:checked+.slider.round {
    background-color: #00796B;
}
input:checked+.slider.round:hover:before {
    background-color: #f0f0f0;
}

/* input:focus+.slider {
    box-shadow: 0 0 1px #0e8291
} */

input:checked+.slider:before {
    transform: translateX(26px)
}

input:checked+.transposeSlider:before, input:checked+.autosaveSlider:before, input:checked+.handed_slider:before, input:checked+.autoshiftSlider:before {
    transform: translateX(25px);
    background-color: #0B4440;
}
input:checked+.transposeSlider:hover:before, input:checked+.autosaveSlider:hover:before, input:checked+.handed_slider:hover:before, input:checked+.autoshiftSlider:hover:before {
    background-color: #00796B;
}
.slider.round, .transposeSlider.round, .autosaveSlider.round,  .handed_slider.round, .autoshiftSlider.round {
    border-radius: 34px
}

.slider.round:before, .transposeSlider.round:before, .autosaveSlider.round:before, .handed_slider.round:before, .autoshiftSlider.round:before {
    border-radius: 50%
}
.slider.round:hover:before, .transposeSlider.round:hover:before, .handed_slider.round:hover:before, .autoshiftSlider.round:hover:before {
    background-color: #00796B;
}
.autosaveSlider.round:hover:before {
    background-color: #6a6a6a;
}

/* Radio switch end */

/* login Modal Start */
div#loginPageModal {
    display: none;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    overflow: auto;
    width: 100vw;
    height: 100vh;
    /* Safe area view handle */
    margin-bottom: env(safe-area-inset-bottom);
}
div#subpremModal {
    display: none;
    position: fixed;
    z-index: 1002;
    padding: 100px 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    margin-bottom: env(safe-area-inset-bottom);
}
div#loginSection {
    margin-top: 60px !important;
}
div#loginSection {
    display: flex;
    flex-direction: column;
    background: #252525;
    position: relative;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    margin: 60px auto 10px;
    width: 90%;
    border-radius: 10px;
}

div#loginModalImgCont {
    position: relative;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 50%;
    display: none;
}

div#loginImgOverlapper {
    position: relative;
    background: url(60ccd8e923e361437787.png);
    height: 100%;
    background-size: cover;
    display: none;
    border-radius: 6px;
}

div#login-modal-content {
    display: flex;
    align-items: center;
    flex-direction: column;
}

div#termsSection {
    display: flex;
    font-size: 12px;
    color: #BABBBB;
    z-index: 1;
    padding: 15px 0;
}

div#loginFormTitle {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 210px;
    margin-top:20px;
    display: none;
    /* margin-bottom: 10px; */
    /* padding-right: 2px; */
}

.socialImgContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    /* padding-left: 5px; */
    margin-top: 10px;
}

div#loginOptionDivider {
    position: relative;
    text-align: center;
    padding: 20px 15px;
}

div#loginDivider {
    height: 1px;
    background: #595656;
}

div#orBtn {
    width: 25px;
    height: 25px;
    border-radius: 15px;
    background: white;
    text-align: center;
    z-index: 1;
    margin: -15px auto;
    font-weight: bold;
    line-height: 24px;
}

.formSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding-left: 5px; */
    color: white;
}

div#heroDialog {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    height: 100%;
}

div#loginContainer {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin-right: 9px; */
}

.resetPassCont {
    display: flex;
}

input#loginSubmit {
    background: #DB4437;
    color: white;
    width: 250px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    border-color: transparent;
}

.signupNav {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    color: white;
    font-size: 14px;
    width: 250px;
    margin: 8px 0;
}

input#regBtn {
    background: #DB4437;
    color: white;
    width: 250px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    margin: 5px 0;
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 14px;
    cursor: pointer;
    border-color: transparent;
    margin-top: 2%;
}

#google-login-firebase:hover,
#facebook-login-firebase:hover,
#apple-login-firebase:hover,
#loginBtn:hover,
#resetpassword:hover {
    cursor: pointer;
}

span#closeModal {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
}

span#closeModal i:hover {
    color: white;
}

/* XRAY-400: #web-fail -> Validation messages are exposing as white color instead of red */
.errorText {
    display: none;
    color: rgb(220, 38, 38);
    font-size: 0.875rem;
}

div#regContainer {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 7px;
}

#loginModalImg {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    opacity: 0.5;
    height: 100%;
}

div#forgotpassword {
    margin-top: calc(50vh - 300px) !important; 
}

div#forgotpassword {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    color: white;
    background: #272828;
    border-radius: 8px;
    padding: 2%;
    width: 300px;
    height: auto;
    margin: 50px auto 30px; 
}

div#resetForm {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div#forgotPassCont {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

span#forgotPassTitle {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

span#forgotPassDesc {
    text-align: center;
    font-size: 14px;
}

.resetPassBtnCont {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-bottom: 10px;
}

span#forgotPassFormTitle {
    display: none;
}

input#resetPassBtn {
    background: #369350;
    padding: 10px 0;
    margin: 4% 0;
    width: 250px;
    border-radius: 8px;
    font-size: 1rem;
    border: none;
}

div#resetImg {
    margin: 20px;
}

input#resendEmailBtn {
    display: none;
    background: #369350;
    border: 1px solid darkslategray;
    padding: 10px 0;
    margin: 4% 0;
    width: 210px;
    border-radius: 8px;
    font-size: 1rem;
}

.resetPassNav {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: center;
    font-size: 14px;
    color: #02bdbd;
    font-weight: 600;
}

input#resetEmail {
    color: #ffffff;
    width: 250px;
    height: 38px;
    border-radius: 8px;
    background: #363837;
    margin: 2% 0;
    padding: 0 8px;
    font-size: 14px;
    border-color: transparent;
}

div#loginFeatureCont {
    color: white;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.loginFeature {
    display: flex;
    justify-content: center;
}

span.feature-title {
    margin-left: 5px;
}

/* login Modal End */

/* Modal tracks Styles Start */
#similarTracks {
    display: inline-block;
}

#similarTracks .header {
    background: #222222;
    margin-bottom: 10px;
    border-color: #2e2e2e;
}

#similarTracks .tinfo,
.uploadList .tinfo {
    border-color: #313131
}

#similarTracks .tname {
    color: #bbb
}

#similarTracks .tname.link,
.uploadList .tname.link {
    color: #d4d4d4
}

#similarTracks .est_chrd {
    background: #d6d6d6;
    border: 1px solid #595959;
    box-shadow: 1px 1px 5px 0 #000;
    border-radius: 6px
}

#similarTracks .est_chrd:hover {
    background-color: rgba(185, 255, 255, 0.88)
}

/* Modal tracks Styles End */

/* .header{
	border-color: #24292c;
} */

#searchResults {
    padding-top: 55px;
    width: 100%
}

.ecsuser_info {
    width: 100%;
    display: inline-block;
    color: #bbbbbb;
    padding: 5px 10px 5px 6px;
    background: rgba(135, 135, 135, 0.1);
    border-radius: 5px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.ecsuser_info:active {
    transform: scale(0.95);
}

#owneditList .ecsuser_info {
    text-align: left;
    background: linear-gradient(45deg, #111414, #2f2f2f);
}
#selectedEditList .ecsuser_info {
    text-align: left;
    background: linear-gradient(45deg, #083c3c, #2f2f2f);
}

.chord_header h1,
.header h2 {
    font-size: 120%;
    font-weight: 100;
    line-height: 1.5;
    margin: 0;
    color: #dfdfdf;
    letter-spacing: -.02em
}

.blink_me {
    animation: blinker 1s linear infinite
}

[dir="ltr"] .login-btn {
    text-align: left
}

[dir="rtl"] .login-btn {
    text-align: right
}

.login-btn {
    display: flex;
    width: 250px;
    height: 40px;
    margin: 5px 0;
    border-radius: 8px;
    padding: 8px;
}

.modal #similarTracks::-webkit-scrollbar {
    width: 5px;
    border-radius: 5px
}

.modal #similarTracks::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)
}

.modal #similarTracks::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    border-radius: 5px
}

.editListOptBtn {
    margin-left: 2%;
    font-size: 15px;
    color: #b8aca9;
    font-weight: normal;
    background: #454a4b;
    padding: 4px 6px;
    border-radius: 8px;
}

@keyframes blinker {
    50% {
        opacity: 0
    }
}

.ring-loader {
    width: 100%;
    height: 100%;
    background: rgba(0, 79, 89, 0.5);
    border-radius: 15px;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    pointer-events: all;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.lds-ring>div {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 100%;
    border: 3px solid #fff;
    border-color: #2cb1a4 transparent transparent;
    animation: lds-ring 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.lds-ring>div:nth-child(2) {
    animation-delay: 0.195s;
}

.lds-ring>div:nth-child(3) {
    animation-delay: 0.39s;
}

.lds-ring>div:nth-child(4) {
    animation-delay: 0.585s;
}

::-ms-reveal {
    display: none;
}

/* Cross button in top middle portion of forget pwd modal - should be in Top-Right side. */
#closeModalReset {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}




.enquiryModal {
     padding: 0 !important;
 }




.enquiryModal {
    overflow-y: auto;
    z-index: 1000;
    top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
     position: fixed;
     display: none;
 }
 .quickEnquiryModalContainer {
     padding: 1rem;
     transition-duration: 300ms;
     transition-property: opacity;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     justify-content: center;
     align-items: center;
     min-height: 100%;
     display: flex;
     background-color: rgba(0, 0, 0, 0.8);
 }
 .quickEnquiryflexContainer {
     display: block;
     padding-top: 0.5px;
 }
 .quickEnquiryModalBody {  
     max-width: 49rem;
     margin-left: auto;
     margin-right: auto;
     padding-top: 1rem;
     padding-bottom: 1rem;
 }
 .quickEnquiryModalContent {
     background: radial-gradient(rgb(22, 22, 22),rgb(25, 30, 33));
     border-radius: 1rem;
     position: relative;
     box-shadow: 7px 7px 20px 0px #0e0e0e;
 }
 .quickEnquiryLeftInfo {
     background-image: linear-gradient(to bottom, #076c61, #000000);
     overflow: hidden;
     border-radius: 1rem;
     margin: 0.5rem;
     position: relative;
     padding: 2rem;
     text-align: center;
 }
 .quickEnquiryLeftInfo h3 {
     font-size: 1.4rem;
     line-height: 2rem;
     font-weight: 700;
     color: white;
     margin: 0;
 }
 .quickEnquiryLeftInfo p {
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: 100;
     max-width: 48rem;
     margin: 0;
     color: #bdbdbd;
     margin-top: 10px;
 }
 .quickEnquiryLeftInfo span {
     margin-top: 1rem;
     color: #ffffff;
     display: none;
 }
 .quickEnquiryLeftInfo span a {
     text-decoration-line: underline;
     color: #bdbdbd;
 }
 .quickEnquiryLeftInfo i {
     margin-right: 0.5rem;
 }
 .quickEnquiryRightInfo {
     padding-top: 1.5rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     position: relative;
     width: 100%;
 }
 .quickEnquiryForm div {
     margin: 10px 0;
 }
 .quickEnquiryForm label {
     margin-top: 2px;
     display: block;
     color: #c3c3c3;
     font-size: 16px;
 }
 .quickEnquiryForm input {
     display: block;
     padding: 8px;
     border: 0;
     border-bottom: 2px solid #727272;
     width: 100%;
     font-size: 16px;
     color: #d5d5d5;
     background: transparent;
 }
 .quickEnquiryForm input::-moz-placeholder {
  color: #828282;  
 }
 .quickEnquiryForm input::placeholder {
  color: #828282;  
 }
 .quickEnquiryForm textarea {
     display: block;
     padding: 8px;
     border: 0;
     border-bottom: 2px solid #727272;
     width: 100%;
     font-size: 16px;
     height: 50px;
     resize: none;
     background: transparent;
     color: #d5d5d5;
 }
 .quickEnquirySubjectItem {
     margin:0 !important;
     margin-top: 10px !important;
 }
 .quickEnquirySubjectItem {
     display:flex; flex-wrap:nowrap;
     color: #d5d5d5;
 }
 .quickEnquiryForm textarea::-moz-placeholder {
    color: #828282;  
 }
 .quickEnquiryForm textarea::placeholder {
    color: #828282;  
 }
 .quickEnquiryForm div input:focus {
     outline: none;
     border-bottom: 2px solid #1ccbad;
 }
 .quickEnquiryForm div textarea:focus {
     outline: none;
     border-bottom: 2px solid #1ccbad;
 }
 .quickEnquiryButtonSec {
     display: flex;
     padding-bottom: 1.5rem;
     padding-top: 1.25rem;
     gap: 0.75rem;
     justify-content: flex-end;   
 }
 .quickEnquiryButtonSec button {
     padding: 6px 15px;
     border: none;
     box-shadow: 5px 5px 15px #141414;
     border-radius: 6px;
     background: #606060;
     color: white;
 }
 #quickContact-submit {
    background-color: #009688;
    color:#ffffff;
 }
 .quickEnquiryButtonSec button:active {
    transform: scale(0.95);
 }
 .quickEnquiryButtonSec .close:hover {
    background-color: #3e3e3e;
 }
 .quickEnquiryButtonSec #quickContact-submit:hover {
    background-color: #00796d;
 }
 .quickEnquirySubjectSec {
     display: flex;
     flex-wrap: wrap;
     -moz-column-gap: 10px;
          column-gap: 10px;
    
 }
 .EnquiryRadioBtn {
      width: 17px !important;
 }
 .EnquiryRadioBtn {
     display:inline-block;
      margin-right:4px;
      height: 17px;
      /* width: min-content !important; */
      margin-top: 5px;
 }
 .modalClose {
     position: absolute;
     right: 15px;
     top: 15px;
     padding: 6px;
     background-color: rgba(117, 117, 117, 0.62);
     font-size: 20px;
     color: #afafaf;
     z-index: 1;
     cursor: pointer;
     border-radius: 50%;
 }
 .modalClose:hover {
     color: #afafaf;
     background-color: rgba(117, 117, 117, 0.9);
 }
 #notification_sec {
    position: absolute;
    top: 60px;
    width: calc(100% - 20px);
    max-width: 480px;
    min-height: 10px;
    right: 10px;
    max-height: 90vh;
 }
 .notification_success, .notification_warning, .notification_error, .notification_info {
    width: 100%;
    padding: 7px 7px 12px 7px;
    background-color: rgba(9, 17, 21, 0.95);
    border-radius: 10px;
    display: flex;
    /* gap: 5px; */
    flex-wrap: nowrap;
    margin: 5px 0;
    font-size: 14px;
    position: relative;
 }
 .notification-content {
    flex-grow: 1;
 }
 .notification_heading { 
    margin-left: 6px;
    vertical-align: middle;
 }
 .notification_success .notification_heading {
    color: #26a69a;
 }
.notification_text {
    color: #607d8b;
    line-height: 20px;
     overflow: hidden;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-left: 6px;
 }
 .notification_error .notification_heading {
    color: #ad534d;
 }
 .notification_warning .notification_heading {
    color: #be8a3e;
 }
 .notification_info .notification_heading {
    color: #518bba;
 }
 .notification-track {
    width: 100%;
    position: relative;
    padding: 9px 0;
    overflow: hidden;
    display: -webkit-flex;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 .notification-track  .notification-track-img {
    width: 80px;
    height: 45px;
    border-radius: 6px;
    float: left;
    -o-object-fit: cover;
       object-fit: cover;
    margin-right: 5px;
        
 }
 .notification-track  .notification-track-name {
    padding-bottom: 3px;
    color: #8daaaa;
    margin: 0;
    line-height: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #252525;
    height: 44px;
    font-size: 12px;
 }
 .notification-track  .notification-track-name span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
 }
 #lovedTrackSearchField, #cd_chord_search {
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #434343;
    border-radius: 6px;
    -khtml-border-radius: 6px;
    background: #2f2f2f;
    color: #e2e2e2;
    padding: 6px 30px 6px 10px;
    position: relative;
    height: 35px;
 }
 .cd_chord_search_cont {
    max-width: 250px;
    margin: auto;
    position: relative;
 }
 #cd_chord_search {
   margin: 10px auto 0;
    background: #252525;
    border: 2px solid #2f2f2f;
    color: #BABBBB;
    outline: none;
 }
 #cd_chord_search::-moz-placeholder {
    color: #9A9A9A;
 }
 #cd_chord_search::placeholder {
    color: #9A9A9A;
 }
 /* #cd_chord_search:hover, #cd_chord_search:focus {
    border-color: #4f4f4f;
    background: #2f2f2f;
    outline: none;
} */

 #lovedTrackSearchField:hover, #lovedTrackSearchField:focus {
    border: 1px solid #939393;
    background: #2f2f2f;
    outline: none;
 }
 #lovedTrackSearchClear, #cd_chord_search_clear {
    position: absolute;
    color: #939393;
    right: 5px;
    top: 5.5px;
    display: none;
    cursor: pointer;
    border-radius: 3px;
}
#cd_chord_search_clear {
    top: 11.5px;
    right: 1px;
    height: 32px;
    width: 32px;
    padding: 5px;;
    color: #BABBBB;
}
#lovedTrackSearchClear:hover {
    color: #8e8e8e;
    background-color: #4b4b4b;
} 
#cd_chord_search_clear:hover {
    background-color: #2f2f2f;
} 
#cd_chord_search_clear:active {
    padding: 7px;
    font-size: 20px;
} 
.premium_flug {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfaV80ODIyXzE2MzczKSI+CjxwYXRoIGQ9Ik00OS4xNDY0IDQ5LjE0NjRMMC44NTM1NTMgMC44NTM1NTNDMC41Mzg1NzEgMC41Mzg1NzEgMC43NjE2NTQgMCAxLjIwNzExIDBINDEuMzA0M0M0Ny45MDQ0IDAuMDA4MTA3NjkgNTAgNC4yNDUyOCA1MCAxMy4yMDc1VjQ4Ljc5MjlDNTAgNDkuMjM4MyA0OS40NjE0IDQ5LjQ2MTQgNDkuMTQ2NCA0OS4xNDY0WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQ4MjJfMTYzNzMpIi8+CjwvZz4KPHBhdGggZD0iTTI4Ljk3MzMgMTguODAyMUMyOC40ODUzIDE4LjgwMjEgMjguMDY4NiAxOC40NDk4IDI3Ljk4NzMgMTcuOTY4NkwyNi44MDEyIDEwLjk0NzdDMjYuNjM5OSA5Ljk5Mjg1IDI3Ljc5NDMgOS4zODkxMSAyOC40ODY1IDEwLjA2NjNMMzAuMzk5NCAxMS45Mzc4QzMwLjg3NDEgMTIuNDAyMyAzMS42NjE0IDEyLjI4MzQgMzEuOTc3OCAxMS42OTk1TDMzLjY4NTYgOC41NDg3NkMzNC4wNjM5IDcuODUwNzkgMzUuMDY1NiA3Ljg1MDc5IDM1LjQ0NCA4LjU0ODc2TDM3LjE1MTcgMTEuNjk5NUMzNy40NjgyIDEyLjI4MzQgMzguMjU1NSAxMi40MDIzIDM4LjczMDIgMTEuOTM3OEw0MC42NDMgMTAuMDY2M0M0MS4zMzUyIDkuMzg5MTEgNDIuNDg5NyA5Ljk5Mjg1IDQyLjMyODQgMTAuOTQ3N0w0MS4xNDIzIDE3Ljk2ODZDNDEuMDYxIDE4LjQ0OTggNDAuNjQ0MiAxOC44MDIxIDQwLjE1NjIgMTguODAyMUgyOC45NzMzWk00MS4wMDE1IDIxLjc3MDlDNDEuMDAxNSAyMi4zNjQ3IDQwLjYzMzcgMjIuNzYwNSA0MC4wODE5IDIyLjc2MDVIMjkuMDQ3NkMyOC40OTU5IDIyLjc2MDUgMjguMTI4MSAyMi4zNjQ3IDI4LjEyODEgMjEuNzcwOVYyMS43NzA5QzI4LjEyODEgMjEuMjI0MyAyOC41NzEyIDIwLjc4MTMgMjkuMTE3NyAyMC43ODEzSDQwLjAxMTlDNDAuNTU4NCAyMC43ODEzIDQxLjAwMTUgMjEuMjI0MyA0MS4wMDE1IDIxLjc3MDlWMjEuNzcwOVoiIGZpbGw9IndoaXRlIi8+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2lfNDgyMl8xNjM3MyIgeD0iMC43MDcwMzEiIHk9IjAiIHdpZHRoPSI0OS4yOTMiIGhlaWdodD0iNTMuMjkzOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSIxMCIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuMyAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzQ4MjJfMTYzNzMiLz4KPC9maWx0ZXI+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl80ODIyXzE2MzczIiB4MT0iMjUiIHkxPSIwIiB4Mj0iMjUiIHkyPSI1MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMDAzMTI0ODciIHN0b3AtY29sb3I9IiMxMERCRkYiLz4KPHN0b3Agb2Zmc2V0PSIwLjc4MTQzMSIgc3RvcC1jb2xvcj0iIzEwNzg2QyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=);
	width: 50px;
    height: 50px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
}
.modal-content.reqmodcont {
    max-height: calc(100vh - 100px);
    background-color: #252525;
    text-align: inherit;
    max-width: 600px;
    border-radius: 5px;
}
.material-icons.reqmodicon {
    vertical-align:-5px;
    font-size: 24px;
    color: rgb(230, 239, 241);
}
.material-icons.reqmodupdate {
    margin-left: 5%;
    vertical-align: -4px;
    font-size: 20px;
    color: #4dd0e1;
    cursor: pointer;
}
.userLovedTracks.remodtrkwrap {
    clear: both;
    overflow: hidden;
    overflow-y: auto;
    display: block;
    height: -webkit-fill-available;
    height: calc(100vh - 182px);
    background: #252525;
}


/* glider slider css start*/
.login_slider_mob {
    margin-top: 20px !important;
}
.login_slider_mob {
    max-width: 300px;
    width:100%;
}
.login_slider_desktop {
    max-width: 300px;
    width:100%;
    display:none;
}
.login_slider_desktop h2 {
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    line-height: 24px;
    margin-top: 15px;
}
.login_slider_desktop p {
    color: #BABBBB;
    font-size: 16px;
    line-height: 22px;
    margin: 10px 0;
    text-align:center;
}
.login_slider_mob img {
   width: auto !important;
}
.login_slider_mob img {
   max-height: 120px;
   margin: auto;
}
.login_slider_mob h3 {
    font-size: 18px;
    color: #ffffff;
    line-height: normal;
    text-align: center;
    margin: 5px 0;
}
.login_slider_mob p {
    color: #BABBBB;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 10px;
    text-align: center;
}
.glider-contain {
    margin: 0 auto;
}
.glider-track {
    align-items: flex-end;
}
.glider-item {
    padding: 0 25px;
    text-align:center;
}
.glider-slide img {
    width: 100%;
}
#chorduTutorialModal .glider-slide img, #notesTutorialModal .glider-slide img {
    width: 100%;
    max-width: 260px;
}
.glider-prev, .glider-next {
    display:none;
}
#subpremModal .glider-dots {
    margin: 0 4px !important;
}
.glider-dot {
    width: 20px !important;
    height: 8px !important;
    margin: 3px !important;
    color: #4f4f4f !important;
    background: #3f3f3f !important;
}
#chorduTutorialModal .glider-track, #notesTutorialModal  .glider-track {
    align-items: center;
}
.sub_modal_slider .glider-dot {
    width: 14px !important;
    height: 6px !important;
    margin: 2px !important;
    color: #4f4f4f !important;
    background: #3f3f3f !important;
}
.login_slider_mob .glider-dot {
    width: 20px !important;
    height: 4px !important;
    margin: 2px !important;
    color: #4f4f4f !important;
    background: #3f3f3f !important;
}
.glider-dot:hover, .glider-dot:focus, .glider-dot.active {
    background: #21a783 !important;
}
 .glider {
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
  }
 .glider::-webkit-scrollbar {
    display:none;
  }
  .glider::-webkit-scrollbar-thumb {
    display:none;
  }
#sub_modal_carousel_btn {
    margin-top: 20px;
}

.sub_modal_slider img {
    width: auto !important;
 }

.sub_modal_slider img {
    max-height: 160px;
    margin: auto;
 }
.sub_modal_slider h2 {
   color: #FFFFFF;
   font-size: 16px;
   line-height: normal;
   margin: 10px 0;
   font-weight: normal;
 }
 .sub_modal_slider h2 b, #regOnboardingModal .reg_ob_screen b, .notes_tutorial_slider p b, .chordu_tutorial_slider p b, #lyricsHintModal p b {
    color: #1DB8A6;
    font-size: 110%;
 }
 #regOnboardingModal .modal-content {
    background-color:#252525;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #3f3f3f;
    height: 100%;
    min-height:594px
 }
 #regOnboardingModal p {
    text-align: center !important;
 }
 .sub_modal_slider {
    height:310px;
    overflow:hidden;
 }
 .chordu_tutorial_slider, .notes_tutorial_slider {
    height:auto;
    overflow:hidden;
 }
 .sub_modal_slider .glider-item {
    padding: 0 5px;
 }
.reg_ob_h3 {
    font-size: 26px;
    color: #BABBBB;
}
.reg_ob_p {
    text-align: center !important;
}
.reg_ob_p {
    color: #BABBBB;
    line-height: 20px;
    font-size: 16px;
    margin: 20px 0 15px;
}
.reg_ob_user_stage {
    display:flex;
    justify-content: center;
}
.reg_ob_user_instrument {
    flex-wrap: wrap;
    flex-direction: row;
    margin: auto;
    display:flex;
    justify-content: center;
}
.reg_ob_user_stage_items, #reg_ob_final_btn {
    display: inline-block;
    border-radius: 6px;
    margin: 4px;
    padding: 5px 0;
    background: #2f2f2f;
    cursor: pointer;
    text-align: center;
    border: none;
    color: #babbbb;
    font-size: 16px;
    flex-grow: 1;
}
#reg_ob_final_btn.reg_ob_faded {
    opacity:0.5;
    pointer-events: none;
}
.reg_ob_user_stage_items:hover, .reg_ob_user_instrument_item:hover {
    background-color: #00796B;
    color: #ffffff;
}
 #reg_ob_final_btn:hover {
    background: #00796B;
}
.reg_ob_user_stage_items:active, .reg_ob_user_instrument_item:active, #reg_ob_final_btn:active {
    transform: scale(.95);
}
.reg_ob_user_instrument_item {
    display: inline-block;
    border-radius: 6px;
    margin: 4px;
    padding: 25px 0;
    background: #2f2f2f;
    cursor: pointer;
    text-align: center;
    border: none;
    color: #babbbb;
    font-size: 16px;
    flex-grow: 1;
    width: 78px;
    line-height: normal;
}
.reg_ob_instrument_svg {
    vertical-align: text-top;
    width: 16px;
    height: auto;
    display: block;
    margin: auto;
    margin-bottom: 5px;
    pointer-events: none;
}
#reg_ob_final_btn {
    width: 100%;
    margin: auto;
}
.reg_ob_selected {
    background: #0B4440 !important;
}
.reg_ob_selected {
    border-color: #003639;
    /* pointer-events: none; */
}
.reg_ob_screen {
    height: calc(100% - 45px);
    display:none;
    /* padding-bottom: 30px; */
    
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    /* text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
}
.reg_ob_screen_view {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.reg_ob_screen .reg_ob_screen_svg {
    height: auto;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}
#tutorial_modal_btn path {
    fill:#0B4440;
}
#tutorial_modal_btn text {
    fill:#BABBBB;
}
#tutorial_modal_btn:hover > path {
    fill:#00796B;
}
#tutorial_modal_btn:hover > text {
    fill:#ffffff;
}
#chorduTutorialModal, #notesTutorialModal, #regOnboardingModal, #lyricsHintModal, #chordDirectorymodal, #subpremModal { 
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}
#chorduTutorialModal::-webkit-scrollbar, #notesTutorialModal::-webkit-scrollbar,#regOnboardingModal::-webkit-scrollbar, #lyricsHintModal::-webkit-scrollbar, #chordDirectorymodal::-webkit-scrollbar, #subpremModal::-webkit-scrollbar, #chordDirectorymodal::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.glider_nav_btn {
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: static;
    position: initial;
    background: none;
    padding: 0;
    font-size: 16px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    color: #babbbb;
    line-height: 1;
    transition: opacity .5s cubic-bezier(.17,.67,.83,.67), color .5s cubic-bezier(.17,.67,.83,.67);
    max-width: 50%;
}
.glider_nav_btn .tutorial_btn {
    display:inline-block;
    color: #9a9a9a;
}
.glider_nav_btn:hover .tutorial_btn {
    display:inline-block;
    color: #babbbb;
}
.glider_nav_btn .next_tutorial, .glider_nav_btn .previous_tutorial {
    display: block;
    margin-top: 5px;
    color: #babbbb;
}
.glider_nav_btn:hover .next_tutorial, .glider_nav_btn:hover .previous_tutorial {
    color: #ffffff;
}
.glider_nav_btn.disabled {
  pointer-events: none !important;
}
.glider_nav_btn.disabled {
  opacity: .25;
  color: #666;
  cursor: default;
}
#loginPageModal .glider_nav_btn.disabled, #subpremModal .glider_nav_btn.disabled {
  pointer-events: none !important;
}
#loginPageModal .glider_nav_btn.disabled, #subpremModal .glider_nav_btn.disabled {
  opacity: 0;
  color: #666;
  cursor: default;
}
#chorduTutorialModal p, #notesTutorialModal p, #lyricsHintModal p, #regOnboardingModal p {
    margin-bottom: 10px 0 !important;
}
#chorduTutorialModal p, #notesTutorialModal p, #lyricsHintModal p, #regOnboardingModal p {
    color: #ffffff;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    line-height: 22px;
}
#chorduTutorialModal h1 {
    font-size: 20px;
    color: #babbbb;
    line-height: normal;
    line-height: initial;
    margin-bottom: 0;
}
.ob_modal_link_cont {
    color:#9a9a9a;
    text-align:left;
    background-color: rgba(31, 31, 31, 0.6);
    padding: 10px;
    border-radius: 6px;
    margin: 5px 0;
    line-height: 22px;
    display: flex;
    width: 100%;
}
.ob_modal_link_cont a {
    color:#babbbb !important;
}
.ob_modal_link_cont a {
    display:block;
    text-decoration: underline;
    margin-top: 5px;
}
.ob_modal_link_cont a:hover {
    display:block;
    color:#ffffff;
    text-decoration: underline
}
.ob_modal_link_cont .ob_hide_btn {
    display: block;
    border-radius: 4px;
    background: #2f2f2f;
    cursor: pointer;
    text-align: center;
    border: none;
    color: #babbbb;
    font-size: 16px;
    height: 26px;
    width: 40px;
    padding: 0;
}
.ob_modal_link_cont .ob_hide_yes_btn, .ob_modal_link_cont .ob_hide_no_btn  {
    background-color: transparent;
    outline: none;
    border-radius: 6px;
    color: #BABBBB;
    font-size: 14px;
    padding: 2px 5px;
    align-items: center;
    border: 2px solid #3f3f3f;
    margin-top: 4px;
}
.ob_modal_link_cont .ob_hide_btn:hover {
    background: #3a3a3a;
    color: #ffffff;
}
.ob_modal_link_cont .ob_hide_yes_btn:hover, .ob_modal_link_cont .ob_hide_no_btn:hover {
    background-color: #2f2f2f;
    color: #ffffff;
    display: inline-block;
}
.ob_modal_link_cont a:active, .ob_modal_link_cont .ob_hide_btn:active, .ob_modal_link_cont .ob_hide_yes_btn:active, .ob_modal_link_cont .ob_hide_no_btn:active {
    transform: scale(.95);
}
.how_to_modal_content {
    max-width:400px;
    background-color:#252525;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #3f3f3f;
}
.glider_nav {
    font-size: 30px !important;
}
.glider_nav {
    height: 24px;
    vertical-align: middle;
    color: #3F3F3F;
}
.glider_nav:hover {
    color: #9a9a9a;
}

.login_slider_mob .glider_nav {
    font-size: 28px !important;
}

.login_slider_mob .glider_nav {
    height: 24px;
    vertical-align: middle;
}

.chordu_tutorial_login_btn {
    background: #0B4440;
    border: 2px solid #2f2f2f;
    border-radius: 10px;
    color: #cacaca;
    height: 38px;
    display:block;
    margin:auto;
    padding: 0 10px;
}

.chordu_tutorial_login_btn:hover {
    background: #00796B;
    color: #ffffff;
}

.chordu_tutorial_login_btn:active {
    transform: scale(0.95);
}

/* Temporary Loader For Tutorial Modals Need to be removed later */
.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

@media (max-width: 350px) {
    #welcome_text {
        font-size: 22px !important
    }
}

@media (max-width: 380px) {
    .removeFev {
        height: 79px;
        padding: 26px 10px
    }

    .hide-380 {
        display: none;
    }
    .reg_ob_user_stage_items {
        margin: 4px;
        font-size: 14px;
    }
    .reg_ob_user_instrument_item {
        font-size: 14px;
        width: 74px;
        padding: 15px 0;
    }
    #regOnboardingModal .modal-content {
        min-height:590px
     }
}

@media (max-width: 430px) {
    .hide_430 {
        display: none !important
    }

    #footer .footer-links {
        font-size: 14px;
    }

    #footer .footnote {
        font-size: 14px;
    }
}

@media screen and (min-width: 48em) {
    .header h1 {
        font-size: 28px;
        font-weight: 600;
        margin: 0
    }

    .header .material-icons {
        font-size: 28px
    }

    .chord_header h1,
    .header h2 {
        font-size: 135%
    }

    .content p {
        font-size: 1.125em
    }

    .code {
        margin-left: auto;
        margin-right: auto;
        border-left-width: 1px;
        border-right-width: 1px
    }
}

@media (min-width: 58em) {
    #layout {
        left: 0
    }

    #menu {
        right: -250px;
        z-index: 9
    }

    .menu-link {
        position: fixed;
        font-size: 18px
    }

    #topnavbar {
        z-index: 10;
        text-align: inherit
    }

    #topnavbar .title-area {
        float: left
    }
}

@media (max-width: 629px) {
    #topBarUserImg {
        display: none
    }
}

@media (max-width: 58em) {
    #layout.active {
        position: relative
    }
}
@media (min-width: 576px) {
    .cd_chord_search_cont {
        max-width: 460px;
     }
}
@media (min-width: 640px) {
    .quickEnquiryModalBody {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    div#termsSection {
        padding: 0 10px;
    }

    div#loginModalImgCont {
        display: block;
    }

    div#loginSection {
        flex-direction: row;
        width: 610px;
        height: 590px;
        border-radius: 10px;
        overflow: hidden;
        margin: 40px auto 20px;
    }

    div#loginModalImg {
        max-height: 100%;
    }

    /* div#login-modal-content {
        width: 100%;
    } */

    div#loginImgOverlapper {
        display: block;
    }
    div#forgotpassword {
        width: 430px;
        height: auto;
        margin: 70px auto 40px;
    }
    div#loginFormTitle {
        height: auto;
        pointer-events:none;
        display: flex;
    }
    /* div#loginFormTitle img {
        display:none;
    } */
     .sub_modal_slider img {
        max-height: 200px;
     }
     #subpremModal .modal-content {
        max-width: 500px;
     }
     #sub_modal_carousel_btn {
        margin-top: 25px;
    }
    .sub_modal_slider h2 {
        margin: 10px 0 0;
    }
    .how_to_modal_content {
        max-width:450px;
    }
    .login_slider_mob {
        display:none;
    }
    .login_slider_desktop {
        display:block;
    }
    .glider_sub_modal .glider-dot {
        width: 25px !important;
        height: 8px !important;
        margin: 3px !important;
    }
    #chorduTutorialModal h1 {
        font-size: 22px;
    }
}
@media (min-width: 730px) {
    .quickEnquiryLeftInfo span {
        display: flex;
    }
    .quickEnquiryLeftInfo {
    width: 40%;
    text-align: left;
    }
    .quickEnquiryflexContainer {
        display: flex;
    }
    .quickEnquiryRightInfo {
        width: 60%;
    }
    div#heroDialog {
        padding: 0 30px;
    }

    div#loginSection {
        flex-direction: row;
        width: 700px;
        height: 600px;
        border-radius: 10px;
        margin: 50px auto 25px;

    }
}

@media (min-width: 992px) {
    div#loginSection {
        flex-direction: row;
        width: 800px;
        height: 664px;
        border-radius: 10px;
        margin: 70px auto 30px;
    }

}
@media (min-width: 1100px) {
    .quickEnquiryLeftInfo {
        padding: 2rem;
    }
    .quickEnquiryModalBody {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .how_to_modal_content {
        max-width:500px;
    }
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(4674f8ded773cb03e824.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(cff684e59ffb052d72cb.woff2) format('woff2'),
       url(83bebaf37c09c7e1c3ee.woff) format('woff'),
       url(5e7382c63da0098d634a.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Hero Image Section Start */

.feat_area_cont {
	height: 380px;
	width: 100%;
	margin-left: inherit;
	padding-top: 55px
}
.feat_area_content {
	position: relative;
    width: 90%;
    margin: 0 auto;
	padding-top: 46px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.home-hero-img {
	width: 100%;
	height: auto;
	display: none;
	cursor: pointer;
}
.flex-div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: -10px;
}
.feat_area {
	text-align: center;
	background-size: cover;
	background-position: center 42%;
	background-color: #151515;
	height: 450px;
	width: 100%;
	position: relative;
}
/* .feat_area div:first-child {

	} */
.feat_area_overly {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-image: radial-gradient(black -35%, transparent 500%);
	/* background-color: rgb(0 0 0 / 60%); */
}
#welcome_text {
	text-align: left;
	margin-top: -10px;
}
.home_search_btn {
	height: 34px;
    margin-left: -37px;
    position: absolute;
    top: 25.5px;
    color: #e0e0e0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 1px black;
    background: #058377;
    padding: 3px;
    width: 34px;
}
.home_search_btn:hover {
	background: #067369;
}
.home_search_btn:active {
	transform: scale(.95);
}
#home_search .home_search_text {
	font-size: 16px;
    color: #cbcbcb;
    text-shadow: 0 0 3px black;
    margin-bottom: -5px;
	line-height: 20px;
	text-align: left;
	margin-left: 2px;
}
#welcome_text h1 {
	font-size: 32px;
    color: #dbdbdb;
    letter-spacing: .5px;
    line-height: 40px;
}
#welcome_text h1 .title_u_style {
  background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-image: linear-gradient(45deg, #ffffff, #27A3BB, #bd9d0b, #25B5A4);
	animation: ugradient 3s ease-in-out infinite alternate-reverse;
	font-size: 110%;
	display: inline-block;
    vertical-align: -2px;
}
#welcome_text h1 .title_small {
	font-size: 80%;
	font-weight: normal;
}
@keyframes ugradient {
	0% {
		background-position: 0% 100%;
	}
	50% {
		background-position:  50% 50%;
	}
	100% {
		background-position: 100% 0%;
	}
}
.home_text_highlight {
flex-grow: 1;
}

#home_search .home_search_text span {
	display: none;
}
#welcome_text h2 {
	font-size: 22px;
	color: #ffffff;
	letter-spacing: 2px;
	text-shadow: 0 0 3px #000000;
}
.home_q_guide_btn {
	color: #9a9a9a;
    cursor: pointer;
    margin: 20px 0 0;
    font-size: 16px;
	display: none;
	text-decoration: underline;
}
.home_q_guide_btn_mob {
	color: #9a9a9a;
	margin: 10px 0 0;
    font-size: 16px;
	cursor: pointer;
	display: block;
	text-decoration: underline;
	width: -moz-fit-content;
	width: fit-content;
	padding: 0 5px;
}
.home_q_guide_btn i, .home_q_guide_btn_mob i {
	padding: 3px 3px;
    border-radius: 50%;
    border: 1px solid #babbbb;
    margin-left: 10px;
    font-size: 14px;
    vertical-align: middle;
}
.home_q_guide_btn:hover, .home_q_guide_btn_mob:hover {
	color: #ffffff;
}
.home_q_guide_btn:hover i, .home_q_guide_btn_mob:hover i {
	border: 1px solid #ffffff;
}
/* Hero Search Bar Start */
.home_q_guide_btn:active,  .home_q_guide_btn_mob:active {
	transform: scale(.95);
}

#home_search {
	position: relative;
	height: 55px;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	margin-top: 25px;
}

#search-input,
#search-input-home {
	margin-bottom: 0;
	box-shadow: none;
	border-radius: 12px;
	padding-left: 1em;
	padding-right: 2.8em;
	background: #eaeaea;
	border: 1px solid #a7a7a7;
	color: #4e5860;
	font-size: .9em;
	height: 40px;
	margin-top: 7.5px;
	width: 100%;
}
#search-input-home {
	box-shadow: 0 0 1px black;
	padding-right: 50px;
}
#search-input:focus,
#search-input-home:focus,
button:focus {
	outline-width: 0
}

#search-input::-moz-placeholder, #search-input-home::-moz-placeholder {
	color: #989898
}

#search-input::placeholder,
#search-input-home::placeholder {
	color: #989898
}

/* Hero Search Bar End */

/* Hero Image Section End */

[placeholder] {
	text-overflow: ellipsis
}

/* Should be part of common css start */
#search-button {
	position: absolute;
	top: 7.5px;
	color: #8d9aa5;
	height: 40px;
	margin-left: -41px;
	border: none;
	background: rgba(0, 0, 0, 0);
	padding: 0;
	border-left: 1px solid #d5d5d5
}

#search-button:focus {
	outline-width: 0
}

/* Should be part of common css end */

/* Site Content Section start */

#site_container {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

#searchResults {
	padding-top: 55px;
	width: 100%
}
.searchResultLeftAlign {
	float: none;
}
.playListContainer {
	background: #fdfdfd;
	margin: 20px 10px;
	padding: 0 5px;
	border-radius: 4px;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.2)
}

.playListContainer .view_more {
	float: right;
	padding: 0 10px;
	transform: translateY(-30%);
	background: #d3d3d3;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3)
}

.playListContainerHeader {
	text-align: center;
	top: 0;
	transform: translateY(-50%);
	/* width: calc(100% - 20px) */
}

.playListContainerHeader a {
	font-size: 18px;
	margin: 0;
	font-weight: 600;
	background: #058377;
	padding: 7px;
	border: 1px solid;
	border-radius: 4px;
	color: #dee7eb;
	box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6)
}

.track {
	width: 100%;
	position: relative;
	height: 92px;
	display: inline-block;
	padding: 1px 5px
}

.track a {
	color: #4a4a4a
}

#lovedTracksModal #similarTracks .track {
	width: 100%!important
}

.timg {
	width: 160px;
	float: left;
	margin-right: 10px;
	max-height: 90px
}

.timg img {
	width: 160px;
	max-height: 90px;
	border-radius: 9px
}

.timg:hover {
	cursor: pointer
}

.timg div {
	width: 160px;
	height: 90px;
	border-radius: 9px;
	background-size: cover;
	background-color: #000;
	position: relative;
}

.tdur {
	position: absolute;
	left: 5px;
	bottom: 0;
	color: #f0f8ff;
	padding: 0 4px;
	margin: 3px;
	font-size: 14px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 5px
}

.tinfo {
	width: calc(100% - 171px);
	float: right;
	height: 90px;
	border-bottom: 1px solid #f6f6f6;
	overflow: hidden;
	padding: 5px 0;
	font-size: 18px
}

.tname {
	font-size: 16px!important
}

.tname {
	margin: 0;
	overflow: hidden;
	width: 100%;
	max-height: 44px;
	text-overflow: ellipsis;
	color: #757575;
	line-height: 22px;
	position: relative;
	float: left;
	display: inline-block;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

.tname.link {
	color: #4a4a4a
}

.chrd_action {
	white-space: nowrap;
	overflow: hidden;
	/* max-width: 100%; */
	width: 100%;
	height: 36px;
	text-overflow: ellipsis;
	padding: 5px 5px 0 1px;
	line-height: 26px;
	position: relative;
	float: left;
	display: inline-block;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical
}

.chrd_snip {
	font-weight: 600;
	color: #de6944;
	display: inline-block;
	height: 26px;
	width: 100%;
}
.chrd_snip p:nth-child(odd) {
	color: #388E3C
}

.chrd_snip p::first-letter {
	font-size: 16px
}

.chrd_snip p {
	margin: 0 3px;
	color: #00796B;
	float: left;
	font-size: 12px
}
.rq_progress_bar {
	height: 8px;
    margin: 9px 0;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 4px 2px rgba(5, 5, 5, 0.23);
    overflow: hidden;
    float: left;
    width: calc(100% - 40px);
}
.rq_progress_bar_filed {
	height: 100%;
    background-color: #00796B;
    border-radius: 2px;
}
.rq_progress_percent {
	float: left;
    margin-left: 10px;
    font-size: 14px;
	color: #00796B;
}
/* Site Content Section end */

/* Request chords section start */

.est_chrd {
	height: 28px;
	line-height: 24px;
	border-radius: 4px;
	border: 1px solid rgba(129, 129, 129, 0.6);
	color: #464646;
	background-color: rgba(198, 210, 208, 0.11);
	font-weight: 600;
	outline: none;
	box-shadow: 1px 1px 1px 0 rgba(129, 129, 129, 0.6);
	transition: background-color 300ms ease-out
}

.est_chrd:hover {
	background-color: #d2fffb
}

#similarTracks .est_chrd {
	background: #d6d6d6;
	border: 1px solid #595959;
	box-shadow: 1px 1px 5px 0 #000;
	border-radius: 6px
}

#similarTracks .est_chrd:hover {
	background-color: rgba(185, 255, 255, 0.88)
}

#similarTracks .tinfo, .uploadList .tinfo {
	border-color: #313131
}

/* Request chords section end */

/* Artist section start */

#sidebar {
	display: block;
	width: 100%;
}
.sidebarRightAlign {
	float: none;
}

.side_header {
	padding: 1px 5px;
	font-size: 25px;
	font-weight: 600;
	line-height: 40px;
	margin: 12px 5px;
	color: #3f6172;
	text-align: left;
	border-bottom: 1px solid #ececec;
	box-shadow: 1px 1px 4px 0 #ececec
}

.elem_artist_container {
	display: inline-block;
	text-align: center
}

.elem_artist {
	width: 50%;
	max-width: 103px;
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	margin: 3px 7px;
}

.elem_artist img {
	width: 103px;
	height: 103px
}

.elem_artist .label {
	position: absolute;
	left: 0;
	bottom: 13px;
	line-height: 20px;
	width: 100%;
	padding-left: 4px;
	padding-right: 4px;
	background: rgba(0, 0, 0, 0.35);
	text-align: center;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	color: #f5fbff;
	font-size: 12px;
	text-shadow: 0 0 2px #f5fbff;
	font-family: inherit;
	text-transform: capitalize;
	background-image: url(3734330bff21fa8dc757.png);
	background-position: top center
}
.elem_artist img,
.elem_artist {
	border-radius: 8px;
}
.elem_artist:hover img,
.elem_artist:hover {
	transform: scale(1.1);
	z-index: 2;
	border: 1px solid rgba(129, 129, 129, 0.6);
	box-shadow: 1px 1px 3px 1px rgba(129, 129, 129, 0.6);
	border-radius: 10px
}
.mask {
	height: 40px;
	position: relative;
	overflow: hidden;
	margin-top: 6px;
  }
  
  .mask span {
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: 40px;
	padding-bottom: 6px;
	font-size: 24px;
	letter-spacing: -1px;
	/* background-size: 100% 100%;
	-webkit-background-clip: text;
	background-clip: text; 
	-webkit-text-fill-color: transparent;
	background-repeat: no-repeat;*/
  }
  
  .mask span[data-show] {
	transform: translateY(-100%);
	transition: .5s transform ease-in-out;
  } 
  .mask span[data-up] {
	transform: translateY(-200%);
	transition: .5s transform ease-in-out;
  } 
  .mask span:nth-child(1), .mask span:nth-child(5) {
	/* background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1); */
	color: #25B5A4;
	
  } 
  .mask span:nth-child(2) {
	/* background-image: linear-gradient(45deg, #18e198 50%, #0ec15d); */
	color: #DE6944;
  } 
  .mask span:nth-child(3), .mask span:nth-child(6) {
	/* background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c); */
	color: #27A3BB;
  }
  .mask span:nth-child(4), .mask span:nth-child(7) {
	/* background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f); */
	color: #bd9d0b;
  }
  .home_search_cont {
	width:100%;
  }
  .home_ventor_img {
	display: none;
}

/* Artist section end */

/* Track item mediaquery start */

@media (max-width: 380px) {
	.track {
		height: 81px
	}

    .tinfo {
		width: calc(100% - 150px);
		height: 79px;
		padding: 0
	}

    .timg {
		width: 140px
	}

    .timg img {
		width: 140px;
		margin: 8px 0 3px
	}
	.timg div {
		width: 140px;
		height: 79px
	}
	.elem_artist {
	margin: -5px 1px;
	}
}

/* Track item mediaquery end */

@media (max-width: 58em) {
	#layout.active {
		position: relative
	}
	/* track item mediaquery style */
	.tinfo {
		font-size: 16px!important
	}
}
@media (min-width: 576px) {
	.home-hero-img {
		max-width: 200px;
    	width: 100%;
		display: block;
	}
	#welcome_text h1 .mask {
		height : 40px;
	}
	#welcome_text h1 .mask span {
		font-size: 28px;
		top: 38px;
	}
	.home_ventor_img {
		display: flex;
	}
	.home_q_guide_btn {
		display: block;
	}
	.home_q_guide_btn_mob {
		display: none;
	}
	.feat_area_cont {
		height: 380px;
	}
	.feat_area {
		height: 440px;
	}
	#home_search {
		margin-top: 35px;
	}

	#home_search .home_search_text span {
		display: inline-block;
	}
	.feat_area_content {
        padding-top: 34px;
    }
}
@media (min-width: 768px) {
	.flex-div {
		margin: 0;
	}
	#welcome_text {
		padding: 0 10px 15px 0;
		margin: 0;
	}
	#home_search .home_search_text {
		font-size: 18px;
		margin-bottom: 2px;
		letter-spacing: 0.5px;
	}
	#welcome_text h1 {
		font-size: 32px;
		line-height: 42px;
		margin-left: 0;
	}
	#welcome_text h2 {
		font-size: 24px;
	}
	.home_q_guide_btn {
		font-size: 18px;
	}
	.feat_area_cont {
		height: 420px;
	}
	.feat_area {
		height: 480px;
	}
	#home_search {
		margin-top: 15px;
	}
	/* .feat_area_overly {
		background-image: radial-gradient(black -14%, transparent 120%);
	} */
	.home-hero-img {
		max-width: 250px;
    	width: 100%;
	}
	#welcome_text h1 .mask {
		height : 40px;
	}
	#welcome_text h1 .mask span {
		font-size: 28px;
		top: 40px;
	}
	.home_search_btn {
		top: 32px;
		margin-left: -48px;
		height: 45px;
		width: 45px;
		padding: 9px;
	}
	#search-input-home {
		height: 50px;
	}
	.home_q_guide_btn i, .home_q_guide_btn_mob i {
		padding: 3px 3px;
		font-size: 18px;
	}
}
@media (min-width: 992px) {
	
	.feat_area_cont {
		height: 480px;
	}
	.feat_area {
		height: 570px;
	}

	.feat_area_content { 
		max-width: 992px;
		width: 90%;
	}
	.home-hero-img {
		max-width: 270px;
	}
	#home_search .home_search_text {
		font-size: 20px;
		margin-bottom: 4px;
		letter-spacing: 1.5px;
	}
	#welcome_text h1 {
		font-size: 50px;
		line-height: 60px;
	}
	#welcome_text h1 .mask {
		height : 55px;
	}
	#welcome_text h1 .mask span {
		font-size: 40px;
		top: 55px;
	}
	.home_search_btn {
		top: 34.5px;
		margin-left: -48px;
	}
}

@media (min-width: 1024px) {
	#site_container {
		max-width: 80.25rem;
	}
	.feat_area_content { 
		max-width: calc(80.25rem - 10px);
	}
	/* Track item mediaquery style */
    #similarTracks .track {
		width: 50%
	}
	/* Artist box mediaquery style */
    .boxViewArtists {
		margin: 20px 5px 10px 0 !important;
	}
	.searchResultLeftAlign {
		width: calc(100% - 369px) !important; 	
	}
	.searchResultLeftAlign {
		float: left; 	
	}
	#sidebar {	
		padding-top: 55px;
	}
	.sidebarRightAlign {
		float: right;
		max-width: 369px;
	}
	
	.side_header {
		padding: 6px 5px;
	}
	
	/* .feat_area_overly {
		background-image: radial-gradient(black, transparent 100%);
	} */
	
}
@media (min-width: 1200px) {

	#home_search .home_search_text {
		font-size: 22px;
	}
	#welcome_text h1 {
		font-size: 60px;
		line-height: 70px;
	}
	#welcome_text h1 .mask {
		height : 60px;
	}
	#welcome_text h1 .mask span {
		font-size: 50px;
		top: 65px;
	}
	.feat_area_cont {
		height: 550px;
	}
	.feat_area {
		height: 650px;
	}
	#home_search {
		margin-top: 20px;
	}
	/* .feat_area_overly {
		background-image: radial-gradient(black -20%, transparent 130%);
	} */
	.home-hero-img {
		max-width: 350px;
		height: auto;
	}
	
	
}
.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}

[data-tippy-root] {
    max-width: calc(100vw - 10px)
}

.tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity
}

.tippy-box[data-placement^=top]>.tippy-arrow {
    bottom: 0
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: currentColor;
    border-top-color: initial;
    transform-origin: center top
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
    top: 0
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: currentColor;
    border-bottom-color: initial;
    transform-origin: center bottom
}

.tippy-box[data-placement^=left]>.tippy-arrow {
    right: 0
}

.tippy-box[data-placement^=left]>.tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: currentColor;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left
}

.tippy-box[data-placement^=right]>.tippy-arrow {
    left: 0
}

.tippy-box[data-placement^=right]>.tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: currentColor;
    border-right-color: initial;
    transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid
}

.tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1
}

.tippy-box[data-theme~='chordu'] {
    background-color: rgb(15, 118, 110);
    color: white;
}

.tippy-box[data-theme~='chordu'][data-placement^='right']>.tippy-arrow::before {
    border-right-color: rgb(15, 118, 110);
}

.tooltip-container {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 250px;
    min-width: 100px;
    min-height: 100px;
    z-index: 9999;
}

.closeTooltip {
    position: absolute;
    top: 0;
    right: 0;
    color: #aaa;
    /* padding: 5px; */
}

.closeTooltip:hover {
    color: #f6f6f6;
}

#tooltip-data {
    margin:10px 5px;
}

.tooltipHeader {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    padding-left: 4px;
}
.glider-contain {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.glider {
  margin: 0 auto;
  position: relative;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  transform: translateZ(0);
}
.glider-track {
  transform: translateZ(0);
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 1;
}
.glider.draggable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
}
.glider.draggable .glider-slide img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.glider.drag {
  cursor: grabbing;
}
.glider-slide {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  justify-content: center;
  align-content: center;
  width: 100%;
}
.glider-slide img {
  max-width: 100%;
}
.glider::-webkit-scrollbar {
  opacity: 0;
  height: 0;
}
.glider-prev,.glider-next {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
  outline: none;
  background: none;
  padding: 0;
  z-index: 2;
  font-size: 40px;
  text-decoration: none;
  left: -23px;
  border: 0;
  top: 30%;
  cursor: pointer;
  color: #666;
  opacity: 1;
  line-height: 1;
  transition: opacity .5s cubic-bezier(.17,.67,.83,.67),
              color .5s cubic-bezier(.17,.67,.83,.67);
}
.glider-prev:hover,
.glider-next:hover,
.glider-prev:focus,
.glider-next:focus {
  color: #a89cc8;
}
.glider-next {
  right: -23px;
  left: auto;
}
.glider-next.disabled,
.glider-prev.disabled {
  opacity: .25;
  color: #666;
  cursor: default;
}
.glider-slide {
  min-width: 150px;
}
.glider-hide {
  opacity: 0;
}
.glider-dots {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}
.glider-dot {
  border: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
  display: block;
  cursor: pointer;
  color: #ccc;
  border-radius: 999px;
  background: #ccc;
  width: 12px;
  height: 12px;
  margin: 7px;
}
.glider-dot:hover,
.glider-dot:focus,
.glider-dot.active {
  background: #a89cc8;
}
@media(max-width: 36em){
  .glider::-webkit-scrollbar {
    opacity: 1;
    -webkit-appearance: none;
    width: 7px;
    height: 3px;
  }
  .glider::-webkit-scrollbar-thumb {
    opacity: 1;
    border-radius: 99px;
    background-color: rgba(156, 156, 156, 0.25);
    box-shadow: 0 0 1px rgba(255,255,255,.25);
  }
}

.mobile-hide-text {
    display: none;
}
#profile_page_container {
    display: none;
    width: 100%;
    position: relative;
    padding: 3.5rem 0;
    background: #e2e8f0;
    color: #4a4a4a; /*Profile_color_mod*/
}

.profile_page_content {
    display: flex;
    flex-direction: row;
    padding: 0 1rem;
    /* Gap not supported in Old Browser */
    /* gap: 1.5rem; */
    padding-top: 1.25rem;
}

.profile-section-card {
    background: white;
    border-radius: 0.5rem;
    min-height: calc(100vh - 7rem);
}

.semiRoundedBtn {
    background: #fafafa; /*Profile_color_mod*/
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    box-shadow: 1px 1px 4px #c6c6c6;
}
.semiRoundedBtn:hover, .semiRoundedBtn:focus, .semiRoundedBtn:active { 
    background: #f2f2f2; /*Profile_color_mod*/
    box-shadow: 1px 1px 4px #919191;
}

/* XRAY-81: #Web-fail #browser -specific #both (new app & web) -> The font size and styling is different in Chrome browser than other browsers */
.profile-menu {
    /* width: 250px; */
    display: none;
}

.profile-menu-content {
    display: flex;
    align-self: baseline;
    position: sticky;
    height: auto;
    padding: 3.5rem 3rem 3.5rem 2rem;
    top: 55px;
}

.profile-menu-item {
    padding-left: 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    margin: 1rem 0;
}

.profile-menu-item-active {
    border-left: 2px solid rgb(241, 245, 249);
    font-weight: bold;
    font-size: 1.1rem;
}

.profile-menu-item-cont {
    display: flex;
    align-items: center;
    justify-content: start;
    color: #274453; /*Profile_color_mod*/
}
.profile-menu-item-cont:hover {
    font-weight: 600; /*Profile_color_mod*/
}

.profile-menu-icon {
    font-size: 1.25rem;
    margin-right: 10px;
}

.profile-options-card {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.profile-options-card-active {
    display: flex;
}

.profile-user-info {
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    /* not needed anymore because spacing is being controlled from parent container padding */
    /* margin-top: 1rem; */
    position: relative;
}

.profile-user-info #avatar {
    display: flex;
    justify-content: start;
    padding: 1.25rem 0;
    padding-left: 0.25rem;
}

.profile-user-info #profileSection {
    display: flex;
    flex-direction: column;
}
.profile-user-info .settingsBtn-container {
    display: inline-block;
    position: absolute;
    right:10px;
    top: 10px;
}

#profileSection .userDetailsContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}

.userDetailsContainer .userDetails {
    display: flex;
    flex-direction: column;
    padding-left: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    max-width: 250px;
}

#dummyCard {
    border-radius: 7px;
    height: calc(100vh - 7rem);
    margin-top: 1.25rem;
}

#user-name {
    font-weight: bold;
    color: #4a4a4a; /*Profile_color_mod*/
    font-size: 22px;
    line-height: 1.75rem;
    text-overflow: ellipsis;
    overflow: hidden;
    /* Username should be in 1 line */
    white-space: nowrap;
    /* display: -webkit-box; */
    /* -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; */
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

input[type=date]::-ms-clear {
    display: none;
    -webkit-appearance: none;
}

.dob-cal {
    position: absolute;
    display: flex;
    justify-content: end;
    align-items: center;
    right: 4px;
    top: 15px;
    cursor: pointer;
    pointer-events: none;
}

#user-email {
    margin-top: 5px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    overflow: hidden;
    /* display: -webkit-box; */
    /* -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; */
}

/* XRAY-381: #web-fail -> Before loading data of profile page if user clicks on “Edit” button then, the edit page is exposing but user is instantly being redirected to profile page */
#editProfileBtn {
    display: none;
    align-items: center;
    padding: 0.5rem 0.75rem;
    /* margin-top: 0.75rem; */
    font-size: 0.875rem;
    line-height: 1.25rem;
}
#editProfileBtn:active {
    transform: scale(0.95);
}

.userTrackInfoContainer {
    display: flex;
    justify-content: start;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-top: 0.75rem;
    padding-left: 0.75rem;
}

#jamTracks-count, #lovedTracks-count {
    font-weight: bold;
    font-size: 1rem;
}

.divider {
    margin-left: 0.75rem;
    height: 1px;
    border-radius: 9999px;
    margin-top: 1rem;
    background: #d4d4d4;
}

#editProfile {
    display: none;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

#edit-form, #reset-pass-form {
    display: none;
    flex-direction: column;
    width: 100%;
    row-gap: 0.25rem;
}

.formLabel {
    display: flex;
    justify-content: start;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}
.editListSvg {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 enable-background=%27new 0 0 24 24%27 height=%2724px%27 viewBox=%270 0 24 24%27 width=%2724px%27 fill=%27%23000000%27%3E%3Crect fill=%27none%27 height=%2724%27 width=%2724%27/%3E%3Cpath d=%27M3,10h11v2H3V10z M3,8h11V6H3V8z M3,16h7v-2H3V16z M18.01,12.87l0.71-0.71c0.39-0.39,1.02-0.39,1.41,0l0.71,0.71 c0.39,0.39,0.39,1.02,0,1.41l-0.71,0.71L18.01,12.87z M17.3,13.58l-5.3,5.3V21h2.12l5.3-5.3L17.3,13.58z%27/%3E%3C/svg%3E");
    height: 24px;
    width: 24px;
    display: inline-block;
}
.formInput {
    display: block;
    width: 100%;
    padding: 0.75rem;
    /* Fix for Safari to show same design on all browser */
    /* border-color: transparent; */
    border-radius: 0.375rem;
    /* -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75); */
    border: 1px solid rgb(220, 220, 220);
    background-color: white;
}

.formInput:focus {
    border-color: rgb(20, 184, 166);
}

/* Edit profile DOB field native behaviour disabled */
#dob {
    -webkit-appearance: none;
    /* XRAY-503: #UAT #safari_fail #all_browser -> Error in Calendar icon */
    cursor: pointer;
}

.mt-2 {
    margin-top: 0.5rem/* 8px */;
}

.mt-1 {
    margin-top: 0.25rem/* 4px */;
}

.editProfileBtnCont {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    /* height: 12rem; */
    /* padding: 0 0.5rem; */
    padding-top: 1.25rem;
}

.editUploadList {
    display: flex;
    /* "justify-content: end" not supported in safari */
    justify-content: flex-end;
    align-items: center;
    padding: 5px 0;
    margin-bottom: 10px;
}

/* Upload Link Styles Start */
div#upload-url-section {
    display: none;
    margin-top: 0;
    padding: 1.25rem;
    background-color: #F5F8FD;
    border-radius: 0.5rem;
}
#upload-link {
    outline: none;
}

.url-container {
    width: 100%;
    display: flex;
    gap: 15px;
}

/* Disable Refresh Button on Uploads page while uploading */
.disable-refresh {
    pointer-events: none;
}

.disable-refresh i {
    color: #b6b6b6;
}

button#upload-url-submit {
    border: none;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 1px 1px 4px #c6c6c6;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.75rem 0;
    width: 6rem;
    font-weight: bold;
}

/* Upload Link Styles End */

#cancelProfileBtn {
    background-color: rgb(239, 68, 68);
    color: white;
    margin-right: 0.25rem;
}

#cancelProfileBtn, #saveProfileBtn {
    display: flex;
    justify-content: center;
    align-self: flex-end;
    width: 8rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    /* margin-top: 0.75rem; */
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
}
#cancelProfileBtn:hover, #saveProfileBtn:hover {
    box-shadow: 1px 1px 4px #919191;
}
#cancelProfileBtn:hover {
    background-color: #da3d3d;
}
#saveProfileBtn:hover {
    background: #f2f2f2;
}
#cancelProfileBtn:active, #saveProfileBtn:active {
    transform: scale(0.95);
}
#saveProfileBtn {
    background: white;
    margin-left: 0.25rem;
    /* Fix for Safari to show same design on all browser */
    border: 1px solid rgb(220, 220, 220);
    box-shadow: none;
}

#deleteProfile, #quickContactBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0.3rem 0;
    background: white;
    text-align: center;
    cursor: pointer;
    box-shadow: 1px 1px 4px #c6c6c6;
    width: 14rem;
    height: -moz-max-content;
    height: max-content;
    margin: auto;
}
#deleteProfile:active, #quickContactBtn:active {
    transform: scale(0.95);
}
.quickContactDeleteProfileSec {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    color: #506c6a; /* Changed text color of settings-cards, as default green text color was highlighting */
}
.quickContactDeleteProfileText {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}
.deleteProfileContainer, .quickEnquiryContainer {
    background-color:#ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    width: 100%;
}

#deleteProfile span{
    color: #5e5e5e;
}
#quickContactBtn span{
    color: #2e819f;
}

#deleteProfile span i.material-icons, #quickContactBtn span i.material-icons {
    font-size: 1.2rem;
    vertical-align: -4px;
    margin-right: 4px;
}

#deleteProfile:hover, #quickContactBtn:hover {
    box-shadow: 1px 1px 4px #919191;
}

#deleteProfileModal {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    overflow: scroll;
    width: 100vw;
    height: 100vh;
}

#deleteProfileAlert {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    background: #1c1c1c;
    color: #ececec;
    border-radius: 15px;
    padding: 8px 14px;
    font-size: 0.75rem;
    box-shadow: 1px 1px 5px 1px #000;
    margin: 0 15px;
}

#deleteProfileAlert h1 {
    margin: 0;
    font-size: 1.5rem;
    color: #f15e5e;
}

#deleteProfileAlert i {
    color: #f15e5e;
    font-size: 50px;
}

#deleteProfileAlert span {
    text-align: center;
}

#confirmProfileDel{
    background: #f15e5e;
}

.deleteProfileAlertBtnCont {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    padding: 10px 0;
}

.deleteProfileAlertBtn {
    width: 100px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#confirmProfileDel:hover {
    background: #ee3535;
}
#cancelProfileDel:hover {
    background: #a8a8a8;
}
#cancelProfileDel {
    background: gray;
}

#cancelPasswordeBtn {
    background-color: rgb(239, 68, 68);
    color: white;
    margin-right: 0.25rem;
}

#savePasswordBtn {
    background: white;
    margin-left: 0.25rem;
    /* Fix for Safari to show same design on all browser */
    border: 1px solid rgb(220, 220, 220);
}

#cancelPasswordeBtn, #savePasswordBtn {
    display: flex;
    justify-content: center;
    align-self: flex-end;
    width: 9rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
}
#cancelPasswordeBtn:hover, #savePasswordBtn:hover {
    transform: scale(0.95);
}
#cancelPasswordeBtn:active, #savePasswordBtn:active {
    transform: scale(0.9);
}
.mostJammedCard {
    flex-direction: column;
    background: white;
    padding: 1.25rem 0;
    margin-top: 1.25rem;
    border-radius: 0.5rem;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.mostJammedCard div {
    display: flex;
    justify-content: center;
    text-align: center;
}

.settingsCardContentMobile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* padding: 0.75rem 0; */
    /* XRAY-93: On screen-size less than 640px, On "settings" page, back-link should have uniform space on top & bottom, less space is observed on-top. */
    padding-bottom: 1.25rem;
}

#subsBackBtn {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.userPlanInfoContainer {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.userPlanInfo {
    display: flex;
    justify-content: start;
    padding: 1,25rem 0;
}

.userPlanInfoContent {
    display: flex;
    flex-direction: column;
    padding-left: 0.75rem
}

.planTitle {
    font-weight: bold;
    /* color: #0f766e; */ /*Profile_color_mod*/
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-bottom: 1.25rem;
}

#planPrice {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: bold;
}

#plan-expire {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.subPlanBtnContainer {
    display: flex;
    flex-direction: column;
}

.subPlanBtnContentContainer {
    display: flex;
    flex-direction: column;
}

.subPlanBtnContent {
    display: flex;
    flex-direction: row;
    justify-content: start;
}

#cancel-sub, #upgrade-sub, #get-sub, #restore-sub, #sub-platform-err {
    width: 11rem;
    margin: 0.75rem 0;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.75rem 0;
    font-weight: bold;
    /* XRAY-291: #web-fail -> Flickering issue in "Settings" */
    display: none;
}

#sub-platform-err {
    width: auto;
    padding: 0.75rem 5px;
}

#get-sub, #cancel-sub {
    float: left;
    margin-right: 0.5rem;
}
#get-sub:active, #cancel-sub:active {
    transform: scale(0.95);
}

#restore-sub, #upgrade-sub {
    float: right;
    margin-left: 0.5rem;
}
#restore-sub:active, #upgrade-sub:active {
    transform: scale(0.95);
}

#purchase-history {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0.5rem;
    margin-top: 1.50rem;
    padding: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    overflow-y: auto;
    /* Height 100% not needed */
    /* height: 100%; */
}

#editedList {
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: white;
    border-radius: 0.5rem;
    padding: 1.25rem;
    /* not needed anymore because spacing is being controlled from parent container padding */
    /* margin-top: 1.25rem; */
    height: 100%;
}

#lovedList {
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: white;
    border-radius: 0.5rem;
    padding:0 1.25rem 1rem 1.25rem;
    margin-top: 1.25rem;
}

.jamCardContent {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.jamCardHeader {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding: 0 0.5rem;
    padding-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: bold;
}

#seeAllJam {
    cursor: pointer;
}

#jamcardContainer {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    scroll-behavior: smooth;
    white-space: nowrap;
}

#jamcardContainer::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    opacity: .5;
}

#jamcardContainer::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    opacity: .5;
}

#jamcardContainer::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey;  */
    border-radius: 10px;
    background: transparent;
}

/* Handle */
#jamcardContainer::-webkit-scrollbar-thumb {
    background: rgb(54, 54, 54);
    border-radius: 10px;
}

.jamlistContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

#crrJammlistTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: bold;
}

.crrJammlistTitleContent {
    display: flex;
    width: 100%;
}
.crrJammlistTitleContent>span {
    word-break: break-word;
}

#deleteJamlistBtn {
    width: 24px;
    display: none;
}

#crrJammList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.emptyList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.profileUploadFreeTrialCont {
    background: white;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
}
.profileUploadSongsCont {
    background: white;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}
#profile_drag-and-drop-zone {
    display: flex;
    flex-direction: column; 
    /* changed to margin bottom to get proper spacing in all screen size */
    /* margin-bottom: 1.25rem; */
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.5rem;
}

.dm-uploader {
	border: none;
	border-radius: 0.5rem;
	text-align: center;
}

.dm-uploader.active {
    border: 2px dashed #8DB8D4;
    background-color: #F5F8FD;
}

.dm-uploader {
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.dm-uploader .btn {
	position: relative;
	overflow: hidden
}

.dm-uploader .btn input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	border: solid transparent;
	width: 100%;
	opacity: 0;
	cursor: pointer
}

.bg-error {
	background: #df9d88;
}

.uploadZoneContent {
    display: flex;
    justify-content: center;
    text-align: center;
}

.uploadZoneTitleMobile {
    display: block;
    font-weight: 800;
}

.uploadZoneTitle {
    display: none;
    font-weight: 800;
    color:#3f6e85; /*Profile_color_mod*/
}
.UploadFreeTrialTitle {
    font-weight: 800;
    margin-bottom: 0.125rem;
    letter-spacing: 0.02rem;
    color: #3f6e85;
}
a.uploadZoneSubscribeBtn { /*Profile_color_mod*/
    color:#3f6e85;
    cursor: pointer;
}
a.uploadZoneSubscribeBtn:hover { /*Profile_color_mod*/
    color:#1f8ec6;
}
.uploadZoneText {
    font-size: 14px;
    color: #748e9b;
    margin: 2px 0;
}

.uploadBtnContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 15rem;
    margin: 0.75rem 0;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.75rem 0;
    font-weight: bold;
}
.uploadBtnContainer:active {
    transform: scale(0.95);
}
.uploadBtnContainer span {
    margin-left: 0.5rem;
}
#add-link-btn {
    text-decoration: underline !important
}
#add-link-btn {
    color: #03a9f4;
    cursor:pointer
}
#add-link-btn:hover {
    color: #0174a9;
}
#fileUploadBtn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

#uploadListContainer {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.songContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* height: 100%; */
    margin: 0.25rem 0;
}

.songThumbnail {
    display: flex;
    width: 100%;
    min-width: 100px;
    max-width: 100px;
    height: 4rem;
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

.songDuration {
    position: absolute;
    left: 0.25rem;
    bottom: 0;
    background: #000;
    opacity: 0.8;
    border-radius: 0.25rem;
    color: white;
    padding: 0 0.25rem;
    margin: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

#songDuration-template {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 54, 85, 0.68);
}
.song_uploading {
    width: 100%;
}
.song_processing {
    width: 40px;
}
.songContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.songTitleContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-left: 0.5rem;
    border-bottom: 1px solid rgb(241, 245, 249);
}

.songTitle {
    /* white-space: nowrap; */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    line-height: 1rem;
    /* font-size: 0.85rem; */ /* To Media Query*/
    /* need this style for long name without whitespace  */
    /* XRAY-176: #Web-fail #both (new app & web) -> Chord-snippet should be in one line only */
    word-break: break-word;
    color: #4a4a4a; /*Profile_color_mod*/
}

.songChrdSnippetContainer {
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    /* XRAY-176: #Web-fail #both (new app & web) -> Chord-snippet should be in one line only */
    height: 2rem;
    line-height: 1.5rem;
    position: relative;
    float: left;
}

.chrd_snip p:nth-child(odd) {
    color: #388E3C
}

.chrd_snip p::first-letter {
    font-size: 16px
}

.empytyboxSvg {
    display: inline-block;
    width: 70%;
    height: auto;
    max-width: 280px;
    margin-top: 10%;
}
.empyty_p_hisory_svg {
    display: inline-block;
    width: 90%;
    height: auto;
    max-width: 100px;
    margin: 3% auto;
}

.chrd_snip p {
    margin: 0 3px;
    color: #00796B;
    float: left;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
}

.songChrdSnippet {
    font-weight: bold;
    margin-top: 0.25rem;
    width: 100%;
    overflow: hidden;
}

.songChrdSnippetTitle {
    float: left;
    font-weight: bold;
    display: none;
    margin-bottom: 0.25rem;
}

.songChrdSnippet p {
    margin-right: 0.25rem;
}

.deleteSongBtn {
    display: none;
    align-self: center;
}

.jamlistCard {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0.5rem;
    width: 6rem;
    height: 6rem;
    vertical-align: middle;
    background: white;
    border-radius: 0.5rem;
    /* padding: 1.25rem; */
    text-align: center;
    cursor: pointer;
}
.jamlistCard:hover {
    background-color: #f9f9f9;
}
.jamlistCard:active {
    transform: scale(0.90);
}

.active-jam-btn {
    box-shadow: inset 0 0 0 2px #4a4a4a; /*Profile_color_mod*/
}

.inactive-jam-btn {
    box-shadow: inset 0 0 0 2px #e1e1e1;
}

.jamlistCardIcon {
    display: inline-block;
    justify-content: center;
    align-self: center;
    height: 75%;
    margin-top: 1rem;
}

.editLovedList {
    display: flex;
    /* "justify-content: end" not supported in safari */
    justify-content: flex-end;
    align-items: center;
    padding: 1.25rem;
}
.loveTracksSearchSec, .uploadTrackSearchSec {
    display: flex;
    width: 100%;
}
#profile-lt-search-field, #profile-upload-search-field {
    border-radius: 8px;
    border: 1px solid rgb(212, 212, 212);
    outline: none;
    padding: 3px 28px 3px 8px;
    width: 100%;
    height: 32px;
    text-overflow: clip;
}
#profile-lt-search-clear, #profile-upload-search-clear {
    position: absolute;
    color: #939393;
    right: 4px;
    top: 4px;
    display: none;
    cursor: pointer;
    border-radius: 5px;
}
#profile-lt-search-clear:hover, #profile-upload-search-clear:hover {
    background-color: #eaeaea;
    color: #939393;
}
.loveTracksSearchCont {
    position: relative;
    width: 75%;
    display: none;
}
.jamCardTitle {
    display: flex;
    justify-content: center;
    align-self: center;
    align-self: flex-end;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 -0px;
    padding: 0.75rem 0;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    background: #4a4a4a; /*Profile_color_mod*/
    opacity: 0.5;
}

#jamlist-input {
    border-radius: 8px;
    border: 1px solid rgb(147, 147, 147);
    text-align: center;
}

.jamCardTitle p {
    font-size: 0.75rem;
    line-height: 1rem;
    color: white;
    white-space: normal;
    padding: 0 0.5rem;
}

#uploadList {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: start;
    background: white;
    /* padding: 1.25rem 0; */

}

.shimmerBG {
    animation-duration: 2.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: #ddd;
    background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
    background-size: 1200px 100%;
}

#changePassBtn {
    position: absolute;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 14px;
    right: 15px;
    top: 12px;
    cursor: pointer;
}
#changePassBtn:hover {
    color:#2196F3;
}
#changePassBtn:active {
    transform: scale(0.95);
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }

    100% {
        background-position: 1200px 0;
    }
}

.shimmerBorder {
    box-shadow: inset 0 0 0 2px #f1f0f0;
}

.shimmerListItemCont {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.shimmerListItemTitle {
    display: flex;
    width: 100%;
    min-width: 100px;
    max-width: 100px;
    height: 4rem;

}
.shimmerContentLineCont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 0.5rem;
}

.shimmerContentLine {
    width: 180px;
    height: 20px;
    border-radius: 0.5rem;
}

.profile-menu-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.purchaseHistoryItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom-width: 1px;
    padding-top: 1rem;
    padding-left: 1rem;
    border-bottom: 1px solid rgb(241, 245, 249);
    font-size: 0.875rem;
}

.purchaseHistoryItemTitle {
    width: 50%;
}

.purchaseHistoryItemContent {
    display: flex;
    width: 100%;
    white-space: nowrap;
}

.purchaseHistoryItemInfo {
    flex: 1 1 0%;
    text-align: center;
}

#successMsg {
    display: none;
}

.avatarContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    /* align-self: center; */
    width: 6rem;
    height: 6rem;
    color: transparent;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
    border-width: 1px;
    border-radius: 9999px;
    position: relative;
}

#output {
    /* cursor: pointer; */
    position: absolute;
    width: 6rem;
    height: 6rem;
    z-index: 10;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 9999px;
}

#avatarImg {
    cursor: pointer;
    width: 6rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    opacity: 0.5;
    border-radius: 9999px;
    position: absolute;
}

.group:hover .group-hover {
    z-index: 20;
    color: white;
    margin-bottom: 0;
}

input#file {
    opacity: 0;
}

.userBioContainer {
    display: flex;
    flex-direction: column;
    padding-left: 0.75rem;
}

.userBioContainer p {
    font-size: 0.75rem;
    margin: 0;
}

.userBioContainerBtnCont {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

#gConnect, #fbConnect, #appleConnect {
    display: none;
    justify-content: space-evenly;
    align-items: center;
    float: left;
    text-align: center;
    border-radius: 5px;
    background: white;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    cursor: default;
    pointer-events: none; /*Profile_color_mod*/
    /* cursor: pointer; */
}

#settingsCard {
    /* justify-content: space-between; */
    min-height: 600px;
}
.userPlanDetails {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.formInput[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

#reload_uploaded_list, #searchUploadedBtn {
    display: none;
    cursor: pointer;
    margin-right: auto;
    font-size: 15px;
    color: #454545;
    font-weight: normal;
    background: #f2f2f2;
    padding: 3px 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 4px #d1d1d1;
}
#searchUploadedBtn {
    margin-right: 0;
    margin-right: initial;
    margin-left: 2%;
}
.editListOptBtnNew {
    margin-left: 2%;
    font-size: 15px;
    color: #454545;
    font-weight: normal;
    background: #f2f2f2;
    padding: 3px 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    display: none;
    align-items: center;
    box-shadow: 1px 1px 4px #c6c6c6;
    max-height: 35px;
}
#reload_uploaded_list:hover, #searchUploadedBtn:hover, .editListOptBtnNew:hover {
    box-shadow: 1px 1px 4px #919191;
}
#reload_uploaded_list:active, #searchUploadedBtn:active, .editListOptBtnNew:active {
    transform: scale(0.95);
}
.edit-settings-container {
    display: flex;
    flex-direction: row;
    gap: 0.7rem;
    width: -moz-max-content;
    width: max-content;
}
.profile-user-info .settingsBtn-container i { 
    font-size: 24px;
}

.progress {
	height: 20px;
	margin-top: 12px;
	overflow: hidden;
	background-color: #f5f5f5;
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	background-color: #337ab7;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
	transition: width .6s ease;
}

.progress-striped .progress-bar,
.progress-bar-striped {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-size: 40px 40px;
}

.progress.active .progress-bar,
.progress-bar.active {
	animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar-success {
	background-color: #5cb85c;
}

.progress-striped .progress-bar-success {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-info {
	background-color: #5bc0de;
}

.progress-striped .progress-bar-info {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-warning {
	background-color: #f0ad4e;
}

.progress-striped .progress-bar-warning {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-danger {
	background-color: #d9534f;
}

.progress-striped .progress-bar-danger {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

/* not needed anymore because spacing is being controlled from parent container padding */
/* #lovedCard {
    margin-top: 1.25rem;
} */

/* XRAY-214: #Web-fail #both (new app & web) -> If the list has a 3 items (max, 1,2,3), then the footer moves to upper space */
/* Not needed anymore */
/* #profileCard, #settingsCard, #editsCard, #lovedCard, #jamCard, #uploadsCard {
    min-height: calc(100vh - 7rem);
} */

@media (max-width: 576px) { 
    #jamlist-input {
        max-width: 160px;
    }
    .loveTracksSearchCont {
        width: 95%;
    }
    .songTitle {
        font-size: 0.85rem;
    }
}
@media (min-width: 640px) {
    .deleteProfileContainer, .quickEnquiryContainer {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }
    .quickContactDeleteProfileText {
       margin-bottom: 0;
       margin-top: 4px;
       text-align: left;

    }
    .profile-user-info .settingsBtn-container { 
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding: 5px 0.5rem 0 0.5rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        box-shadow: 1px 1px 4px #c6c6c6;
        position: static;
        position: initial;
    }
    .profile-user-info .settingsBtn-container i { 
        font-size: 21px;
    }
    #dummyCard {
        margin-top: 0;
    }
    #lovedCard {
        margin-top: 0;
    }
    #user-name {
        font-size: 18px;
    }
    .profile-user-info {
        flex-direction: row;
        justify-content: start;
        background: white;
        border-radius: 0.5rem;
        padding: 1.25rem;
        margin: 0;
    }

    .profile-user-info #avatar {
        margin-right: 2rem;
    }

    .profile-user-info #profileSection {
        padding-top: 2.5rem;
        width: 100%;
    }

    .userBioContainerBtnCont {
        justify-content: start;
    }

    #editProfile {
        justify-content: start;
    }

    #edit-form, #reset-pass-form {
        padding: 1.25rem 0.5rem;
    }

    .formLabel {
        padding: 0 0.25rem;
    }

    /* #cancelProfileBtn, #saveProfileBtn {
        width: 6rem;
    } */

    #successMsg {
        display: block;
    }
    
    .settingsCardContentMobile {
        padding-top: 0.25rem;
        padding-right: 0.75rem;
        padding-left: 0.25rem;
    }

    .userPlanInfoContainer {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .subPlanBtnContainer {
        padding-top: 2.5rem
    }

    .subPlanBtnContentContainer {
        padding-left: 0.75rem;
    }

    #purchase-history {
        padding: 1.25rem auto;
        padding-bottom: auto;
    }

    #editedList {
        margin-top: 0;
    }

    #lovedList {
        margin-top: 0;
    }

    #profile_drag-and-drop-zone {
        margin-top: 0;
    }

    .songThumbnail {
        min-width: 160px;
        width: 10rem;
        height: 6rem;
    }
    
    .songTitleContainer {
        height: 100px;
    }

    .songChrdSnippet {
        font-weight: normal;
    }

    .songChrdSnippetTitle {
        display: block;
        margin-bottom: 0.5rem;
    }

    .songChrdSnippetContainer {
        margin: 0;
    }

    .editProfileBtnCont {
        /* "justify-content: end" not supported in safari */
        justify-content: flex-end;
    }

    .shimmerContentLine {
        width: 380px;
        height: 30px;
    }

    .purchaseHistoryItemContent {
        font-size: 0.875rem;
        line-height: 1.25rem;
        justify-content: space-between;
    }

    #sub-platform-err {
        margin-top: 0;
    }

    .avatarContainer {
        width: 8rem;
        height: 8rem;
    }

    #output {
        width: 8rem;
        height: 8rem;
    }

    #avatarImg {
        width: 8rem;
        height: 8rem;
    }
    .url-container {
        gap: 20px;
    }
    .song_processing {
        width: 55px;
    }
}

@media (min-width: 768px) {
    .jamlistCard {
        width: 8rem;
        height: 8rem;
    }
}

@media (min-width: 1024px) {
    .settingsBtn-container {
    display: none !important;
    }
    .uploadZoneTitle {
        display: block;
    }
    .dm-uploader {
        border: 2px dashed #c6d4dc;
    }
    .mobile-hide-text {
        display: inline-block;
    }
    .profile_page_content {
        /* flex-direction: row; */
        padding: 0 2.5rem;
        padding-top: 1.25rem;
    }

    .profile-menu {
        display: block !important;
    }

    /* .profile-options-card {
        width: 100%;
    } */

    .profile-card-mobile {
        display: none;
    }

    .formLabel {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    /* .formInput {
        padding: 0.75rem;
    } */
    div#upload-url-section {
        margin-top: 1.25rem;
    }
    .settingsCardContentMobile {
        display: none;
    }

    .userPlanInfo {
        align-self: flex-start;
    }

    .subPlanBtnContainer {
        align-self: flex-end;
    }

    .songThumbnail {
        min-width: 192px;
        width: 12rem;
        height: 7rem;
    }

    .songTitleContainer {
        height: 112px;
    }

    .jamlistCard {
        width: 10rem;
        height: 10rem;
    }
    .uploadZoneTitleMobile {
        display: none;
    }
    /* .jamCardTitle {
        padding: 0.5rem 0;
    } */
    /* As gap is not supported in old browser margin left is the only wat to provide the gap */
    #profileCard, #settingsCard, #editsCard, #lovedCard, #jamCard, #uploadsCard, #dummyCard {
        margin-left: 1.5rem;
    }
    .song_processing {
        width: 70px;
    }
}
/* Navbar Search box Start  */
#searchContainer {
    width: calc(100% - 175px) !important;
}
/* Navbar Search box End  */

#layout.active #menu {
    left: 0 !important;
}

#layout.active #menu {
    right: auto;
}

#menu {
    left: -250px !important;
}

#menu {
    right: auto;
}

.menu-link {
    left: 0 !important;
}

.menu-link {
    right: auto;
}

@media (min-width: 58em) {
    #menu {
        left: -250px;
        z-index: 9
    }
}
#profile_page_container {
    display: block;
}

/*# eof*/