.loginLogo {
    max-width:400px;
}
  
.LogoTop {
    text-align: right;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:80px;
}

.LogoTopHome {
    position: fixed!important;
    top:0;
    left:0;
    /* height: 50px; */
    background-color: #000000;
    padding-bottom:17px;
}

.UserMenuLink {
    color:#FFF!important;
}

.UserMenuLink:hover {
    color: red!important;
}

.UserMenuLink i.icon {
    font-size: 20px;
    font-weight: bold;
}

.LogoTop img {
    max-width: 150px;
}

.sidebarLogo {
    display: flex;
    justify-content: center;
    padding-top:30px;
}

.CursorPointerHover:hover {
    cursor: pointer!important;
}

.DetailsBackground {
    height: 500px;
    width:100%;
    position: absolute;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    opacity: 0.5;
}

.HeroBackground {
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    opacity: 0.5;
    height: 140px;
    width:100%;
    position: absolute;
    -webkit-transform:translatez(0);
}

.HeroPlayButton {
    width: 52px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.HeroPlayButton:hover {
    cursor: pointer;
}

.HeroPlayButtonAnimate {
    animation: App-logo-spin infinite 20s linear;
}

.sticky {
    position: fixed;
    top:0;
    right:100px;
}

.heroHolder {
    height:300px;
}

.YellowSidebar {
    background: #fead2d!important;
}

.theme-dark .main-sidebar {
    background: #fead2d!important;
    color:white!important;
}

.theme-dark .offcanvas .sidebar-menu>li {
    border-color: #000000!important;
}

.sidebar-menu>li>a {
    color:white!important;
}

.sidebar-menu>li>a.active {
    color:red!important;
}

.SongsInMyplaylistModalItem {
    text-align: center;
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #23293c;
    margin-bottom:2px;
}

@keyframes App-logo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

.CreateEditH1 {
    color:#FFFFFF!important;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #666;
    font-weight: bold;
    padding-top:25px;
    padding-bottom:25px;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #333;
}
.divider::before {
    margin-right: .25em;
}
.divider::after {
    margin-left: .25em;
}

.fbBtn {
    background: #1877F2;
    width: fit-content;
    color: #FFF;
    font-weight: bold;
    border:0;
    border-radius: 5px;
    padding: 5px 15px 5px 15px;
    margin: 0 auto;
}

.fbBtn:hover {
    background: #3488ef;
}

.iconControll {
    transition: all 500ms ease-in-out;
}

.iconControll:hover {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
    color: #fead2d;
}

.deviceIsOnline {
    background:#ff1744;
    margin-left: 5px;
    font-size: 12px;
    padding: 5px 20px 5px 20px;
    color: white;
    border-radius: 3px;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
      opacity: 0.5;
    }
}

.deviceIsOffline {
    background:#333;
    margin-left: 5px;
    font-size: 12px;
    padding: 5px 20px 5px 20px;
    color: white;
    border-radius: 3px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

.forgotDevice {
    background:#ff1744;
    margin-left: 5px;
    font-size: 12px;
    padding: 5px 20px 5px 20px;
    color: white;
    border-radius: 3px;
}

.forgotDevice:hover {
    cursor: pointer;
}

.this-browser-border {
    border:1px solid #ff1744!important;
}

.focusedInput {
    border-color:#ff1744!important;
    color:white!important;
}


@media screen and (max-width: 1000px) {
    .HeroPlaylistMobile {
      display: none;
    }
}