@import (less) "/css/AiryPallet.less";

/**********************************************/
/* CSS Document */
/* Default Styles */
/**********************************************/
body {
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
}
body::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.07;
    z-index: -1;
    background-size: 300px;
}
td {
    vertical-align: top;
    margin-bottom: auto;
}
th {
    vertical-align: top;
}
ul {
    padding-left: 15px;
}
img {
    border: 0px;
}
h1 {
    border-bottom: solid 1px black;
}
label {
	/*display: block;*/
    font-weight: bold;
    font-style: italic;
    padding-top: 5px;
    &.checkBox {
        display: block;
        padding: 2px;
        min-width: 75px;
        &.checked {
            background-color: @darkGreen;
            color: @white;
        }
    }
	&.tag {
		display: block;
		border-bottom: 1px solid @black;
		margin-bottom: 1px;
	}
	&.button {
		font-weight: bold;
		border: 1px solid @gray6;
		cursor: pointer;
		background-color: @white;
		border-radius: 6px;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 3px;
		padding-bottom: 3px;
		&:hover {
			background-color: @yellow;
		}
	}
}
button {
	font-weight: bold;
    border: 1px solid @gray6;
    cursor: pointer;
    background-color: @white;
    border-radius: 6px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
    &:hover {
	    background-color: @yellow;
    }
}
div {
	&.takingBadge {
		background-color: @lightBlue;
		padding: 5px;
		border-radius: 5px;
		line-height: 25px;
		display: block;
	}
}

/**********************************************/
/* Special Over-ride Styles */
/**********************************************/
.alignBottom
{
    vertical-align: bottom;
}
.alignRight
{
    margin-left: auto;
    margin-right: 0px;
}

/**********************************************/
/* Site Component Styles */
/**********************************************/
#border {
    border-left: 5px ridge @blue;
    border-right: 5px groove @blue;
    background-color: @white;
    width: 90%;
    margin: 0 auto; /* align for good browsers */
    text-align: left; /* counter the body center */
}
#header {
    h1 {
        padding: 5px;
        padding-top: 15px;
        border: none;
        font-size: 30px;
        margin: 0px;
    }
}
#body {
    background: @white;
    clear: both;
}
#loginBox {
    font-size: 24px;
    th {
        color: @white;
        background-color: @gray3;
    }
    td {
        input[type="text"], input[type="password"] {
            border: 1px solid @black;
            background-color: @white;
            font-size: 24px;
        }
    }
    input[type="submit"] {
        font-size: 30px;
        background-color: @airyGreen;
        color: @white;
        border: 3px solid @black;
        border-radius: 5px;
        cursor: pointer;
        padding: 3px 7px 5px 7px;
        &:hover {
            background-color: @lightGreen;
            color: @black;
        }
    }
}
#messageBox {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 0px;
    color: @black;
    background-color: @grayD;
    border-top: solid 1px @black;
    border-left: solid 1px @black;
    border-right: solid 1px @black;
    display: inline-block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    border-radius: 5px 5px 0px 0px;
    a {
        text-decoration: none;
        color: @black;
    }
}
#footer {
    background-image: linear-gradient(#F2F5FF, #2576d1, #005687);
    height: 25px;
    clear: both;
    padding: 4px;
    color: @white;
    font-size: 16px;
    vertical-align: middle;
    line-height: 25px;
    border-top: 2px solid #005687;
}

/**********************************************/
/* Site Styles */
/**********************************************/
div {
	&.leftColumn {
		float: left;
		width: 100px;
	}
	&.rightColumn {
		float: left;
		width: 700px;
	}
	&.portlet {
		margin-left: 3px;
		margin-right: 3px;
		margin-bottom: 3px;
		background-color: @white;
		border: 1px solid @black;
		border-radius: 5px;
		div.options {
			float: right;
			margin-top: -10px;
		}
		div.header {
			text-transform: uppercase;
			border-bottom: 2px groove @black;
			font-weight: bold;
			color: @black;
			height: 20px;
			line-height: 20px;
			vertical-align: middle;
			font-size: 16px;
			margin-top: -10px;
		}
		div.content {
			padding-left: 8px;
			padding-right: 8px;
			padding-top: 8px;
			ul {
				margin: 5px;
			}
		}
	}
	&.information {
		background-color: @grayB;
		border: 1px solid @black;
		margin: 5px;
		font-weight: bold;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 5px;
		a {
			display: block;
			text-decoration: none;
			color: @black;
			font-weight: bold;
		}
		ul {
			margin: 0;
			margin-left: 15px;
		}
	}
	&.error {
		background-color: @persian;
		border: 1px solid @black;
		margin: 5px;
		color: @black;
		font-weight: bold;
		a {
			display: block;
			text-decoration: none;
			color: @black;
			font-weight: bold;
			border-radius: 5px;
		}
		ul {
			margin: 0;
			margin-left: 15px;
		}
	}
	&.warning {
		background-color: @darkGold;
		border: 1px solid @black;
		margin: 5px;
		color: @black;
		font-weight: bold;
		border-radius: 5px;
		padding: 5px;
		a {
			display: block;
			text-decoration: none;
			color: @black;
			font-weight: bold;
		}
		ul {
			margin: 0;
			margin-left: 15px;
		}
	}
	&.submenu {
		background-color: @lightBlue;
		text-align: left;
		border-bottom: 1px solid @black;
		font-weight: bold;
		margin-top: -5px;
		margin-right: -5px;
		margin-left: -5px;
        min-height: 33px;
		a {
			text-decoration: none;
			color: @black;
			font-weight: bold;
			border-right: 1px solid @black;
			padding: 10px;
            display: inline-block;
			&:first-child {
				border-left: 1px solid @black;
			}
			&:hover {
				background-color: @white;
			}
		}
        div.Left {
        }
        div.Right {
		    padding: 7px;
            white-space: nowrap;
            float: right;
            position: relative;
        }
        div.campSelector {
        }
	}
	&.gridpanel {
		background-color: @grayD;
		text-align: right;
		border-bottom: 1px solid @black;
		border-right: 1px solid @black;
		border-left: 1px solid @black;
		font-weight: bold;
		padding: 10px;
	}
	&.controlpanel {
		background-color: @lightBlue;
		border: 1px solid @black;
		font-weight: bold;
        min-height: 33px;
		border-radius: 5px;
		a {
			text-decoration: none;
			color: @black;
			font-weight: bold;
		}
        div.Left {
			text-align: left;
            vertical-align: top;
			padding: 7px;
            width: ~"calc(50% - 20px)";
            display: inline-block;
        }
        div.Right {
		    padding: 7px;
            white-space: nowrap;
            text-align: right;
            vertical-align: top;
            width: ~"calc(50% - 20px)";
            display: inline-block;
        }
	}
	&.photo {
		margin: 5px;
		width: 150px;
		float: left;
		border: 1px solid @grayC;
		div.image {
			width: 150px;
			background-color: @black;
			vertical-align: middle;
		}
		div.description {
			position: absolute;
			border-top: 1px solid @grayC;
			width: 146px;
			margin-top: 75px;
			height: 75px;
			overflow: hidden;
			float: left;
			color: @white; /*background-image: url(../App_Images/fader.png);*/
			background-color: @black;
			padding-left: 2px;
			padding-right: 2px;
			filter: alpha(opacity=75);
			opacity: 0.75;
			a {
				color: @white;
			}
		}
	}
	&.tabbedContent {
		div.tabs {
			display: table;
			div.tab {
				display: table-cell;
				border-top: 1px solid @black;
				border-left: 1px solid @black;
				border-right: 1px solid @black;
				background-color: @darkBlue;
				height: 30px;
				&:hover {
					background-color: @darkBlue;
				}
			}
			div.tab_selected {
				display: table-cell;
				border-top: 1px solid @black;
				border-left: 1px solid @black;
				border-right: 1px solid @black;
				background-color: @darkBlue;
				height: 31px;
			}
			div.tab a, div.tab_selected a {
				display: block;
				color: @white;
				text-decoration: none;
				padding-left: 10px;
				padding-right: 10px;
			}
			div.tab:before, div.tab_selected:before {
				background: transparent url(../App_Images/portletTR.png) scroll no-repeat top right;
				height: 8px;
				display: block;
				border: none;
				content: url(../App_Images/portletTL.png);
				padding: 0;
				line-height: 0.1;
				font-size: 1px;
				margin-left: -1px;
				margin-top: -1px;
				margin-right: -1px;
				text-align: left;
			}
		}
		div.options {
			display: table-cell;
			vertical-align: middle;
			padding-left: 10px;
		}
		div.content {
			border: 1px solid @black;
			padding: 10px;
		}
	}
    &.printing {
        display: none;
    }
	&.tiles {
		display: flex;
		margin: 5px;
		flex-wrap: wrap;
		>div {
			border: 1px solid @black;
			border-radius: 5px;
			padding: 5px;
			margin: 1px;
		}
	}
}

/**********************************************/
/* Main Menu styling */
/**********************************************/
#menu {
    background-color: @gray6;
    height: 28px;
    position: relative;
	ul.mainmenu {
		list-style: none;
		margin: 0;
		padding: 0;
		float: left;
		background-color: @white;
		a, h2 {
			font: bold 11px/16px arial, helvetica, sans-serif;
			font-size: 18px;
			display: block;
			border-width: 1px;
			border-style: solid;
			border-color: @black;
			margin: 0;
			padding: 2px 3px;
			line-height: 18px;
		}
		h2 {
			color: @white;
			background-color: @deepBlue;
			text-transform: uppercase;
			a {
				background: none;
				border: none;
				color: @white;
				text-align: center;
			}
		}
		a {
			color: @black;
			background: none;
			text-decoration: none;
			padding-left: 25px;
			padding-right: 25px;
			&:hover {
				color: @persian;
				background: @white;
			}
		}
		ul {
			li {
				background: @blueTint2;
				background-position: left;
				background-repeat: repeat-y;
                white-space: nowrap;
				a {
					font-size: 16px;
				}
			}
			ul {
				top: 0;
				left: 100%;
			}
		}
        li {
            position: relative;
            margin: 0px;
            padding: 0px;
            white-space: nowrap;
            a {
				&.more {
					background-image: url(../App_Images/menu_strip_down_arrow.png);
					background-repeat: no-repeat;
					background-position: right center;
				}
			}
			ul {
				position: absolute;
				z-index: 500;
				list-style: none;
				padding-left: 0px;
				margin-left: 0px;
				background-color: @white;
				li {
                    white-space: nowrap;
					a {
						&.more {
							background-image: url(../App_Images/menu-bar-right-arrow.png);
							background-repeat: no-repeat;
							background-position: right center;
							padding-right: 6px;
						}
					}
				}
			}
		}
	}
}
#menu ul.mainmenu ul, #menu ul.mainmenu li:hover ul, #menu ul.mainmenu ul li:hover ul, #menu ul.mainmenu li:hover ul ul {
	visibility: hidden;
	opacity: 0;
	transition: all 300ms ease-in-out;
}
#menu ul.mainmenu li:hover ul, #menu ul.mainmenu ul li:hover ul, #menu ul.mainmenu ul ul li:hover ul #menu ul.mainmenu li:hover ul li:hover ul {
	visibility: visible;
	opacity: 1;
}

/**********************************************/
/* Regular Site styling */
/**********************************************/

.dbimage
{
    width: 100%;
    height: auto;
}

table {
	&.gridTable {
		tr {
			th {
				background-color: @gray9;
				border-bottom: 1px solid @gray9;
				display: table-cell;
				font-weight: bold;
				padding: 2px;
				vertical-align: top;
			}

			&.even {
				td {
					background-color: @grayE;
					border-bottom: 1px solid @gray9;
					padding: 2px;
					vertical-align: top;
				}
			}

			&.odd {
				td {
					background-color: @grayC;
					border-bottom: 1px solid @gray9;
					padding: 2px;
					vertical-align: top;
				}
			}
		}

		tr.header {
			th {
				background-color: @persano;
				border-bottom: 1px solid @gray9;
				display: table-cell;
				font-weight: bold;
				padding: 2px;
				vertical-align: top;
			}
		}
	}

	&.calendar {
		display: table;
		width: 100%;
		vertical-align: top;
		border: 1px solid @darkBlue;

		tr {
			&.header {
				th {
					display: table-cell;
					font-weight: bold;
					padding: 2px;
					vertical-align: top;
					background-color: @persano;
					border: 1px solid @darkBlue;
					color: @darkBlue;
					width: 14.285%;
				}
			}

			&.nav {
				th {
					font-weight: bold;
					padding: 2px;
					vertical-align: top;
					text-align: center;
					width: 100%;
				}
			}

			&.even {
				td {
					background-color: @grayE;
					display: table-cell;
					padding: 2px;
					vertical-align: top;
					border: 1px solid @persano;
					width: 14.285%;
				}
			}

			&.odd {
				td {
					text-align: right;
					background-color: @lightBlue;
					display: table-cell;
					padding: 2px;
					vertical-align: top;
					border: 1px solid @persano;
					width: 14.285%;
				}
			}

			td {
				&.active {
					background-color: @royalBlue;

					a {
						font-weight: bold;
					}
				}
			}
		}

		a {
			color: @black;
			width: 100%;
			display: block;
			text-decoration: none;
		}
	}

	&.tabbed {
		td {
			&.active {
				background-color: @blue;
				font-weight: bold;
				border-left: 1px solid @white;
				width: 100px;

				a {
					color: @white;
					width: 100%;
					display: block;
					text-decoration: none;
				}
			}

			&.deactive {
				background-color: @darkBlue;
				font-weight: bold;
				border-left: 1px solid @gold;
				width: 100px;

				a {
					color: @white;
					width: 100%;
					display: block;
					text-decoration: none;
				}
			}

			&.body {
				border: 1px solid @blue;
			}
		}
	}

	&.fileList {
		th {
			background-color: @grayC;
		}

		td {
			&.body {
				border: 1px solid @gray9;
			}

			&.footer {
				background-color: @grayC;
			}

			&.even {
				background-color: @grayE;
			}

			&.odd {
			}
		}
	}

	&.content {
		th {
			background-color: @blue;
			color: @white;

			&.subheader {
				background-color: @gray9;
				color: @white;
			}
		}

		td {
			&.body {
				border: 1px solid @gray9;
			}

			&.footer {
				background-color: @grayC;
			}

			&.even {
				background-color: @grayE;
			}

			&.odd {
			}

			&.positive {
				background-color: @darkGreen;
				font-weight: bold;
			}

			&.negative {
				background-color: @red;
				font-weight: bold;
			}
		}
	}

	&.DataTable {
		background-color: white;
		border-top: 1px solid @lightBlue;
		border-left: 1px solid @lightBlue;
		border-right: 1px solid @lightBlue;
		border-bottom: 1px solid @lightBlue;
		margin-bottom: 6px;
		margin: 0px 0px 6px;
		padding: 0px;
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;

		th, td {
			padding: 2px;
			border-left: 1px solid @gray6;
		}

		tr {
			th {
				background-color: @deepBlue;
				color: @white;
				/*white-space: nowrap;*/
			}

			td {
				&.big {
					font-weight: bold;
					font-size: 20px;
				}

				ul {
					margin-top: 0px;
					margin-bottom: 0px;
				}
			}

			&:nth-child(odd) {
				background-color: @white;
				border-bottom: 1px solid @lightBlue;

				th, td {
					border-bottom: 1px solid @lightBlue;
				}
			}

			&:nth-child(even) {
				background-color: @blueTint;
				border-bottom: 1px solid @lightBlue;

				th, td {
					border-bottom: 1px solid @lightBlue;
				}
			}

			&:hover {
				td {
					background-color: @lightGold;
				}
			}

			&.sticky {
				th {
					position: sticky;
					top: -1px;
				}
			}

			&.footer {
				color: @white;
				background-color: @black;

				&:hover {
					td {
						background-color: @gray9;
					}
				}
			}
		}
	}
}

input.textBox {
    width: 100%;
    border: 1px solid @black;
    font-size: 16px;
}

a {
	&.button {
		padding-left: 5px;
		padding-right: 5px;
		margin-left: 2px;
		border: 1px solid @black;
		text-decoration: none;
		color: @black !important;
		background-color: @blue;
		font-weight: bold;
		&:hover {
			background-color: @persano;
		}
	}
	&.gridButton {
		padding-left: 5px;
		padding-right: 5px;
		margin-left: 2px;
		margin-right: 2px;
		border: 1px solid @black;
		text-decoration: none;
		color: @white !important;
		background-color: @blue;
		font-weight: bold;
		&:hover {
			background-color: @persano;
		}
	}
}

/**********************************************/
/* Effect Styles */
/**********************************************/
.fillWidth, .Fill {
	width: 100%;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
}

/**********************************************/
/* Ajax Control Toolkit styles */
/**********************************************/
div.ModalPopup
{
    border: solid 2px @black;
    background-color: @white;
    padding: 5px;
    z-index: 100;
    position: absolute;
}
object
{
    clear: both;
    overflow: hidden;
    display: block;
    z-index: -7;
}
div.panelHeader
{
    background-color: @persano;
    border: 1px solid @black;
    margin: 5px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}
div.panelHeader a
{
    text-decoration: none;
    color: @black;
    font-weight: bold;
}
div.panelHeader ul
{
    margin: 0;
    margin-left: 15px;
}
div.panelHeader:before
{
    background: transparent url(../App_Images/portletTR.png) scroll no-repeat top right;
    height: 8px;
    display: block;
    border: none;
    content: url(../App_Images/portletTL.png);
    padding: 0;
    line-height: 0.1;
    font-size: 1px;
    margin-left: -11px;
    margin-top: -1px;
    margin-right: -11px;
    text-align: left;
}
div.panelHeader:after
{
    display: block;
    line-height: 0.1;
    font-size: 1px;
    content: url(../App_Images/portletBL.png);
    margin-left: -11px;
    margin-bottom: -1px;
    margin-right: -11px;
    height: 8px;
    background: white;
    background: transparent url(../App_Images/portletBR.png) scroll no-repeat bottom right;
    padding: 0;
    text-align: left;
}


table
{
    border-collapse: collapse;
}
th
{
    text-align: left;
}
table.list, td.details table.list
{
    width: 100%;
    border: 1px solid @black;
}
table.list tr th, td.details table.list tr th
{
    text-align: left;
    background-color: @gray6;
    color: @white;
    font-size: 100%;
    border-style: none;
    padding: 2px 20px 2px 2px;
}
table.list tr td, td.details table.list tr td
{
    border-bottom: 1px solid @gray9;
    padding: 2px 20px 2px 2px;
}
table.list tr
{
    background-color: @lightGold;
}
table.list tr.odd
{
    background-color: @grayC;
}
table.gnav tr td
{
    background-color: @lightGold;
    border: 1px solid @black;
    padding: 2px 10px;
    font-weight: bold;
}
table.gnav tr td a
{
    color: @darkBlue;
    text-decoration: none;
}
table.gnav tr td a:hover
{
    color: @persian;
    text-decoration: underline;
}
table.webparts tr th
{
    background-color: @darkBlue;
    padding: 5px;
    color: @white;
    font-size: 130%;
    border: 1px solid @darkBlue;
}

td.details div table tr td, td.details div table tr td.detailheader
{
    border-style: none;
}
td.detailheader
{
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    border-style: none;
    padding: 3px 10px 3px 0px;
}
td.details div table
{
    border-style: none;
}
td.details div table tr td.detailitem
{
    width: 100%;
    padding: 3px 10px 3px 0px;
}
td.details
{
    border: 2px solid @darkBlue;
    padding: 10px;
    background-color: @grayE;
}
.alert
{
    color: @persian;
    font-weight: bold;
}

div.PopUp
{
    display: none;
}
.ui-search-clear
{
    display: none;
}

input[type='text'].required, textarea.required { 
	background: url(/App_Images/required-input-red.png) right 5px no-repeat @white;
}
.invalid { 
	border: 1px solid @red;
	display: block
}
div.Note
{
    padding: 5px;
    font-style: italic;
    background-color: @grayE;
    border-radius: 10px;
    border: 1px dashed @grayA;
    margin: 5px;
}
.ui-jqgrid-titlebar-close {
	display: none;
}
.ui-jqgrid-pager, .ui-jqgrid, .ui-jqgrid-view {
    min-width: 600px;
}
.ui-jqgrid .ui-jqgrid-pager {
    overflow: visible;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pager-control, .ui-jqgrid .ui-jqgrid-pager .ui-pager-control  {
    height: 40px;
}
.ui-jqgrid .ui-jqgrid-htable .ui-th-div {
	white-space: initial;
	height: auto;
}
.ui-pg-table {
    td {
        white-space: nowrap;
    }
}
ul.horizontal {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    li {
		display: block;
		margin: 2px;
		padding: 2px;
	}
}
.blockElement {
    border: 3px solid @black !important;
}
fieldset {
    border: 1px solid @black;
    margin-bottom: 5px;
    legend {
        border: 1px solid @black;
        padding: 3px;
        background-color: @babyBlue;
        color: @white;
    }
}
a {
    &.navBlock {
	    display: inline-block;
	    padding: 20px;
	    border: 1px solid @black;
	    font-size: 16px;
        text-align: center;
	    &:hover {
		    background-color: @gold;
	    }
        i {
            font-size: 40px;
            margin: 5px;
        }
    }
}
.audio {
    display: none;
}

@media screen {
    .printShow {
		display: none !important;
	}
}

@media print {
    #header, #menu, .submenu, #footer, .controlPanel, .printHidden {
        display: none;
    }
    #border {
        width: 100%;
        border: none;
    }
    body {
        background-image: none;
    }
    .printing {
        display: block !important;
        float: right;
    }
	.printShow {
		display: block;
	}
}
.ui-autocomplete {
    z-index: 9999 !important;
}
div.dataTables_wrapper {
    .center {
        width: 100%;
        display: flex;
        justify-content: center;
        position: absolute;
        height: 0px;
        .dataTables_info {
            white-space: nowrap;
            float: initial !important;
        }
        div {
            float: initial !important;
        }
    }
    .right {
        width: 100%;
        text-align: right;
        .dataTables_info {
            float: initial;
        }
    }
}
table.DataTable.stripe tbody rect.odd, table.DataTable.display tbody tr.odd {
    background-color: @grayC;
}

.PhotoUpload {
    float: right;

    .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
        & + label {
            font-size: 1.25em;
            font-weight: 700;
            color: white;
            background-color: #0A0;
            display: inline-block;
            padding: 5px;
        }
        &:focus + label, & + label:hover {
            background-color: #0C0;
        }
        & + label {
            cursor: pointer; /* "hand" cursor */
        }
        &:focus + label {
            outline: 1px dotted #000;
            outline: -webkit-focus-ring-color auto 5px;
        }
    }
}

span {
	&.bubble {
		border: 1px solid @black;
		border-radius: 10px;
		display: inline-flex;
		background-color: @white;
		color: @black;
		padding: 3px;

		> b {
			border-right: 1px solid @black;
			padding-left: 5px;
			padding-right: 5px;
		}

		> span {
			padding-left: 5px;
			padding-right: 5px;
		}
	}
}

dialog {
	padding: 0px;
	border-radius: 5px;
	z-index: 1;
	max-height: 80vh;
	overflow: hidden;
	position: fixed;
	top: 50%;
	bottom: 50%;
	max-width: 90vw;

	> .wrapper {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
		max-height: 80vh;

		> .header {
			background-color: @deepBlue;
			color: @white;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid @black;
			padding: 5px;
			font-size: 20px;
		}

		> .content {
			padding: 5px;
			width: 100%;
			width: -moz-available;
			width: -webkit-fill-available;
			width: fill-available;
			overflow-y: auto;
			max-height: 80vh;
		}

		> .controls {
			text-align: right;
			padding: 5px;
			border-top: 1px solid @grayC;
		}
	}
}