/***$$$$$----- MAIN CSS -----$$$$$***/
/*$$$$---- MAIN:CONTAINER */
.main-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: -10px;
}

/*$$$--- PAGE:TITLE/Div  */
.page-title-div {
  display: flex;
  color: #333;
  border-bottom: 2px solid #888;
  justify-content: center;
  align-items: center;
  padding-bottom: 3px;
}
/*** Main:Title */
.main-container .main-title {
  margin-top: 15px;
}

/*** Svg */
.page-title-div svg {
  width: 40px;
  height: 40px;
  fill: #333;
  position: relative;
  top: 0px;
  right: 5px;
}
/*** Cloud:svg  */
.page-title-div .bi-cloud-arrow-up-fill {
  margin-top: 10px;
}
/*** H2 */
h2 {
  font-weight: bold;
  margin-bottom: 3px;
}
/*** Main:H2 */
.main-container .main-title h2 {
  margin-bottom: -8px;
}

/*$$$$---- TAB:CONTAINER/Div ----$$$$$ */
.tab-container {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

/*$$$$--- CARD  */
.tab-container .card {
  width: 340px;
  height: auto;
}
/***--- Song */
.tab-container .song-card {
  position: relative;
  top: -35px;
}

/*$$$--- HEADER:Card */
.tab-container .card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  padding: 25px;
}
/*** Svg */
.tab-container .card-header svg {
  width: 30px;
  height: 30px;
  fill: #333;
  position: relative;
  right: 7px;
}

/*$$$$---- BODY */
.card-body {
  padding-left: 0px;
  padding-right: 0px;
}
/*$$$--- PRICE:ITEM/Div */
.card-body .price-item-div {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 24px;
  color: #333;
  padding-top: 14px;
}
/*** Svg */
.card-body .price-item-div svg {
  width: 45px;
  height: 45px;
  fill: #333;
  margin-right: 4px;
}

/*$$$--- PRICE:TAG/Div */
.card-body .price-tag-div {
  display: flex;
  position: relative;
  top: 25px;
  gap: 1px;
}
/*** Song:Tag */
.card-body .price-item-div .song-tag {
  top: 10px;
}

/*$$$--- PACKAGE:LIST/Ul */
.card-body ul {
  margin-top: 15px;
  font-size: 18px;
  margin-left: 20px;
  margin-right: 20px;
}
/***--- List:Li */
.card-body ul li {
  margin-bottom: 12px;
  color: #888;
}
/*** Pay:Li */
.card-body ul .pay-list {
  color: #8fbc8f;
  font-size: 14px;
}
/*** Auto:Li/Delete */
.card-body ul .auto-list {
  color: #ccc;
}

/*$$$--- UPLOAD:LINK/Div:Button/Main */
.upload-link-div {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 45px;
  margin-bottom: 100px;
  border: 1px solid #ccc;
  border-radius: 20px;
  height: 45px;
  width: 200px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  transition: scale 0.2 ease;
}
/*** Album */
.album-link {
  width: 230px;
  height: 46px;
}
/*** Link */
.main-container a {
  color: #333;
}
/*** Svg */
.upload-link-div svg {
  width: 23px;
  height: 23px;
  fill: #333;
  position: relative;
  right: 5px;
}
/*** Hover */
.upload-link-div:hover {
  scale: 1.01;
}

/*$$$$---- @PAY:PAGE ----$$$$/
/*$$$--- PAY ---$$$/
/*** PAGE:Title/$:Sign */
.page-title-div .bi-currency-dollar {
  position: relative;
  left: 8px;
  top: -2px;
  fill: #333;
}

/*$$$--- CARD */
.container .pay-card {
  height: auto;
  position: relative;
  top: 35px;
  width: auto;
  margin-left: 20px;
  margin-right: 20px;
}
/*** Pay:Number/Li */
.card-body .pay-number {
  color: #333;
  padding-top: 8px;
}
/*** Auto:li */
.card-body ul .auto {
  color: #ccc;
}

/***--- Action:Buttons/Pay:Info/Advert */
.container .card-body .pay-info {
  display: flex;
  gap: 50px;
  position: relative;
  left: -3px;
}
/*$$$--- PROCEED:BUTTON */
.card-body .action-buttons-div .proceed-button {
  background-color: #333;
}
/*** Pay:Info/Advert */
.container .action-buttons-div .pay-info-back {
  display: flex;
  position: relative;
  top: 2px;
}
/***--- Svg:Info */
.container .action-buttons-div .pay-info-back svg {
  top: 14px;
  left: 27px;
}
/***--- Text */
.container .action-buttons-div .pay-info-back .text {
  position: relative;
  top: -9px;
  left: 28px;
}
/***--- Hover:button */
.container .action-buttons-div .pay-info-back:hover .text {
  color: #333;
}

/*$$$$---- @AUDIO:UPLOAD CSS ------$$$$*/
/*$$$$---- UPLOAD  -----*/
/*$$$---- CONTAINER */
.container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: -30px;
}
/***--- Page:Title/Div  */
.container .page-title-div {
  margin-top: 7px;
}

/*$$$--- CANCEL:MESSAGE/Div:Upload */
.cancel-message-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 0;
  font-size: 17px;
  position: relative;
  top: 35px;
  color: #ff7f7f;
}
/***--- Text:Div/Cancel */
.cancel-message-div .text-div {
  display: flex;
  flex-direction: row;
}
/*** Re-Upload/Text */
.cancel-message-div .text-div .re-upload {
  position: relative;
  color: #ccc;
  right: 9px;
}

/*$$$$$---- FORM ----$$$$$*/
form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/*$$$$---- CARD */
.container .card {
  width: 400px;
  display: flex;
  position: relative;
  top: -25px;
  margin-bottom: -20px;
}
/***--- Album */
.container .album-card {
  min-width: 430px;
  margin-bottom: -5px;
}

/*$$$--- HEADER */
.container .card-header {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  padding: 25px;
  align-items: center;
  justify-content: center;
}
/*** Svg */
.container .card-header svg {
  width: 30px;
  height: 30px;
  fill: #333;
  position: relative;
  right: 5px;
  top: 1px;
}

/*$$$$---- BODY */
.container .card-body {
  padding-top: 32px;
}

/*$$$--- ERROR:Div */
.container .error-div {
  font-size: 17px;
  color: #ff7f7f;
  margin-top: -5px;
  margin-bottom: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*** Error:Div/Js */
.container #error_div {
  color: #ff7f7f;
}

/*$$$--- TITLE:NOTE/Div */
form .title-note-div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  top: -15px;
}
/*** Album */
form .title-note-div {
  margin-top: 0px;
}
/*** Note */
form .note-text {
  color: #ff7f7f;
}
/*** BEAT:Limit/Text */
form .beat-limit-text {
  color: #ff7f7f;
  padding-left: 40px;
  padding-right: 20px;
}

/*$$$--- NO:AUDIO/Div */
form .no-audio-div {
  color: #ff7f7f;
  text-align: center;
}
/*** Paragraph:Form */
form p {
  color: #ccc;
}

/*$$$--- CHOOSE:FILE/Div */
form .choose-file-div {
  margin-top: 0px;
}

/*$$$--- AUDIO:CONTROL/Div */
form .audio-control-div {
  margin-top: 45px;
}

/*$$$$---- ACTION:BUTTONS/Div ---$$$$*/
.action-buttons-div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
  gap: 50px;
  padding-bottom: 20px;
}
/*** Album */
.card-body .album-buttons {
  margin-top: -35px;
}
/*** SINGLE */
form .action-button {
  color: #fff;
  border: none;
  outline: none;
  height: 45px;
  width: 165px;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: scale 0.2 ease;
}
/*** Svg */
form .action-buttons-div svg {
  width: 18px;
  height: 18px;
  position: relative;
  left: -1px;
}

/*$$$$--- UPLOAD:BUTTON */
form .action-buttons-div #upload_button {
  text-wrap: nowrap;
  background-color: #333;
}
/*** Album */
form .album-button {
  width: 200px;
}
/*** Svg */
form .album-buttons #upload_button svg {
  fill: #fff;
}

/*$$$--- BACK:BUTTON */
form .action-buttons-div #back_button {
  background-color: #fff;
  border: 1px solid #ccc;
  width: 120px;
  color: #ccc;
}
/*** Album */
form .album-buttons #back_button {
  width: 114px;
}
/*** Svg */
.action-buttons-div #back_button svg {
  fill: #ccc;
}
/*$$$--- ALBUM:BACK/Button */
form .action-buttons-div .album-back-button {
  max-width: 110px;
}
/*** Hover:Link */
form .action-buttons-div #back_button:hover {
  color: #333;
}
/*** Hover:Svg */
#back_button:hover svg {
  color: #333;
  fill: #333;
}
form .action-buttons-div #upload_button:hover {
  color: #fff;
}

/*$$$$---- UPLOAD:SONGS/MENU:Album -----$$$$*/
/*$$$--- UPLOAD::MENU 
/*$$$--- MENU:Div */
#album_upload_songs_menu_div {
  display: none;
  position: absolute;
  right: inherit;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 999;
  height: 350px;
  width: 490px;
  margin-top: 137px;
}
/*$$$--- SVG:Div/X:Cross */
#album_upload_songs_menu_div .svg-div {
  color: #888;
  float: right;
  position: relative;
  right: 15px;
  top: 10px;
}
/*** Svg */
#album_upload_songs_menu_div svg {
  fill: #ccc;
  width: 40px;
  height: 40px;
}
/*** Hover */
#album_upload_songs_menu_div svg:hover {
  fill: #333;
}

/*$$$--- TITLE:Div/Menu:Upload */
#album_upload_songs_menu_div .album-title-div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  position: relative;
  top: 53px;
  left: 25px;
  margin-right: 40px;
  text-wrap: wrap;
  margin-bottom: 60px;
}

/*$$$$---- METADATA:Div */
#album_upload_songs_menu_div .metadata-div {
  font-size: 17px;
  padding-top: 10px;
  padding-left: 20px;
  margin-bottom: -15px;
  display: flex;
  width: 100%;
}
/*** Size:Div */
#album_upload_songs_menu_div #size {
  color: #ccc;
}
/*** Song:Count */
#album_upload_songs_menu_div #song_count {
  color: #ffd580;
  text-wrap: nowrap;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  left: 140px;
}

/*$$$--- ERROR:Div */
#album_upload_songs_menu_div #error_menu_div {
  color: #ff7f7f;
  margin-top: 40px;
}
/*** LIST:Color */
#album_upload_songs_menu_div #album_songs_list_div ul:nth-child(odd) {
  color: #888;
}
/*** End:Upload/Menu */

/*$$$--- ERROR:Div */
#album_upload_songs_menu_div #error_menu_div {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff7f7f;
  margin-top: 40px;
}
/*** LIST:Div */
#album_upload_songs_menu_div #album_songs_list_div {
  margin-top: -25px;
}
/***--- Color */
#album_upload_songs_menu_div #album_songs_list_div ul:nth-child(odd) {
  color: #888;
}
/*** End:Upload/Menu */

/*$$$$---- PROGRESS:BAR ----$$$$*/
/***--- Uploading:Div/Text */
#uploading_text_div {
  display: none;
  position: relative;
  color: #ccc;
  top: 15px;
}
/*$$$$---- Div ----$$$$*/
#progress_div {
  display: none;
  margin-top: 20px;
  width: 90%;
}
/***--- Progress:Bar */
#progress_bar {
  background-color: #2eb774;
}
/*** Input:Range/Track */
form input[type="range"]::-webkit-slider-runnable-track {
  background-color: #2eb774;
}
/*** Thumb */
form input[type="range"]::-webkit-slider-thumb {
  margin-top: 100px;
}

/*$$$$---- FORM:GROUP -----$$$$*/
form .form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 40px;
}
/*** Paragraph */
form .form-group p {
  color: #888;
}
/*** Text */
form .form-group .text {
  display: none;
  color: #ccc;
  margin-left: 5px;
}
/***$$$--- PROGRESS:% */
#progress_percent {
  color: #333;
  font-size: 18px;
}

/*$$$--- UPLOADED:Size/Div */
form .form-group .uploaded-size-div {
  display: flex;
  gap: 3px;
}
/*** Text */
form .form-group .uploaded-size-div .text {
  position: relative;
  top: -20px;
}
/*** Uploaded:Size */
#uploaded_size {
  color: #333;
  font-size: 18px;
}
/*** Total:Size/Div:File */
form .form-group .total-size-div {
  display: flex;
  gap: 3px;
  margin-top: -5px;
}
/*** Text */
form .form-group .total-size-div .text {
  position: relative;
  top: -20px;
}

/*$$$--- CANCEL:BUTTON/Div */
form #cancel_button_div {
  justify-content: center;
  margin-top: -5px;
  padding-bottom: 70px;
}
/*** Button */
form #cancel_button_div #cancel_button {
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #ccc;
  width: 160px;
}
/*** Svg */
form #cancel_button_div #cancel_button svg {
  fill: #ccc;
  width: 28px;
  height: 28px;
  position: relative;
  left: 5px;
  top: -1px;
}
/*** Hover:Svg */
form #cancel_button_div:hover #cancel_button svg {
  fill: #333;
}
/*** Hover:Text */
form #cancel_button_div:hover #cancel_button {
  color: #333;
}
/*$$$$--- @MESSAGE:NOTE/Div:Text/? */
/***--- Message:Div ----*/
.message-note-div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  height: 0;
  position: relative;
}
/*** Svg */
.message-note-div svg {
  position: relative;
  top: -4px;
  left: 8px;
}
/*** Hover */
.message-note-div svg:hover {
  fill: #333;
}
/*$$$---- MENU:Message ---
/***--- Menu:Div ----*/
.main-container .message-menu-div {
  position: absolute;
  top: 315px;
  width: 312px;
  height: auto;
  right: inherit;
  overflow: hidden;
  z-index: 1;
  padding-bottom: 30px;
  background-color: #fff;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1);
}
/*** Show */
.message-menu-div.show {
  display: block;
}
/*** Close */
.message-menu-div.close {
  display: none;
}
/*** X:Cross/Svg */
.message-menu-div .bi {
  fill: #ccc;
  width: 32px;
  height: 32px;
  float: right;
  position: relative;
  right: -3px;
  top: -4px;
}
/*** Hover:Svg */
.message-menu-div .card-body .x-svg-div:hover svg {
  fill: #333;
}
/*** Title:Span */
.message-menu-div span {
  color: #333;
}
/*** Text:Paragraph */
.message-menu-div p {
  color: #888;
  position: relative;
  top: 35px;
  left: 8px;
}
/*** End:Menu */

/*$$$$$---- MEDIA:QUERY ----$$$$$*/
/*$$$$---- @MAX-WIDTH:999Px */
@media only screen and (max-width: 999px) {
  /*$$$$---- TAB:CONTAINER/Div:Main */
  .tab-container {
    margin-top: 60px;
  }
  /*$$$--- CARD */
  .tab-container .card {
    width: 360px;
  }
  /*** Song  */
  .tab-container .song-card {
    top: -53px;
  }
  /*** Beat */
  .tab-container .beat-card {
    width: 360px;
  }

  /*$$$$---- @AUDIO:UPLOAD ---- */
  /*$$$--- CONTAINER:Div/Upload */
  .container {
    margin-top: 35px;
    margin-bottom: 30px;
  }

  /*$$$--- CARD */
  .container .card {
    margin-top: 30px;
  }

  /*$$$--- UPLOAD::MENU/Album 
/*$$$--- MENU:Div */
  #album_upload_songs_menu_div {
    height: 390px;
    margin-top: 135px;
  }
} /*** End:@999px */

/*$$$$--- @MIN-WIDTH:999Px */
@media only screen and (min-width: 999px) {
  /*$$$--- FORM:CONTAINER */
  .container {
    margin-top: 35px;
  }

  /*$$$--- CARD */
  .container .card {
    margin-top: 30px;
  }
} /*** End:@Min/999px */

/*$$$$---- @MAX-WIDTH:829Px/Main:Upload */
@media only screen and (max-width: 832px) {
  /*$$$$---- TAB:CONTAINER/Div */
  .tab-container {
    margin-top: 0;
  }
  /*** Song  */
  .tab-container .song-card {
    top: 0;
  }
} /*** End:@832px */

/*$$$$--- @MAX-WIDTH 599Px */
@media only screen and (max-width: 599px) {
  /*$$$--- FORM:CARD */
  .container .card {
    width: 365px;
    padding-bottom: 60px;
    margin-bottom: -30px;
  }
  /***--- Album */
  .container .album-card {
    min-width: 360px;
  }
  /*$$$--- ACTION:BUTTONS/Div */
  form .action-buttons-div {
    flex-direction: column;
    gap: 45px;
  }
  /***--- Pay:Info/Advert:Buttons */
  .container .card-body .pay-info {
    gap: 60px;
    top: 15px;
  }
  /*** BACK:Button */
  form .action-buttons-div #back_button {
    border: none;
    margin-bottom: -100px;
  }

  /*$$$--- ALBUM:Songs/Menu:Div/Upload */
  #album_upload_songs_menu_div {
    width: 340px;
  }
    /***--- @MESSAGE:Note/Div:Menu/? */
  .main-container .message-menu-div {
    top: 1000px;
    width: 320px;
  }
} /*** End:@599px */
/*** End:Queries */
/*** End:Css */