#publish_artist_name, #publish_song_name {
    font-size: 1em;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #888;
}

#publish_song_name_div { margin-top: 10px; }

#publish_checkbox { width: 1.5em;
    height: 1.5em;
    cursor: pointer;
}

#publish_info_fields { display: none; }

.wavesurfer-handle-start
{
    z-index: 1;
}



.wavesurfer-handle-end {
    z-index: 1;
}



.wavesurfer-handle-start:after
{
    content: "";
    display: block;
    margin-top: -23px;
    background: url(/ringtone_maker/images/handle_green.png) no-repeat;
    border: 0 none;
    width: 24px;
    height: 35px;
    cursor: pointer;
    z-index: 20;
    margin-left: -11px;
}












.wavesurfer-handle-end:after {
    content: "";
    display: block;
    margin-top: -23px;
    background: url(/ringtone_maker/images/handle_green.png) no-repeat;
    border: 0 none;
    width: 24px;
    height: 35px;
    cursor: pointer;
    z-index: 20;
    margin-left: -11px;
}








#ringtone_editor_wrapper { width: 90%; margin: 0 auto; text-align: left; padding-top: 15px;  }




#ringtone_waveform { width: 100%; margin-top: 15px; /* border: 1px solid #e5e5e5; */ }

#ringtone_waveform wave:only-child { overflow: inherit!important; }

/*Псевдотег для того, чтобы не слетало передвижение мышью ползунка региона. Т.е. это просто расширение обрабатываемой области*/
#ringtone_waveform wave:only-child:after {
    content: "";
    width: 100%;
    height: 100%;
   /* background: blue; */
    display: block;
    position: absolute;
    top: -90%; }

/*
#waveform wave wave:nth-of-type(1)::after {
    content: "4";
    background: url(https://ringtonemaker.com/images/ringtonemaker/slider_17x23_blue.png) no-repeat;
    border: 0 none;
    width: 17px;
    height: 23px;
    z-index: 20;
    position: absolute;
    bottom: 2px;
    right: 0;
    cursor: pointer;

}
*/




input[type=range] {
    height: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  /*  margin-top: -16px; */
    z-index: 100;
    position: relative;
    margin-left: -12px; /* Чтобы в левом положении ползунок совпадал с иглой */
}
input[type=range]:focus {
    outline: none;
}


input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 0;
    cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 35px;
    width: 26px;
    cursor: pointer;
    background-image: url(/ringtone_maker/images/handle_red.png);
    margin-top: -19px;
    background-color: transparent !important;
    border: 0 !important;
}




input[type=range]::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 0;
    cursor: pointer;

}
input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 26px;
    height: 35px;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    background-image: url(/ringtone_maker/images/handle_red.png);

}







input[type=range]::-ms-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #FF96AB;
    border: 2px solid #F27B7F;
    border-radius: 8px;
    box-shadow: 1px 1px 2px #A6A6A6;
}
input[type=range]::-ms-fill-upper {
    background: #FF96AB;
    border: 2px solid #F27B7F;
    border-radius: 8px;
    box-shadow: 1px 1px 2px #A6A6A6;
}
input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 1px 1px 2px #A6A6A6;
    border: 2px solid #F27B7F;
    height: 30px;
    width: 30px;
    border-radius: 0px;
    background: #FF96AB;
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    background: #FF96AB;
}
input[type=range]:focus::-ms-fill-upper {
    background: #FF96AB;
}





#controls_wrapper { margin-top: 25px;  display: none; }

#control_table { margin: 0 auto; }
#control_table td {
    padding:0 !important;
     /* padding-left: 10px !important; padding-right: 10px !important; */
    border: 0;
    border-right: 0 !important;
    vertical-align: top;

}

.control_button { font-size: 4em; cursor: pointer; text-align: center; }

#controls_wrapper #pause_btn { display: none; }
#controls_wrapper #pause_text { display: none; }

#controls_wrapper #repeat_btn { font-size: 2.2em !important; margin-top: 8px; text-align: center;}

#controls_wrapper #stop_btn:active { color: #18A2C4; }


#controls_wrapper #pause_btn { color: #18A2C4; }

#controls_wrapper #repeat_btn.pressed { color: #18A2C4; }

.control_button_text {
    margin-top: 2px;
    font-size: 14px;
    text-align: center;
    word-break: break-all;
    padding-left: 5px;
    padding-right: 5px;
}




#ringtone_editor_wrapper { position: relative; }

#buferization_preloader {
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    height: 110%;
    z-index: 101;
    top: 0;
    left: 0;
    text-align: center;

}

#creating_process_preloader {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
    z-index: 101;
    top: 0;
    left: 0;
    text-align: center;

}

#creating_process_preloader .lds-grid { margin-top: 0 !important; }

#creating_text_top { font-size: 2em; color:#a90329; }
#creating_text_bottom { font-size: 2em; color:green; }

.lds-grid {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 160px;
    margin-top: 30px;
}
.lds-grid div {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #18A2C4;
    animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
    top: 16px;
    left: 16px;
    animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
    top: 16px;
    left: 64px;
    animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
    top: 16px;
    left: 112px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
    top: 64px;
    left: 16px;
    animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
    top: 64px;
    left: 64px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
    top: 64px;
    left: 112px;
    animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
    top: 112px;
    left: 16px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
    top: 112px;
    left: 64px;
    animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
    top: 112px;
    left: 112px;
    animation-delay: -1.6s;
}
@keyframes lds-grid {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}




#current_and_total {
    text-align: center;
   /* margin-top: 25px; */
    font-size: 12px;
    background: #e5e5e5;
    padding: 2px;
}



/* Время над маркером старта */
.wavesurfer-handle-start::before {
    content: attr(handle_start_content) '';
    position: absolute;
    top: -36px;
    left: -12px;
    font-size: 12px;
    color: green;
}
/* Класс для сдвига влево маркера старта (только так получилось манипулировать псевдоэлементом :before выше, т.к. тупо присвоить еще один класс с псевдоэлементом)*/
.changed_start:before {
    left: -24px !important;
}


/* Время над маркером финиша */
.wavesurfer-handle-end::before {
    content: attr(handle_end_content) '';
    position: absolute;
    top: -36px;
    left: -12px;
    font-size: 12px;
    color: green;
}

/* Класс для сдвига вправо маркера финиша */
.changed_end:before {
    left: 0 !important;
}



/* Псевдоэлемент для отображения общей длины региона */
.wavesurfer-region:after {
    content: attr(ringtone_length) '';
    position: absolute;
    top: -19px;
    left: 50%;
    font-size: 12px;
    padding: 2px;
    margin-left: -1em;
}
/* Псевдоэлемент для смещения общей длины региона вниз при маленьком расстоянии между маркерами */
.region_after_changed:after {
    content: attr(ringtone_length) '';
    background-color: white;
    position: absolute;
    top: 13px;
    left: 50%;
    font-size: 12px;
    padding: 2px;
    margin-left: -1.3em;
    border-radius: 5px;
    border: 1px solid #555;
    z-index: 1;

}

/*Элемент для ловли кликов за пределами региона*/
#click_catcher {
    position: absolute;
   /* background-color: red; */
    top: -100%;
    left: 0;
}


.upload_error { color: red; font-weight: bold; }
.progress_error_style { background-color: red !important; }

#reload_page_text {
    margin-top: 10px;
    font-weight: bold;
    display: none;
}


#filter_error { color: red;   font-weight: bold;}



/*
   Hide radio button (the round disc)
   we will use just the label to create pushbutton effect
 */
input[type=radio] {
    display:none;
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 10px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
    text-shadow: none !important;
    cursor: pointer;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label {
    background-image: none;
   /*  background-color:#d0d0d0; */
    background-color: green;
    color: white;

}

input[type=radio]:checked + label .format_name{
   font-weight: bold;

}

input[type=radio]:checked + label .radio_text  {
    opacity: 1 !important;

}

.radio_text { opacity: 0.5; }

#format_radio_wrapper {

    margin-top: 20px;
    text-align: center;

}

#radio_mp3_label { border-bottom-left-radius: 10px; border-top-left-radius: 10px; }

#radio_m4r_label {  border-bottom-right-radius: 10px; border-top-right-radius: 10px;  }


#create_ringtone_button {
    border: 1px solid #333;
    display: inline-block;
    cursor: pointer;
    font-size: 1em;
    padding: 9px 23px;
    text-decoration: none;
    text-shadow: none;
    border-radius: 5px;
    color: #333;
    font-weight: bold;
}
#create_ringtone_button:hover {
   /*  background-color:#b34332; */
    background-color: white;
    color: #333;
}
#create_ringtone_button:active {
    position:relative;
    top:1px;
}

#create_button_wrapper { text-align: center; margin-top: 20px; }

#ringtone_h2_mobile { text-align: center; }


#step_three .download_ringtone_button  {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
    width: 100%;
}

    /* Darker background on mouse-over */
#step_three .download_ringtone_button:hover {
    background-color: green;
}

#step_three .download_ringtone_button_text { margin-left: 10px; }


#file_info_table { margin-bottom: 15px; }
#file_info_table  td { vertical-align: top; }
#file_info_table div { margin-bottom: 5px; }

.file_info_fieldname {
    font-weight: bold;
    margin-right: 10px;
}

#filename_field { word-break: break-all;  }

#step_3_title { font-weight: bold; }


.progress_bar_wrapper {
    width: 100%;
}

.progress-bar {
    width: 100%;
    background-color: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
    display: block;
    height: 22px;
    background-color: #659cef;
    border-radius: 3px;

    transition: width 500ms ease-in-out;
}



.progress_bar_wrapper { display: none; }




#step_two,#step_three { display: none; }


#step_two { position: relative; }

#step_one, #step_two, #step_three { text-align: center; }

#upload_button {
    box-shadow:inset 0px 1px 0px 0px #97c4fe;
    background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color:#3d94f6;
    border-radius:6px;
    border:1px solid #337fed;
    display:inline-block;
    cursor:pointer;
    color:#ffffff !important;
    font-family:Arial;
    font-size:15px;
    font-weight:bold !important;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #1570cd;
}
#upload_button:hover {
    background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    background-color:#1e62d0;
}
#upload_button:active {
    position:relative;
    top:1px;
}




#step_1_micro_text { font-size: 12px; }


#upload_filename { font-weight: bold; margin-bottom: 5px; }


.wavesurfer-handle { max-width: 1px !important; }


#guide_table td { vertical-align: top; }

.guide_step_number {
    font-size: 2em;
    font-weight: bold;

}

.guide_text { padding-top: 0.5em;  text-align: justify; }

#guide_image_1 img, #guide_image_2 img, #guide_image_3 img {
    border: 1px solid #dfdfdf;
    margin-top: 1em;
    max-width: 100%;
    height: auto;
}

#app_description p { font-size: 16px !important; text-align: justify; margin-top: 3em;}

#step_one,#step_two,#step_three {

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


/*  Спинер расшаривания для мобильной версии */
.spinner { width:70px; text-align:center; }
.spinner > div { width:18px; height:18px; background-color:#333; border-radius:100%; display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s;}
.spinner .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s;}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}

@keyframes bounce_fountainG{
    0%{
        transform:scale(1);
        background-color:rgb(0,0,0);
    }

    100%{
        transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-o-keyframes bounce_fountainG{
    0%{
        -o-transform:scale(1);
        background-color:rgb(0,0,0);
    }

    100%{
        -o-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-ms-keyframes bounce_fountainG{
    0%{
        -ms-transform:scale(1);
        background-color:rgb(0,0,0);
    }

    100%{
        -ms-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-webkit-keyframes bounce_fountainG{
    0%{
        -webkit-transform:scale(1);
        background-color:rgb(0,0,0);
    }

    100%{
        -webkit-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}

@-moz-keyframes bounce_fountainG{
    0%{
        -moz-transform:scale(1);
        background-color:rgb(0,0,0);
    }

    100%{
        -moz-transform:scale(.3);
        background-color:rgb(255,255,255);
    }
}


#share_spoiler {     margin-top: 20px;  margin-bottom: 50px; }


.create_button_disabled { border: 1px solid #e5e5e5 !important;  color: #e5e5e5 !important; }



/*Костыли для десктопной версии*/

#primaryContent #ringtone_h2_mobile {
    text-align: left;
    font-size: 2.5em;
    padding-top: 10px;
    padding-bottom: 24px;
    margin-bottom: 15px;
    text-decoration: none;
    position: relative;
}

#primaryContent #step_one p  { margin-bottom: 1em; font-size: 14px; }

#primaryContent #step_one p:first-child { font-size: 22px; margin-bottom: 0.5em;}
#primaryContent #step_two p:first-child { font-size: 22px; margin-bottom: 0.5em;}
#primaryContent #step_three p:first-child { font-size: 22px; margin-bottom: 0.5em; margin-top: 1em; }

#primaryContent #step_one #step_1_micro_text { margin-top: 0.5em; }

#primaryContent #step_one #upload_button { font-size: 22px;  padding: 10px; margin-top: 0.5em; }


#primaryContent .progress-bar { text-align: left; }
#primaryContent .control_button_text { max-width: 120px; }

#primaryContent #format_radio_wrapper { margin-top: 25px !important; }

#primaryContent #create_button_wrapper  { margin-top: 30px !important; }

#primaryContent #editor_share_desctrop_wrapper { z-index: 10;  position: absolute;  top: 0;  right: 0;  }







/* Tooltip text */
/*
.handle_green {
    width: 17px;
    height: 14px;
    background: #49A81C;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;


}



.handle_green::after {
    content: " ";
    position: absolute;

    bottom: -17px;
    left: 0px;
    border-width: 8.5px;
    border-style: solid;
    border-color: #49A81C transparent transparent transparent;
}

*/