:root {
	--default-font: system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
	--paint-dark: #222F;
	--paint-dark-transparent: #2220;
	--paint-light: #FFFF;
	--paint-light-transparent: #FFF0;
	--paint-mid: #666F;
	--paint-mid-transparent: #6660;
	--paint-bg-dark: #222F;
	--paint-bg-dark-transparent: #2220;
	--paint-bg-light: #FFFF;
	--paint-bg-light-transparent: #FFF0;
	--paint-bg-mid: #666F;
	--paint-bg-mid-transparent: #6660;
	--common-none: 0;
	--common-low: 25%;
	--common-mid: 50%;
	--common-high: 75%;
	--common-full: 100%;
	--common-width-xs: 480px;
	--common-width-s: 600px;
	--common-width-m: 1024px;
	--common-width-l: 1280px;
	--common-width-xl: 1440px;
	--paint-main-border: #666;
	--paint-main-border-half-transparent: #6666; --element-teint-dark-level
	: 33%;
	--element-teint-dark-level2: 90%;
	--element-teint-dark-gardient: linear-gradient(0deg, color-mix(in srgb, black var(--element-teint-dark-level
		), var(--paint-bg-light-transparent)) 0%,
		color-mix(in srgb, var(--paint-bg-dark)
		var(--element-teint-dark-level2), var(--paint-bg-light))
		calc(0% + var(--element-teint-borderblur-distance)),
		var(--paint-bg-dark) var(--element-teint-centerline-pos),
		color-mix(in srgb, var(--paint-bg-dark)
		var(--element-teint-dark-level2), var(--paint-bg-light))
		calc(100% - var(--element-teint-borderblur-distance)),
		color-mix(in srgb, black var(--element-teint-dark-level),
		var(--paint-bg-light-transparent)) 100%);
	--element-teint-dark-gardient-upsidedown: linear-gradient(0deg, color-mix(in srgb, black var(--element-teint-dark-level
		), var(--paint-bg-light-transparent)) 0%,
		color-mix(in srgb, var(--paint-bg-dark)
		var(--element-teint-dark-level2), var(--paint-bg-light))
		calc(0% + var(--element-teint-borderblur-distance)),
		var(--paint-bg-dark) calc(100% - var(--element-teint-centerline-pos)),
		color-mix(in srgb, var(--paint-bg-dark)
		var(--element-teint-dark-level2), var(--paint-bg-light))
		calc(100% - var(--element-teint-borderblur-distance)),
		color-mix(in srgb, black var(--element-teint-dark-level),
		var(--paint-bg-light-transparent)) 100%);
	--element-teint-light-level: 35%;
	--element-teint-light-level2: 90%;
	--element-teint-light-gardient-border-lr: linear-gradient(90deg, var(--paint-main-border-half-transparent)
		0px, var(--paint-light-transparent) 1px,
		var(--paint-light-transparent) calc(100% - 1px),
		var(--paint-main-border-half-transparent) 100%);
	--element-teint-light-gardient-topside: color-mix(in srgb, white var(--element-teint-light-level),
		var(--paint-bg-dark-transparent)) 0%,
		color-mix(in srgb, var(--paint-bg-light)
		var(--element-teint-light-level2), var(--paint-bg-dark))
		calc(0% + var(--element-teint-borderblur-distance));
	--element-teint-light-gardient-downside: color-mix(in srgb, var(--paint-bg-light)
		var(--element-teint-light-level2), var(--paint-bg-dark))
		calc(100% - var(--element-teint-borderblur-distance)),
		color-mix(in srgb, white var(--element-teint-light-level),
		var(--paint-bg-dark-transparent)) 100%;
	--element-teint-light-gardient-centerline: var(--paint-bg-light)
		var(--element-teint-centerline-pos);
	--element-teint-light-gardient-centerline-upsidedown: var(--paint-bg-light)
		calc(100% - var(--element-teint-centerline-pos));
	--element-teint-light-gardient: var(--element-teint-light-gardient-border-lr),
		linear-gradient(0deg, var(--element-teint-light-gardient-topside),
		var(--element-teint-light-gardient-centerline),
		var(--element-teint-light-gardient-downside));
	--element-teint-hover: linear-gradient(0deg, color-mix(in srgb, white var(--paint-bg-mid)
		var(--common-low), var(--paint-bg-mid-transparent)) 0%,
		color-mix(in srgb, white var(--paint-bg-mid) var(--common-mid),
		var(--paint-bg-mid-transparent)) 50%,
		color-mix(in srgb, white var(--paint-bg-mid) var(--common-low),
		var(--paint-bg-mid-transparent)) 100%,);
	--element-teint-centerline-pos: 70%;
	--element-teint-borderblur-distance: 2px;
	--element-teint-dark-level: 33%;
}

html, body
{
    min-height: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
    background: url('../img/bg-orig.webp') no-repeat center center fixed;
    background-size: cover;
    /*font-family:Verdana, sans-serif, Arial, Helvetica;*/
    /*font-size:12px;*/
}
body
{
    background-color:#666;
}

header, main, footer {
    margin: 0;
    padding: 10px;
}
.element-teint-light {
	color: var(--paint-dark);
	background-color: var(--paint-bg-light);
	background: var(--element-teint-light-gardient);
}

.element-teint-dark {
	color: var(--paint-light);
	background-color: var(--paint-bg-dark);
	background: var(--element-teint-dark-gardient);
}

#main_content {
    
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.50);
    margin: 5px;
    padding: 5px 5px 25px 5px;
}

.breadcrumbSurround .breadcrumb {
    padding: 0;
    margin: 0 0 5px 0;
}
.breadcrumbSurround {
    /* line-height: 1; */
    display: float;
    /* padding: 0 10px 0 10px; */
    margin: 0 0 5px 0;
    
    border-top: #666 solid 1px;
    border-bottom: #666 solid 1px;
}


footer {
	/* background: color-mix(in srgb, var(--paint-bg-dark) var(--common-full), var(--paint-bg-dark-transparent));/**/
	color: var(--paint-light);
	border-radius: 0 0 5px 5px;
	/* position: absolute;
        bottom:0; */
	margin-top: 5px;
	/*    width: 100%;*/
}

#content_center
{
    text-align: left;
    width: 90%;
    min-width: 350px;
    margin: 0 auto;
    /*padding:0 10px;*/
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px #FFFFFF;
    text-shadow: 0px 0px 15px #666666;*/
    position:relative;
    top:20px;
    /* padding-bottom: 50px; */
}
.navbar-brand > img
{
    display: inline-block;
}
#form-line-template, #assign_csv_cols
{
    display: none;
    /* visibility: hidden; */
}



@media all and (min-width: 992px) {
    .navbar .dropdown-menu-end{ right:0; left: auto;  }
    .navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
    /* .navbar .nav-item:hover .nav-link{ color: #fff;  } */
    .navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
    .navbar .dropdown-menu.fade-up{ top:180%;  }
    .navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
}