/* DDSWEB alap stylus file (c) http://www.ddsweb.hu/  4.0 */


/*main colors*/
:root {
  --fonts: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
  /*--color-border: #28303d;*/
  --color-border: #bebebe;
  --color-bg: #28303d;
  --color-bg1: #bebebe;
  --color-bg2: #ebebeb; 
  --color-bg3: #181c25;   
  --color-link: #52c5d8;
  --color-link-h: #ffffff;
  --color-link-invert: #ffffff;
  --color-link-invert-h: #52c5d8;
  --color1: #52c5d8;
  --color1-invert: #ffffff;
  --color2: #28303d;
  --color2-invert: #ffffff;
  --color-ok: #86b349;
  --color-warn: #dab434;
  --color-error: #b23939;
}


[data-bs-theme=dark] {
	--color-font: #ffffff;
	--color-font1: #52c5d8; 	
	--bs-body-bg: #28303d;
	--header-bg: rgba(0,0,0,0);
	--header-border: #52c5d8; 
	--box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015);
	--q-logo-color-0: #ffffff;
	--q-logo-color-1: #36d4e5;
	--filter-bg: var(--color-bg3);
 }
[data-bs-theme=light] {
	--color-font: #333333;
	--color-font1: #bebebe; 
	--bs-body-bg: #ffffff;
	--header-bg: rgba(255,255,255,0);
	--header-border: #52c5d8;
	--box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 		
	--q-logo-color-0: #000000;
	--q-logo-color-1: #36d4e5;
	--filter-bg: var(--color-bg2);

	.navbar-brand img {
		content: url(/images/qvanta_logo_2025_d.png);
	}

	.footer {
		color: var(--color-font);
	}	
	.footeraddress a:link, .footeraddress a:visited,.footermenu a:link, .footermenu a:visited {
	    color: var(--color-font);
	}
	.footerlogo img {
  		content: url("/images/egt.png");
	}	
	.footercopyr {
		color: var(--color-font);
	}
	.devices-box.boxtitle {
		color: var(--color-font);
	}
	.devices-box:hover {
		color: #ffffff;
	}
}



body {
        height: 100%;
        font-size: 0.85rem;
        font-family: var(--fonts);
        /*font-family: "Open Sans",Helvetica,Arial,sans-serif,'Montserrat', sans-serif;
        color: var(--color-font);
        background: var(--color-bg)
        padding-top: 110px;*/
}
body.loginbody {
    background: var(--bs-body-bg) url(/images/qbg_1.jpg) no-repeat top center;
    background-size: cover !important;
    padding-top: 0px;
}
h1,h2,h3,h4,h5,h6 {
        font-family: var(--fonts);
        /*font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        border-left: 1px solid rgba(0,0,0,1);
        padding-left: 1rem;*/
        color: var(--color-font);
}
h1 {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	margin-top: 1rem;
}
h2 {
	font-size: 1.3rem;
	margin: 1rem 0;
}
h3 {
	font-size: 1.2rem;
	margin: 1rem 0;
	border: 0;
	padding: 0;
}
h4 {
	font-size: 1.1rem;
	margin: 1rem 0;
}

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}


a:link:not(.btn),a:visited:not(.btn) { color: var(--color-link); text-decoration: none; }
a:active:not(.btn),a:hover:not(.btn) { color: var(--color-link-h); text-decoration: none; }

.c1 { color: var(--color1); }
.c2 { color: var(--color2); }
.c3 { color: var(--color-font); }
.c4 { color: var(--color-bg); }
.ok { color: var(--color-ok); }
.err { color: var(--color-error); }
.warn { color: var(--color-warn); }
.form-control.err{ background-color: var(--color-error) !important; }

.aoboxbody { padding: 15px 0px; }
.aoboxbody p { text-align: justify; }

.indent1 { margin-left: 40px; }
.indent2 { margin-left: 80px; }
.indent3 { margin-left: 120px; }

/*form*/
.disfield {
	display: inline-block;
	width: 100%;
	font-size: 1rem;
	font-weight: 400;
	padding: 5px 10px;
	color: #52c6d9;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: var(--filter-bg);
    padding: 12px 24px;
    box-shadow: var(--box-shadow);	
}

/*main divs*/
.main { 
	display: flex;
	flex-direction: column;
	justify-content: ;
	min-height: 100vh;
}
.header { }
.contwrap {
        position: relative;
        margin-top: 110px;
        flex-grow: 1;
}
.maincont {
        min-height: 400px;
}
.maincont.belso {
}
.maincont.belso p {
        line-height: 1.7em;
}
.cont { }
.footer { }

/*default anim*/
.main,.navbar,.header,.header-wrap,.wrap-logo{
        /*transition: all 0.8s;*/
}

/*separated block*/
.block {
        background-color: #ffffff;
        margin: 0px auto 10px auto;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.85);
}
.block  > .row  > [class*="col-"] {
        padding: 0px 40px;
        border: 1px solid #ffffff;
}
.radius {
        border-radius: 15px;
}


/*theme selector*/ 
header nav li a svg {
      width: var(--font-size);
      height: var(--font-size);
      color: var(--contrast);
    --theme-toggle-duration: .4s;
}
svg.icon-theme-toggle {
    --theme-toggle-duration: .4s;
}

svg.icon-theme-toggle :first-child path {
    transition-duration: calc(var(--theme-toggle-duration) * .6);
    transition-property: transform,d;
    transition-timing-function: cubic-bezier(0,0,.5,1)
}

svg.icon-theme-toggle g circle,svg.icon-theme-toggle g path {
    transform-origin: center;
    transition: transform calc(var(--theme-toggle-duration) * .65) cubic-bezier(0,0,0,1.25) calc(var(--theme-toggle-duration) * .35)
}

svg.icon-theme-toggle.moon g circle {
    transform: scale(1.4);
    transition-delay: 0s
}

svg.icon-theme-toggle.moon g path {
    transform: scale(.75);
    transition-delay: 0s
}

svg.icon-theme-toggle.moon :first-child path {
    d: path("M-9 3h25a1 1 0 0017 13v30H0Z");
    transition-delay: calc(var(--theme-toggle-duration) * .4);
    transition-timing-function: cubic-bezier(0,0,0,1.25)
}

/*navbar*/
.navbar {
	padding: 0.5rem 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
  	backdrop-filter: blur(1rem);
	transition: border-top-color .4s ease-in-out, box-shadow .4s ease-in-out;
	box-shadow: var(--box-shadow);
        /*
            box-shadow: 0px 0px 10px var(--header-border);
        */
}      
/*}*/

.navbar .navbar-brand {
        padding: 10px 0px;
}
.navbar-toggler {
	border: none;
}

.navbar .navbar-toggler .fa {
        color: var(--color1-invert);
        border: none;
        transition: all 200ms ease;
}
.navbar .navbar-toggler .fa:hover {
        color: var(--color-link-invert-h);
        border: none;
}
.navbar .navbar-toggler[aria-expanded="false"] .fa {
        transform: rotate(0deg);
}
.navbar .navbar-toggler[aria-expanded="true"] .fa {
        transform: rotate(-90deg);
}

.navbar .navbar-brand img {
        max-height: 60px;
}

.navbar .navbar-brand .logo{
    width: auto;
    height: 60px;
}

.navbar .navbar-brand  .logo .st0 {
  fill: var(--q-logo-color-0);
} 
.navbar .navbar-brand .logo .st1 {
  fill: var(--q-logo-color-1);
} 


.navbar-nav .nav-link {
        font-size: 1rem;
        color: var(--color-font) !important;
        font-weight: 400;
        /*text-transform: uppercase;*/
        padding-left: 1rem;
        padding-right: 1rem;
        position: relative;
        margin: 0 0.8rem;
}
.navbar-nav .nav-link:hover {
        color: var(--color-link) !important;
}
.navbar-nav.icons .nav-item{	
	padding: 0.5rem;
}

.navbar-nav.icons:after {
    display: block;
    height: 1.125rem;
    margin-inline: 0.5rem;
    border-right: 1px solid var(--color-font);
    content: "";
    padding: 1rem 0 1rem 0;
}

/*menu es almeniu effekt*/
.navbar-nav.wefffect a.nav-link::before, .navbar-nav.wefffect a.dropdown-item::before{
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0px;
  height: 2px;
  margin: 5px 0 0 0;
  transition: all 0.2s ease-in-out;
  transition-duration: 0.3s;
  opacity: 0;
  background-color: var(--color-link);
}
.navbar-nav.wefffect a.nav-link::before, .navbar-nav.wefffect a.dropdown-item::before{
        left: 0;
}
.navbar-nav.wefffect a.nav-link:hover::before, .navbar-nav.wefffect a.dropdown-item:hover::before{
        width: 100%;
        opacity: 1;
}
.inactive .nav-link {
        opacity: 0.2;
}
.inactive .nav-link:hover {
        color: var(--color1-invert) !important;
}

.nav-item.dropdown.show a{
}

.dropdown-menu{
        font-size: 0.85rem;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        border-color: var(--color-border);
        transition: all 0.3s;
}

a.dropdown-item {
        padding: 8px 20px;
        color: var(--color-font) !important;
        position: relative;
}
.dropdown-item:hover {
        color: var(--color-link) !important;
        background-color: rgba(255,255,255,0.1);
}

/*custom caret*/
[data-toggle="dropdown"]:after {
  margin-left: 10px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078";
}

.show [data-toggle="dropdown"]:after {
  content: "\f077";
}

.dropdown-toggle {
 	display: flex;
}
.dropdown-toggle.show:after {
  	content: "\f077";
}
.dropdown-toggle:after {
	border: none;
  	margin-left: 10px;
  	font-family: "Font Awesome 5 Free";
  	font-weight: 900;
  	content: "\f078";
}

/*social*/
.navbar .social {
}
.navbar .social .nav-link{
        margin: 0 0.3rem;
        font-size: 1.5rem;
}
.navbar .social .far {
        color: var(--color1-invert);
}

/*login*/
.login-center {	
	/*height: auto;
	margin: auto;
	margin-top: 15%;*/
	width: 400px;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.login-panel{
	backdrop-filter: blur(1rem);
	background-color: rgba(0,0,0,0.5);
	color: #ffffff;
	border: 1px solid transparent;
	border-radius: 10px;
	box-shadow: 0 12px 24px rgba(0,0,0,.3);	
	padding: 20px 20px;
	transition: border-top-color .4s ease-in-out, box-shadow .4s ease-in-out;		
}
.login-panel-top {
	text-align: left;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	display: flex;

}
.login-panel-top .logo {
	margin: 0 0.5rem;
}
.login-panel-top .logo img{
	max-height: 80px;
}
.login-panel-top .title {
	margin: 0 0.5rem;
	flex-grow: 1;
}
.login-panel-top .product {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
}
.login-panel-top .sub {
	font-size: 0.8rem;
	font-size: 1.1rem;
	font-weight: 300;
}

.login-content {
	font-size: 1rem;
	color: #ffffff;
	text-align: left;
	margin: 20px 0;
	line-height: 1.4em;
}
.login-form {
	padding: 0 30px;
}
.login-form .form-control {
	border: none;
	line-height: 2rem;
	border-radius: 2px;
	background-color: rgba(0,0,0,0.3);
}
.login-btn {
	padding: 20px 0;
}
.login-btn .btn{ 
	width: 100%;
	background-color: #75B729;
	border-radius: 2px;
	padding: 0.5rem;
}

.login-footer {
	display: flex;
	align-items: end;
}
.login-footer .logo {
	margin: 0 0.5rem;
}
.login-footer .logo img{
	max-height: 60px;
}
.login-footer .version {
	text-align: right;
	margin: 0 0.5rem;
	flex-grow: 1;
	vertical-align: bottom;
}

.login-copyr {
	color: #ffffff;
	text-align: center;
	padding: 1rem;
	line-height: 1.4em;
}

/*main btn*/
.funcbtn {
	border-radius: 8px;
	color: #757575;
	background-color: #ffffff;
	border: 1px solid #cccccc;	
	min-height: 250px;
	height: calc(100% - 2rem);
	text-align: center;
	padding:  1.2rem;
	margin: 1rem 0px;
	cursor: pointer;
	box-shadow: 0 2px 2px rgba(0,0,0,.05);	
}

.funcbtn a:link, .funcbtn a:visited { color: #757575; text-decoration: none; }
.funcbtn a:active,.funcbtn a:hover { color: #757575; text-decoration: none; }

.funcbtn:hover {
	background-color: #f5f5f5;
	border-color: #adadad;
}

.funcbtn .icon {
	color: #3d4451;
	font-size: 4rem;
}

.funcbtn h2 {
	font-size: 1.8rem;
	font-weight: normal;
	color: var(--color-link);
	border: 0;
	margin: 0;
	padding: 0;
	text-transform: none;
}
.funcbtn .desc{
	text-align: center;
	padding: 15px 0px;
}

.devicedata {
	padding-left: 0.75rem;
}

.nyitobox {
	color: #ffffff;
	background: transparent url(/images/nyito_kep.jpg) no-repeat top center;
	background-size: cover;
	padding: 1rem;
	min-height: 600px;
	padding: 1rem 2rem;
}
.nyitobox h2{
	color: #ffffff;
	padding: 1rem;
	text-align: center;
}
.nyitobox .info h4{
	color: #ffffff;
	border: 0;
	margin-left: 0;
	padding-left: 0;
}
.nyitobox .info{
	background-color: rgba(0,0,0,0.85);	
	border-radius: 0.5rem;
	padding: 1rem;
}

/*scroll shrink*/
 .shrink {
    padding-top: 0;
    padding-bottom: 0;
    background: rgba(0,0,0,0.9);
}
.shrink .nav-item.dropdown.show a {
        background: transparent;
}

.shrink .dropdown-menu{
?        background: rgba(0,0,0,0.9);
}


/*list*/
#listbody .table th > a {
	color: var(--color-font) !important;
}
#listbody .table th .fa {
	color: var(--color-link);
}


/*footer elements*/

.footer {
	color: #ffffff;
	background: var(--header-bg);
	padding: 1rem 0 0 0;
}
.footer .footer-border {
	border-top: 1px solid var(--header-border);	
}

.footer .fa {
	margin-right: 10px;
	color: #52c6d9;
}

.footeraddress {
	text-align: left;
	padding: 10px;
}

.footeraddress a:link,.footeraddress a:visited { color: #ffffff; text-decoration: none; }
.footeraddress a:active,.footeraddress a:hover { color: #52c6d9; text-decoration: none; }

.footermenu {
	text-align: left;
	padding: 10px;
}

.footermenu ul {
	margin-bottom: 0px;
}

.footermenu a:link,.footermenu a:visited { color: #ffffff; text-decoration: none; }
.footermenu a:active,.footermenu a:hover { color: #52c6d9; text-decoration: none; }

.footermenu .inactive { 
 opacity: 0.2;
}

.footerlogo {
	text-align: right;
}

.footerlogo img {
	height: 75px;
	padding: 10px 0px;
}

.footer1 {
	background: var(--header-bg);
	/*border-top: 1px solid rgba(255,255,255,0.3);*/
	padding: 0 0 1rem 0;
	text-align: left;
}
.footer1 .container-lg {
	border-top: 1px solid var(--header-border);	
}

.footer1 .footer-border{
	border-top: 1px solid var(--header-border);	
}

.footercopyr {
	color: #ffffff;
	font-size: 0.8rem;
	padding: 0.5rem 0;
}

.footer-branding {
    display: flex;
    flex-direction: column;
}

.footer-branding * {
    align-self: center;
}


/*sprites*/
.sprite { display:inline-block; overflow:hidden; margin:0px; padding:0px; background: transparent url(images/sprites.png) no-repeat scroll;  }
.sprite { width:28px; height:28px; background-position: 0px 0px; }
.sprite:hover { width:28px; height:28px; background-position: 0px -28px; }

/*qvanta*/

/*devices*/
.devices .table .fas {
	font-size: 1rem;
	padding: 0 0.5rem;
}
.devices .table .fas.ok{
	color: var(--color-ok);
}
.devices .table .fas.err{
	color: var(--color-error);
}
.devices .table .fas.info{
	color: var(--color-bg2);
}
.devices .table .btn-info{
	color: var(--color2);
}
.devices .table .btn-info .fas {
	font-size: 1rem;
	padding-right: 0.5rem;
}
.devices .table .ordered{
	color: var(--color1);
}

/*
    Toolbar / old interval
*/
.interval {
	border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
	background-color: var(--filter-bg);
	padding: 1rem;
	margin: 1rem 0;
	box-shadow: var(--box-shadow);
        /*transition: all 0.4s;*/
}

.interval h3 {
    margin-top: 0;
    margin-bottom: 0;
}


.interval-btns .interval-btn {
    display: block;
    margin: 0 0.5rem 0.5rem 0.5rem;
    width: 100%;
}

.interval .form-control{
    margin: 0 0.5rem 0.5rem 0.5rem;
}

.interval .form-label {
    margin: 1rem 0.5rem;
}

.interval .icon {
    font-size: 30px;
    color: var(--color1);
}

.interval-options{
    margin-top: 1rem;
    border-top: 1px solid var(--bs-body-color);
    padding-top: 1rem;
}
.interval-btns{
    padding-right: 2rem;
}

.toolbar {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: var(--filter-bg);
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: var(--box-shadow);
}

.toolbar-header {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: center;
}

.toolbar-title {
    align-content: center;
    margin-left: 0.75rem;
}

.toolbar-title h3{
    margin: 0;
}

.toolbar-icon {
    font-size: 30px;
    color: var(--color1);
}

.toolbar-buttons {
    margin-left: auto;
    align-content: center;
}

.toolbar-buttons-left {
    
    align-content: center;
}



.filter {
	border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
	background-color: var(--filter-bg);
	padding: 1rem;
	margin: 1rem 0;
	box-shadow: var(--box-shadow);
        /*transition: all 0.4s;*/
}


.filter_more_options{
    display: none;
}

.filter_more_options[style*='display: block']{
    display: flex !important;
}

/*device*/
.device .devicebox {
	padding: 1rem;
}
.device .devicebox .boxtitle {
	border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
	background-color: var(--filter-bg);
	padding: 1rem;
	margin: 1rem 0;
	box-shadow: var(--box-shadow);
}
.device .devicebox .datas {
	margin: 1rem;
}
.device .devicebox .datas .data {
	margin: 1rem 0;
}
.datas .data .title {
	display: block;
	color: var(--color1);
	font-weight: 400;
}
.datas .data .title {
	display: block;
}

.datas .data .title .fas {
	float: right;
	color: var(--color-ok);
	line-height: 1rem;
}
.datas .data .value .fas {
	font-size: 1rem;
	padding-right: 0.5rem;
}
.datas .data .value .fas.ok{
	color: var(--color-ok);
}
.datas .data .value .fas.err{
	color: var(--color-error);
}
.nav-tabs .nav-link {
	color: var(--color-font);
}
/*logs*/
.logs {
	margin: 1rem;
}
.logs .fas {
	font-size: 1rem;
	padding-right: 0.5rem;
}
.logs .fas.ok{
	color: var(--color-ok);
}
.logs.fas.err{
	color: var(--color-error);
}

/*charts*/
.charts {
	margin: 1rem 0;
	padding: 0.5rem;
	/*border-bottom: 1px solid #ffffff;*/
}
.charts .channalname {
	font-size: 1.2rem;
}
.charts .btn-info .fas {
	font-size: 1rem;
	padding-right: 0.5rem;
}
.charts .title {
	padding: 10px 0 1rem 0;
	color: var(--color1);
	font-weight: 600;
}
.charts .time { text-align: center; }
.charts .sum {
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center; 
}
.charts .fas {
	font-size: 1.5rem;
	padding: 0 0.5rem;
} 
.charts .fas.ok{
	color: var(--color-ok);
}
.charts.fas.err{
	color: var(--color-error);
}

.qchartdiv {
	position: relative;
        margin: 0.5rem 0;
}

.btn-xs {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.35rem;
    --bs-btn-font-size: 0.65rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.qchart-buttons{
    position: absolute;
    top: 0;
    right: 0;
}
.qchart-buttons button{
    padding: 0;
}


.devices-outer-box{
    height: 100%;
    padding: 1rem 0;
}

.devices-box {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: var(--filter-bg);
    padding: 1rem;
    box-shadow: var(--box-shadow);
    color: white;
    position: relative;
    transition: all 0.4s;
    height: 100%;
        
}

.devices-box:hover {
    background-color: var(--color-bg) !important;
    transition: all 0.4s;
        
}

.devices-activity{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    
    border-radius: 0 0.5rem 0.5rem 0;
    width: 0.7rem;
}

.devices-box h3 {
    line-height: 1.2rem;
    min-height: 2.4rem;
    color: var(--header-border);
    max-width: 75%;
    overflow-wrap: break-word;
    margin: 0;
}


.dev-online-never{
   /*background: none;
   border-top: 0.2rem solid #b23939 !important;
   border-right: 0.2rem solid #b23939 !important;
   border-bottom: 0.2rem solid #b23939 !important;
   border-left: none;*/
   background-color: var(--bs-gray-600) !important;
}

.dev-online-4{
   background-color: #b23939 !important;
}

.dev-online-3{
   background: linear-gradient(0deg, #86b349 0%, #86b349 25%, #b23939 25%, #b23939 100%) !important;
}

.dev-online-2{
   background: linear-gradient(0deg, #86b349 0%, #86b349 50%, #b23939 50%, #b23939 100%) !important;
}

.dev-online-1{
   background: linear-gradient(0deg, #86b349 0%, #86b349 75%, #b23939 75%, #b23939 100%) !important;
}

.dev-online-0{
    background-color: #86b349 !important; 
}

.devices-icon{
    position: absolute;
    top: 0.5rem;
    right: 1.5rem;
    font-size: 1.75rem;
    
}

.pic_thumbnail{
    padding: 5px;
    border-radius: 5px;
    background-color: #ccc;
    margin: 10px;
}

/*C3 graphing*/
.qchartdiv{
 .tick text{
    stroke: #c2c7d0;
}
.c3 path, .c3-legend-item text{
    stroke: #c2c7d0;
}
}

/*bs addon*/
/* phones, up to 575px */
@media screen and (max-width: 575px) {
}
/* 576px and up */
@media (min-width: 576px) {
}
 /*576px to 767 */
@media (min-width: 576px) and (max-width: 767px) {
}
/* phones, up to 767px */
@media (max-width: 767px) {
.maincont.belso {
        padding: 0.5em 1em !important;
}
}
/* tablets, 768px and up */
@media (min-width: 768px) {
}
/* tablets, 768px to 991 */
@media (min-width: 768px) and (max-width: 991px) {
}
/* desktops, max 991px */
@media (max-width: 991px) {
	.maincont.belso {
	        padding: 1em 2em;
	}
	.shrink .dropdown-menu{
	        background: transparent;
	}
	.dropdown-menu{
	        margin-left: 2rem;
	        background: transparent;
	}
	.footercopyrl,.footercopyrr {
	        font-size: 0.8rem;
	        text-align: center;
	}

	.contwrap {
	       margin-top: 80px;
	}

	.navbar {
		background-color: var(--bs-body-bg);
	}

	.navbar .navbar-brand {
		padding: 5px 0;
	}
	.navbar .navbar-brand img {
		max-height: 40px;
	}
	.navbar-nav.icons .nav-item {
	    padding: 0.5rem;
	    border-right: 1px solid #ffffff;
	}
	.navbar-nav.icons:after {
	display: none;
    }

	.devicedata {
		padding: 0;
	}


}
/* desktops, 992px and up */
@media (min-width: 992px) {
        .qchart-buttons{
            display:none;
            opacity: 0%;
            transition: all 1s;
        }



        .qvantaData:hover + .qchart-buttons {
            display: inline-block;
            opacity: 100%;
            transition: all 1s;
        }
}
/* desktops, 992px to 1199 */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* desktops, 1200px and up */
@media (min-width: 1200px) {
}
/*only print*/
@media print {
  a[href]:after {
    content: none !important;
  }
}


#a3_notification { padding: 5px 0; position: fixed; top: 0; width: 100%; z-index: 10000; text-align:center; height: auto !important; }
#a3_notification div { display:inline-block; background-color: #ffefbf; border: 1px solid #ffcc6f; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); color: #303030; font-size: 14px; padding: 2px 10px; margin: 2px auto; }
#a3_notification div .close { color: #efbc5f; cursor: pointer; float: right; font-size: 11px; font-weight: bold; margin: -2px -5px 0 5px; }
#a3_notification div.green { background-color: #dfefdf; border: 1px solid #6fcc6f; }
#a3_notification div.error { background-color: #ffefef; border-color: #ff6f6f; padding: 10px 20px; }
#a3_notification div.error .close { color:#ff6f6f; opacity:1}
#a3_notification div.error ul { text-align: left; }



/*test*/
.res-test {
  background-color: red;
  color: #fff;
  padding: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  opacity: 0.8;
}
@media (max-width: 480px) {
  .res-test {
    background-color: darkviolet;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .res-test {
    background-color: darkcyan;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .res-test {
    background-color: mediumpurple;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .res-test {
    background-color: orange;
  }
}
@media (min-width: 1200px) {
  .res-test {
    background-color: red;
  }
}