/* ------------------------- CSS reset ------------------------- */
html, body, main, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, input, select, textarea{margin: 0;padding: 0;font-size: 100%;vertical-align: baseline;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}blockquote, q{quotes: none;}blockquote:before, blockquote:after,q:before, q:after{content: '';content: none;}table{border-collapse: collapse;border-spacing: 0;}input[type="submit"]{cursor: pointer;border:none;}input,select, textarea{outline: none;resize:none;-webkit-appearance:none;}html,body{height: auto;margin:0;padding: 0;}fieldset{border:none;}
/* ------------------------- END CSS reset --------------------- */
:root{
	--header-height: 80px;
}
.btn{
	cursor: pointer;
}
.cnt{
	width: 95%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.header{
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	background: #fff;
	border-bottom: 1px solid gray;
	text-align: center;
}
.header + *{
	margin-top: var(--header-height);
}
.domains{
	position: relative;
	max-height: calc(100vh - var(--header-height) - 35px);
	overflow: auto;
	z-index: 9;
	box-shadow: 5px 10px 30px rgb(0 0 0 / 23%);
}
.domains .row{
	display: flex;
	padding: 0 5px;
	border: 1px dashed gray;
	border-top: none;
	align-content: center;
}
.domains .row:first-child{
	border-top: 1px dashed gray;
}
.domains .row > *{
	/*height: auto;
	margin-top: auto;
	margin-bottom: auto;*/
	text-align: center;
	padding: 5px;

	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.domains .row.heading{position: sticky; top: 0; width: 100%; background: #fff;}
.domains .elemWrap > *{width: 100%}
.domains .pos__wrap{width: 7ch}
.domains .status__wrap{width: 8ch}
.domains .fav__wrap{width: 44px}
.domains .name__wrap{width: 50ch; flex-grow: 1;}
.domains .code__wrap{width: 10ch}
.domains .disallow__wrap{width: 8ch}
.domains .httpsDouble__wrap{width: 8ch}
.domains .wwwDouble__wrap{width: 8ch}
.domains .updated__wrap{width: 10ch}
.domains .update__wrap{width: 12ch;}
.domains .delete__wrap{width: 8ch;}
.domains .respTime{width: 100%;}

.domains .fav__wrap img{
	display: inline-block;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
}
.domains .code__wrap > *{display: block}

.domains .good{color: rgb(0 128 0 / 32%)}
.domains .elemWrap.bad{color: #d30000; background: rgb(247 129 129 / 42%)}

.domains .deleted{opacity: 0.2}
.domains .deleted .btn{pointer-events: none}

/**/
.filter__wrap{
	display: inline-block;
}
.btn.addDomain{
	display: inline-block;
}
/* sorting by column */
.domains{
	display: flex;
	flex-direction: column;
}
.domains .row.heading{
	order: 0!important;
}
.domains .row{
	order: 2;
}