/* https://colorhunt.co/palette/f9f5f6f8e8eefdcedff2bed1 */ 

/*style for main app */ 

/* use variables 4 colors pink1 - body , pink2 - form memory, pink3 - label, form host, pink4 - form backgroud, */ 



:root { 
  --pink1 : rgb(255,255,255); /* --pink1 : rgb(249, 245, 246); */
  --pink2 : rgb(251, 215, 210, 0.7); /*rgb(248, 232, 238); */
  --pink3 :  rgb(252, 230, 221); /* rgb(253, 206, 223); */ 
  --pink3_navbar : rgba(252, 230, 221, 0.6); /* 253, 206, 223, */
  --pink4:   rgb(251, 215, 210, 0.4); /* --pink4 : rgb(242, 190, 209); */ 
  --textgold: rgb(136, 104, 81); 

}

body {
  background-color:var(--pink1); 
}

/* Scrolling below the fixed navbar*/
#pocasi, #redovy {
  scroll-margin-top: 180px;
}

.top-sticky { 
  top: 70px;
  position: sticky;
  z-index: 4;
}


a.pravidla, a.pravidla:link, a.pravidla:visited {
  color: var(--textgold);
  font-weight: bold;
  /* text-decoration:none;*/
}

/* Overwrite the navbar text color*/
.navbar-light .navbar-brand {
  color: var(--textgold);
}

.container {
  position: relative;
}

/* Font family same as Oznameni*/
.gold {
  color: var(--textgold);
  /*font-family: "Inter", sans-serif; */
}

.text_bold {
  font-weight: bold;
}

.text_italic { 
  font-style: italic ;
}

/* Update the bootstrap classes */
.nav-bar-color { 
  background-color: var(--pink3_navbar);
}

/* for laptops..*/
@media only screen and (min-width: 992px) {
  .ratio-4x3 {
    width: 560px;
    align-items: center;          
  }

  .background-image-right-bottom {

    width: 28px;
    height: 98px;

  }

  
}


/* END Update the bootstrap classes */
.hidden {
  display: none;
}

.unhide {
display: inline;
}

.jedlovyber-class {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}

.form-form {
  background-color: var(--pink4);
}

.form-form-mem {
  background-color: var(--pink2);
}

.form-form-pics {
  background-color:var(--pink1);
}



.form-host {
  background-color: var(--pink3); /* rgba(141, 198, 255, 0.3); */ 

}

.label-color {
  background-color: var(--pink3);

}


.li-pravidla { 
  margin-bottom: 15px;
  position: relative;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 100%;
  z-index: 1;
}

.li-span {
  font-size: 1rem;
  font-weight: normal;
  line-height: 70%;
}


/* kvetinka */ 
.right-one-third {
  /*position: fixed;*/
  position: absolute;
  bottom: 5px;
  right: 5%;
  /*height: 80vh;*/
  height: 70%;
}
/*
#id_logout:hover {
  color : white;
}
*/

.picture-background {
  position: relative;
}

.background-image-right-bottom {
  position: absolute;
  right: 5%;
  bottom: 1%;
  width: 28px;
  height: 98px;
  z-index: -1; 
  opacity: 1;
  background-size: cover;
  background-position: center;
}


/* Changes the width needs to be added from smaller to bigger not opposite*/
@media only screen and (max-width: 992px) {
  .background-image-right-bottom { 
    width: 57px;
    height: 186px;

  }

}

.video-container {
  margin-left: 10px;
  margin-bottom: 10px;
  border-radius: 7px;

}



.tab-1 { 
  margin-left: 15px;
}

/* Used for help button */
.button-right-top { 
  position: absolute;
  right: 15px;
  top: 24px;
  border-radius: 50%;
  padding: 1px 5px 1px 5px;
  background-color: var(--textgold);
}

.background-image-right-top {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 63px;
  /*z-index: -1;*/
  opacity: 1;
  background-size: cover;
  background-position: center;
}


.pict-ligher {
  opacity: 0.5;
}

.form-opacity { 
  opacity: 0.8;
}

.zinedx-top { 
  z-index: 1;
}

.zindex-nula { 
  z-index: 0;
}



/* 
@media only screen and (max-width: 900px) {
  .background-image { 
    width: 100%;

  }
} */ 


.card-margin-bottom {
  margin-bottom: 10px;
}


/*Styles for rendering picutes not in use*/
.top-align {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
}

.left-center {
  display: flex;
  flex-direction: column;
  margin: 0 auto;   
}

.imgsml { 
  width: 50vw;        
}
.imgsml1 { 
  transform: translateY(-50%);
  margin-bottom: 8rem;
}

.bottom-left {
  position: absolute;
  bottom: 5rem;
  left: 0;
  width: 30vw;
}