@import "font.css";
@import "formular.css";
@import "navigation.css";
@import "starrating.css";
@import "imageMenu.css";
@import "spinner.css";
@import "favSettingButtons.css";
@import "pubSettingButtons.css";
@import "toggleeye.css";
@import "highslide.css";

/* Seitenstyles
/* Hintergrundbilder
/* Borderfarben
/* Liststyles
/* Tabellenstyles
/* Offcanvasstyles
/* Iframestyles
/* FLASH Styles
/* Invalid-Tooltip
/* Buttonstyles
/* Spinner
/* Smallviews

* {transition: all 0.3s ease;}

/*  -------------------  */
/*  Seitenstyles       */
/*  -------------------  */
body {
		background-image: url(../images/bgs/body.png) !important;
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
}

main{
    margin-top: 2px;
    height: calc(100vh - 200px);
}

main > .container {
    min-height: 100%;
    max-height:100%;
    height:100vh;
    border-radius:18px
}

footer
{
	border-top: 1px #000000 solid;
}

.nospacer {
	margin: 0;
	padding: 0;
}

.all-center
{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/*  -------------------  */
/*  Hintergrundbilder   */
/*  -------------------  */

.bg-black{
    background-color: #000000;
}

.bg-body {
	background-image: url("../images/bgs/body.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
}

.bg-content, .bg-info, nav, footer {
	background-image: url("../images/bgs/bg-info.png") !important;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: repeat-x;
}

.bg-menu {
	background-image: url("../images/bgs/bg-menu.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: repeat-x;
}

.bg-site {
	background-image: url("../images/bgs/bg-site.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: repeat-x;
}

.menuform {
	background-image: url("../images/bgs/normal.png") !important;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
    max-height: 46.6px;
}
.bg-gallery {
	background-image: url("../images/bgs/bg-gallery.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

.bg-cool {
	background-image: url("../images/bgs/bg-cool.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

.bg-output
{
	background-image: url("../images/bgs/menu.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	border: 2px #14aee1 groove;
	border-radius: 12px;
}

.bg-search{
    background-color: rgb(169, 177, 185) !important;
    color:#000000;
    font-weight:lighter;
    max-height:20px !important;
    }
    
.bg-slategray{
background-color: slategray !important;
}

/*  -------------------  */
/*  Borderfarben        */
/*  -------------------  */

.bbottom{
    border-bottom: #ffffff 1px solid;
}
.green-border {
	border: #00ff00 solid !important;
}

.red-border {
	border: #ff0000 solid !important;
}

.blue-border {
	border: #12bcff solid !important;
}
.isRated
{
	border: 4px red solid !important;
}

/*  -------------------  */
/*  Liststyles           */
/*  -------------------  */
.list-group, .list-group-item
{
	background: transparent;
	border: none;
	padding: 0;
}

.list-footer
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	color: #00ff00;
	border: 0px transparent solid;
}

.my_li
	{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin-right: 3px;
		height: 32px !important;
		width: 32px !important;
		max-height:100% !important;
		background: transparent;        
	}

.table,
.table-bordered
{
	border-color: #00ff00 !important;
	background-image: url("../images/bgs/bg-black.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

th .headLine {
	color: #fff000 !important;
}

/*  -------------------  */
/*  Offcanvas styles     */
/*  -------------------  */
.offcanvas
    {
        background: transparent;        
    }

.offcanvas .offcanvas-start
    {
        background: transparent;
        top:60px !important;
        height: calc(100% - 64px) !important;
        width: 50vw !important;
    }

.offcanvas-start .offcanvas-body
    {
        max-height: min-content !important;
        overflow: hidden;
        width: 50vw !important;    
        height: 100%;
        border: 5px red !important;
        border-style: ridge groove groove ridge !important;
	    border-radius: 13px;
        background-image: url("../images/bgs/bg-info.png") !important;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }


.offcanvas-start .offcanvas-header
    {
        border: 5px red !important;
        border-radius: 13px;
        border-style: ridge groove groove ridge !important;
        background-image: url("../images/bgs/bg-blackglas.png") !important;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }

.offcanvas-bottom
    {
        background: transparent;
        bottom: 64px !important;
        max-height: 42px !important;
        max-width:min-content !important;
        width: 100% !important;
        left: calc(50% - 110px) !important;
    }

 .offcanvas-backdrop.show {
        opacity: 0 !important;
    }
    

.offcanvas-bottom .offcanvas-body
    {
        max-height:  40px !important;
        height: 40px;
        max-width:fit-content !important;
        width:160px;
        background: transparent  !important;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .offcanvas.offcanvas-end
        {
            top: 43px;            
            right:0;
        }
    .tabborder{
        border:2px #00ff00 solid;
    }

/*  -------------------  */
/*  Iframestyles         */
/*  -------------------  */
iframe {
	padding: 5px;
	max-height: 100%;
	height: 150px;
	min-width: 100%;
	max-width: 100%;
	width: 90vw !important
}

/* -------------*/
/* FLASH Styles */
/* -------------*/

.success, 
.warning, 
.info
	{
		background: #000000;
		border-radius: 12px;
		padding: 12px;
	}


.topline
	{
		font-family: 'Architects Daughter';
		font-size: 1.4rem;
	}

.message
	{
		font-size: medium;
		color: #fff000 !important;
	}

.success .topline
	{
		color: #00ff00 !important;
	}

.warning .topline
	{
		color: #ff0000 !important;
	}


    .success,.warning,.info{

        max-height:160px !important;
    }

.success
{
	border: 6px#00ff00 ridge;
}

.warning
{
    
	border: 6px#ff0000 ridge;
}

.info
{
	border: 6px#12bcff ridge;
}

/* ----------------*/
/* Invalid-Tooltip */
/* ----------------*/
.alert
{
	text-align: center;
	background: #000000 !important;
	color: #ff0000 !important;
	padding: 4px !important;
	border: 2px#ff0000 ridge !important;
	border-radius: 0.375rem !important;
}

/* ------------------- */
/* Smallviews          */
/* ------------------- */
@media screen and (max-width: 473px) {
	.offcanvas-start,.offcanvas-start .offcanvas-body
	{
		min-width: 100vw !important;
		width: 100vw !important;
		margin-right: 0px !important;
		padding-right: 0px !important;
	}
	.navbar-nav {
		padding-left: 33%;
		text-align: left;
	}

	.nav-link {
		color: #00ff00 !important;
		font-weight: bolder;
		border-bottom: 0px transparent solid;
		border-left: 5px transparent solid;
		font-size:small;
	}

	.nav-link:hover,
	.dropdown-link:hover,
	.active:hover {
		color: #fff000 !important;
		border-left: 5px #fff000 solid;
	}

	.active {
		color: #ff0000 !important;
		border-color: #ff0000;
	}

	.dropdown-menu{
		max-width:max-content;
		
	}
	.dropdown-item{
		text-align: left;
		padding-left: 5px;
	}
	.email-cell {
		font-size: x-small;
	}

    

    .srbtn
	{
		width: 30px !important;
		height: 30px !important;
	}

	.errorExit{
		min-width: 24px !important;
		min-height: 24px !important;
		max-width: 24px !important;
		max-height: 24px !important;
		height:100vh;
		width:100vw;
	}

.starbtn
    {
        background-size: 80% 80% !important;
    }

}

/*  -------------------*/
/* Buttonstyles        */
/*  -------------------*/
.myBtn
{
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: transparent;
	border-color: transparent;
}

.invalid_btn,.invalidIcon 
	{
		background-image: url(../images/buttons/invalid.png);
	}
.invalid_btn:hover
	{
		background-image: url(../images/buttons/invalid_hover.png);
	}

.invalid_btn, .invalid_btn:hover
	{
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: transparent !important;
		border-color: transparent !important;	
		height:30px;
		width:30px;
	}

.invalidIcon
    {
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: transparent !important;
		border-color: transparent !important;	
		min-width: 16px;
		min-height: 16px;
		max-width: 16px;
		max-height: 16px;
		height:100vh;
		width:100vw;
    }

.invalidClose 
	{
		background-image: url(../images/buttons/invalid.png);
	}
.invalidClose:hover
	{
		background-image: url(../images/buttons/invalid_hover.png);
	}

.invalidClose, .invalidClose:hover
	{
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: transparent !important;
		border-color: transparent !important;	
		min-width: 24px;
		min-height: 24px;
		max-width: 24px;
		max-height: 24px;
		height:100vh;
		width:100vw;
	}



.helpcursor{
    cursor: help ! important;
}
.publicIcon{
    background-image: url(../images/icons/publicIcon);
   
}
.favSetIcon {
	background-image: url(../images/top_menu/addFav.png);
}

.btnForm{
        height: 50px;
        width: 50px;
        margin: 0;
        padding: 0;
    }

.infoBtn {
	background-image: url(../images/top_menu/infoBtn.png);
}
.infoBtn:hover {
	background-image: url(../images/top_menu/infoBtnHover.png);
}

/* captions Buttons */
.suche_btn {
	background-image: url(../images/top_menu/suche_btn.png);
}
.suche_btn:hover {
	background-image: url(../images/top_menu/suche_btn_hover.png);
}
.suche_btn ,.suche_btn:hover
{

	height: 24px;
	width: 24px;
	background-size: cover;
	/* Adjust the background size as needed */
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
}


/* Starrating */
.ttbtn{
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
}

.list-group-item  .minwleft{
    width:30vw !important;
}

.list-group-item  .minwright{
    width:60vw !important;
    border:#a400fc 3px solid !important;
}

.btn {
	color: #00ff00;
	border: 4px #00ff00 solid;
}

.btn:hover {
	color: #ff0000;
	border-color: #ff0000;
}

.btn .active {
	color: #00ff00;
	border-color: #00ff00;
}

.btn:focus-visible {
	color: #12bcff !important;
	border-color: #12bcff;
}

.fbtn
{
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: transparent !important;
	border: 2px #00ff00 solid !important;
	border-radius: 8px;
	min-height: 40px;
	height: 100% !important;
}

.form_btn {
	background-image: url(../images/buttons/normal.png);
	color: #00ff00;
}

.form_btn:hover {
	background-image: url(../images/buttons/hover.png);
	color: #000000;
}

.form_btn:active .active 
    {
        background-image: url(../images/buttons/active.png);
        color: #000000;
    }

.favSetIcon{
    background-image: url(../images/icons/setFavoriteIcon.png);
        }
.pubSetIcon{
     background-image: url(../images/top_menu/setPublic.png);
        }

.favSetIcon, .pubSetIcon{
    background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
    background-color: transparent;
	border: none;
	height: 30px !important;
	width: 30px !important;
}        

.myCollapse{
    min-height: 46px; 
    max-height: 46px; 
    max-width:292px; 
    width:292px;
    border:2px #000000 solid;
  }

.openMenuBtn{
    background-image: url(../images/top_menu/infoMenuBtn.png);
    background-size: 80% 80%;
	background-position: center center;
	background-repeat: no-repeat;
    background-color: transparent;
	height: 40px !important;
	width: 40px !important;
} 
.openMenuBtn:hover{
    background-image: url(../images/top_menu/infoMenuBtnHover.png);
}



/*  ------------  */
/*  .highslide    */
/*  ------------  */



.highslide{
	border-color: transparent;
}

.highslide-image{
    top:60px !important;
}
.highslide-dimming
	{
		background-color: #00b7f9;
		opacity: 1;
        margin-top: 2px;
        width:100vw;
	}

.highslide-number
	{
		color: #00ff00 !important;
		font-size: 1.2rem !important;
		font-weight: 400;
		position: relative;
		top: 13px;
		left: 8px;
		max-width: 90px;
	}

.highslide-move .bi .bi-globe2, 
.highslide-move .bi .bi-heart, 
.bi .bi-heart-fill
	{
		cursor:pointer ! important;
	}

.infocursor{
        cursor: help ! important;
        border-right: #badde9 groove 3px;
        text-align: center;
    }
.infocursor:last-child{ border-right: transparent ridge 0px;}