.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}



#workCanvas {
	position: relative;
	padding: 30px;
	max-width:100%;
	max-height:100%;
	width: 100vw;
	height: calc(100vh - 235px) ;
	border: 2px dashed #000;
	background: rgb(255 255 255);
}

#slova #workCanvas {
   display: flex;
    justify-content: center; /*Центрирование по горизонтали*/
    align-items: center;     /*Центрирование по вертикали */
}

#workCanvas  #slovo{
	position: absolute;
	font-size: 69px;
	font-weight: bold;
	text-align: center;
	padding: 20px;
	color: #fff;
	line-height:normal;
	letter-spacing:1px;
}

#slova #workCanvas #slovo{
    color: #333;
    font-size: 15vmax;
    font-size: calc(6vw + 4vh);
}

#metronome #workCanvas,
#text-Alfa #workCanvas
{
    height:100%;
}

#text-Alfa #titletext
{
    font-style: italic;
}


#text-Alfa #workCanvas #text
{
    word-break: break-all;
    font-size: 23px;
 
}

#text-Alfa #workCanvas #text span
{
   display:inline-block;  
}

#text-Alfa #workCanvas #text .h
{
    color:#ccc;
}

#text-Alfa #workCanvas #text .o
{
    opacity:0;
}

#toggle_fullscreen
{
    opacity: 0.4;
    color:green;
    background: url('/images/full-screen.png');
    width: 64px;
    height: 64px;
    position: absolute;
    bottom: 0;
    right: 10px;
    font-size: 10px;
    padding: 19px 10px;
    line-height: 14px;
    text-align: center;
    font-weight: bold;
}

#toggle_fullscreen.nfs
{
    background: url('/images/full-screen.png');
    color:green;
}

#toggle_fullscreen.fs
{
    background: url('/images/efs.png');
    color:rgba(0,0,0,0);
}


#toggle_fullscreen:hover
{
    opacity: 1.0;
}

#settings
{
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 0 15px;
}

#settings h3
{
    margin-bottom: 20px;
}

#settings  .scriptword
{
    position:absolute;    
}

.sims .content
{
    margin-top:50px;
}

.sims .content h2
{ 
    margin-bottom:40px;
}

@media (max-width: 768px) {
    #settings h3
    {
        font-size: 1.3rem;
    }
     
    #workCanvas  #slovo
    {
        font-size: 44px;
        padding:10px;
    }
    
    #workCanvas  
    {
        height: calc(100vh - 280px);
    }    	
    
    #text-Alfa #workCanvas #text
    {
        word-break: break-all;
        font-size: 21px;
        line-height: 1.4;
    }
}


/*Тест Струпа оригинал --->*/

.strupa0
{
    padding :0;
}

.strupa0 .chast1, .strupa0 .chast2, .strupa0 .chast3, .strupa0 .result
{
    padding: 30px;
    box-shadow: 5px 5px 10px 1px #858585;
    margin-top: 30px;
}

.strupa0 .chast1 .element
{
   margin-bottom: 25px;
}

.strupa0  .element .value
{
    position: relative;
}

.strupa0 .element .title
{
    font-size: 25px;
}


.strupa0 .chast1 .element .value .radio, 
.Check
{
    height: 20px; 
    display: inline-block;
    line-height: 40px;
}

.strupa0 .element .value .radio input:checked, 
.Check input:checked
{
    opacity: 0;
}

.strupa0 .element .value .radio input:not(checked),
.Check input:not(checked)
{
    position: absolute;
    opacity: 0;
}

.strupa0 .element .value .radio input:not(checked)+label,
.Check input:not(checked)+label
{
    display: block;
    color: #212529;
    position: relative;
}

.strupa0 .chast1 .element .value .radio label,
.Check label
{
    cursor: pointer;
    padding-left: 25px;
}

.strupa0 .element .value .radio input+label:before,
.Check input+label:before
{
    background: #6c757d;
    content: "";
    height: 17px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 5px;
    width: 17px;
    box-sizing: border-box;
    border-radius: 25%;
}

.Check input+label:before
{
    top: 13px;
}


.lColor.c1, .strupa0 .element .value .radio input+label.lColor.c1:before {
    background: #cc1010;
}

.lColor.c2, .strupa0 .element .value .radio input+label.lColor.c2:before {
    background: #28a745;
}

.lColor.c3, .strupa0 .element .value .radio input+label.lColor.c3:before {
    background: #1010cc;
}

.lColor.c4, .strupa0 .element .value .radio input+label.lColor.c4:before {
    background: #7f00ff;
}

.lColor.c5, .strupa0 .element .value .radio input+label.lColor.c5:before {
    background: #fd7e14;
}

.element .title.sColor
{
    font-weight:bold;
}

.sColor.c1, .strupa0 .chast3 .element .value .radio label.sColor.c1{
    color: #cc1010 !important;
}
.sColor.c2,.strupa0 .chast3 .element .value .radio label.sColor.c2{
    color: #28a745 !important;
}
.sColor.c3, .strupa0 .chast3 .element .value .radio label.sColor.c3{
    color: #1010cc !important;
}
.sColor.c4, .strupa0 .chast3 .element .value .radio label.sColor.c4{
    color: #7f00ff !important;
}
.sColor.c5, .strupa0 .chast3 .element .value .radio label.sColor.c5{
    color: #fd7e14 !important;
}


.strupa0 .element .value .radio input+label:after,
.Check input+label:after 
{
    background-color: #ffd400;
    content: "";
    height: 8px;
    left: 4px;
    opacity: 0;
    position: absolute;
    top: 10px;
    transition: all 0.2s;
    width: 8px;
    border-radius: 25%
}

.Check input+label:after 
{
    top: 17px;
}

.strupa0 .element .value .radio input:checked+label:after,
.Check input:checked+label:after
{
    opacity: 1;
}

.strupa0 .timer  span
{
    font-size:18px;    
}
.strupa0 .StopTime
{
    color:green;
}

.strupa0 .element .value .radio input:disabled+label:before {
    opacity: 0.5;

}

.strupa0 .chast2 .element .value .radio
{
   display: block;
}

.strupa0 .chast2 .element .title.lColor
{
    height: 45px;
    color: #f0f0f0;
    font-family: Arial;
    font-weight: bold;
}

.strupa0 .chast2 .element .value .radio label
{
    cursor: pointer;
    padding-left: 25px;
}

.strupa0 .chast3 .element .value .radio label
{
    cursor: pointer;
    padding-left: 25px;
}
/*<--- Тест Струпа оригинал*/