/*
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600,700&display=swap');
*/

*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}


:root {
    --dark-blue-color: #2a3c4f;
    --headerFooterBkg: #2d679e;
    
    --blue-color: #2a77bf;
    --main-color: #f60;
    --blueAlt-color: #2d679e;
    --blueAlt2-color: #659ccf;
    --background-color: #efefef;
    --grey-color: #e1e1e1;
}


body {
    background: var(--grey-color);
    margin: 0;
    border:0;
    padding-top: 80px;
    padding-bottom: 100px;
    font-family: 'Poppins', sans-serif;
    text-align:initial;
    line-height:initial;
    min-height: 100vh;
}

body.test {
    background: var(--grey-color);
    margin: 0;
    border:0;
    padding: 80px 50px;
    font-family: 'Poppins', sans-serif;
    text-align:initial;
    line-height:initial;
    min-height: 100vh;
}

/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
#simp button,#simp input,#simp img{
    border:0;
}

#about {
    position: fixed;
    z-index:5;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--headerFooterBkg);
    background: var(--blue-color);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 0 10px 0 0;
}


#title {
    cursor: pointer;
    width: 230px;
    height: 40px;
    background: var(--main-color);
    position: relative;

}

#title::after {
    content: '';
    position: absolute;
    top: 0;
    z-index: 1;
    right: -30px; /* Adjust this value for spacing */
    width: 30px; /* Adjust the width of the slanted background */
    height: 100%; /* Make the background span the entire height of the title */
    background: var(--main-color);
    transform: skewX(-35deg); /* Skew the background */
    transform-origin: top right; /* Set the skew origin */
}


#title div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 30px;
    color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    line-height:1;
    z-index: 2;
}


#buttonHolder {
    display: flex;
    justify-content: flex-end;
}

#buttonHolder button,
.sendIt {
    padding: 5px 15px;
    background: var(--main-color);
    color: white;
    border: none;
	cursor: pointer;
	outline: none;
    border-radius: 5px;
    margin: 0 6px;
    font-size: 15px;
    font-weight: 500;
}

#buttonHolder button:hover,
.sendIt:hover {
    background: #ff3300;
}

#aboutImgHolder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
  }

#aboutContent {
    padding: 20px;
}



#playerContainer {
    position: fixed;
    z-index:2;
    width: 100%;
    top: 120px;
    left: 0px;
    height: 50px;
    background: var(--background-color);
    
}


#simp {
    max-width:600px;
    font-size: 16px;
    text-align:initial;
    line-height:initial;
    background: #17212b;
    background-color: #efefef;
    font-weight: 500;
    color: var(--blue-color);
    color: #fff;
    margin:0 auto;
    overflow:hidden;
}


#simp .simp-album {
    padding:10px 10px 5px 10px;
}

#simp .simp-album .simp-cover {
    width: 220px;
    border-radius: 10px;
    overflow: hidden;
    max-height:160px;
}

#simp .simp-album .simp-cover img {
    width: 100%;
    margin:0;
    padding:0;
    display:block;
    border-radius: 10px;
}

#simp .simp-album .simp-info {
    max-width: 360px;
    padding-left: 10px;
}


#simp .simp-album .simp-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--dark-blue-color);
}

#simp .simp-album .simp-artist,
#simp .simp-album .simp-written {
    font-size: 14px;
    color: var(--dark-blue-color);
    line-height: 1.4;
    font-weight: 500;
}




.simp-time{
    font-size: 14px;
}

#simp .simp-controls button {
    font-size:130%;
    width:32px;
    height:32px;
    background:#2a3c4f;
    color:#ddd;
    padding:7px;
    cursor:pointer;
    border:0;
    border-radius:3px;
    margin: 0 3px;
}

#simp .simp-controls button[disabled]{
    color:#607488;
    cursor:initial;
}

#simp .simp-controls button:not([disabled]):hover{
    background:#4082bc;
    color:#fff;
}



#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;}
#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{
    flex:1;margin-left:10px;position:relative;
}
#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .simp-controls .simp-time,
#simp .simp-controls .simp-others{
    margin-left:10px;
}
#simp .simp-controls .simp-time {
    color: white;
}
#simp .simp-controls .simp-volume{max-width:110px;}
#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}

#simp .simp-controls .simp-others .simp-active{
    background:#ec5911;
}

#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}

#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}

#simp .simp-player {
    position: fixed;
    z-index: 2;
    background: var(--grey-color);
    width: 600px;
    top: 40px;
}

#simp .simp-playlist {
    padding-top: 290px;
}

.simp-shide {
    display: none;
}

.simp-footer {
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    padding:5px;
    background: var(--headerFooterBkg);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-align:center;
    -webkit-text-size-adjust: none;

}

@media screen and (orientation: portrait) {
    #simp-footer {
      font-size: 12px !important;
    }
  }
  
@media screen and (orientation: landscape) {
    #simp-footer {
        font-size: 12px !important;
    }
}





#simp .simp-display {
    /* display: none; */
    overflow:hidden;
    max-height:650px;
    /* transition:max-height .5s ease-in-out; */
    padding-bottom: 10px;
}


#simp .simp-display .simp-number {
    display: none;
}




#simp .simp-hide{max-height:0;}

#simp .simp-controls {
    border: solid 4px var(--blue-color);
    background: var(--main-color);
    padding: 15px 25px;
    border-radius: 10px 10px 0 0;
    border-bottom: none !important;
}

.firstTimeNotice {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    background: var(--blue-color);
    padding: 8px;
    border-radius: 0 0 10px 10px;
}


#simp-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5px;
}


.listTitle {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}


#simp-legend .originals, 
#simp-legend .covers {
    position: relative;
    width: 100%;
    padding: 5px 0 0 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--blue-color);
}


#simp-legend .originals {
    border-right: 3px solid var(--blue-color);
    justify-content: flex-start;
    padding-left: 15px;
}

#simp-legend .covers {
    border-left: 3px solid var(--blue-color);
    justify-content: flex-end;
    padding-right: 15px;
}

#simp-legend .originals::before {
    font-family: "FontAwesome";
    content: "\f005";
    display: inline;
    font-size: 36px;
    margin-right: 28px;
    color: #ffc800;
}

#simp-legend .covers::after {
    font-family: "FontAwesome";
    content: "\f0c8"; /* square */
    display: inline;
    font-size: 36px;
    margin-left: 28px;
    color: #FF5733;
}



#simp-legend div.after::after {
    font-family: "FontAwesome";
    content: "\f063";
    margin-left: 10px;
    
}

.arrowHead {
    position: absolute;
    bottom: -2px;
    right: -18px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border-bottom: solid 6px var(--blue-color);;
    border-left: solid 6px var(--blue-color);
    background: none;
    transform: rotate(-45deg); /* rotate the element 90 degrees */

}

.orangeBox {
    display: inline-block;
    background: hsl(48, 100%, 54%);
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

/* playlist */
#simp ul{
    margin:5px 0 0;
    padding-top:20px;
    list-style:none;
}

#simp ul li {
    display: flex;
    align-items: center;
    white-space:nowrap;
    position: relative;
    

    overflow:hidden;
    text-overflow:ellipsis;
    margin:0;
    
    padding: 15px 8px;
    padding-left: 45px;
    padding-right: 45px;
    cursor:pointer;
    border-bottom: solid #999 1px;
    text-transform: capitalize;
    color: var(--dark-blue-color);

}
/* covers */
#simp ul li.left {
    justify-content: flex-end;
}

/* originals */
#simp ul li .original::before {
    font-family: "FontAwesome";
    content: "\f005";
    font-size: 36px;
    color: #ffc800;
    position: absolute; /* Position absolutely within the parent */
    left: -40px;
    top: 50%; /* Move it to the middle vertically */
    transform: translateY(-50%); /* Adjust to center properly */
}

/* covers  square */
#simp ul li .cover::after {
    font-family: "FontAwesome";
    content: "\f0c8";
    font-size: 36px;
    color: var(--main-color);
    position: absolute; /* Position absolutely within the parent */
    right: -40px;
    top: 50%; /* Move it to the middle vertically */
    transform: translateY(-50%); /* Adjust to center properly */  
}



#simp ul li:last-child{padding-bottom:13px;}
/*
#simp ul li:nth-child(odd){
    background:#0e1621;
}
*/
#simp ul li:hover{background:#ced9e3;}
#simp ul li.simp-active {
    background: var(--blueAlt2-color);
    color:#fff;
}

#simp ul li .simp-desc,
#simp ul li .simp-written {
    display: none;
}

#simp ul li .simp-source {
    position: relative;
}


#simp ul li .original .simp-number {
    position: absolute;
    z-index: 1;
    left: -31px;
    top: 13px;
    width: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #000;
    line-height: 0;
}

#simp ul li .cover .simp-number {
    position: absolute;
    z-index: 1;
    right: -31px;
    top: 12px;
    width: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    line-height: 0;
}

/* playlist scrollbar */
#simp ul{
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-color:#73797f #2f3841;
    padding: 30px 10px 40px 10px;
}

#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}



.contactWrapper,
.aboutMeWrapper,
.calendarWrapper,
.tipWrapper {
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100vh;
    padding: 20px;
    background: #fff;
    overflow-y: scroll;
    padding-bottom: 100px;
}

.hidden {
    display: none !important;
}

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

.calendar {
    width: 95%;
    max-width: 800px;
    height: 500px;
    margin: 100px 0;
}

.title {
    text-align: center;
    font-size: 20px;
    text-transform: capitalize;
}

h3 {
    font-weight: 400;
    margin-bottom: 30px;
    font-size: 30px;
}


.close-icon-holder {
    position: fixed;
    z-index: 9999;
    top: 70px;
    right: 40px;
    border-radius: 5px;
  }
  
  .close-icon {
    position: relative;
    margin: 10px;
    margin-top: 30px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    background: orangered;
  }
  
  .close-icon:hover {
    background: rgb(255, 119, 0);
  }
  
  .close-icon-x {
    width: 23px;
    background-color: white;
    position: absolute;
  }
  
  .close-icon-x::before,
  .close-icon-x::after {
    content: '';
    width: 23px;
    height: 2px;
    background-color: white;
    position: absolute;
  }
  
  .close-icon:hover .close-icon-x::before,
  .close-icon:hover .close-icon-x::after {
    border: 1px solid white;
  }
  
  
  .close-icon-x::before {
    transform: rotate(45deg);
  }
  
  .close-icon-x::after {
    transform: rotate(-45deg);
  }

    .contactContent .formContainter {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }
  
  .contactContent .formContainter h2:after {
    content: '';
  }
  
  .contactContent form .row {
    margin: 0 auto;
    width: 90%;

    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  
  .contactContent form label {
    width: 40%;
    display: flex;
    align-items: center;
  }
  
  .contactContent form .row input,
  .contactContent form .row textarea {
    width: 100%;
    border: 2px solid black;
    background: #efefef;
    padding: 20px;
    font-size: 18px;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
  }
  
  .contactContent form h5 {
    font-size: 20px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 30%;
  }

  .contactContent form label span {
    font-size: 80%;
  }
  
  .contactContent form button {
    width: 50%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
    font-size: 20px;
  }
  
  .requiredItems {
    font-size: 12px;
    margin: 10px 0;

  }


  .aboutMeContent,
  .tipContent {
    position: relative;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    
    
    font-size: 18px;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
  }

  .aboutMeContainter,
  .tipContainer {
    width: 100%;
    overflow: hidden; /* Prevent horizontal overflow */
    font-size: 15px;
    display: flex;
    justify-content: space-between;
  }


  .tipIframe-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjust the height as needed */
}

.tipIframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

  .bio-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .bio-text {
    font-size: 16px;
    line-height: 2;
  }

  .bio-images {
    padding-top: 100px;
  }
  
  .bio-image {
    display: block;
    max-width: 250px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  
  .imgRight {
    float: right;
    margin-left: 20px;
  }
  
  .imgLeft {
    float: left;
    margin-right: 20px;
  }
  
  /* Clear floats after images */
  .bio-text::after {
    content: "";
    display: table;
    clear: both;
  }

.simp-controls button div.control {
    display: none;
}

.hideDesktop {
    display: none;
}




/* mobile */
@media screen and (max-width:480px) {
    body {
        padding-top: 80px;
    }
    
    #buttonHolder button, .sendIt {
        padding: 5px;
        margin: 0 6px;
    }

    br.hidden {
        display: block !important;
    }

    #title img {
        margin: 0;
    }

    #simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{
        display:none;
    }
    #simp .simp-controls .simp-time{
        margin-right:10px;
    }

    .flex-wrap {
        flex-direction: column;
        align-items: center;
    }

    #simp .simp-album .simp-cover {
        margin-right: 0;
        margin-bottom: 10px;
    }

    #simp .simp-player {
        position: relative;
        width: 100%;
        top: 0;
        padding: 0 10px;
      }

    #simp .simp-album .simp-artist,
    #simp .simp-album .simp-written {
        min-width: 300px;
        line-height: 1.4;
        font-size: 17px;
    }

    #simp {
        max-width: 100%;
        text-align: center;
    }

    #simp .simp-playlist {
        padding-top: 0;
    }

    #simp .simp-controls button {
        font-size: 130%;
        width: 64px;
        height: 64px;
        background: none;
        color: #ddd;
        padding: 7px;
        cursor: pointer;
        border: 0;
        border-radius: 5px;
        border: solid 1px #fff;
      }

    #simp .simp-controls .simp-prev, 
    #simp .simp-controls .simp-next {
        font-size: 30px;
    }
    

    #simp .simp-controls input[type="range"] {
        height: 30px;
        width: 240px;
    }
    .simp-time {
        font-size: 18px;
    }

    #simp .simp-controls {
        padding: 10px;
    }

    

    #simp .simp-album .simp-info {
        min-width: 0px;
    }

    #simp .simp-album {
        padding: 20px 0 10px 0;
    }

    .contactWrapper, .aboutMeWrapper {
        top: 60px;
      }

    .close-icon-holder {
        position: fixed;
        top: 70px;
        right: 20px;
        border-radius: 5px;
        z-index: 9999;
    }
    
    .contactContent .formContainter {
        width: 100%;
        margin: 0;
    }

    .contactWrapper .title {
        margin-top: 60px;
      }

    .calendar {
        width: 100%;
        max-width: 800px;
        height: 400px;
        margin-top: 100px;
    }

    #simp ul{
        padding: 0 10px 40px 10px;
    }


    #simp-legend .originals {
        padding-left: 0;
    }

    #simp-legend .covers {
        padding-right: 0;
    }
    
    #simp-legend .originals::before {
        margin-right: 8px;
    }
    #simp-legend .covers::before {
        margin-left: 8px;
    }

    .simp-footer {
        border-top: 1px solid var(--blue-color)
    }

    #about {
        border-bottom: 1px solid var(--blue-color)
    }

    #simp ul li {
        text-transform: capitalize;
      }

    #simp .simp-album .simp-cover {
        width: 90%;
        max-height: 180px;
    }

    #simp .simp-controls button[disabled]{
        color:#982620;
    }

    .controls {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 10px 0;
    }

  

    .buttonHolder span {
        font-size: 12px;
        font-weight: 300;
    }
    
    .simp-time {
        display: flex;
        justify-content: center;

    }

.simp-controls button  {
    position: relative;
    text-align: center;
    margin:15px !important;
}

.simp-controls button div.control {
    display: block;
    position: absolute;
    left: 0;
    bottom: 5px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #fff;
}
    
#about {
    flex-direction: column;
    padding: 0;
    padding-bottom: 10px;

  }


#title {
    width: 100%;
}

#title::after {
    display: none !important;
}


  #buttonHolder {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    width: 95% !important;
    }

    #buttonHolder button {
        width: 50%;
    }

    .aboutMeContainter,
    .tipContainer {
        flex-direction: column;
    }

    .tipWrapper {
        position: fixed;
        top: 50px;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100vh;
        padding: 0px;
        background: #fff;
        overflow-y: scroll;
        padding-top: 50px;
        padding-bottom: 100px;
      }

    .bio-images {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
    }
    
    .imgRight {
        margin-left: 0px;
      }

    .hideDesktop {
        display: block;
    }

    .tipContent {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        
        
        font-size: 18px;
        border-radius: 5px;
        font-family: 'Poppins', sans-serif;
      }
}


/* tiny mobile */
@media screen and (max-width:370px) {   
    #simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}



/* Add these styles */
.simp-display {
    display: flex;
    align-items: center; /* Center vertically */
}

.simp-album {
    display: flex;
    width: 100%;
}

.simp-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    border-radius: 10px;
    overflow: hidden;
    max-height: 160px;
}

.simp-cover img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

/* Existing styles remain unchanged */
.w-full {
    width: 100%;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.flex-align {
    align-items: center;
}