html{
    box-sizing:border-box;
}
body {
    background-color:white;
    
}


.tooltip-ud-class[data-tool-tip] {
    position:relative;
}

.tooltip-ud-class[data-tool-tip]::before {
    content:attr(data-tool-tip);
    display:block;
    position:absolute;
    background-color:#a7a4a4;
    color:white;
    border-radius:2px;
    padding:2px 5px;
    font-size:12px;
    transform:scale(0);
    top:50px;
    white-space:nowrap;
    transition:transform ease-out 150ms;
}



.tooltip-ud-class[data-tool-tip]:hover::before {
    transform:scale(1);
}

.button-mod-ex1 {
    display: inline-block;
    padding: 10px 20px;
    background - color:#007BFF;
    color: white;
    border:none;
    box-shadow: 
        3px 3px 5px rgba(0, 0, 0, 0.3),
        inset 2px 2px 3px rgba(255, 255, 255, 0.5),
        inset -2px -2px 3px rgba(0, 0, 0, 0.3);
}

.tuc_2[data-tool-tip] {
    position:relative;
}

.tuc_2[data-tool-tip]::before {
    content:attr(data-tool-tip);
    display:block;
    position:absolute;
    background-color:white;
    color:#8f7ff1;;
    border-radius:2px;
    padding:2px 5px;
    font-size:12px;
    transform:scale(0);
    top:5px;
    left:50px;
    white-space:nowrap;
    transition:transform ease-out 150ms;
}



.tuc_2[data-tool-tip]:hover::before {
    transform:scale(1);
}


#bbb a{
        position: relative;
        display: inline-block;
        margin-top: 50px;
        font-size: 1.5em;
      }

      #bbb a[data-title]:hover::after {
        content: attr(data-title);
        position: absolute;
        top: -100%;
        left: 0;
        z-index: 100;
        background-color: aquamarine;
        width: 250px;
      }
/*browse music CSS Begins*/
.modal_wh {
    width:50px;
    height:50px;
    background-color:#fff;
    position:absolute;
    left:50%;
    top:56%;
    transform:translate(-50%,-50%);
    border:5px solid #8f7ff1;
    box-sizing:border-box;
    border-left-color: white;
    border-right-color:white;
    border-radius:50%;
    animation:outer 6s linear infinite;
}

    .modal_wh:before {
    content:"";
    position:absolute;
    width:25px;
    height:25px;
    left:7.5px;
    top:7.5px;
    border:5px solid pink;
    box-sizing:border-box;
    border-radius:50px;
    border-left-color: white;
    border-right-color:white;
    animation:inner 3s linear infinite;
    
    }
@keyframes outer{
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }

}

@keyframes inner {
    0% {
        transform: rotate(0deg);
    }

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

/*browse music CSS Ends*/


.lb_text_orientation {
    writing-mode: vertical-lr;color:blue;text-orientation:upright;
}


.media_css {
   height: 500px;
  }
@font-face {
    font-family: GreatVibes-Regular;
    src: url('../custom_fonts/GreatVibes-Regular.ttf') format('truetype');
}
@media only screen and (max-width: 1100px) {
  .media_css {
   height: 840px;
 
  }
}

@media only screen and (max-width: 600px) {
  .media_css {
   height: 1380px;
   
  }
}


/* On screens that are 992px wide or less, go from four columns to two columns */
/*@media screen and (min-width: 992px) {
.media_css {
  height: 680px;
}
}*/

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 600px) {
.media_css {
  height: 1300px;
}
}*/


.vertical { writing-mode: vertical-rl; }
.upright { text-orientation: upright; }

.custom_font {
    font-size:small;
    height:10px;
}


.scrollbar::-webkit-scrollbar{
    width:8px;
}

.scrollbar::-webkit-scrollbar-thumb{
    background-color:pink;
}


.scrollbar::-webkit-scrollbar-track{
    background-color:#e9ecef;
}

/* spinner */
.modal
    {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        /*background-color: Black;*/
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
       
    }
    .center
    {
        z-index: 1000;
        margin: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }


*{
    box-sizing:inherit;
}


.err_mess {
    
    color:red;
    font-size:20px;
}


.lbapp_margin_top_main_page{
    margin-top:50px;
}

.lbapp_div_first_container{
    /*border-bottom:2px solid pink;*/
    padding-bottom:10px;
    padding-top:10px;
}                                                   

.lbapp_div_container{
    /*border-bottom:2px solid pink;*/
    padding-bottom:50px;
    padding-top:50px;
}

.main_input_box {
    height:30px;
}

.main_search_button {
    height:30px;
    width:50px;
    margin-top:150px;
}

.main_button_format {
    height:40px;
    width:150px;
}

.playall_button_format {
    height:60px;
   
}

.demo_message {
color:pink;
font-weight:bold;
font-style:italic;
}

.button_playall {
  min-width: 200px;
  min-height: 40px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  
  color: white;
  
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;text-align:center;
  }

.gen_font {
    font-family: arial;
 
  color: #8f7ff1;
  font-size:13px;
}

.table-titles {

    font-family:'Courier New';
 
  color: #8f7ff1;
  font-size:15px;
}


.my_music_title {
  color: #8f7ff1 !important;
   //text-shadow: 3px 2px 0px #8f7ff1;
  /*box-shadow: 0px 0px 4px pink;*/
  padding: 5px 2px;
  /*border-top:2px solid black;*/
  border:none;
   letter-spacing: 0.2em;
  /*border-bottom: 2px solid black;*/
  background:white;
  font-size:13px;
  padding-left:10px;
  padding-top:15px;
}

.main_page_links {

font-family: arial;
  text-align:right;
  color: #8f7ff1 !important;
   //text-shadow: 3px 2px 0px #8f7ff1;
  /*box-shadow: 0px 0px 4px pink;*/
  padding: 5px 2px;
  /*border-top:2px solid black;*/
  border:none;
   letter-spacing: 0.2em;
  /*border-bottom: 2px solid black;*/
  background:white;
  font-size:13px;
 text-decoration:none;
  width:300px; 

/*text-decoration:none;
font-family:sans-serif;
letter-spacing:2px;
font-size:small;
 font-family: arial;
  text-align:right;
  color: white !important;
   text-shadow:0px 0px 10px  pink;*/
  /*padding: 5px 2px;*/
  /*border:none;
  background:white;*/
}

.main_page_links_2 {
font-family: arial;
   color:#c1c7d3;
  padding-top: 10px 2px;
  border:none;
   letter-spacing: 0.2em;
  background:white;
  font-size:13px;
 text-decoration:none;
}

.main_page_links_work {

    font-family: arial;
  text-align:right;
  color:#4B61D1 !important;
   //text-shadow: 3px 2px 0px #8f7ff1;
  /*box-shadow: 0px 0px 4px pink;*/
  padding: 5px 2px;
  /*border-top:2px solid black;*/
  border:none;
   letter-spacing: 0.2em;
  /*border-bottom: 2px solid black;*/
  background:white;
  font-size:13px;
 text-decoration:none;
  width:300px; 


    /*color:*/
/*text-decoration:none;
font-family:sans-serif;
letter-spacing:2px;
font-size:small;
 font-family: arial;
  text-align:right;
  color: white !important;
   text-shadow:0px 0px 10px #0026ff;*/
  /*padding: 5px 2px;*/
  /*border:none;
  background:white;*/
}

.app_main_column_header_format {
    
    /*color:deeppink;*/
    font-weight:normal;
}

.app_main_header_format {
    text-shadow:2px 2px 2px black;
    color:white;
}
input,
select
 {
    height:35px;
    
}
.app_css_btn_length {
    width:150px;
}

.formFile_image::before {
  content: "Add Image  :";
  position: absolute;
  /*z-index: 2;*/
  display: block;
  background-color:#e9ecef;
  width: 90px;
}



.formFile_video::before {
  content: "Add Video  :";
  position: absolute;
  /*z-index: 2;*/
  display: block;
  background-color:#e9ecef;
  width: 90px;
}

.app_max-width {
max-width:150px;
width:150px;
white-space:nowrap;
text-wrap:none;
overflow:hidden;
text-overflow:ellipsis;
text-overflow:ellipsis;
}

.app_max-width_title {
max-width:400px;
width:400px;
white-space:nowrap;
text-wrap:none;
overflow:hidden;
text-overflow:ellipsis;

}

.app_max-width_summary {
text-align:justify;
width:750px;

}

.content_format {
  text-align:justify;
}
.content_image {
    margin:10px;
    float:left;
   width:70%;height:auto;
   
}

.content_image_right {
   
    margin:10px;
    float:left;    
  
     width:70%;height:auto;
   
}

.content_format::first-letter{
    font-size:40px;
    color:aquamarine;
    font-family:algerian;
}

.class-htsid_content_para{
    padding:10px;
    background-color:#3a0551;
    font-weight:600;
    color:white;
    
}

 
.threeD {
   
  color: aqua;
  white-space: nowrap;
  position: absolute;
  top: 40%;
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  font-size: 10em;
  font-family: sans-serif;
  letter-spacing: 5px;
  /*transition: 0.3s;*/
  text-shadow:  2px 2px 0 black;
    /*5px 5px 0 grey, 6px 6px 0 aqua, 7px 7px 0 grey, 8px 8px 0 aqua,
    6px 8px 0 aqua;*/
}


.BS_threeD {
   
  color: white;
  white-space: nowrap;
  position: absolute;
  top: 40%;
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  font-size: 10em;
  font-family: sans-serif;
  letter-spacing: 5px;
  /*transition: 0.3s;*/
  text-shadow:  2px 2px 0 black;
    /*5px 5px 0 grey, 6px 6px 0 aqua, 7px 7px 0 grey, 8px 8px 0 aqua,
    6px 8px 0 aqua;*/
}

.threeD_2 {
   
  font-family: arial;
  text-align:right;
  color: white !important;
   text-shadow: 2px 2px 0px #8f7ff1;
  /*box-shadow: 0px 0px 4px pink;*/
  padding: 5px 2px;
  /*border-top:2px solid black;*/
  border:none;
   letter-spacing: 0.2em;
  /*border-bottom: 2px solid black;*/
  background:white;
  font-size:28px;
 text-decoration:none;
  width:300px; 
}




.threeD2 {
   
  color: aqua;
  
  font-family: sans-serif;
  text-shadow:  2px 2px 0 black;
    /*5px 5px 0 grey, 6px 6px 0 aqua, 7px 7px 0 grey, 8px 8px 0 aqua,
    6px 8px 0 aqua;*/
}

.main-footer{
  background: #f08080;
  color: aqua;

}
.container_app {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  
}

.container_2 {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
  min-height: 100vh;
}

.container_3 {
    
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
  max-height: 100vh;
}

.btn_app {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
 }

.btn_app_main {
  flex: 1 1 auto;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
 }

.btn_app_2 {
  flex: 1 1 auto;
 
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
 }

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btn_app:hover {
  background-position: right center; /*// change the direction of the change here*/ 
}

.btn-1 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-2 {
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn-3 {
  background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}

.btn-31 {
  background-image: linear-gradient(to right, white 0%, aqua 51%, pink 70%, white 100%);
}

.btn-33 {
  background-image: linear-gradient(to right,#eee 20%, #fbc2eb  51%, #ffecd2 100%);
}

.BS_btn-33 {
  background-image: linear-gradient(to right,green 0%,  white 30%, green 60%, white 80%,#ffd800 100%);
}

.btn-4 {
  background-image: linear-gradient(to right, #a1c4fd 0%, #ff59d0 51%, #a1c4fd 100%);
}

.btn-5 {
  background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);
}

/* Magic Stuff End -> */






.testbutton {
  font-family: arial;
  color: #FFFFFF !important;
  font-size: 14px;
  /*text-shadow: 1px 1px 0px #000000;*/
  box-shadow: 2px 2px 4px pink;
  padding: 5px 2px;
  border-radius: 10px;
  border: 2px solid #FFFFFF;
  background: pink;text-decoration:none;
  
}

.BS_testbutton {
  font-family: arial;
  color: green;ack !important;
  font-size: 14px;
  /*text-shadow: 1px 1px 0px #000000;*/
  box-shadow: 2px 2px 3px  #e9ecef;
  padding: 5px 2px;
  border-radius: 10px;
  border: 2px solid yellow;
  background:white;text-decoration:none;
}

.testbutton_main_buttons {
  font-family: arial;
  text-align:right;
  color: aqua !important;
   text-shadow: 1px 1px 2px #000000;
  /*box-shadow: 0px 0px 4px pink;*/
  padding: 5px 2px;
  /*border-top:2px solid black;*/
  border:none;
  
  /*border-bottom: 2px solid black;*/
  background:white;
  font-size:20px;
 text-decoration:none;
  width:300px; 
}


.testbutton_small {
  font-family: arial;
  color: #FFFFFF !important;
  font-size: 14px;
  /*text-shadow: 1px 1px 0px #000000;*/
  box-shadow: 2px 2px 4px pink;
  padding: 5px 2px;
  border-radius: 5px;
  border: 2px solid #FFFFFF;
  background: pink;
  
}


.testimg {
 
  
  color: black !important;
  
 
  box-shadow: 0px 0px 2px #e9ecef;
  padding: 1px;
  /*border-radius: 5px;*/
  /*border-right: 1px solid #f69ce9;*/
  background: #FFFFFF;
}

.snb_cp {
 
  
  color: black !important;
  
 
  /*box-shadow: 2px 2px 1px pink;*/
  padding-bottom: 10px;
  /*border-radius: 5px;*/
  /*border-bottom: 1px solid pink;*/
  background: #FFFFFF;
}

.snb_cp_without_bottom_border {
 
  
  color: black !important;
  
 
  /*box-shadow: 2px 2px 1px pink;*/
  padding-bottom: 10px;
  /*border-radius: 5px;*/
  background: #FFFFFF;
}
.snb_cpborder {
 
  
  color: black !important;
  
 
   /*box-shadow: 0px 0px 10px #e9ecef;*/
  margin-bottom: 20px;
  /*border-radius: 5px;*/
  /*border-bottom: 1px solid pink;*/
  background: #FFFFFF;
}





.an_br_music:focus{
    box-shadow:0 0 0 #8f7ff1;
background-color:white;
}

.an_br_music:hover{
    box-shadow:0 0 0 #8f7ff1;
background-color:white;
}


.an_pl_music:focus{
    box-shadow:0 0 2px pink;
    border:2px solid pink;
     background-color:white;
}

.an_pl_music:active{
    box-shadow:0 0 2px pink;
    border:2px solid pink;
   
}

.an_pl_music:hover{
    box-shadow:0 0 2px pink;
    border:2px solid pink;
    background-color:white;
}

.button_your_page {
  min-width: 200px;
  min-height: 40px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  
  color: white;
  background: #4FD1C5;
  border-color: white;  
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,198,1) 100%);
  border: none;
  /*border-radius: 1000px;*/
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  /*transition: all 0.3s ease-in-out 0s;*/
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;text-align:center;
  }




.button_your_page_admin {
  min-width: 180px;
  min-height: 40px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  
  color: white;
  background: #4FD1C5;
  border-color: white;  
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,198,1) 100%);
  border: none;
  /*border-radius: 1000px;*/
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  /*transition: all 0.3s ease-in-out 0s;*/
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;text-align:center;
  }


button_my_music {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  
  color: white;
  border-color: white;  
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,198,1) 100%);
  border: none;
  /*border-radius: 1000px;*/
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  /*transition: all 0.3s ease-in-out 0s;*/
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;text-align:center;
  }


.form-control {
    margin-top:5px;
    border-color:#8f7ff1;
    
}

.form-control_2 {
    margin-top:5px;
    border-color:pink;
    
}



.note-editor.note-frame .note-editing-area  {
display:block;
border:1px solid #8f7ff1;
}   

/*.birlis_wife {
  font-family: "Archivo Black", sans-serif;
  background: #f4d03f;
  display: flex;
  flex-direction: column;
  height: 30vh;
  justify-content: center;
  align-items: center;

  
}*/

/*a {
    background: #85c8ea;
    border-radius: 3px 0 0 3px;
    color: #fff !important;
    display: inline-block !important;
    height: 26px;
    float: left;
    line-height: 26px;
    padding: 0 30px 0 10px;
    position: relative;
    margin: 0 3px 3px 0;
    text-decoration: none;
    -webkit-transition: color 0.2s;
}*/

.words {
  color: #f4d03f;
  font-size: 0;
  line-height: 1.5;
}

.words span {
  font-size: 5rem;
  display: inline-block;
  animation: move 3s ease-in-out infinite;
}

@keyframes move {
  0% {
    transform: translate(-30%, 0);
  }
  50% {
    text-shadow: 0 25px 50px rgba(0, 0, 0, 0.75);
  }
  100% {
    transform: translate(30%, 0);
  }
}

.words span:nth-child(2) {
  animation-delay: 0.5s;
}

.words span:nth-child(3) {
  animation-delay: 1s;
}

.words span:nth-child(4) {
  animation-delay: 1.5s;
}

.words span:nth-child(5) {
  animation-delay: 2s;
}

.words span:nth-child(6) {
  animation-delay: 2.5s;
}

.words span:nth-child(7) {
  animation-delay: 3s;
}

.bag_img {
min-height:380px;
position: relative;
     background-position:center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     height:500px;
     border-radius:50%;
}


/*About us Page*/

.searchForm {
  
  margin:20px;
  width:230px;
  position:relative;
  background-color:#fff;
  padding:20px;
  float:left;
  height:50px;
  
  box-shadow:-8px 8px 20px -6px #000;
  
  border-bottom-left-radius: 40px;
  transition: height .5s ease;
}

.searchTerm{
padding: 5px 10px;

background:#fff;
height:30px;
color:#444;
border: 0;
position:relative;
left:50px;
top:-10px;
width: 150px;

border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.65);
outline: 0;
}

/* ==========================
   Search Box
   ========================== */





.searchBtn {
    padding: 5px 10px;
border: 0;
position: absolute;
left:220px;
top:8px;
width: 38px;
cursor: pointer;
margin: 2px -38PX;
border-left: 2px solid skyblue;
height: 30px;
font-weight: 900;
font-size: 12px;
background-color: #f6f5ef;
color:#009F8A;
border-radius:0px 5px 5px 0px;
}


.searchForm_1 {
  
  margin:20px;
  width:500px;
  position:relative;
  background-color:#fff;
  padding:20px;
  float:left;
  height:50px;
  
  box-shadow:0px 0px 12px #8f7ff1;
  border-radius: 10px;
  /*border-bottom-left-radius: 40px;*/
  transition: height .5s ease;
}

.bm_level_2_container {
  
  padding-right:0 50px 0 0;
  margin:0px;
  
  position:relative;
  background-color:#fff;
  
  
  height:50px;
  
  
  border-radius: 10px;
  /*border-bottom-left-radius: 40px;*/
  transition: height .5s ease;
}
.searchTerm_1{
padding: 5px 10px;

background:#fff;
height:30px;
color:#444;
border:none;
position:relative;
/*left:50px;*/
top:-10px;
width:90%;

border-radius: 5px;
/*box-shadow: 1px 1px 5px rgba(0,0,0,0.65);*/
outline: 0;
}

.searchBtn_1 {
    padding: 5px 10px;
border: 0;
position: absolute;
left:400px;
top:8px;
width: 130px;
cursor: pointer;
margin: 2px -38PX;
/*border-left: 2px solid #8f7ff1;*/
height: 30px;
font-weight: 900;
font-size: 12px;
background-color:white;
color:#8f7ff1;
/*color:#009F8A;*/
border-radius:0px 5px 5px 0px;
}





/* ==========================
   tooltip/hover popup
   ========================== */

.scroll-text {
  width: 100%;
  
  white-space: nowrap;
  animation: scroll-left 50s linear infinite;
}

@keyframes scroll-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateY(-100%);
  }
}