* {
    margin: 0;
    padding: 0;
}

body {
    color: #000;
    font-family: 'Calibri';
    overflow-x: hidden;
    background: #e4e5e6;
}

@font-face {
    font-family: 'Calibri-Bold';
    src: url('../fonts/Calibri-Bold.woff2') format('woff2'), url('../fonts/Calibri-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri.woff2') format('woff2'), url('../fonts/Calibri.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri-Light';
    src: url('../fonts/Calibri-Light.woff2') format('woff2'), url('../fonts/Calibri-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

a {
    color: #ee1679;
    transition: 0.5s;
    outline-style: none;
}

a:hover,
a:active,
a:focus {
    color: #D4A31A;
    outline: none;
    text-decoration: none;
}

p {
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Calibri-Bold';
    padding: 0;
    margin: 0;
}

.container {
    max-width: 1200px;
}

section {
    display: block;
    float: left;
    width: 100%;
}

.login_bg_section {
    display: block;
    float: left;
    position: fixed;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}

.login_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: top;
    opacity: .4;
    top: 0;
    left: 0;
}

.login_container {
    max-width: 450px;
    width: 100%;
    margin: 2em auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

.login_container .logo {
    width: 60px;
}

.logo_text {
    font-family: 'Calibri';
    font-size: 20px;
    color: #fff;
    margin-top: 5px;
}

.logo_subtext {
    font-family: 'Calibri';
    font-size: 15px;
    color: #fff;
}





.login_form_style {
    color: #fff;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.5);
    margin: 15px;
    border-radius: 15px;
}

.login-form h4 {
    text-align: center;
    font-size: 22px;
    margin: 0;
    color: #fff;
}

.login-form .form-group {
    margin-bottom: 10px;
    position: relative;
    text-align: left;
}

.login-form .form-control {
    min-height: 50px;
    border-radius: 2px;
    transition: all 0.5s;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none;
    border-radius: 5px;
    padding: 0 20px 0 45px !important;
    color: #fff;
    outline-style: none;
    font-size: 15px;
}

.login-form .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: none;
    color: #fff;
}

.login-form .btn {
    min-height: 50px;
    border-radius: 2px;
    transition: all 0.5s;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 5px;
    padding: 0 20px;
    color: #fff;
    outline-style: none;
    font-size: 24px;
}

.login-form .form-control::placeholder {
    color: #fff;
}

.login-form .close {
    position: absolute;
    top: 15px;
    right: 15px;
}

.login-form .btn {
    background: #ff301e;
    border: none;
    line-height: normal;
}

.login-form .btn:hover,
.login-form .btn:focus {
    background: #fff;
    color: #000;
}

.login-form .checkbox-inline {
    float: left;
}

.login-form input[type="checkbox"] {
    margin-top: 2px;
}

.login-form .forgot-link {
    float: right;
}

.login-form .small {
    font-size: 16px;
}

.login-form a {
    color: #fff;
}

.login-form a:hover {
    color: #fff;
}

.form-control:focus {
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 1);
}

.login_icon {
    position: absolute;
    z-index: 2;
    left: 15px;
    top: 19px;
    font-size: 20px;
}

.login_icon_custom {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    right: 27px;
    top: 19px;
    font-size: 20px;
}

.tab_area {
    display: inline-block;
    width: 100%;
    margin: 5px 0;
    text-align: center;
}

.tab_area ul {
    list-style-type: none;
}

.tab_area ul li {
    display: inline-block;
    padding: 5px 15px;
    font-size: 18px;
    cursor: pointer;
}

.for_login {
    /* display: inline-block; */
    width: 100%;
}

.for_register {
    /* display: none; */
    width: 100%;
}

.active_login {
    border-bottom: 3px solid #ff301e;
}

.social_area {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.social_area p {
    color: #fff;
    font-size: 18px;
    margin: 10px 0 8px 0;
    position: relative;
    background: url(../images/social_heading.png) center center no-repeat;
}

.social_area img {
    width: 34px;
    border-radius: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    transition-timing-function: ease-out;
}

.social_area img:hover {
    box-shadow: 0px 0px 5px 0px rgb(255 255 255);
}

.social_area h4 {
    border-right: 1px solid #fff;
    display: inline-block;
    vertical-align: text-top;
    padding: 0 30px;
}

.social_area h4:last-child {
    border-right: none;
}

.for_login input:-webkit-autofill,
.for_login input:-webkit-autofill:hover,
.for_login input:-webkit-autofill:focus,
.for_login textarea:-webkit-autofill,
.for_login textarea:-webkit-autofill:hover,
.for_login textarea:-webkit-autofill:focus,
.for_login select:-webkit-autofill,
.for_login select:-webkit-autofill:hover,
.for_login select:-webkit-autofill:focus {
    border: none;
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.for_register input:-webkit-autofill,
.for_register input:-webkit-autofill:hover,
.for_register input:-webkit-autofill:focus,
.for_register textarea:-webkit-autofill,
.for_register textarea:-webkit-autofill:hover,
.for_register textarea:-webkit-autofill:focus,
.for_register select:-webkit-autofill,
.for_register select:-webkit-autofill:hover,
.for_register select:-webkit-autofill:focus {
    border: none;
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.form-group span {
    display: inline-block;
    width: 100%;
    color: #ff301e !important;
}

.loder {
    display: flex;
    flex-wrap: wrap;
    float: left;
    width: 100%;
    position: fixed;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 999;
    left: 0;
    top: 0;
}

.forgot_password_heading {
    font-family: 'Calibri';
    font-size: 24px !important;
    text-align: center;
    color: #fff;
    margin-top: 25px !important;
    display: inline-block;
    width: 100%;
}

.forgot_password_text {
    font-family: 'Calibri';
    font-size: 18px;
    text-align: center;
    color: #fff;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px !important;
}

.jpa {
    list-style: none;
    display: flex;
    flex-direction: row;
}

.jpa input {
    margin-right: .5rem;
    margin-left: .5rem;
    text-align: center;
}

.jpa input:first-child {
    margin-left: 0;
}

.jpa input:last-child {
    margin-right: 0;
}

.verification {
    padding: 0 20px !important;
}

.forgot_password_text a {
    color: #ff301e !important;
}

.login-form .form-control option {
    color: #000;
}

.country_style {
    appearance: none;
    background: rgba(255, 255, 255, 0.15) url(../images/down_arrow.png) no-repeat !important;
    background-position: calc(100% - 26px) center !important;
}
.country_style option
{
    background: #fff;
    color: #000 !important;
    border: none !important;
}

.login-form  .mat-form-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0 15px;
    border-radius: 5px;
}
.mat-form-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
}





.for_login .btn-primary:disabled {
    color: #fff;
    background-color: #696969;
    border-color: #fff;
}



.navbar-nav .nav-link {
    color: #fff !important;
}

.app-header .navbar-toggler-icon {
    height: 23px;
}

button:focus {
    outline: none !important;
}



.mat-focus-indicator {
    margin: 0 4px !important;
}

.app-header {
    border-bottom: 0 !important;
}

.app-header {
    height: 68px !important;
}

.header-fixed .app-body {
    margin-top: 68px !important;
}

.navbar-brand-full {
    width: 60px !important;
    height: 48px !important;
}

.app-header .nav-item .nav-link>.img-avatar,
.app-header .nav-item .avatar.nav-link>img {
    height: 40px !important;
    width: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 10px;
}
.sidebar .sidebar-minimizer {
    flex: 0 0 63px !important;
}
/*.mat-form-field-wrapper {
    padding-bottom: 0 !important;
}*/
.for_register .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: none !important;
}
.for_register .mat-form-field.mat-form-field-invalid .mat-form-field-ripple, .mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {
    display: none !important;
}
.for_register .mat-form-field-appearance-fill .mat-form-field-underline::before {
    display: none !important;
}
.for_register .mat-input-element {
    caret-color: #fff !important; 
}
.for_register .mat-form-field-appearance-fill .mat-form-field-flex {
    border-radius: 4px 4px 0 0;
    padding: .75em 0 0 0 !important;
    color: #fff !important;
}

.for_register .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: rgba(0,0,0,0) !important;
}
.for_register .mat-datepicker-toggle-default-icon
{
    color: #fff;
}
.for_register .mat-form-field-label-wrapper mat-label
{
    color: #fff !important;
}
.for_register .mat-input-container.app-input-no-underline .mat-input-underline {
    display: none;
}

.for_register .mat-form-field-wrapper {
    padding-bottom: 0 !important;
}
.for_register .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .for_register .mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-.6em) scale(0.75);
    width: 133.3333333333%;
}
.for_register .mat-form-field {
    line-height: normal !important;
}
.for_register .mat-icon-button {
    padding: 0;
    min-width: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    line-height: 40px;
    border-radius: 50%;
    margin-top: 8px !important;
    float: right;
}

.customClass {
    height: 26px !important;
}

.customDatepickerIcon {
    margin-bottom: 5px;
}

.upload_document .mat-step-icon-selected
{
    background: rgba(51, 31, 33, 1) !important;
    background: -moz-linear-gradient(left, rgba(51, 31, 33, 1) 0%, rgba(209, 5, 36, 1) 100%) !important;
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51, 31, 33, 1)), color-stop(100%, rgba(209, 5, 36, 1))) !important;
    background: -webkit-linear-gradient(left, rgba(51, 31, 33, 1) 0%, rgba(209, 5, 36, 1) 100%) !important;
    background: -o-linear-gradient(left, rgba(51, 31, 33, 1) 0%, rgba(209, 5, 36, 1) 100%) !important;
    background: -ms-linear-gradient(left, rgba(51, 31, 33, 1) 0%, rgba(209, 5, 36, 1) 100%) !important;
    background: linear-gradient(to right, rgba(51, 31, 33, 1) 0%, rgba(209, 5, 36, 1) 100%) !important;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#331f21', endColorstr='#d10524', GradientType=1) !important;   
}



.upload_document  input:-internal-autofill-selected {
    appearance: menulist-button;
    background-color: transparent !important;
    background-image: none !important;
    color: -internal-light-dark(black, white) !important;
}
.upload_document_form_area
{
    display: block;
    float: left;
    width: 100%;
    margin:25px 0;
}


.file_upload_text
{
    font-size: 16px;
    display: inline-block;
    width: 100%;
    margin: 10px 0 0 0;
    color: #848484;
    font-family: 'Calibri-Bold';
}
.file_upload1
{
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 200px;
    margin-top: 20px;
    border: 4px solid #bfbfbf;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.upload_img
{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}

.upload_document_form_area .input--file {
    position: absolute;
    color: #7f7f7f;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer; 
    
  }
  
  .upload_document_form_area .input--file input[type="file"] {
position: absolute;
top: -146px;
    left: -145px;
opacity: 0;    
cursor: pointer; 
width: 200px;
height: 200px !important;

}

.control_wrapper {
    max-width: 400px;
    margin: auto;
}
.e-upload {
    width: 100%;
    position: relative;
    margin-top: 15px;
    float: none;
}
.e-upload .e-upload-actions {
    float: none;
    text-align: right;
}
.control_wrapper .e-upload .e-upload-drag-hover {
    margin: 0;
}
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: inherit;
    width: 2em !important;
    height: 2em !important;
    margin-left: -8px !important;
}

.song_upload {
    padding: 11px 15px !important;
}
.calender .mat-form-field-flex {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: baseline;
    box-sizing: border-box;
    width: 100%;
 
}
.calender .mat-form-field-infix {
    padding-left: 8px !important;
}
.calender .mat-form-field-label-wrapper mat-label {
    padding-left: 10px;
}
.search_button {
    float: left;
    margin-left: -39px !important;
    position: relative !important;
    z-index: 2 !important;
}
.search_button_style {
    background: none !important;
    border: none !important;
}
.search_button_style:focus
{
    box-shadow: none !important;
}
.search_button_style i {
    color: #f86c6b !important;
}
.input-group > .form-control:focus, .input-group > .custom-select:focus, .input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
    z-index: 0 !important;
}
.exclamation_style
{
    margin-top: 12px;
    font-size: 12px;
    font-weight: bold;
    color: rgb(255 48 30);
}
.table-striped tbody tr:nth-of-type(odd)
{
    background: transparent !important;
}
.table th, .table td {
    padding: 0.75rem;
    vertical-align: middle !important;
    border-top: 1px solid #c8ced3;
}
.row_shadow:hover {
    background: rgb(248, 248, 248);
}
.table-striped tbody tr:nth-of-type(odd):hover
{
    background: rgb(248, 248, 248) !important;
}
textarea.form-control {
    height: 150px !important;
}
audio
{
    width: 95% !important;
    max-width: 420px !important;
    -webkit-transition: all .5s ;
	-moz-transition: all .5s ;
	-ms-transition: all .5s ;
	-o-transition: all .5s ;
	transition: all .5s ;
	transition-timing-function:ease-out;
    border-radius: 27px;
    
}
audio:hover
{
    -webkit-box-shadow: 15px 15px 20px rgb(0 0 0 / 40%);
    -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
    box-shadow: 15px 15px 20px rgb(0 0 0 / 40%);

}
.podcast_table
{
    width: 100%;
    overflow-x: auto;
}
.podcast_table_inner
{
    width: 100%;
    min-width: 600px;
}
.btn-group{
    margin: 2px;
}

.song_table
{
    width: 100%;
    overflow-x: auto;
}
.song_table_inner
{
    width: 100%;
    min-width: 800px;
}

.body_inner {
    display: block;
    float: left;
    width: 100%;
    background: #fff;
    padding: 20px;
    margin: 20px 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
    border-radius: 10px;
}
.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
    background-color: rgb(105, 158, 0) !important;
}
.input-group strong
{
    margin-right: 5px;
}

.table_main_area
{
    display: block;
    float: left;
    width: 100%;
}
.table_heading
{
    display: block;
    float: left;
    width: 100%;
    padding: 12px 25px;
    border-radius: 10px;
    background: #ebebeb;
}
.table_heading > div
{
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-family: 'Calibri-Bold';
    margin-left: -4px;
    padding: 0 5px;
    
}
.table_body
{
    display: block;
    float: left;
    width: 100%;
    padding: 12px 25px;
    border-radius: 10px;
    background: #fff;
    margin-top: 15px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.14);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.14);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.14);
transition: 0.5s;
}
.table_body:hover
{
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.50);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.50);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.50);
}

.table_body > div
{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: -4px;
    padding: 0 5px;
    word-break: break-word;
}
.customeImage
{
    border-radius: 100%;
    width:50px;
    height: 50px;
    object-fit: cover;
    object-position: center;
}
.mobile_heading
{
    display: none;
    font-size: 15px;
    padding: 4px 15px;
    border-radius: 10px;
    background: #ebebeb;
    margin: 10px 0 10px 0;
    text-align: center;
    font-family: 'Calibri-Bold';

}

.add_album_body
{
    display:block;
}

.search_field
{
    margin: 10px 0 !important;
    border-radius: 30px !important;
}
.details_image
{
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
.details_image img
{
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
.details_right_area
{
    width: calc(100% - 304px);
    display: inline-block; 
    padding-left: 20px; 
    vertical-align: top;   
}
.details_right_area p
{
    margin-bottom:  0;
}
.details_right_area .full
{
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    padding-left: 180px;
}
.details_right_area .full b
{
    position: absolute;
    left: 0;
    top: 0;
}
.text_status
{
    font-size: 18px;
    text-align: center;
    color: #46b354;
    font-family: 'Calibri-Bold';
}

.text_status_alert
{
    font-size: 18px;
    text-align: center;
    color: #dd2312 !important;
    font-family: 'Calibri-Bold';
}


.submit_but
{
    padding: 12px 30px !important;
}




/*************new***************/

.sidebar
{
    background: #fff !important;
}
.sidebar .nav-link .nav-icon
{
    color: #4b4f54 !important;
}
.sidebar .nav-link
{
    color: #4b4f54 !important;
}
.sidebar .nav-link.active 
{
    color: #ff301e !important;
    background: transparent !important;
    font-weight: bold !important;
}
.sidebar .nav-link.active .nav-icon {
    color: #ff301e !important;
    font-weight: bold !important;
}

.sidebar .nav-link:hover {
    color: #ff301e !important;
    background: transparent !important;
}
.sidebar .nav-link:hover .nav-icon {
    color: #ff301e !important;
}
a 
{
    color: #ff301e !important;
}
.header-fixed .app-header {
    background-color: #fff !important;
    box-shadow: 0px 1px 11px 0px rgba(0,0,0,0.10) !important;
}
.breadcrumb {
    list-style: none;
    background-color: #fff !important;
}
.dropdown-item i
{
    color: #4b4f54 !important; 
}
.dropdown-item
{
    color: #4b4f54 !important; 
}
.page_indide
{
    display: block;
    float: left;
    width: 100%;
    background: #fff;
    margin-bottom: 30px;
    border-radius: 4px;
    overflow: hidden;
}
.page_heading
{
    display: inline-block;
    width: 100%;
    vertical-align: top;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f0f3f5;
    border-bottom: 1px solid #c8ced3;
}
.page_heading h2
{
    font-size: 25px;
    color: #4b4f54;
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}
.upload_document
{
    display: block;
    float: left;
    width: 100%;
}
.sidebar .sidebar-minimizer {
    background-color: #f0f3f5 !important;
}
.upload_document .mat-button
{
    background: #ff301e !important;
    color: #fff !important;
    border-radius: 40px !important;
    margin: 3px 0 !important;
    padding: 2px 44px !important;
}
.upload_document .mat-button:hover
{
    background: #dd2312 !important;
}

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
    background: #dd2312 !important;
}
.upload_document  .mat-form-field-appearance-outline .mat-form-field-outline
{
    color: #bbbbbb !important;
}
.country_list_main_area
{
    display: block;
    float: left;
    width: 100%;
    padding: 20px;

}
.orange_but
{
    background: #ff301e !important;
    color: #fff !important;
    border-radius: 40px !important;
    padding: 12px 20px !important;   
}

.orange_but2
{
    background: #ff301e !important;
    color: #fff !important;
    border-radius: 40px !important;
    padding: 10px 30px !important;  
    border: none !important;
}

.orange_but:hover ,.orange_but2:hover
{
    background: #dd2312 !important;   
}
.form-control {
    box-shadow: none;
    border: 1px solid #bbbbbb !important;
    background: transparent !important;
    height: 50px !important;
}
.form-control:focus {
    border-color: #bbbbbb !important;
    box-shadow: 0px 0px 5px 0px rgb(226, 226, 226) !important;
}
.graph_mian_area
{
    display: block;
    float:left;
    width: 100%;
    padding: 15px 0;
    overflow: hidden;
    overflow-x: auto;
    background: #f0f3f5;
    padding: 20px;
    border: 1px solid #c8ced3;

}
.graph_inside
{
    display: block;
    float: left;
    width: 100%;
    min-width: 500px;
}


.back_but
{
    background: none !important;
    border: 2px solid #ff301e !important;
    color: #ff301e !important;
    border-radius: 40px !important;
    padding: 0 40px !important;
    line-height: 34px !important;
    outline: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
    text-align: center;
    margin-right: 12px;
}
.back_but:hover
{
    background: #ff301e !important;
    color: #fff !important;
}

.graph_details_area
{
    display: block;
    float:left;
    width: 100%;
    padding: 20px;
    overflow: hidden;
    overflow-x: auto;
    background: #f0f3f5;
    padding: 20px;
    border: 1px solid #c8ced3;
    min-height: 406px;

}
.graph_details_area h2
{
    font-size: 22px;
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}
.graph_details_area p
{
    padding: 12px 10px;
    font-size: 14px;
    margin: 0;
    color: rgb(37, 37, 37);
    text-align: right;
}
.graph_details_area p:nth-child(odd)
{
    background: #fff;
}
.graph_details_area p strong
{
    float: left ;
}
.dashboard_boxes_area
{
    display: inline-block;
    vertical-align: top;
    width: calc(100% + 20px);
    margin: 0 -10px;
    margin-top: 40px;

}
.dashboard_details_box1
{
    display:block;
    float: left;
    width: calc(100% / 4 - 20px);
    margin: 0 10px 30px 10px;
    background: #fff;
    border-radius: 6px;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 1px 11px 0 rgb(0 0 0 / 12%);
    position: relative;
    text-align: right;
}
.dashboard_details_icon_area
{
    position: absolute;
    float: left;
    width: 50px;
    height: 50px;
    left: 15px;
    top: -15px;
    background: #dd2312;
    border-radius: 5px;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashboard_details_box1 h3
{
    font-size: 16px;
    color: #dd2312;
}
.dashboard_details_box1 h2
{
    font-size: 35px;
}
.dashboard_details_box1 .dashboard_details_icon_area
{
	-webkit-transition: all .5s ;
	-moz-transition: all .5s ;
	-ms-transition: all .5s ;
	-o-transition: all .5s ;
	transition: all .5s ;
	transition-timing-function:ease-out;
}
.dashboard_details_box1:hover .dashboard_details_icon_area
{
    top: -30px;

}
.songs_graph_mian_area
{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-top: 15px;
}
.page_main_heading
{
    display: block;
    float: left;
    width: 100%;
}
.page_main_heading h2
{
    font-size:25px;
    margin: 0;
    padding: 0;
}
.graph_mian_area2
{
    display: block;
    float: left;
    width: 100%;
}
.graph_inside_box
{
    display:block;
    float: left;
    width: 100%;
    background: #fff;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 1px 11px 0 rgb(0 0 0 / 12%);
    margin-top: 25px;
    height: calc(100% - 30px);
}
.box_color1
{
    background: #feb019;
}
.box_color2
{
    background: #008ffb;
}
.box_color3
{
    background: #00e396;
}
.box_color4
{
    background: #93BE52;
}
.box_color5
{
    background: #FC6180;
}
.box_color6
{
    background: #b621a2;
}
.graph_inside_box h4
{
    text-align: center;
    color: #dd2312;
}
.sidebar .nav-dropdown.open {
    background:#eeeeee !important;
}
.sidebar .nav-link:hover.nav-dropdown-toggle::before {
    background: url(../images/down_arrow2.png) no-repeat !important;
}
.song_statistics_search_area
{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding: 20px;
}
.song_statistics_search_area .date input
{
    border: none !important;
}
.song_statistics_search_area .date  input:focus
{
    box-shadow: none !important;
}
.song_statistics_search_area .date span {
    display: inline-block;
    width: 100%;
    color: #23282c !important;
}
.song_statistics_search_area  .dropdown-btn
{
    padding: 13px 12px !important;
}
.song_statistics_search_area  .dropdown-btn span
{
    color: #5c6873 !important;   
}
.song_statistics_search_area  .dropdown-multiselect__caret
{
    height: 50px !important;
}
.song_statistics_search_area .selected-item
{
    background: #e7e7e7 !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 14px !important;
    padding: 0 10px !important;
    padding-bottom: 3px !important;
}
.song_statistics_search_area select
{
    appearance: none !important;
    background: url(../images/down_arrow3.jpg) no-repeat !important;
    background-position: calc(100% - 11px) center !important;
}
.apply_button {
    background: #ff301e !important;
    color: #fff !important;
    border-radius: 40px !important;
    margin: 3px 0 !important;
    padding: 9px 44px !important;
    border: none !important;
}
.apply_button:hover
{
    background: #dd2312 !important;
}
.image_tag_vip {
    background: #FF301E !important;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 15px;
    margin: 38px 0 0 -23px;
}


.image_tag_vip_details {
    background: #FF301E !important;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 15px;
}

.image_tag_premium {
    background: #219F02 !important;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 15px;
    margin: 38px 0 0 -23px;
}

.image_tag_premium_details {
    background: #219F02 !important;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 15px;
}

.digital_font
{
    font-family: 'LED Digital 7', sans-serif;
    font-size: 20px !important;
    text-align: center;
}
.artist .mat-form-field
{
    line-height: 1.5 !important;
}
.text_status
{
    margin: 10px 0;
    padding: 0 10px;
}
.text_status span
{
    background: #93BE52;
    color: #fff;
    font-size: 16px;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
}

.text_status_alert
{
    margin: 10px 0;
    padding: 0 10px;
}
.text_status_alert span
{
    background: #ebede9;
    color: #dd2312 !important;
    font-size: 20px;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block;
}


.contact_main_area
{
    display: inline-block;
    width: 100%;
    padding: 35px;
    color: #4b4f54;
}
.contact_left h2
{
    font-size: 22px;
    margin-bottom: 25px;
}
.contact_right h2
{
    font-size: 22px;
    margin-bottom: 25px;
}
.contact_left p
{
    position: relative;
    margin-bottom: 15px;
    font-size: 15px;
    padding-left: 25px;
}
.contact_left p i
{
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 18px;
    color: #FF301E;
}
.contact_left h3
{
    margin-top: 25px;
}
.contact_left h3 i
{
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    background: #FF301E;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 16px;
    margin: 2px;
}
.contact_left h3 i:hover
{
    background: #000;
    color: #fff;
}
.contact_right_form_area
{
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
.contact_right_form_area .form-control
{
    margin-bottom: 30px;
}
.cdk-global-scrollblock
{
    top: 0 !important;
}
.cdk-overlay-container {
    z-index: 9999 !important;
}
.mat-toolbar.mat-primary {
    background: #ff301e !important;
}
.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {
    background: #ff301e !important;
}
.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {
    color: #ff301e !important;
}
.event_page .ck.ck-editor__editable_inline {
    height: 200px;
}
.event_page .mat-form-field-appearance-legacy .mat-form-field-underline
{
    display: none !important;
}
.event_page .date_input
{
    padding: 0 15px;
}
.event_page .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .event_page .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-1px) scale(1) perspective(100px) translateZ(0.001px) !important;
    -ms-transform: translateY(-1px) scale(1) !important;
    width: 133.3333333333% !important;
}
.event_page .mat-form-field-appearance-legacy .mat-form-field-infix {
    padding: 15px 0 0 0 !important;
}
.event_page .mat-form-field-appearance-legacy .mat-form-field-label {
    margin-top: -17px !important;

}
.event_page .mat-form-field-label
{
    color: #000 !important;
}
.event_page .file_style
{
    height: 58px !important;
    padding: 15px 0.75rem !important;
}
.event_page .mat-form-field-appearance-fill .mat-form-field-flex
{
    border: 1px solid #bbbbbb !important;
    background: transparent !important;
    border-radius: 5px !important;
}
.event_page .mat-form-field-appearance-fill .mat-form-field-underline::before
{
    display: none !important;
}
.mat-form-field-underline .mat-form-field-underline
{
    display: none !important;
}
.event_page .mat-form-field.mat-focused .mat-form-field-ripple, .event_page  .mat-form-field.mat-form-field-invalid .mat-form-field-ripple
{
    display: none !important;
}
.event_page .upload_img2
{
    display: inline-block;
    width: auto !important;
    position: relative;
    border: 1px solid #bbbbbb !important;
    margin: 15px 15px 0 0;
}
.event_page .upload_img2 img
{
    width: 120px;
    height: 100px;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 10px !important;
}
.event_page .cross_icon
{
    cursor: pointer;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    text-align: center;
    line-height: 24px;
    background: #ff301e;
    color: #fff !important;
    right: -11px;
    top: -12px;
    font-size: 14px;
    z-index: 2;
}
.event_page .form-group span {
    color: #23282c !important;
    cursor: pointer !important;
}
.event_page .start_date input
{
    padding: 0 0 !important;
}
.event_page .mat-form-field-appearance-fill .mat-form-field-flex
{
    padding: 6px 15px !important;
}
.start_time_title
{
    margin-bottom: 8px;
    display: inline-block;
}
.event_page .mat-form-field-ripple
{
    display: none;
}
.event_page .mat-form-field-suffix .mat-icon
{
    font-size: 17px !important;
    margin: 0 -16px 0 -7px;
}
.events_details_small_img
{
    display: block;
    float: left;
    width: 31.33%;
    margin: 0 1% 15px 1% !important;
    border: 1px solid #ebede9;
    padding: 15px;
    height: 150px;
    object-fit: contain;
    object-position: center;
}


@media screen and (max-width:1300px)

{
    .dashboard_details_box1
{
    width: calc(100% / 3 - 20px);
}
}

@media screen and (max-width:850px)

{
    .mobile_heading
    {
        display: block;
    }
    .table_heading
    {
        display: none;
    }
    .table_body > div
    {
        width: 100% !important;
        text-align: center;
    }
    .details_right_area
    {
        width: 100%;
        display: inline-block; 
        padding-left: 0; 
        vertical-align: top;   
        margin-top: 20px;
    }
    .details_image
    {
        width: 200px;
    }
    .details_image img
    {
        height: 200px;
    }
    .image_center
    {
        text-align: center;
    }
    .image_center .full
    {
        text-align: left;
    }
    .mat-vertical-content-container {
        margin-left: 20px !important;
    }
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header, .mat-vertical-stepper-header {
        padding: 24px 5px !important;
    }
}

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

{
    .back_but {
        padding: 0 30px !important;
    }
    .upload_document .mat-button {
        padding: 2px 34px !important;
    }
    .mat-vertical-content {
        padding: 0 15px 24px 15px !important;
    }
    .form-control {
        height: 44px !important;
    }
    .orange_but {
        padding: 8px 17px !important;
    }
    .swal2-container {
        padding: 30px !important;
    }
    .swal2-icon {
        width: 3em !important;
        height: 3em !important;
        margin:0 auto 5px !important;
    }
    .swal2-icon .swal2-icon-content {
        font-size: 2em !important;
    }
    .swal2-actions {
         margin: 5px auto 0 !important;
    }
    .swal2-title {
         margin: 0 !important;
    }
    audio {
        width: 100% !important;
    }
    .table_body {
        padding: 12px 10px !important;
    }
    .dashboard_details_box1
    {
        width: calc(100% / 2 - 20px);
    }
    .contact_right
    {
        margin-top: 30px;
    }
    .details_right_area .full { 
        padding-left: 0;
    }
    .details_right_area .full strong {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        float: left;
    }
}  

@media screen and (max-width:480px)

{
  
    .dashboard_details_box1
    {
        width: calc(100% / 1 - 20px);
    }
}