@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.visitors-today-container{
    display: flex;
    flex-direction: column;
    height:100vh;
	/*padding: 20px;*/ /* Adjust the side of the page to get some space */
	
}

.beImg{
    margin-left: 20px;
    float: left;
    height: 75px;
}


.dashicons {
    color: white;
}

.visitors-today, .future-visitors{
    max-width: 100%;
    margin-left:15px;
    margin-right:15px;
    columns: auto;
	border-radius: 10px; /*rundade hörn */
	font-size: 20px; /* Justera fontstorleken efter behov */
    flex: 1 1 auto; /* Anpassa radstorleken automatiskt */
}

.visitors-today{
    background-color: #427393;
    display:inline-flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
	color:white;
	}

.today-visitors, .future-visitor{
    columns:4;
    background-color:#003b67;
    padding:10px;
    margin :0;
    border:2px solid #427393;
    /*columns: 4;*/
	/*flex-direction: row;!important */ /*bjorn */ 
	color:white;
	font-size: 16px; /* Justera fontstorleken efter behov */
}


.today-visitors p, .future-visitor p{

    padding-left:5px;
    padding-right:5px;
    flex-direction: row;
    align-items: flex-start;
    color: white;
    margin-bottom: 0;
    border:0px solid black;
	}


.future-visitors{
    background-color: #427393;
    display:inline-flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
	color:white;
	}

.lunch{
    text-align: center;
    font-size: 0.7em;
}
.dagarLunch{
    text-align: center;
    font-size:1.5em;
}
.current-content {
    background-color: white;
    
}
.visitorTitle{
    text-align: center;
    font-size:3.5em;
}

.description{
    font-size: 1.5em;
    width: auto;
}

.leftPic{
    float:left;
    padding-right:50px;
    display: inline-flex;
    flex-direction: column;
}

.rightPic{
    float:right;
    padding-left:50px;
	padding-right: 55px;
    display: inline-flex;
    flex-direction: column;

}

.imgA{
    max-width:40vw;
    max-height: 35vh;
}

.imgB{
    max-width:40vw;
    max-height: 35vh;
}

.swipe-container {
  position: relative;
  max-width: 100%;
  height: 100%;
  }
  .beImg{
      margin-top:20px;
  }

.current-content, .next-content {
  position: absolute;
  top: 100px;
  left: 0;
  max-width: 100%;
  height: 100%;
  background-color: white;
  margin-left:20px;
  margin-right:20px;
 
}

.next-content {
  left: 100%;
  opacity:0;
}

.swipe-out {
    animation: swipe-out 1s ease-in-out;
    animation-iteration-count: 1;
}

@keyframes swipe-out {
    from {left: 0;}
    to {left: -100%;}
    from{opacity:100;}
    to{opacity:0;}
}

.swipe-in {
    animation: swipe-in 1s ease-in-out;
    animation-iteration-count: 1;
}
.iframeBE{
    width: 1920px;
    height: 540px;
    border: none;
      
}

@keyframes swipe-in {
    from {left: 100%;}
    to {left: 0;}
    from{opacity:0;}
    to{opacity:100;}
}
.beImg {
    max-width: 100px;
}