/*
Theme Name:Web za pár kaček API Editor 
Theme URI: https://webzaparkacek.cz
Author: Autor vaší šablony
Author URI: BeeNet.cz TEAM
Description: Popis vaší šablony
Version: 0.001
License: Licenční informace (nepovinné)
License URI: Odkaz na licenční informace (nepovinné)
Tags: Klíčová slova pro vaši šablonu (nepovinné)
*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

.upeercase{text-transform: uppercase;}


:root {
    --background: #FAFAFA;
    --components: #FAFAFA;
    --dark-grey: #2D2D2D;
    --light-blue: #8A8AFF;
    --rgb-blue: #00F;

    /* --height-content: calc(100vh - 189px); */
    --height-content: calc(100vh - 72px);
    --mobile-height-content: calc(100vh - 33px);

    
  }
.modra{color: var(--rgb-blue) !important;}
html{
  font-family: 'Ubuntu', sans-serif;
}  
body{
    background-color: var(--background);
    font-family: 'Ubuntu', sans-serif;    color: var(--dark-grey);
    font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 116.667% */
letter-spacing: 0.25px; 
  }

h1{font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 118.182% */
  letter-spacing: 0.08px; }
h2{
  font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 125% */
letter-spacing: 0.08px; 
}
h3{
  font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 116.667% */
letter-spacing: 0.25px; 
}

label{
  font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: 0.08px; 
}

form{
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px; 
}

small{font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 200% */
  letter-spacing: 0.1px; 
}
big{
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 166.667% */
letter-spacing: 0.1px; 
}

p{font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 116.667% */
letter-spacing: 0.25px; }

.picspace img{
  position:absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}

.fixpad{padding: 32px 6% 32px 6%;
}

.pdr11{padding-right: 11px;
  /* background-color: pink; */
}

.mtag{background-color: var(--rgb-blue);color:white; 

  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 200% */
  letter-spacing: 0.1px; 
  padding: 8px 14px;
  border-radius: 999px;
}

/*testovaci barvy a docasne hodnoty*/
.bpink{background-color: pink;}
.bwhite{background-color:white;}
.bgreen{background-color: green;}
.bgrey{background-color: grey;}
.byellow{background-color: yellow;}
.mujtest{height: 150vh !important;}



/*konec testovani */

@media (max-width: 989px) { 
  .fixpad{padding: 32px 2% 32px 2%;}
  header.header{
   padding: 32px 2% 32px 2%;}
   .outbox{
    padding:9px;
  }
    
}

.modal-content{border-radius: 22px !important;}

.modal-header{border:none;
}

.modal-footer{border:none;}
.custom-modal .modal-dialog {
  max-width: 936px;
  margin-top:91px;
  border-radius: 22px !important;
  /* border: 2px solid var(--light-blue); */
  -webkit-border-radius: 22px !important;
  -moz-border-radius: 22px !important;
  -ms-border-radius: 22px !important;
  -o-border-radius: 22px !important;
}

.custom-modal .modal-dialog .modal-content{

border: 2px solid var(--light-blue);
}

.ico_source{
  background-image: url('img/ico_source.svg');
  background-repeat: no-repeat;
  background-size: 20px 20px ;
  /* background-position: left 12px top 10px; */
  background-position: left 12px top 4px;

  padding-left:39px !important;
  border-width: 2px !important;
}

.ico_api{
  background-image: url('img/ico_api.svg');
  background-repeat: no-repeat;
  background-size: 20px 20px ;
  background-position: left 12px top 4px;
  border-width: 2px !important;


  /* background-position: left 12px top 10px; */
  padding-left:39px !important;
}
.custom-close-button {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;width:24px;
}

.fix-close{position: absolute;
right:16px;
top:10px;
}

.fix-close img{
  left:0px !important;
  right: 0px !important;
  top:0px !important;

  width: 24px; 
  height: 24px;
}


.my-modal-header{height:90px !important}

.custom-close-button img {
  position: absolute;
  width: 24px; 
  height: 24px; 
  display: block;
left:3px;
top:-33px;
}



.inmodall .picspace {
  /* min-height:336px; width: 100%;
   */
    position: relative;
  width: 100%; 
  /* max-width: 438px; */
  padding-bottom: calc(336 / 438 * 100%);
  overflow: hidden; 

  
  /* background-color: #D9D9D9; */
  margin-top:10px;
 
}


  /* .inmodalfooter{position: absolute;width: 100%;
  height:40px;bottom:22.57px;
  display: flex; padding-right:25.6px;

} */
.inmodalfooter {
  position: absolute;
  width: 100%;
  /* height: 40px; */
  height: 30px;
  bottom: 22.57px;
  display: flex;
  justify-content: flex-end;
  padding-right: 25.6px;
}

.maxwidth427{
  width: 427px !important;
}

@media (max-width: 767px) {
  .inmodalfooter {
    flex-wrap: wrap;
    justify-content: center;
    padding-left:30px;
  }

  .inmodalfooter button,
  .open-project {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .inmodalr {
    margin-bottom: 30px !important;
  }

  .pdl18{padding-left:0 !important;}
  
}
@media (max-width: 560px) {
  .inmodalr {
    margin-bottom: 90px !important;
  }
  .inmodalfooter{height:90px;
}
.modal-dialog{
  margin-left: 0px !important;
  margin-right: 0px !important;
}

}


.pdtop20{padding-top: 20px !important;}
.inmodall p {margin-top:3px !important; margin-bottom: 3px; padding-left:0px;}
.inmodalr p{margin-top:10;margin-bottom: 15px;}


@media (min-width: 990px) {
  .inmodall  {
    padding-right:10px;   
  }
  .inmodalr  {
    padding-left:10px;   
  }

  }
  .inmodalr h2, .inmodalr p {
    padding-left:0px !important;   
  }
 @media (max-width: 989px) { 
  .inmodalr  {
    padding-bottom:51px !important;   
  }
  .mycontent{
  /* min-height: 100vh; */
  min-height: var(--mobile-height-content) !important;
  }
  }

.inl{padding-left:0px !important;
}

.pdl18{padding-left:18px;}

.mbox{ border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; -ms-border-radius:10px 10px 10px 10px; -o-border-radius:10px 10px 10px 10px; position: relative; padding:0px !important; /*padding:10px; */
  min-height:242px;
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); 
  background-color: white;
}
.mgleft24{margin-left: 24px !important;}

.mboxpic{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:110px;
  background-color: green;
  border-radius:10px 10px 0 0 ;
  -webkit-border-radius:10px 10px 0 0 ;
  -moz-border-radius:10px 10px 0 0 ;
  -ms-border-radius:10px 10px 0 0 ;
  -o-border-radius:10px 10px 0 0 ;

  /* background-image: url('uploads/media2.png'); */
  background-size: 100% 110px;
  background-repeat: no-repeat;
}

/* 
.outbox{
  padding:1%;
} */



/*custom select*/
.custom-select {
  position: relative;
  width: 310px;
  margin:0 auto;
}

.select-input, select-input:focus {
  width: 310px;
  height:36px;
  padding: 10px 18px ;
  border: 1px solid var(--light-blue);
  font-size: 16px;
  border-radius: 22px;
  background-image: url('img/input-down.svg');
  background-repeat: no-repeat;
  background-size: 16px 16px ;
  background-position: right 15px top 9px;
  outline: none;
  box-shadow: none;

}

.mnbr{
  border-radius: 22px 22px 0px 0px !important;
}

.options-list {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  border: 1px solid var(--light-blue);
  border-top: none;
  border-radius: 0 0 22px 22px;
  width: 310px;
  background-color: white;
  margin-top:-3px;
  padding: 8px 16px;
  text-align: left;
  font-size:14px;
  color:var(--dark-grey);
  max-height:150px;
  overflow-y: auto; /* Povolit vertikální scroolování */
}
.options-list::-webkit-scrollbar {
  width: 0.5em; /* Šířka scrollovacího jezdce */
}

.options-list::-webkit-scrollbar-thumb {
  background-color: transparent; /* Barva jezdce (transparentní = skrytý) */
}

.options-list::-webkit-scrollbar-track {
  background-color: transparent; /* Barva pozadí scrollovacího pruhu (transparentní = skrytý) */
}


.options-list li {
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.options-list li:hover {
  background-color: #f0f0f0;
}



/**************************/
/** seach - vyhledávání ***/
#searchspace{
 position: absolute;right:0;top:0;
width: 346px;height:42px;z-index: 270;

}

#search, #search:focus{
padding-left: 25px;padding-top:4px; padding-bottom:4px;
margin-right:60px;
background: rgba(250, 250, 250, 0.80); 
width: 346px;
height: 42px; 
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.5px; 
position:absolute;
left:0px;
border: 1px solid var(--light-blue);
border-radius: 22px;
outline: none;
box-shadow: none;
background-image: url('img/search_24px.svg');
background-repeat: no-repeat;
background-size: 24px 24px ;
background-position: right 18px top 8px;
}


#mobile-open-search{
  position: absolute;right:0;top:0;
  display: none;
 }


 @media (min-width: 990px) {
  #searchspace{
    display: block !important;

  }

  }

 @media (max-width: 989px) { 
  #searchspace{
    display: none;
   width:100% !important; height:30px;
   background-color: white;margin: 0 auto;position: relative;
   }

   #search{width:100% !important; position:relative !important;   margin: 0 auto;}

   #mobile-open-search{
     display: block;
    }
  }

/**************************/
/***********FLEX***************/
.frow {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 600px) { 

  .frow {
    justify-content:center !important;
  }
}


.frow > div {
  background-color: white;
  width: 346px;
  margin: 10px;
  border-radius: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  padding:10px;
}
header.fheader{
  width: 100%;
  height: 119px;
  background: rgba(250, 250, 250, 0.80); 
  position: fixed;
  z-index:300;
}


#logo{
width:255px; height: 54px;
background-image: url('img/logo.svg');
background-repeat: no-repeat;
background-size: 255px 54px ;
background-position: left 0px top 0px;
}

.pdl{padding-left:10px;}



/* .mmtop{margin-top:119px;} */

#filtrspace{
  padding-top:119px;
}
  @media (min-width: 990px) { 
header.fheader{

  padding:32px 101px;

}
.ffixpad{
  padding:32px 91px;

}
}

@media (max-width: 989px) { 
  #logo{
    width:126px; height: 26px;
    background-image: url('img/logo.svg');
    background-repeat: no-repeat;
    background-size: 126px 26px ;
    background-position: left 0px top 0px;
    }
  #ffixpad{
    padding-top: 19px !important;
    padding-left:35px !important;
    padding-bottom: 45px !important;
    padding-right:35px !important;
   }
   header.fheader{
    width: 100%;
    height: 62px;
    background: rgba(250, 250, 250, 0.80); 
    padding:32px 25px 10px 25px !important;
    }
    .mr71_20{margin-right: 20px !important;}
    footer.footer{
      height: 36px !important;
      padding-top:8px !important;
      padding-bottom: 8px !important;
            min-height: 36px !important;

    }
.l1{height:16px !important;width: auto;}
.l2{height:10px !important;
  width: auto;}

.l3{height:10px !important;
  width: auto;}
  .footer-content{
height:20px !important;
  }
}
/**************************/
footer.footer{
min-height:71px;width:100%;
background:var(--rgb-blue);
position: relative;
bottom:0px !important;
padding-top:19px; padding-bottom: 19px;

}
.l1{height:36px;width: auto;}
.l2{height:28px ;
  width: auto;}

.l3{height:22px ;
  width: auto;}

.footer-content{
position: relative;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
/* background-color: pink; */
/* top:19px; */
height:36px;
padding:0px;

}
.mr71_20{margin-right: 71px;}

.mycontent{
  /* min-height: 100vh; */
  min-height: var(--height-content);}
.custom-select{
  z-index: 250;
}


/********/
.outputtext{
  font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 26px; /* 118.182% */
letter-spacing: 0.08px; 
margin-top: 100px;margin-bottom: 42px;
}

.centruj{position: relative;margin:0 auto; display:flex;}

#showAllButton, #showAllButton:focus{
  padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px; 
color:white;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 166.667% */
letter-spacing: 0.1px; 
background-color: var(--rgb-blue);
min-width: 204px;height: 40px;
border-radius: 100px;
outline: none;
box-shadow: none;
border:none;
margin-bottom: 16px;
}

#contactUsButton, #contactUsButton:focus{
  padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px; 
color:var(--rgb-blue);
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 166.667% */
letter-spacing: 0.1px; 
min-width: 257px;height: 40px;border-radius: 100px;
outline: none;
box-shadow: none;
border:2px solid var(--rgb-blue);
margin-bottom: 16px;
background-color: white;

}

.show-search-img{
  width:32px; height: 32px;
  background-image: url('img/search-bar-inactive.svg');
  background-repeat: no-repeat;
  background-size: 32px 32px ;
  background-position: cover;
  
}

.mbox p, h2{
  text-align: left;
  padding-left: 16px;padding-right: 16px;margin:0px;
}

.mbox p{padding-top:8px; padding-bottom: 8px;}
.mbox h2{padding-top:10px;padding-bottom: 0px !important;}

.mt32{margin-top: 32px;}


.pdb8{padding-bottom:8px ;}

.bblue-but,.bblue-but:focus  {
  padding: 9px 24px 9px 24px;
  /*padding: 10px 24px;
  */align-items: center;
  gap: 8px;
  min-width: 93px;
  /*height: 40px;
  */height:38px;
  color: white;
  text-align: center;
  /*Smallbuttontext*/font-size: 10px;
  font-style: normal;
  font-weight: 700;
  /*line-height: 20px;
  200%*/line-height: 18px;
  letter-spacing: 0.1px;
  background-color: var(--rgb-blue);
  border-radius: 999px;
  border: 1px solid var(--rgb-blue);
  outline: none;
  box-shadow: none;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
}
.blue-but,.blue-but:focus  {
  padding: 5px 24px 5px 24px;
  /* padding: 10px 24px; */

  align-items: center;
  gap: 8px;
  min-width: 93px;
  /* height: 40px; */
  height:30px;
  color: white;
  text-align: center;
  /* Small button text */
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  /* line-height: 20px; 200% */
  line-height: 18px;
  letter-spacing: 0.1px;
  background-color: var(--rgb-blue);
  border-radius: 999px;
  border: 1px solid var(--rgb-blue);
  outline: none;
box-shadow: none;
}
.more-info,.more-info:focus  {
  padding: 5px 24px 5px 24px;
  /* padding: 10px 24px; */

  align-items: center;
  gap: 8px;
  min-width: 93px;
  /* height: 40px; */
  height:30px;
  color: var(--light-blue, #8A8AFF);
  text-align: center;
  /* Small button text */
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  /* line-height: 20px; 200% */
  line-height: 18px;
  letter-spacing: 0.1px;
  background-color: transparent;
  border-radius: 999px;
  border: 1px solid var(--rgb-blue);
  outline: none;
box-shadow: none;
}
.open-project {
  /* padding: 10px 24px; */
  padding: 5px 24px 5px 24px;
  align-items: center;
  gap: 8px;
  min-width: 93px;
  /* height: 40px; */
  height:30px;
  color: white;
  text-align: center;
  /* Small button text */
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 200% */
  letter-spacing: 0.1px;
  background-color: var(--rgb-blue) ; border-radius: 999px;
  border: 1px solid var(--rgb-blue);
  margin-left:8px;
}

.mboxbuttons {
  /* height: 40px; */
  height: 30px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex; /* Přidáno, aby flex vlastnosti fungovaly */
  position: absolute;
  bottom:10px;
  /* background-color: pink; */
  width:100%;
}


a, a:hover, a:link, a:visited{
  text-decoration: none;
}

.ppbib{
padding-bottom: 60px !important;

}

.kontaktformhead{
margin-top:50px

}

.kontaktformhead p{
  max-width: 376px !important;
}

.myf input{
  border-radius: 4px 4px;
  -webkit-border-radius: 4px 4px;
  -moz-border-radius: 4px 4px;
  -ms-border-radius: 4px 4px;
  -o-border-radius: 4px 4px;

  display: flex;
padding: 8px 8px 8px 16px;
align-items: center;
align-self: stretch;
height: 56px;

flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1 0 0; 
color:var(--dark-grey);
border: 2px solid var(--rgb-blue);
/* background-color: pink; */

}
.myf{margin-top:32px;}

.myf label{
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 116.667% */
letter-spacing: 0.25px; 
background-color: white;
position:absolute;
lefT:12px;
top:-5px;
color:var(--rgb-blue);
padding-left:2px; padding-right:2px;
}

@media (min-width: 768px) {
  .myf .row .col-md-6{
    padding-left:5.1px !important;
    padding-right:5.1px !important;

  }
  .myf .row {
  padding-left:18.5px;
  padding-right:18.5px;

  }

}
@media (max-width: 767px) {
  .maxwidth427{
    width: 100% !important;
  }

}


/* form valid**/
.error-field {
  border-color: red !important; /* Přidejte !important pro zajištění prioritního použití */
}


  .checkmark.error-field{
    border-color:red;
  } 
  .error-message {
    color: red;
    margin-top: 10px;
  }