@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
}

html, body{
	width:100%;
	height:100%;
	margin:0px;

  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

#MainConteiner{
	
	height:180%;
	margin:auto;
	padding:2em;
	background-color:rgba(240,240,240,0.50);
}
  canvas {
            border: 1px solid #000;
            transition: border 0.3s ease;
        }

        .canvas-error {
            border: 2px solid red !important;
        }

        #saved-image {
            display: none;
            margin-top: 10px;
        }.container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .navigation {
            text-align: center;
            margin-top: 20px;
        }
        .navigation a {
            margin: 0 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
        }
        .navigation a:hover {
            background-color: #0056b3;
        }
	.short{width:50%;}

.preview {
  width: 132px;
  height: 170px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  flex-shrink: 0; /* nedovolí zmenšení v rámci flexboxu */
}

.preview img {
  display: block;
  /* důležité pro Cropper.js */
  width: 100%;
  height: auto;
}

  #image1 {
    width: 150px; /* Úzký náhled pro 35:45 */
    height: 200px;
    object-fit: contain;
    background: #f0f0f0;
  }


    /* Cropper background fix */
    .cropper-bg,
    .cropper-canvas,
    .cropper-wrap-box,
    .cropper-container {
      background-color: #fff !important;
      background-image: none !important;
    }

    canvas {
      display: block;
      margin: 20px auto;
      border: 1px solid #000;
      background-color: #fff;
    }
#saved-image{
	displa:none;
}

.bold{
	font-weight: bold;
}

.uppercase{
	text-transform: uppercase;
}

.letter_spacing{
	letter-spacing: 5px;
}


.foto{
	width:3.5cm;
	height:4.5cm;
	border: 1px black dotted;
	overflow: hidden;
}
.custom-file-upload {
  display: inline-block;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  width:35mm;
}
.custom-file-upload:hover {
  background-color: #0056b3;
}
table, th, td{
	border:1px solid black;
	border-collapse: collapse;
}

td{
	padding:5px;
}

.no_padding{
	padding:0px;
	background-color: white;
}

td input{
	border:0px;
	height:100%;
	width:100%;
	font-size:1.167em;
	font-weight: bold;
}

.vysvedceni td{
	text-align: center;
}

textarea{
	resize: none;
	width:100%;
	height:110px;
	border:0px;
}

.send{
	width:350px;
	cursor:pointer;
	height:2em;
	background-color: rgba(150,155,150,0.65);
	letter-spacing: 5px;
	text-transform: uppercase;
}

.send:hover{
	background-color: rgba(104,104,104,0.65);
}

@media screen and (max-width: 1920px) {
#MainConteiner{
	width:60%;

}
}



@media screen and (max-width: 360px) {
#MainConteiner{
	width:98%;

}
}