/* The grid: Four equal columns that floats next to each other */
/* The expanding image container (positioning is needed to position the close button and the text) */


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.containerr {
  padding-bottom: 20px;
}
/* Style the images inside the grid */
img[name="picture"] {
  position: relative;
  opacity: 0.8;
  cursor: pointer;
  border-radius: 5px;
  height: 50px;
  width: 100%;
  float:left;
  margin-bottom: 10px;
  object-fit: cover;
}

img[name="picture"]:hover {
  opacity: 1;
  border: 1px darkblue solid;
}
#min{
  padding-right: 2px;
  padding-left: 2px;
  width: 100%;
}
#expandedImg, #expandedImg2, #expandedImg3, #expandedImg4, #expandedImg5{
  width:100%;
  border-radius: 25px;
  height: 200px;
  margin-top: 20px;
  object-fit: cover
}
.modal-content .modal-body{
  background-color: rgba(255,255,255,0.8);
}
.close{
  color: black;
}


/*
** reseting 
*/
.opinions > a{
  color: #2ecc71;
  font-family: tahoma;
}
/*
** timeline css codes
*/
.opinions{
  width: 100%;
  /*margin: 100px auto;*/

  padding: 20px 10px 0px 50px;
  border-left: 2px solid #34495e;
}
.opinions > p{
  padding: 20px;
  background: #34495e;
  color: #ecf0f1;
  font-family: tahoma;
  line-height: 1.7;
  position: relative;
  border-radius: 0px 25px 25px 25px;
 /* box-shadow: 5px 10px;*/
}
.opinions > p > span {
    display: block;
    padding: 5px 5px 10px 5px;
    color: #7f8c8d;
    font-style: italic;
    font-size: 13px;
}

.opinions > p > button{
  background: #1BA1FA;
  color: #fff;
  width: 100px;
  height: 35px;
  border-radius: 2px;
  border: 0;
  font-weight: bold;
  cursor: pointer;
  float: right;
  position: absolute;
  right: 15px;
  bottom: 15px;
}
.opinions > p:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1BA1FA;
  top: -9px;
  left: -61px;
  position: absolute;
}
.opinions > p:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #34495e #34495e transparent       transparent ;
  border-width: 15px;
  position: absolute;
  top: 0px;
  left: -29px;
}
.addinput{
  background: #1BA1FA;
  color: #fff;
  width: 100px;
  border-radius: 2px;
  border: 0;
  font-weight: bold;
  cursor: pointer;
  float: right;
  right: 15px;
  bottom: 15px;
  height: 35px;
}
.bgbg{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #34495e #34495e transparent       transparent ;
  border-width: 15px;
  position: absolute;
  top: 0px;
  left: -29px;
}


/* Komentarze */
.comments > a{
  color: #2ecc71;
  font-family: tahoma;
}
/*
** timeline css codes
*/
.comments{
  width: 100%;
  /*margin: 100px auto;*/

  padding: 20px 10px 0px 50px;
  border-left: 2px solid #34495e;
}
.comments > p{
  padding: 20px;
  background: #4d657d;
  color: #ecf0f1;
  font-family: tahoma;
  line-height: 1.7;
  position: relative;
  border-radius: 0px 25px 25px 25px;
}
.comments > p > span {
    display: block;
    padding: 5px 5px 10px 5px;
    color: #7f8c8d;
    font-style: italic;
    font-size: 13px;
}

.comments > p > button{
  background: #1BA1FA;
  color: #fff;
  width: 100px;
  height: 35px;
  border-radius: 2px;
  border: 0;
  font-weight: bold;
  cursor: pointer;
  float: right;
  position: absolute;
  right: 15px;
  bottom: 15px;
}
.comments > p:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #89cdfa;
  top: -9px;
  left: -61px;
  position: absolute;
}
.comments > p:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #4d657d #4d657d transparent       transparent ;
  border-width: 15px;
  position: absolute;
  top: 0px;
  left: -29px;
}

/*Error*/
.error > a{
  color: #2ecc71;
  font-family: tahoma;
}
/*
** timeline css codes
*/
.error{
  width: 100%;
  /*margin: 100px auto;*/

  padding: 20px 10px 0px 50px;
  border-left: 2px solid #34495e;
}
.error > p{
  padding: 20px;
  background: linear-gradient(90deg, rgba(121,9,9,1) 0%, rgba(2,0,36,1) 100%, rgba(0,212,255,1) 100%);
  color: #ecf0f1;
  font-family: tahoma;
  line-height: 1.7;
  position: relative;
  border-radius: 0px 25px 25px 25px;
}
.error > p > span {
    display: block;
    padding: 5px 5px 10px 5px;
    color: #7f8c8d;
    font-style: italic;
    font-size: 13px;
}

.error > p > button{
  background: #1BA1FA;
  color: #fff;
  width: 100px;
  height: 35px;
  border-radius: 2px;
  border: 0;
  font-weight: bold;
  cursor: pointer;
  float: right;
  position: absolute;
  right: 15px;
  bottom: 15px;
}
.error > p:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1BA1FA;
  top: -9px;
  left: -61px;
  position: absolute;
}
.error > p:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: rgba(121,9,9,1) rgba(121,9,9,1) transparent       transparent ;
  border-width: 15px;
  position: absolute;
  top: 0px;
  left: -29px;
}

/*Success*/

.success > a{
  color: #2ecc71;
  font-family: tahoma;
}
/*
** timeline css codes
*/
.success{
  width: 100%;
  /*margin: 100px auto;*/

  padding: 20px 10px 0px 50px;
  border-left: 2px solid #34495e;
}
.success > p{
  padding: 20px;
  background: rgb(216,232,232); background: linear-gradient(90deg, rgba(216,232,232,1) 0%, rgba(132,255,173,1) 100%, rgba(0,212,255,1) 100%);
  color: #ecf0f1;
  font-family: tahoma;
  line-height: 1.7;
  position: relative;
  border-radius: 0px 25px 25px 25px;

}
.success > p > span {
    display: block;
    padding: 5px 5px 10px 5px;
    color: #7f8c8d;
    font-style: italic;
    font-size: 13px;
}

.success > p > button{
  background: #1BA1FA;
  color: #fff;
  width: 100px;
  height: 35px;
  border-radius: 2px;
  border: 0;
  font-weight: bold;
  cursor: pointer;
  float: right;
  position: absolute;
  right: 15px;
  bottom: 15px;
}
.success > p:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1BA1FA;
  top: -9px;
  left: -61px;
  position: absolute;
}
.success > p:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: rgba(216,232,232,1) rgba(216,232,232,1) transparent       transparent ;
  border-width: 15px;
  position: absolute;
  top: 0px;
  left: -29px;
}
.modal-backdrop {
  z-index: 1049;
}
.modal-dialog {
    transform: translate(0, -50%);
    top: 10%;
    margin: 0 auto;
}