#tools
{
  overflow-y: scroll;
  scroll-behavior: smooth;
  float:right;
  width: 450px;
  padding:20px;
  box-sizing: border-box;
  background-color: rgb(250, 250, 250);
  font-family: Inter,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-box-shadow: -3px 0px 3px 0px rgba(196,196,196,1);
  -moz-box-shadow: -3px 0px 3px 0px rgba(196,196,196,1);
  box-shadow: -3px 0px 3px 0px rgba(196,196,196,1);
  z-index: 10;
}

#status_bar_container
{
  width: 100%;
  height:100%;
  display: none;
  align-items: center;
}

#form_in_progress
{
  display: initial;
}

#form_completed
{
  display: none;
}

#status_bar_outer
{
  height:20px;
  width: 100%;
  padding: 2px 2px;
  box-sizing: border-box;
  background-color: rgb(236, 236, 236);
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.178);

  
  border-radius: 4px;
  border:1px solid black;
}
#status_bar_inner
{
  height: 100%;

  width: 0%;
  background-color:black;
  border-radius: 4px;
}

#instruction
{
  width: 100%;
  background-color: rgb(250, 250, 250);
  font-size: 16px;
  border-bottom: 4px solid rgb(230,230,230);
  box-sizing: border-box;
}

.template_link
{
  text-decoration: none;
  color:black;
  padding:5px 10px;
  font-weight: 500;
  display: inline-block;
  margin:10px 0px;
  border:1px solid black;
  border-radius: 4px;
}

.template_link:hover
{
  background-color: black;
  color:white;
}

form
{
  line-height: 0;
}

.form_text
{
  font-weight: 700;
  font-size: 16px;
}
.form_text_info
{
  font-weight: 500;
  font-size: 12px;
  color:rgb(71, 71, 71);
  line-height: 1;
}
/* CUSTOM CSS FORM - need to disable default inputs style */
#bg_form,#cover_form, #audio_form
{
  display: none;
}

.custom_bg_upload, .custom_cover_upload, .custom_audio_upload
{
  cursor: pointer;
  background-image: url("../images/icons/backup-24px.svg");
  background-repeat: no-repeat;
  background-position: center right 5%;
  background-position-x: right 5%;
  background-position-y:center;
  display: block;
  margin:0px;
  width:100%;
  height:40px;
  padding:0px 10px 0 10px;
  box-sizing: border-box;
  border:1px solid black;
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.178);
  border-radius: 4px;
  line-height: initial;
  background-color: white;
  overflow: hidden;
  font-size: 17px;
}

.disabled_form
{
  border: 1px solid rgb(187, 187, 187);
  background-color: rgb(233, 233, 233);
  cursor:default;
}

#cover_filename, #bg_filename, #audio_filename
{
  margin:10px;
  color:gray;
  padding: 0;
  font-weight: 600;
}

.error_msg
{
  color:red;
  padding: 0px;
  font-size: 14px;
  font-weight: 200;
  display: none;
}
.active_msg
{
  display: block;
}

.disabled_form p
{
  color: rgb(192, 192, 192) !important;
}

.custom_bg_upload:not(.disabled_form):hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}
.custom_cover_upload:hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}
.custom_audio_upload:hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}

#text_container
{
  width: 100%;
  display: flex;
}

#artist_name, #track_name
{
  border:1px solid black;
  border-radius: 4px;
  text-align: center;
  display: block;
  height: 40px;
  width:40%;
  flex-grow: 1;
  /* float: left; */
  margin: 0px 0px 0px 2px;
  box-sizing: border-box;
  /* display: inline-block; */
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.178);
  font-size: 17px;
  font-weight: 600;

}

#track_name
{
  margin: 0px 2px 0px 0px;
}
#artist_name:hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}
#artist_name:focus
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}

#track_name:hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}
#track_name:focus
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
  -webkit-box-shadow: inset 0 0 2px rgb(0, 0, 0);
}

/* Color picker */

#color_picker_ext
{
  width: auto;
  display: block;
  height:40px;
}

.colors_container
{
  height: 100%;
  display: flex;
  align-items: center;
}

.colors
{
  width:20px;
  height: 100%;
  display: block;
  background-color: rgb(100, 100, 100);
  border:1px solid black;
  box-sizing: border-box;
  float: right; 
  flex-grow: 1;
  cursor: pointer;
  transition: 0.1s;
}


.colors:hover
{
  height: 50px;
}

#color_picker_ext input
{
  float:left;
}
#hex_cassette, #hex_bg
{
  float: left;
  text-align: center;
  border:1px solid black;
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.178);

  border-radius: 0px 4px 4px 0px;
  border-left: none;
  height: 40px;
  width: 30%;
  box-sizing: border-box;

  font-size: 16px;
  font-weight: 400;
  margin-right: 5px;
  
}
#hex_cassette:hover, #hex_bg:hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}
input[type=color]:hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);

}

input[type=color]
{
  padding:5px;
  margin:0px;
  width:40px;
  height:40px;
  background-color: white;
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.178);

  border:1px solid black;
  font-size:16px;
  border-radius: 4px 0px 0px 4px;
  cursor: pointer;
  box-sizing: border-box;
  
}

#text_color_picker
{
  margin:0px 5px;
  box-sizing: border-box;
  float: right;
  border-radius: 4px;
  flex-shrink: 0;
}


input[type=email]
{
  border:1px solid black;
  border-radius: 4px;
  text-align: center;
  display: block;
  height: 40px;
  width:100%;
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.178);
  font-size: 17px;
  font-weight: 600;
  box-sizing: border-box;

}
input[type=email]:hover
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}
input[type=email]:focus
{
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}

/* Custom sliders */
.slider {
  /* display: none; */
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #ffffff;
  outline: none;
  border: 1px solid black;
}

.slider:hover {
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}


.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #000000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #000000;
  cursor: pointer;
  border-radius: 0px;
  border: 0px;
}

.custom_watermark
{
  cursor: pointer;
  display: block;
  margin:0px;
  width:100%;
  width:100%;
  height:40px;
  box-sizing: border-box;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  border:1px solid black;
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.178);
  font-size: 16px;
  border-radius: 4px;
  padding:0px 10px 0 10px;

  line-height: initial;
  background-color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.custom_watermark:not(:disabled):hover {
  box-shadow: inset 0 0 2px rgb(0, 0, 0);
}

select:disabled
{
  border: 1px solid rgb(187, 187, 187);
  background-color: rgb(233, 233, 233);

  cursor:initial;
}

.disabled_text
{
  color: rgb(95, 95, 95);
}
.pro_tag
{
  display:inline;
  color:black;
  vertical-align: middle;

  /* background-color: teal; */
  /* height:10; */
  border-radius: 4px;
  font-size: 12px;
  line-height: 0;
  text-align: center;
  padding: 2px 8px 2px 8px;
  line-height: 0;
  margin: 0px 5px 0px 5px;
  box-sizing: border-box;
  font-weight: 800;
  /* border: 1px solid black; */
  background-color: #ffc400;
  cursor: pointer;
  /* transform: skewX(-15deg); */
}
.pro_tag:hover
{
  background-color: black;
  color: white;
}
.pro_link 
{
  width: auto;
  text-decoration: none;
  color: initial;
}