/* CSS Document */
        @font-face {
           font-family: vlastnifont;
           src: url("./pismo/pismo.otf"); 
        }
        
        #stopButton {
          position: absolute;
          top: 470px;
          left: 1640px;
          width: 150px;
          height: 150px;
          transform: rotate(-90deg);
          background-image: url('./obrazky/photo.png');
          background-color: white; 
          background-repeat: no-repeat;
          background-position: center;
          background-size: 108%;
          border-radius: 50%;
          border: 4px solid white;
          z-index: 10;
          opacity: 0.8;
		}
        
        body {
        overflow: hidden;
         margin: 0;
         padding: 0;
         position: absolute;
         width: 1920px;
         height: 1080px;
		}
        
       #canvas {
            display: block;
            overflow: hidden;
            top: 0;
            left: 0;
            margin: auto;
            padding: 0;
        }

        #colorPicker,
        #toleranceInput,
        #saveButton,
        #resetButton,
        {
            position: relative;
            margin-top: 10px;
            z-index: 100;
            color: white;
        }
        
		#controlPanel {
			position: absolute;
            margin: 0px;
            padding: 5px;
            bottom: -175px;
            left: 10px;
            width: 550px;
            height: 420px;
            background-color: white;
            transform-origin: left top;
            transform: rotate(-90deg);
            background: rgba(0, 0, 0, .8);
            text-align: center;
            visibility: hidden;
            border: solid white 2px;
            border-radius: 50px;
            font-family: vlastnifont;
            color: black; 
		}
        
        .controlPanelLabel {
            font-family: vlastnifont;
            font-size: 18px;
            padding: 10px;
            color: white;
             
		}
        
        .controlPanelInput {
            font-family: vlastnifont;
            font-size: 12px;
            padding: 5px;
            color: black;
            border: solid black 2px;
            width: 250px;
            height: 20px;
            border-radius: 50px;
            
             
		}
        
        .controlPanelButton {
            font-family: vlastnifont;
            font-size: 16px;
            padding: 10px;
            color: black;
            background: rgb(255, 255, 255);
            text-align: center;
            border: solid black 2px;
            font-weight: bold;
            border-radius: 50px;
             
		}
        
        
        
        #znovu {
          position: absolute;
          top: 470px;
          left: 1640px;
          width: 150px;
          height: 150px;
          transform: rotate(-90deg);
          background-image: url('./obrazky/back.png');
          background-color: white; 
          background-repeat: no-repeat;
          background-position: center;
          background-size: 108%;
          border-radius: 50%;
          border: 4px solid white;
          z-index: 10;
          opacity: 0.8;
          visibility: hidden;
		}
        
      #tlacitko-doleva{
          width: 100px;
          height: 100px;
          background-image: url('./obrazky/vlevo.png');
          background-color: white; 
          background-repeat: no-repeat;
          background-position: center;
          background-size: 108%;
          border-radius: 50%;
          border: 4px solid white;
          z-index: 10;
        }
        
       #tlacitko-doprava{
          width: 100px;
          height: 100px;
          background-image: url('./obrazky/vpravo.png');
          background-color: white; 
          background-repeat: no-repeat;
          background-position: center;
          background-size: 108%;
          border-radius: 50%;
          border: 4px solid white;
          z-index: 10;
        }  
        
        
     #countdown{
     position: absolute; 
     top: 430px;
      left: 850px;
      width: 200px;
      height: 200px;
      transform: rotate(-90deg);
      background-color: black; 
      background-repeat: no-repeat;
      background-position: center;
      background-size: 108%;
      border-radius: 50%;
      border: 4px solid white;
      z-index: 10;
      opacity: 0.8;
     color: white;
     font-size: 100px;
     font-family: vlastnifont;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0.6;
     visibility: hidden; 
     }
     
     #potvrzeni{
     position: absolute; 
     top: 430px;
      left: 650px;
      width: 500px;
      height: 200px;
      transform: rotate(-90deg);
      background-color: black; 
      border-radius: 50px;
      border: 4px solid white;
      z-index: 100;
     color: white;
     font-size: 20px;
     font-family: vlastnifont;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     background: rgba(0, 0, 0, .7);
     }
     
     #button1{
     position: absolute; 
     bottom: 10px;
      left: 10px;
      width: 100px;
      height: 100px; 
      border: 0px solid white;
      z-index: 100;
     }
     
    #button2{
     position: absolute; 
     top: 10px;
      left: 10px;
      width: 100px;
      height: 100px; 
      border: 0px solid white;
      z-index: 100;
     }
     
    #button3{
     position: absolute; 
     top: 10px;
      right: 10px;
      width: 100px;
      height: 100px; 
      border: 0px solid white;
      z-index: 100;
     }
     
    #button4{
     position: absolute; 
     bottom: 10px;
      right: 10px;
      width: 100px;
      height: 100px; 
      border: 0px solid white;
      z-index: 100;
     }
     
    #nabidka_obrazku{
     position: absolute; 
     bottom: 0px;
      right: 0px;
      width: 100%;
      height: 540px;
      background-color: rgba(255, 255, 255, 0.9);  
      border: 0px solid white;
      z-index: 200;
      display: flex;
      justify-content: center;
      visibility: hidden;
      text-align: center;
     }
     
   #nabidka_obrazku_stred{
     position: absolute; 
     bottom: 0px;
      width: 1500px;
      height: 535px;  
      border: 0px solid white;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      
     }
     
    #nabidka_obrazku_ikonka{
     position: absolute; 
     bottom: 485px;
      left: 900px;
      width: 100px;
      height: 100px;
      background-image: url('./obrazky/close.png');
      background-color:  white;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 108%;
      border-radius: 50%;
      border: 4px solid  rgba(255, 255, 255, 0.9);
      z-index: 200;
     }
     
    #nabidka_obrazku_zobraz{
     position: absolute; 
     bottom: 5px;
      left: 900px;
      width: 100px;
      height: 100px;
      background-image: url('./obrazky/up.png');
      background-color:  white;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 115%;
      border-radius: 50%;
      border: 1px solid  rgba(255, 255, 255, 0.9);
      z-index: 200;
      visibility: visible;
     }
     
   .seznam_fotek{
     position: relative;
     margin-left: 20px;
     margin-top: 100px;
     margin-bottom: 100px; 
      width: 450px;
      height: 350px;  
      border: 1px solid white;
      z-index: 200;
      display: inline-block;
      background-size: cover;
      transition: transform 0.3s ease;
     } 
     
    #bez_fotky{
     position: relative;
     margin-left: 20px;
     margin-top: 100px;
     margin-bottom: 100px; 
      width: 450px;
      height: 350px;  
      border: 1px solid white;
      z-index: 200;
      background-image: url('./media/no-photo.png');
      background-size: 50%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      display: inline-block;
      transition: transform 0.3s ease;
     }
     
     
    .tlacitko {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100px; /* Pridej vlastní šírku ikony podle potreby */
      height: 100px; /* Pridej vlastní výšku ikony podle potreby */
      background-color: lightblue; /* Pridej vlastní barvu ikony podle potreby */
      cursor: pointer;
    }

    #tlacitko-doleva {
      left: 20px;
    }

    #tlacitko-doprava {
      right: 20px;
    }