:root {
    --lcol: 170px;
    --grey: rgb(200, 210, 225);
    --dgrey: rgb(178, 182, 194);
    --brdd: rgba(204, 214, 234);
    --font: rgb(50, 78, 110);
    --label: rgba(60, 80, 110, .7);
    --green: rgb(100, 209, 184);
    --lgreen: rgba(100, 209, 184, .5);
    --dgreen: rgb(76, 176, 140);
    --blue: rgb(99, 172, 224);
    --dblue: rgb(21, 48, 90);
    --red: rgb(247, 116, 116);
    --lred: rgb(255, 143, 135);
    --yellow: rgb(252, 238, 174);
	--lime: rgb(242, 255, 247);
    --light: rgb(240, 247, 250);
    --lgrey: rgb(248, 250, 252);
    --lblue: rgb(232, 250, 255);
	--brd: rgba(202, 208, 219);
    --shad: rgba(45,50,90,.15);
}
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    -webkit-tap-highlight-color: transparent;
    font-size: calc(1em * .625);
    line-height: 1;
    color: var(--font);
    -ms-high-contrast-adjust: none;
    -webkit-text-size-adjust: 100%;
}
body, form {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
}
form {
    display: flex;
    height: 100svh;
	background: var(--lime);
	padding: 0
}
main, main > #upMain {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
    width: calc(100vw);
	height: calc(100svh);
	background: white;
	box-shadow: -1px 0 3px 0 var(--shad)
}

aside {
	padding: 12px 10px;
	width: var(--lcol)
}
aside > *, article > * {
	margin-bottom: 17px;
	width: 100%;
	max-width: 100%;
}
article > *:last-child {
	margin-bottom: 0;
}
aside + main, aside + main > #upMain {
	width: calc(100vw - var(--lcol));
}
main > .cols {
	display: flex;
	width: calc(100vw - var(--lcol));
	flex-grow: 1;
	min-height: 42px;
	z-index: 3;
}
header {
    padding: 14px 20px 10px;
	background: white;
	border-left: 1px solid var(--brd);
	display: flex;
	align-items: center;
	height: auto;
	gap: 5px;

}
header > h1 + div + * {
	padding-right: 20px;
}
section {
	display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 42px;
    padding: 0;
	border-left: 1px solid var(--brd);
	background: white;
	overflow: auto;

	scrollbar-color: var(--green) transparent;
}
.cols > section {
	border-right: 1px solid var(--brd)
}
article {
	padding: 10px 20px;
	width: 100%;
}
.flex article {width: auto}
section + aside {
	width: var(--lcol);
	background: var(--lgrey);
	padding-left: 10px;
}
footer {
    display: flex;
    align-items: center;
	gap: 10px;
    padding: 15px 20px;
    z-index: 200;
	background: var(--lgrey);
	border-left: 1px solid var(--brd);
	border-top: 1px solid var(--brd);
}
footer.light {
	background: var(--light);
}
.block {
	padding: 10px;
	border: 1px solid var(--brd);
}
.block.lgrey {
	background: var(--lgrey);
}

/* =================== FONTS ======================== */
h1, h2, h3, h4 {
    margin: 0;
    font-weight: 400;
}
h1 {
    font-size: 1.5rem;
	line-height: 1;
}
h2 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.03rem;
	margin-bottom: 8px;
}
h3 {
    font-size: 1.2rem;
	font-weight: 800;
}
h4 {
	font-size: 1.1rem;
    font-weight: 900;
	margin-bottom: 4px;
}
p {
    margin: 0 0 12px
}
p:last-child {
	margin-bottom: 0;
}
.medium {
    font-size: 1.3rem;
}
.small {
	font-size: 10px
}
.red:not(.color) {color: var(--red)}
.green:not(.color) {color: var(--green)}
.dgreen:not(.color) {color: var(--dgreen)}
.blue:not(.color) {color: var(--blue)}
.highlight {
	padding: 2px 6px 3px;
	border-radius: 3px;
	color: white;
	background-color: var(--yellow)
}
.highlight.green {
	background-color: var(--green);
	color: white;
}
.highlight.red {
	background-color: var(--red);
	color: white;
}
.highlight.blue {
	background-color: var(--blue);
	color: white;
}
.error {
    color: var(--red);
    font-weight: 900;
}
.error input, .error .select, .error select  {
	box-shadow: 0 0 0 1px var(--red) !important;
	border-color: var(--red) !important;
}
label {
    display: block;
    font-size: 10.5px;
	margin-right: 3px;
    color: var(--label);
	white-space: nowrap;
}
label strong {
	color: var(--font)
}
    label.inline {
        display: inline-block;
        padding-right: 2px;
    }
	h1 label {
        display: inline;
        padding-right: 0;
    }
header h1 {
   	display: flex;
	align-items: center;
	min-height: 26px;
}
header h1 > label {
	margin-left: 20px;
}
header h1 > span {
	white-space: nowrap;
}
header h1 + fieldset {
	margin: 4px 0 0;
	align-items: flex-end;
}
a:not(.btn), .link {
    display: inline-block;
    color: var(--dgreen);
    color: var(--blue);
}
.link {
	text-decoration: underline;
}

    a:hover, .link:hover {
        color: var(--green);
        opacity: 1;
    }

address {
    font-style: normal;
}
hr {
	border: none;
	border-top: 1px solid var(--brd);
	margin: 20px 0;
}
section > hr:first-child {
	position: sticky;
	margin: 0;
	top: 0;
}
section > hr:first-child + article {
	padding-top: 20px;
}
/* =================== INPUTS/BUTTONS =============== */
fieldset {
	display: flex;
	border: none;
	margin: 0;
	padding: 0 0 2px;
	gap: 10px;
	flex-wrap: wrap;
}
aside fieldset {
	flex-direction: column;
	flex-wrap: nowrap;
}
aside fieldset.ngap > div > input[type='text'] {
	border-radius: 0;
}
aside fieldset.ngap > div:first-child > input[type='text'] {
	border-radius: 3px 3px 0 0;
}
aside fieldset.ngap > div:last-child > input[type='text'] {
	border-radius: 0 0 3px 3px;
}
aside fieldset.ngap > div + div > input[type='text'] {
	border-top: none;
}
aside fieldset.ngap + fieldset.ngap {
	border-top: 1px solid var(--brd);
	margin-top: 6px;
	padding-top: 6px;
}
section > article, section > fieldset {
	padding: 0 20px 2px;
}
section > fieldset {
	padding-bottom: 2px;
}
article + article {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--brd);
}
section > article:last-child {
	padding-bottom: 20px;
}
fieldset + fieldset, .flex + fieldset, fieldset + .block, ul.list + fieldset {
	margin-top: 14px;
}
section fieldset > div > label + div:not(.ddwn-wrap) {
	background: var(--lgrey);
	padding: 6px 8px;
	min-height: 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
fieldset > div > label + div.yellow {
	background: var(--yellow)
}
fieldset > div > label + div.green {
	background: var(--lgreen)
}
fieldset label + div {
	width: 100%;
}
input:not([type=checkbox],[type=file]), select, .select, textarea {
    display: block;
    border: 1px solid var(--brdd);
    margin: 0;
    padding: 0 8px;
	color: var(--font);
    font-weight: 400;
    outline: none !important;
    min-height: 1em;
    height: 26px;
    background-color: var(--lgrey);
    border-radius: 2px;
    font-size: 1.1rem;
	width: 100%;
	box-shadow: inset 1px 1px 1px var(--shad);
}
article textarea, article p {
	max-width: 700px;
}
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--lgrey) inset, 0 0 0 1px var(--font);
  box-shadow: 0 0 0px 1000px var(--lgrey) inset, 0 0 0 1px var(--font);
  transition: background-color 5000s ease-in-out 0s;
  font-family: roboto, Helvetica, Arial, sans-serif !important;
}
aside input:-webkit-autofill:hover, 
aside input:-webkit-autofill:focus,
aside textarea:-webkit-autofill:hover,
aside textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--lgrey) inset, 0 0 0 1px var(--font);
  box-shadow: 0 0 0px 1000px white inset, 0 0 0 1px var(--font);
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill, textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px var(--lgrey) inset;
	box-shadow: 0 0 0px 1000px var(--lgrey) inset;
}
aside input:-webkit-autofill, aside textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
	box-shadow: 0 0 0px 1000px white inset;
}
aside input:not([type=checkbox],[type=file]), aside select, aside .select, aside textarea, .lgrey input:not([type=checkbox],[type=file]), .lgrey select, .lgrey .select, .lgrey textarea {
    background-color: white;
}
textarea {
    font-size: 1.1rem;
    line-height: 1.2;
    font-family: roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    padding: 8px;
    width: 100%;
    min-height: 60px;
}
dialog textarea {
	min-height: 48px;
}
textarea + .btn {
    height: 100%;
	display: flex;
	align-items: center;
	border-radius: 0 3px 3px 0;
}
footer textarea + .btn {
    height: 60px;
}
label + input:not([type=checkbox],[type=file]), label + select, label + .select, label + textarea {
	margin-top: 1px;
}
footer textarea {
	background: white;
}
select, .select {
	display: flex;
	align-items: center;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
	box-shadow: 1px 1px 2px var(--shad);
    padding-right: 14px;
    min-width: 40px;
	cursor: pointer;
	background: linear-gradient(0deg, rgba(245,247,252,1) 0%, rgba(255,255,255,1) 18%, rgba(245,247,252,1) 100%);
}
    
    select:hover, .select:hover {
        
    }
select:disabled {
	border: none;
	opacity: 1;
	padding: 0;
	background: none;
	height: auto;
	font-size: 1.2rem;
}
.select {line-height: 28px; white-space: nowrap }
input::placeholder {
	opacity: .6;
	font-style: italic;
	color: var(--font);
}
input[type=checkbox] {
    margin: 0;
    vertical-align: top;
    border: 1px solid var(--brd);
	
}
input[type=checkbox] + label {
    display: inline-block;
	
}
input[type="checkbox"]:checked {
    border-radius: 3px;
}

    input[type="checkbox"]:checked:before {
        content: "✓";
        font-size: 1.1rem;
        font-weight: 900;
        display: block;
        color: white;
        text-align: center;
        background: var(--blue);
        border-color: var(--blue);
        width: 16px;
        height: 16px;
        margin-left: -2px;
        margin-top: -2px;
        border-radius: 3px;
    }
fieldset > div select {
	display: block;
    width: 100%;
}
fieldset .xsm {
    width: 40px;
}

fieldset .sm {
    width: 70px;
}

fieldset .med {
    width: 118px;
}

fieldset .group.med {
    width: 127px;
}

fieldset .lg {
    width: 203px;
}
fieldset .name {
    width: 160px;
}
fieldset .ssn {
    width: 100px;
}
fieldset .phone {
    width: 118px
}

fieldset .email {
    width: 210px;
}

fieldset .zip {
    width: 56px
}

fieldset .city {
    width: 129px;
}
fieldset .state {
    width: 118px;
}
fieldset .addy {
    width: 238px;
}

fieldset .apt {
    width: 80px;
}
fieldset .npi {
    width: 110px;
}
fieldset select.day {
    width: 40px;
}
fieldset select.year {
    width: 50px;
}
fieldset .date {
	width: 118px;
}
fieldset input[type=date] {
	font-family: roboto, Helvetica, Arial, sans-serif;
}
fieldset .time {
    width: 100px;
}
fieldset .large {
    width: 260px;
}
fieldset h2 {
    margin: 0 20px 0 0
}

fieldset .group {
    align-items: flex-end
}
.btn {
	display: inline-block;
    padding: 5px 14px;
    height: 26px;
	max-height: 100%;
    border-radius: 3px;
    background: var(--lgrey);
	background: linear-gradient(0deg, rgba(254,254,255,1) 0%, rgba(246,249,254,1) 22%, rgba(255,255,255,1) 53%, rgba(245,247,252,1) 100%);
	box-shadow: 1px 1px 2px var(--shad);
    border: 1px solid var(--brd);
    color: var(--font);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: .02rem;
	margin-right: 0 !important;
}
aside .btn {
	
}
.btn.small {
	padding: 1px 12px;
	font-size: 10px;
	height: 18px;
}
.btn.full {
	height: 100%;

	display: flex;
	align-items: center;
	border-radius: 0 3px 3px 0;
}
.btn.green.full {
	background: var(--green);
}
.btn.icon {
	padding: 4px;
	width: 26px;
}
.btn.icon.small {
	width: 18px;
	border-radius: .75px;
	padding: 3px;
	text-align: center;
	border-radius: 3px;
}
.btn.icon.profile {
	border-radius: 0 0 0 4px;
	position: relative;
	z-index: 3;
	border-right: none;
	border-top: none;
}
.btn.blue {
	background: var(--blue);
	background: linear-gradient(0deg, rgba(139,204,244,1) 0%, rgba(109,185,240,1) 19%, rgba(117,189,240,1) 54%, rgba(99,172,224,1) 100%);
	box-shadow: 1px 1px 2px var(--shad);
	border-color: var(--blue) !important;
	color: white;
}
.btn.green {
	background: var(--green);
	background: linear-gradient(0deg, rgba(117,230,204,1) 0%, rgba(100,209,184,1) 19%, rgba(117,232,206,1) 54%, rgba(100,209,184,1) 100%);
	border-color: var(--green) !important;
	box-shadow: 1px 1px 2px var(--shad);
	color: white;
	text-shadow: #fff 0 0 1px,var(--font) 0 0 2px, var(--dgreen) 0 0 5px;
	letter-spacing: .05rem;
}
.btn.green.lg, .form.large .btn.green, .btn.green.xlg {
	background: var(--green);
	text-shadow: none;
	box-shadow: none;
	border: none;
}
.btn.green.lg:hover, .btn.green.xlg:hover, .form.large .btn.green:hover, .btn.icon.green:hover {
	background: var(--blue) !important;
	border: none !important;
	box-shadow: none;
}
.btn.red {
	background: var(--red);
	background: linear-gradient(0deg, rgba(255,172,159,1) 0%, rgba(254,128,128,1) 23%, rgba(255,140,140,1) 54%, rgba(247,116,116,1) 100%);
	border-color: var(--red);
	box-shadow: 1px 1px 2px var(--shad);
	color: white;
}
.btn:not(.icon):hover {
	background: var(--green);
	background: linear-gradient(0deg, rgba(128,240,214,1) 0%, rgba(114,227,201,1) 19%, rgba(112,224,199,1) 54%, rgba(100,209,184,1) 100%);
	border-color: var(--green) !important;
	color: white;
}
.btn.green:not(.icon):hover {
	background: var(--green);
	background: linear-gradient(0deg, rgba(117,230,204,1) 0%, rgba(100,209,184,1) 19%, rgba(117,232,206,1) 54%, rgba(100,209,184,1) 100%);
	border-color: var(--green) !important;
	box-shadow: inset 0 0 0 30px rgba(255,255,255,.15),1px 1px 2px var(--shad);
	color: white;
}
.btn.red:not(.icon):hover {
	background: var(--red);
	background: linear-gradient(0deg, rgba(255,172,159,1) 0%, rgba(254,128,128,1) 23%, rgba(255,140,140,1) 54%, rgba(247,116,116,1) 100%);
	box-shadow: inset 0 0 0 30px rgba(0,0,0,.06),1px 1px 2px var(--shad);
    border-color: var(--red) !important;
}
.btn.clear {
	background: none;
	border: none;
}
.btn.small.clear {
	padding: 0;
	height: 14px;
	box-shadow: none !important;
}
.btn svg {
	height: 100%;
	width: auto;
}
input[type='text'] + .btn.clear {
	background-color: transparent;
	border: none;
	border-left: none;
	margin-left: -26px;
	margin-top: 1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	z-index: 2;
	box-shadow: none;
}
.btn svg .fill {
        fill: var(--font);
        opacity: .6;
    }
.btn.clear.blue svg .fill {
        fill: var(--blue);
        opacity: 1;
    }
    .btn.blue svg .fill {
        fill: white;
        opacity: 1;
    }
    .btn:hover svg .fill, input[type='text']:hover + .btn.icon svg .fill, input[type='text']:focus + .btn.icon svg .fill,.btn.clear.blue svg .fill {
        fill: var(--green);
        opacity: 1;
    }
    .btn.icon.red svg .fill {
        fill: white;
    }
    .btn.icon.red:hover svg .fill {
        fill: white;
    }
form > aside .btn {
		display: flex;
		position: relative;
        padding: 4px 12px;
		height: 24px;
		line-height: 1.2;
		margin: 0;
		width: 100%;
		justify-content: flex-start;
		z-index: 2;
    }
	aside .btn + .btn {
		margin-top: 6px;
	}
.group {
	display: flex;
	position: relative;

}
.group.vert {
	flex-direction: column;
}
.group:not(.vert) > * {
	border-left: none;
	border-radius: 0;
}
.group:not(.vert) > *:last-child {
	border-radius: 0 3px 3px 0;
}
.group:not(.vert) > *:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border-left: 1px solid var(--brd)
}
.group.vert > * {
	border-top: none;
	border-radius: 0;
	margin: 0 !important;
}
.group.vert > *:last-child {
	border-radius: 0 0 3px 3px;
}
.group.vert > *:first-child {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-top: 1px solid var(--brd);
}
.group select {
	width: auto;
}

/* =================== NAVIGATION =================== */
nav {
    display: block;
    padding-bottom: 17px;
    font-size: 1.15rem;
    font-weight: 400;
	margin: 0 0 20px -4px;
	padding: 0;
}
	nav ul {
	 margin: 5px 0 0 16px;
	 padding: 0;
	}
	nav > li > ul {
	 padding: 0 0 10px;
	}
	
    nav li {
        position: relative;
		list-style: none;
        padding: 1px 0;
    }
	nav > li {
		padding-left: 0;
	}

    nav > li > select {
        padding-left: 10px;
        margin-left: 10px;
        width: calc(100% - 10px);
    }

    nav.tree ul li:after {
        content: '';
        position: absolute;
        left: -6px;
        top: -4px;
        height: calc(100% + 2px);
        border-left: 1px solid var(--brd);
    }

    nav.tree ul li:before {
        content: '';
        position: absolute;
        left: -6px;
        top: auto;
        margin-top: 12px;
        width: 8px;
        border-top: 1px solid var(--brd);
		z-index: 1;
    }

    nav.tree ul li:last-child:after {
        height: 20px;
        top: -7px;
    }
    nav li > a, nav li > span, nav li > span > a {
        display: flex !important;
		position: relative;
		align-items: center;
        color: var(--lfont);
        min-height: 23px;
		padding-top: min(4px);
		padding-bottom: min(4px);
		border: 1px solid transparent;
		border-radius: 2px;
        padding: 0 6px;
        text-decoration: none;
		z-index: 2;
    }

        nav li > a.not(.btn):focus {
            box-shadow: none;
			text-decoration: underline;
            text-decoration-color: var(--blue);
            text-decoration-thickness: 2px;
        }

        nav li > span > a {
            padding-top: 0;
            padding-bottom: 0;
        }
		nav li > span > label {
            font-size: 11px;
			margin-right: 4px;
        }

        nav li > a.column, nav li > span.column {
            align-items: flex-start;
            justify-content: center;
        }

    nav > li > * {
        padding-left: 10px;
    }
    nav li a:hover {
		color: var(--green)
    }
	nav li.selected > a, nav li.selected > span {
		font-weight: 500;
		line-height: 1;
		color: var(--font);
		background: white;
		box-shadow: 0 0 0 1px var(--brd);
		padding-top: min(4px);
		padding-bottom: min(4px);
		
    }
	nav > li.selected > a, nav > li.selected > span {
		position: relative;
		left: 5px;
    }

    nav li.selected > a.aspNetDisabled, nav li.selected > span, nav li.selected > span > a {  
        cursor: default;
		background: white;
		
    }
	nav li > ul {
		display: none;
	}
	nav li.selected > ul {
		display: block;
	}
.lcol input:not([type=checkbox], .lcol input[type=file]), .lcol select, .lcol textarea {
    display: block;
    width: 100%;
}
/* =================== TABLES ======================= */
table {
	border-collapse: collapse;
	margin: 0;
	width: 100%;
	min-width: 600px;
	margin-bottom: -1px;
	font-size: 11px;
	line-height: 1;
	-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.sticky + table {
	z-index: 1;
}
section.active:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
table.fixed {
	table-layout: fixed;
}
thead, .toolbar.sticky {
	position: -webkit-sticky; 
	position: sticky; 
	top: 0px; 
	z-index: 100;
	background: white;
}
.toolbar.sticky {
	left: 0;
}
.toolbar.sticky + table thead {
	top: 28px;
}
.tabs + .cols > section > .toolbar.sticky + table thead {
	top: 40px;
}
tfoot {
	position: -webkit-sticky; 
	position: sticky; 
	bottom: 0;
	z-index: 99;
	background: var(--font);
	color: white;
}
tbody tr {
	border-bottom: 1px solid var(--shad);
}
tbody tr td.nowrap {
	white-space: nowrap;
}
tbody tr:nth-child(even) {
	background: var(--lgrey)
}
table:not(.noclick) tbody tr:hover {
	cursor: pointer;
	background: var(--lblue);
	box-shadow: inset 4px 0 0 var(--blue);
}
/*tr.selected {
	background: var(--blue) !important;
	box-shadow: inset 4px 0 0 var(--blue) !important;
	color: white;
	cursor: default;
}*/
th {
	position: relative;
	white-space: nowrap;
	vertical-align: bottom;
	font-size: 10.5px;
	text-align: left;
	padding: 6px 16px 0 0;
	-webkit-user-select: none;
	-ms-user-select: none; 
	user-select: none; 
	height: 26px;
}
table:not(.noclick) th:after {
	content: "";
	width: calc(100% + 10px);
	min-width: 20px;
	left: 0;
	right: 0;
	display: block;
	height: 2px;
	background-color: var(--font);
}
th:first-child {
	padding-right: 0;
}
th:last-child {
	padding-right: 0;
}
table:not(.noclick) th:last-child:after {
	width: 100%;
}
td {
	vertical-align: middle;
}
td.icon {
	max-width: 50px;
	width: 50px;
	position: relative;
}
td.small {
	max-width: 116px;
	width: 116px;
}
tbody td {
	padding: 6px 12px 6px 0;
	height: 38px;
}
tfoot td {
	padding: 10px 16px 10px 0
}
td input[type='text']{
	width: 100%;
	background: white;
	height: 24px;
}
th:first-child, td:first-child {
	width: 22px;
}
td:first-child {
	padding: 0;
}
th.sort.asc:before, th.sort.desc:before {
	content: "";
	position: relative;
	display: inline-block;
	border: 5px solid transparent;
	margin-right: 3px;
}
th.sort {
	cursor: pointer;
	color: var(--blue);
}
th.sort.asc:before {
	border-top: 6px solid var(--green);
	top: 5px;
}
th.sort.desc:before {
	border-bottom: 6px solid var(--green);
	top: -1px;
}
td .btn.icon {
	display: inline-block;
	box-shadow: none;
	padding: 6px;
}
td .alert {
	fill: #fc3;
}
td .missing {
	fill: none;
    stroke: var(--red);
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 5px;
}
td .missing.grey {
    stroke: rgba(114, 131, 148,1);
}
td .approved {
	fill: none;
    stroke: var(--green);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5px;
}
.red td .alert {
	fill: #ffeeba
}
table:not(.noclick) tbody tr.red {
        background-color: rgba(251, 115, 108, .3);
    }
    table:not(.noclick) tbody tr.red:nth-child(odd) {
        background-color: rgba(251, 115, 108, .4);
    }
	table:not(.noclick) tbody tr.red:hover {
		box-shadow: inset 4px 0 0 var(--red), inset 0 0 100px rgba(255,255,255,.1)
	}
table:not(.noclick) tbody tr.orange {
        background-color: rgba(255, 177, 94, .4);
        background-color: rgba(255, 160, 80, .3);
    }

    table:not(.noclick) tbody tr.orange:nth-child(odd) {
        background-color: rgba(255, 177, 94, .3);
        background-color: rgba(255, 160, 80, .22);
    }
	table:not(.noclick) tbody tr.orange:hover {
		box-shadow: inset 4px 0 0 rgb(255,177,94), inset 0 0 100px rgba(255,255,255,.15)
	}
table:not(.noclick) tbody tr.blue {
    background-color: rgba(99, 162, 214, .25);
}
	table:not(.noclick) tbody tr.blue:nth-child(odd) {
		background-color: rgba(99, 162, 214, .3);
	}
	table:not(.noclick) tbody tr.blue:hover {
		box-shadow: inset 4px 0 0 var(--blue), inset 0 0 100px rgba(255,255,255,.15)
	}
table:not(.noclick) tbody tr.green {
    background-color: rgba(99, 214, 114, .25);
}
	table:not(.noclick) tbody tr.green:nth-child(odd) {
		background-color: rgba(99, 214, 114, .3);
	}
	table:not(.noclick) tbody tr.green:hover {
		box-shadow: inset 4px 0 0 var(--green), inset 0 0 100px rgba(255,255,255,.15)
	}
table:not(.noclick) tbody tr.yellow {
        background-color: rgba(255, 247, 94, .2);
    }
    table:not(.noclick) tbody tr.yellow:nth-child(odd) {
        background-color: rgba(255, 247, 94, .3);
    }
	table:not(.noclick) tbody tr.yellow:hover {
		box-shadow: inset 4px 0 0 rgb(255, 247, 94), inset 0 0 100px rgba(255,255,255,.15)
	}
table:not(.noclick) tbody tr.purple {
        background-color: rgba(240, 173, 255, .3);
    }
    table:not(.noclick) tbody tr.purple:nth-child(odd) td {
        background-color: rgba(240, 173, 255, .37);
    }
	table:not(.noclick) tbody tr.purple:hover {
		box-shadow: inset 4px 0 0 rgb(240, 173, 255), inset 0 0 100px rgba(255,255,255,.15)
	}
td em {
	opacity: .6;
	font-size: 10px;
	font-style: normal;
}
td:first-child input[type='checkbox'], th:first-child input[type='checkbox'] {
	margin-left: 12px;
	margin-right: 8px;
	cursor: pointer;
}
 th:first-child input[type='checkbox'] {
	 position: relative;
	 top: -2px;
 }
tr.noclick {
	cursor: default;
}
td .note {
	min-width: 160px;
}
td .location {
	min-width: 110px;
}
dialog table tbody {
	border: 1px solid var(--brd);
	border-top: none;
}
table tr.nopcm > td:first-child:after {
	 content: "\00F8";
	 font-size: 18px;
	 color: var(--red);
	 font-weight: 600;
	 font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
	 position: relative;
	 top: -10px;
	 left: 4px;
}
.icon.folder {
	display: block;
	height: 22px;
	width: 28px;
	margin-top: -2px;
	margin-right: 5px;
	border: none;
	background-color: transparent;
}
.file.icon {
	display: flex;
	align-items: center;
	color: var(--font);
	text-decoration: none;
	position: relative;
}
.file.icon:before {
	content: "";
    display: inline-block;
    position: relative;
    min-width: 26px;
    height: 34px;
    border-radius: 3px;
    background: white;
    border: 1px solid rgba(0,0,0,.25);
    margin-right: 10px;
}

    .file.icon:after {
        content: "FILE";
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px;
        left: 4px;
        height: 14px;
        width: 26px;
        background: var(--dgrey);
        border-radius: 2px;
        color: white;
        font-weight: 800;
        font-size: .9rem;
		line-height: 1.3;
    }
td .file.icon.pdf:before {
	content: "";
    display: inline-block;
    position: relative;
    min-width: 24px;
    height: 31px;
    border-radius: 2px;
    margin-right: 5px;
}
	td .file.icon.pdf:after {
		font-size: .8rem;
		width: 22px;
		height: 13px;
		border-radius: 1px;
	}
td .file.icon.pdf:hover:after {
	left: 5px;
}
tr.check > *:first-child {
	background-image: url(../images/check-icon.svg);
	background-repeat: no-repeat;
	background-position: 5px center;
	background-size: 14px auto
}
.txt .file.icon:after {
    content: "TXT";
    background: rgb(87, 128, 143)
}

.pdf .file.icon:after, .file.icon.pdf:after {
    content: "PDF";
    background: rgb(237, 90, 90)
}

.jpg .file.icon:after {
    content: "JPG";
    background: rgb(82, 158, 135)
}

.jpeg .file.icon:after {
    content: "JPEG";
    background: rgb(82, 158, 135)
}

.bmp .file.icon:after {
    content: "BMP";
    background: rgb(82, 158, 135)
}

.tif .file.icon:after {
    content: "TIF";
    background: rgb(82, 158, 135)
}

.tiff .file.icon:after {
    content: "TIFF";
    background: rgb(82, 158, 135)
}

.png .file.icon:after {
    content: "PNG";
    background: rgb(82, 158, 135)
}

.xls .file.icon:after {
    content: "XLS";
    background: rgb(53, 122, 43)
}

.xls .file.icon:after {
    content: "XLSX";
    background: rgb(53, 122, 43)
}

.xlm .file.icon:after {
    content: "XLM";
    background: rgb(53, 122, 43)
}

.doc .file.icon:after {
    content: "DOC";
    background: rgb(49, 115, 135)
}

.docx .file.icon:after {
    content: "DOCX";
    background: rgb(49, 115, 135)
}
/* ============ Tabs ================== */
.tabs {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 0 10px;
    padding: 0;
    background: white;
    list-style: none;
	z-index: 2;
}
header + .tabs {
 margin-bottom: 0;
    border-left: 1px solid var(--brd);
	border-bottom: 1px solid var(--brd);
}
.tabs + section > *:first-child {
	padding-top: 20px;
}
.tabs + .cols > section .toolbar {
	padding-top: 14px;
}
.tabs + section > table {
 margin-top: 14px;
}
    .tabs > * {
        display: block;
        height: 34px;
        padding: 11px 20px 0;
        background: var(--lgrey);
        background: var(--light);
        color: var(--lfont);
        flex-grow: 1;
        border-right: 1px solid var(--brd);
        border-top: 1px solid var(--brd);
        text-decoration: none;
		max-width: 240px;
    }

dialog .tabs {
	margin: -30px -30px 10px -30px;
}
dialog .tabs > * {
	padding-top: 24px;
	height: 47px;
}
dialog .tabs > *:first-child {
	padding-left: 30px;
}
header .tabs {
    margin: 0 -15px -5px -20px;
    border-top: 1px solid var(--brd);
}

    header .tabs > * {
        border-bottom: 0;
    }

section > .tabs {
    margin: 0 -20px;
}

.tabs > *:hover {
    background: var(--blue);
    color: white;
    border-bottom: 1px solid var(--blue);
}

.tabs > *:last-child {
    border-radius: 0 9px 0 0
}

.tabs > *.current {
    color: var(--font);
    background: white;
    border-bottom: none;
	box-shadow: 0 1px white;
    cursor: default;
}
/* =================== DDWN ========================= */
.ddwn-wrap {
    display: inline-block;
    position: relative;
	z-index: 2001;
}
.ddwn-wrap > .btn.icon {
	position: relative;
}
.ddwn-wrap > .btn.icon.profile {
    border-radius: 0 0 0 4px;
    position: relative;
    z-index: 3;
    border-right: none;
    border-top: none;
}
.tooltip-wrap {
	position: relative;
}
.ddwn, .tooltip {
    display: none;
    position: absolute;
    margin: -1px 0 0 1px;
    flex-direction: column;
    z-index: 2000;
    padding: 10px;
    border-radius: 0 3px 3px 3px;
    background: white;
    box-shadow: 0 0 1px 1px var(--brd);
    min-width: 180px;
    opacity: 0;
    font-size: 1.1rem;
}

.ddwn.sort-wrap {
	min-width: 240px;
}
.ddwn.sort-wrap > input {
	margin-bottom: 10px;
	background-color: var(--lgrey)
}
.ddwn ul.list {
	margin: 0 -10px -10px;
	border-top: 1px solid var(--brd);
	max-height: 200px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--green) transparent;
}
.btn.clear.small + .ddwn {
	margin-top: 0;
}
.tooltip {
	top: 7px;
	left: 20px;
	border-radius: 3px;
	z-index: 2;
	cursor: default;
}
.ddwn.right, table th:nth-last-child(-n+2) .ddwn {
        right: -1px;
        border-radius: 3px 0 3px 3px;
    }
.ddwn-wrap.open .ddwn, .tooltip-wrap:hover > .tooltip {
    display: flex;
    opacity: 1;
    transform: scale(1);
    animation: show .3s;
}

.ddwn-wrap.open .icon.trigger svg .fill {
    fill: var(--blue);
    opacity: 1;
}
.ddwn-wrap.open > .btn.icon.small.clear {
	position: relative;
	left: 1px;
	background: white;
	border-radius: .75px .75px 0 0;
	box-shadow: 0 -1px 0 1px white,0 -1px 1px 2px var(--shad) !important;
	z-index: 2001;
}
.ddwn-wrap.open > .btn.icon.small.clear:after {
	content:"";
	display: block;
	position: absolute;
	height: 4px;
	width: calc(100% + 2px);
	background: white;
	bottom: -4px;
	right: -1px;
}
.ddwn fieldset > div {
	width: 100%;
}
/* =================== MISC ========================= */
.logo {
    display: flex;
    align-items: center;
    height: 28px;
    padding-left: 30px;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--font) !important;
    background: url(../images/FSER-icon.png) no-repeat;
    background-size: auto 100%;
}
.logo a {
	text-decoration: none;
	color: var(--font);
	margin-right: 6px;
}
.logo a:hover {
	color: var(--dgreen);
}
a.logo {
    text-decoration: none;
}
.hidden {display: none !important}
.flex {
	display: flex;
}
.flex.bottom, fieldset.bottom {
	align-items: flex-end;
}
.flex.center, fieldset.center {
	align-items: center;
}
.flex.wrap {
	flex-wrap: wrap;
}
.flex.row {
	flex-direction: row;
}
.flex.column {
	flex-direction: column;
}
.nowrap {
	white-space: nowrap;
}
.nflex {
	display: block;
}
.rel {position: relative;}
.pb0 {padding-bottom: 0}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mb10 {margin-bottom: 10px;}
.gap {
	gap: 10px;
}
.gap5 {
	gap: 5px;
}
.gap20 {
	gap: 20px;
}
.ngap {
	gap: 0;
}
.flex.center, fieldset.center {
	justify-content: center;
}
.flex.middle {
	align-items: center;
}
.flex.bot {
	align-items: flex-end
}
.grow {flex-grow: 1}
.grow.half {
	width: calc(50% - 10px);
}
.mshow {display: none}
.mb20 {margin-bottom: 20px}
.mb40 {margin-bottom: 40px}
.mr40 {margin-right: 40px}
.mb60 {margin-bottom: 60px}
.pb10 {padding-bottom: 10px}
.sticky {
	position: sticky;
}
.sticky.top {
	top: 0;
	left: 0;
	background: white;
}
.sticky.bot {
	top: 0;
	left: 0;
	background: white;
}
.tr {
	position: absolute;
	right: 0;
	top: 0;
}
dialog .tr {
	right: 10px;
	top: 10px;
}
/* =================== DIalog =============================*/
dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        border: none;
        z-index: 2002;
        background: rgba(0,0,0,.15);
    }
		.sticky dialog {
			background: none;
		}
        dialog > div {
            display: flex;
            position: relative;
            flex-direction: column;
            border-radius: 4px;
            padding: 30px;
            border: 2px solid var(--font);
            min-width: 320px;
            min-height: 250px;
            background: white;
        }
			.sticky dialog > div {
				box-shadow: 0 0 0 3000px rgba(0,0,0,.15)
			}
        dialog h1, dialog h2 {
            margin-bottom: 20px !important;
			padding-right: 20px;
			margin-top: 0;
        }
		dialog h1 + h2 {
            font-weight: 300;
			margin-top: 0;
			letter-spacing: 0;
			font-size: 1.2rem;
        }
		dialog h1 + h2 strong {
            font-weight: 700;
			font-size: 1.3rem;
        }

        dialog fieldset + .grow {
            margin-bottom: 20px;
        }

        dialog.show {
            display: flex;
        }

        dialog textarea {
            min-width: 260px;
        }

        dialog .tr {
            top: 10px;
            right: 10px;
			z-index: 200;
        }
		dialog#DivSaved {
			display: none;
			background: none;
		}
		dialog#DivSaved.open {
			display: flex;
		}
		dialog#DivSaved svg {
			height: 220px;
			width: 220px;
			opacity: 0;
			transition: opacity .3s;
		}
		dialog#DivSaved.saved svg {
			height: 220px;
			width: 220px;
			opacity: 1;
		}
		
/* ================== NOTES ========================== */
.notes {
	padding-bottom: 20px;
	border-bottom: none !important;
}
.notes .note {
	padding: 10px 10px 5px;
	margin-bottom: 4px;
	background: rgb(217, 250, 242);
	border: 1px solid var(--brd);
	border-radius: 6px;
	position: relative;
	z-index: 2;
}
.notes .note.from {
	background: rgb(225, 245, 252);
	background: var(--lgrey)
}
.notes .note:after, .notes .note:before {
	top: 8px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index: -1;
}
.notes .note:after {
	border-top-color: rgb(217, 250, 242);
	border-width: 8px;
	margin-top: -8px;
	z-index: 3;
	right: -7px;
}
.notes .note.from:after {
	border-top-color: rgb(225, 245, 252);
	border-top-color: var(--lgrey)
}
.notes .note:before {
	border-top-color: var(--brd);
	border-width: 9px;
	margin-top: -9px;
	right: -9px;
	z-index: 3;
}
.notes .note.from:after {
	right: auto;
	left: -7px
}
.notes .note.from:before {
	right: auto;
	left: -9px
}
.notes .note.to {
	margin-left: 30px;
	width: calc(100% - 30px);
}
.notes .note.from {
	margin-right: 30px;
	width: calc(100% - 30px);
}
.notes .note:first-child {
	padding-top: 0;
}
.notes .note p {
	margin-bottom: 8px;
}
.note label {
	margin-bottom: 2px;
}		
/* ================== THUMBS OLD ======================== */
ul.list {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.list.block {
	border: 1px solid var(--brd);
}
    ul.list li {
        display: block;
        padding: 0;
    }
	ul.list.block li > * {
		padding: 3px 8px;
	}

        ul.list li > a, ul.list li > span {
            display: block;
            padding: 7px 10px 6px;
            margin: 0;
            text-decoration: none;
            color: var(--font);
            border-bottom: 1px solid var(--brd);
			z-index: 1;
        }

        ul.list li > span {
            padding-left: 0;
        }

        ul.list li > a:hover {
            background: var(--blue);
            color: white;
            border-bottom: 1px solid transparent;
        }

        ul.list li:last-child {
            border-bottom: none;
        }

        ul.list li:nth-child(odd) {
            background: var(--lgrey)
        }
/* ================== THUMBS OLD ======================== */
.thumbs {
	display: flex;
	min-width: 1;
	flex-wrap: wrap;
	gap: 10px;
}
#DivDocs > .flex {
	gap: 10px;
	align-items: flex-start;
}
#DivDocs > h2 {
	margin-bottom: 3px;
}
.thumbs .thumb {
	display: flex;
	padding: 0;
	position: relative;
	min-width: 70px;
	margin-right: 10px;
}
#DivDocs .thumbs .thumb {
	margin-top: 6px;
}
.thumb > a  {
	display: block;
	position: relative;
	width: 35px;
	height: 42px;
	background: white;
	border: 2px solid var(--brd);
	border-radius: 3px;
	margin-right: 5px;
	text-decoration: none;
}
.thumb > a:after  {
	content: "";
	position: absolute;
	right: -3px;
	top: 50%;
	margin-top: -11px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	color: white;
	background: var(--dgrey);
	padding: 2px 0;
	width: 30px;
	border-radius: 2px;
}
.thumb > a:hover:after  {
	right: -4px;
}
.thumb.denied {
	position: relative;
	box-shadow: 0 0 0 5px white, 0 0 0 8px var(--red);
	border-radius: 1px;
	margin-left: 8px;
}
.thumb.denied:before {
	content: "";
	display: block;
	margin-right: 3px;
	width: 30px;
	height: 100%;
	background: url(../images/x-icon.svg) center left no-repeat;
}
.thumb.approved {
	box-shadow: 0 0 0 5px white, 0 0 0 8px var(--green);
	border-radius: 1px;
	margin-left: 8px;
}
.thumb.approved:before {
	content: "";
	display: block;
	margin-right: 3px;
	width: 30px;
	height: 100%;
	background: url(../images/check-icon.svg) center left no-repeat;
	
}
.thumb.missing > a {
background-image: url(https://dev.adhsys.com/pcm/Assets/images/missing-thumb.svg);
}
.thumb.pdf > a:after {
content: "PDF";
background-color: var(--red);
}
.thumb.jpg > a:after {
content: "JPG";
background-color: var(--green);
}
.thumb.doc > a:after {
content: "DOC";
background-color: var(--blue);
}
.thumb.xls > a:after, .thumb.xlsx > a:after {
content: "XLS";
background-color: var(--green);
}
.thumb strong {
	display: block;
	margin-bottom: 3px;
}
.thumb > span em {
	display: block;
	font-size: 1rem;
	letter-spacing: -.03em;
	line-height: 1.1;
	font-weight: 400;
	font-style: normal;
	color: var(--font);
	opacity: .8;
}

aside .thumbs {
	background: white;
	border: 1px solid var(--brd);
	border-radius: 3px;
	gap: 0;
}
.thumbs + .block, .thumbs + .flex + .block {
	min-width: 50%;
	background: var(--lgrey)
}
aside h2 + .thumbs {
	margin-top: -8px;
}
aside .thumbs .thumb {
	padding: 8px;
}
aside .thumbs .thumb + .thumb {
	border-top: 1px solid var(--brd);
}
.highlight.green + .thumbs > .thumb {
	border: 2px solid var(--green);
}



table.documents tr td:last-child {
	width: 100%;
}
table.documents tr {
	background: transparent !important;
	border: none !important;
	cursor: default !important;
}
table.documents tr:hover {
	box-shadow: none !important;
}
table.documents tr td {
	background: transparent !important;
	width: 1%;
    white-space: nowrap;
}
table.documents tr:nth-child(even) {
	border-bottom: 1px solid var(--brd) !important;
}
table.documents tr:nth-child(odd) td {
	font-weight: 800;
	line-height: 1;
	padding-bottom: 10px;
	white-space: nowrap;
	padding-top: 26px;
}
table.documents tr:first-child td {
	padding-top: 18px
}
table.documents tr:nth-child(odd) td label {
	font-weight: normal;	
}
table.documents tr:nth-child(even) td{
	padding-bottom: 26px;
}
table.documents tr:last-child td{
	
}
table.documents tr:nth-child(odd) td:last-child {
	width: 800px;
}
table.documents tr:nth-child(4n), table.documents tr:nth-child(4n - 1) {
    background: var(--lgrey) !important;
}
table.ext {
	margin: 0 20px;
	border: 2px solid var(--font);
	border-radius: 6px;
	width: auto;
}
table.ext thead {
	background: var(--font);
	color: white;
}
table.ext th {
	font-weight: 400;
}
table.ext th h2 {
	font-size: 1.5rem;
}
table.ext thead tr + tr th {
	padding-top: 0;
	height: 20px;
}
table.mini {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	
}
table.mini thead tr th {
	background: var(--font);
}
table.mini:first-child thead tr th {
	border-radius: 3px 3px 0 0;
}
table.mini thead th {
	height: 16px;
	padding: 4px 5px 3px;
	color: rgba(255,255,255,.7);
	font-weight: 400;
}
table.mini tbody tr td:first-child {
   border-left: 1px solid var(--brd);
}
table.mini tbody tr td:last-child {
	border-right: 1px solid var(--brd);
}
table.mini tbody td {
	height: auto;
	padding: 4px 5px 6px;
	background: white;
	
}
table.mini tr td:last-child {
	text-align: right;
}
table.mini + label {
	margin-top: 3px;
}

#DivSaved {	
 background: none;
 display: none;
}
#DivSaved.open {
	display: flex;
}
#DivSaved svg {
	height: 120px;
	width: auto;
}
#DivDocs .grow {
	display: none;
}
#DivDocs .block + .grow, #DivDocs .thumbs + .grow {
	display: block;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20001;
  background: rgba(255,255,255,.4); 
}
.context-menu {
    display: none;
    position: absolute;
    margin-top: -15px;
    z-index: 3009;
    padding: 0;
    width: 150px;
    background-color: #fff;
    border: solid 1px var(--dgrey);
    box-shadow: 1px 1px 2px #cfcfcf;
    border-radius: 3px;
}

    .context-menu:after {
        right: 100%;
        top: 15px;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .context-menu:after {
        border-color: rgba(255, 255, 255, 0);
        border-right-color: var(--font);
        border-width: 7px;
        margin-top: -7px;
    }

.context-menu--active {
    display: block;
}

.context-menu_items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu_item {
    display: block;
}

    .context-menu_item:last-child {
        margin-bottom: 0;
    }

.context-menu_link {
    display: block;
    border-bottom: 1px solid var(--lblue);
    padding: 8px 16px;
    color: var(--font);
    text-decoration: none;
    cursor: pointer;
}

    .context-menu_link:last-child {
        border-bottom: none;
    }

    .context-menu_link:hover {
        color: var(--blue);
    }
.loader .filter {
  transform: scale(7)
}
.loader svg polyline {
      fill: none;
      stroke-width: .75;
      stroke-linecap: round;
      stroke-linejoin: round;
}
#back {stroke: transparent}
#front {
        stroke: rgba(59, 211, 171);
        stroke-dasharray: 12, 36; /*Dash 12 & Gap 36 */
        stroke-dashoffset: 48;
        animation: dash 1s linear infinite;
}
.loader .text {
	font-size: 1.6rem;
	color: var(--blue);
	opacity:.7; 
    filter:blur(4);	
    animation: flicker 1s infinite;
}
@keyframes flicker {
  55.5% {opacity: 1}
  to {opacity: .7}
}
@keyframes dash { 
  62.5% {opacity: 0}
  to {stroke-dashoffset: 0}
}

input:not([type=checkbox],[type=file]):focus, select:focus, .ddwn-wrap.open .select, .select:focus, textarea:focus, .btn:focus, .tabs > a:focus, .thumb > a:focus {
  box-shadow: none;
  outline: none;
  z-index: 2;
}
input[type='text']:focus + .btn.clear {
	border-color: var(--font);
}
a:not(.btn):focus-visible, .link:focus-visible {
	outline: none;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--font) !important;
}
input:not([type=checkbox],[type=file]):focus-visible, select:focus-visible, .ddwn-wrap.open .select, .select:focus-visible, textarea:focus-visible {
  text-decoration: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--font);
  outline: none;
}
.btn:focus-visible, .tabs > a:focus-visible, .thumb > a:focus-visible {
  text-decoration: none;
  box-shadow: 0 0 0 2px var(--font);
  outline: none;
}
ul.list li > a:focus-visible { 
	box-shadow: inset 0 0 0 2px var(--font);
}
.btn.icon:focus-visible svg .fill {
	fill: var(--green);
	opacity: 1;
}
.btn:focus-visible, .tabs > a:focus-visible, input:focus-visible {
	z-index: 2;
}
.btn:focus-visible + .btn, .tabs > a:focus-visible + a, input:focus-visible + .btn {
	z-index: 1;
}
::selection, input::-webkit-datetime-edit-day-field:focus-visible,
input::-webkit-datetime-edit-month-field:focus-visible,
input::-webkit-datetime-edit-year-field:focus-visible {
  color: white;
  background: var(--dgreen);
}



@media screen and (max-width: 800px) {
    .mobile {
        display: block !important;
    }

    .mhide {
        display: none;
    }
    .mblock {
        display: block;
    }

    .mgrow {
        flex-grow: 1;
    }
	.mshow {display: block !important}
    .flex.mobile, .mflex, .tabs.mobile {
        display: flex !important;
    }

    form {
        flex-direction: column;
        flex-wrap: nowrap;
    }
	main > .cols {
		width: 100%;
		flex-direction: column;
	}
	section + aside {
		width: 100%;
		flex-wrap: wrap;
	}
	section + aside h4 {
		display: none;
	}
	section + aside fieldset + fieldset {
		margin: 0 8px 8px 0;
		
	}
	section + aside h4 + fieldset {
		flex-direction: row;
		width: 100%;
		align-items: flex-end;
		margin-bottom: 8px;
	}
	aside fieldset.ngap + fieldset.ngap {
		margin-top: 0;
		padding-top: 0;
		border: none;
	}
	header address {
        padding-right: 0
    }
	header.nbrd:not(.mnbrd) {
		border-bottom: 1px solid var(--brd) !important;
	}
    aside, aside + main {
        width: 100vw;
    }
	aside + main {
		height: calc(100svh - 53px)
	}

        aside {
            display: flex;
			align-items: center;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 48px;
			border-bottom: 1px solid var(--brd);
        }
		aside > * {
			margin: 0;
		}
		aside > *:first-child {
			flex-grow: 1;
		}
		nav {display: none;}
		.ddwn-wrap.tr {
			position: absolute;
			right: 0;
			top: 0;
		}
		.btn.icon.profile {
			border-radius: 0 !important;
			height: 49px;
			width: 49px;
			min-width: 49px;
			padding: 14px;	
			border: none;
			background: transparent;
			box-shadow: none;
		}
		.btn.icon.profile + .ddwn {
			margin-top: -20px;
			z-index: -1;
		}



    aside nav {
        padding: 0;
    }
	
	#DivUpOrder {
		display: flex;
		align-items: center;
	}
	#DivUpOrder h2 {
		margin: 0 6px 0 0;
	}
	
	aside .thumbs {
		background: transparent;
		border: none;
		flex-direction: row;
		flex-wrap: wrap;
		flex-gap: 10px;
		margin-top: 0 !important;
	}
	aside .thumbs .thumb {
		padding: 0;
		min-width: 0;
	}
	aside .thumb > span {
		display: flex;
	}
	aside .thumb > span strong {
		margin-right: 3px;
	}
	aside .thumb > span em {
		display: none;
	}
	aside .thumbs .thumb + .thumb {
		border: none;
	}
	aside .thumb > a {
		display: none;
	}
	aside .thumb > a:after {
		display: none;
	}
	.logo {flex-grow: 1; margin-right: 20px; line-height: 1}
	aside > *, article > * {
		width: auto;
		min-width: auto;
	}
	.tabs > * {
		max-width: 100%;
	}
	.tabs > *:last-child {
		border-radius: 0;
		border-right: 0;
	}
}


@media screen and (max-width: 540px) {
	.fieldgroup.g20 fieldset {
		gap: 20px;
		margin: 0 0 20px;
		flex-wrap: nowrap
	}
	.fieldgroup.g10 fieldset {
		gap: 10px;
		margin: 0 0 10px;
		flex-wrap: nowrap
	}
	input:not([type=checkbox],[type=file]), select, .select, textarea, .btn {
		padding: 0 12px;	
		height: 36px;
		font-size: 1.3rem;
	}
	fieldset .name {
		width: calc(50% - 5px);
	}
	fieldset .phone, fieldset .date {
		width: calc(40% - 5px);
	}
	fieldset .email {
		width: calc(60% - 5px);
	}
	.btn {
		padding: 10px 12px;	
		text-align: center;
	}
	.btn.icon, aside .btn.icon.small {width: 32px !important;height: 32px;padding: 8px}
	th .btn.small.clear {padding: 0}
	tr .btn.clear {
		width: 26px;
		height: 26px;
	}
	input[type='text'] + .btn.clear {margin-left: -35px;}
	input:not([type=checkbox],[type=file]), .btn:not(.icon) {
		min-width: 100px;
	}
	.btn {justify-content: center}

	fieldset label {font-size: 1.1rem;}
	
	.mpgrow {
		flex-grow: 1;
	}
	.mpblock {display: block !important}
	fieldset select {
		min-width: 0;
	}
	
	fieldset input:not([type=checkbox],[type=file]).med, fieldset input:not([type=checkbox],[type=file]).lg, fieldset input:not([type=checkbox],[type=file]).email, fieldset input:not([type=checkbox],[type=file]).addy, fieldset input:not([type=checkbox],[type=file]).city {
		width: 100%;
	}
	fieldset input:not([type=checkbox],[type=file]).phone {
		width: 187px;
	}
	.group > div {
		flex-grow: 1;
	}
	.group > div select {
		width: 100%
	}
	aside {
		padding-right: 60px;
	}
	fieldset .date {
		min-width: 130px
	}
	
	.thumbs + .block, .thumbs + .flex + .block {
		min-width: 38px ;
	}
	
}
.breadcrumb {
	border: 1px solid var(--brd);
	padding: 5px 12px;
	background: var(--lgrey);
	margin: -8px 0 10px -15px;
	border-radius: 4px;
	z-index: 3000;
}

.icon.notes:hover .tooltip {
	display: block;
	background: var(--font);
	color: white;
	left: 24px;
	top: 1px;
	z-index: 3000;
	width: auto;
	position: absolute;
	opacity:1;
	-o-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
	font-size: 1.2rem;
 
}
.icon.notes .tooltip:after {
  position: absolute;
  display: block;
  content: "";
  border-style: solid;
  border-width: 8px;
  height: 0;
  width: 0;
  border-color:  transparent var(--font) transparent transparent;
  top: 6px;
  left: -14px;

}
.icon.notes {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 31'><g><rect fill='rgba(0,0,0,.3)' x='3.88' y='8.39' width='11.43' height='1'/><rect fill='rgba(0,0,0,.3)' x='3.88' y='12.67' width='15.54' height='1'/><rect fill='rgba(0,0,0,.3)' x='4.23' y='17.68' width='15.19' height='1'/><rect fill='rgba(0,0,0,.3)' x='4.23' y='22.28' width='15.19' height='1'/></g><g><path fill='rgba(0,0,0,.3)' d='M17.51,0H1.5C.67,0,0,.67,0,1.5v28c0,.83.67,1.5,1.5,1.5h21c.83,0,1.5-.67,1.5-1.5V6.49L17.51,0ZM17.8,1.71l4.49,4.5h-4.49V1.71ZM23,29.5c0,.28-.22.5-.5.5H1.5c-.28,0-.5-.22-.5-.5V1.5c0-.28.22-.5.5-.5h15.3v5.7c0,.28.22.5.5.5h5.7v22.3Z'/></g></svg>");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
	display: block;
	width: 23px;
	height: 30px;
	position: relative;
	

	
	
}
.icon.notes:hover {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 31'><g><rect fill='rgb(99, 172, 224)' x='3.88' y='8.39' width='11.43' height='1'/><rect fill='rgb(99, 172, 224)' x='3.88' y='12.67' width='15.54' height='1'/><rect fill='rgb(99, 172, 224)' x='4.23' y='17.68' width='15.19' height='1'/><rect fill='rgb(99, 172, 224)' x='4.23' y='22.28' width='15.19' height='1'/></g><g><path fill='rgb(99, 172, 224)' d='M17.51,0H1.5C.67,0,0,.67,0,1.5v28c0,.83.67,1.5,1.5,1.5h21c.83,0,1.5-.67,1.5-1.5V6.49L17.51,0ZM17.8,1.71l4.49,4.5h-4.49V1.71ZM23,29.5c0,.28-.22.5-.5.5H1.5c-.28,0-.5-.22-.5-.5V1.5c0-.28.22-.5.5-.5h15.3v5.7c0,.28.22.5.5.5h5.7v22.3Z'/></g></svg>");
}


/* NOTES */
.messages {
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	overflow-y: auto;
	max-height: 70vh;
	max-width: 400px;
}
.messages .message {
	border: 1px solid var(--brd);
	padding: 9px;
	border-radius: 6px;
	background: var(--lgrey);
	margin: 0 30px 8px 0;
	position: relative;
}
.message small, .tooltip small {
	display: block;
	font-size: 8px;
	opacity: .6;
	text-align: right;
	white-space: nowrap;
	margin-top: 10px;
}
.message.sent {
	margin: 0 9px 8px 20px;
	border-color: var(--blue);
	background: var(--blue);
	color: white;
}
.message.sent:after {
	left: calc(100% - 9px);
	top: -1px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	width: 0; 
  height: 0; 
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  
  border-top: 12px solid var(--blue);
}