body {
	font-family: sans-serif;
}

h1 img {
    width: 600px;
}

.hidden {
	display: none;
}

/* Nav Bar Styles */
.header .navigation {
    width: 100%;
    border-top: 1px solid;
    border-bottom: 1px solid;
    background: #f8f8f8;
}

.header .navigation ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
	display: flex;
	flex-wrap: 0;
}

.header .navigation ul {    
    FONT-SIZE: x-large;
    /* text-decoration: none; */
    background: #eee;
}

.header .navigation li a {
    padding: 10px 24px;
    display: block;
}

.header .navigation li:hover {
    background: #58585a;
}

.header .navigation li:nth-child(4n+2):hover {
    background: #ef4023;
}
.header .navigation li:nth-child(4n+3):hover {
    background: #00aeef;
}
.header .navigation li:nth-child(4n+4):hover {
    background: #a6ce39;
}
.header .navigation li:nth-child(4n+5):hover {
    background: #ffd503;
}

.header .navigation li:hover a {
    color: #fff;
}


.header .navigation a {
	color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-family: sans-serif;
}

.header .navigation a i.fa {
    padding: 1px 5px;
}

/** Sub-Menu Hover **/
.header .navigation a.activator i.fa:last-child {
    padding-right: 0px;
}

.navigation .jq-dropdown-panel {
    padding: 0px;
    margin-left: 20px;
    border-radius: 0;
}

.navigation .jq-dropdown-panel {
    padding: 0px;
    margin-left: 20px;
    border-radius: 0;
}

.header .navigation .jq-dropdown-panel ul {
    display: block;
}

.header .navigation .jq-dropdown-panel ul li.divider {
    height: 1px;
    border-bottom: lightgrey 1px solid;
    /* margin-top: -20px; */
    margin-left: 8px;
    /* height: 1px; */
    margin-right: 8px;
}

.header .navigation li:hover .jq-dropdown-panel ul li a {
    color: black;
}

.header .navigation li:hover .jq-dropdown-panel ul li:hover a {
    color: white;
}

.header .navigation .jq-dropdown-panel li {    
    FONT-SIZE: large;
    text-align: center;
}

.header .navigation .jq-dropdown-panel li a {
    text-transform: capitalize;
}

/* Right Hand Menu Styles */
.menu {
    float: right;
    margin-top: -100px;
    margin-right: 50px;
	position: relative;
	cursor: pointer;	
}

.menu .head {
	background: #FAFAFA;
	padding: 10px 10px 10px 20px;
	
}

.menu .head span.name {font-weight: bolder;font-size: large;}

.menu .head i {
    padding: 0 10px;
}

.menu .menu-body {
	position: absolute;
    display: none;
    background: #eee;
    top: 40px;
    right: 1px;
    width: 145px;
    border: #ddd 1px solid;
    z-index: 1000;
	
}

.menu.menu-shown .menu-body {
	display: block;
}

.menu .menu-body ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu .menu-body li {
    padding: 10px 15px;
    color: black;
}

.menu .menu-body li:hover {
    background: #58585a;
    color: white;
}

.menu .menu-body li a {
	color: inherit;
    text-decoration: none;
    text-transform: capitalize;
}

.menu .menu-body li a i.fa {
    padding-right: 5px;
}


.menu .menu-body li.seperator {
    height: 1px;
    background: black;
    padding: 1px;
    border-bottom: 1px black;
}

/**
 * Error Page Styling
 */
.error-description {
	padding-left: 20px;
}

/** Tabs Styling **/
span.tabpanel {
    display: flex;
    flex-grow: 1;
    height: calc(100% - 240px);
}

.tab-row {
    background: #c7c6c6;
    border-right: 1px solid black;
}

.tab-row ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    background: #eee;
    /* text-decoration: none; */
}

.tab-row a {
    /* width: 100%; */
    padding: 16px 40px;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    font-weight: 500;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.tab-row .selected a {
    background: #383838;
    text-decoration: underline;
    color: white;
    font-weight: 600;
    border-right: 1px solid #383838;
}

.tab-row a:hover {
    cursor: pointer;
}

.tabpanel .tab-row li:nth-child(4n+1) a:hover {
    background: #ef4023;
}
.tabpanel .tab-row li:nth-child(4n+2) a:hover {
    background: #00aeef;
}
.tabpanel .tab-row li:nth-child(4n+3) a:hover {
    background: #a6ce39;
}
.tabpanel .tab-row li:nth-child(4n+4) a:hover {
    background: #ffd503;
}
.tab-row a:hover {
    cursor: pointer;
}

/** 
 * Horizontal Tabs
 */
.tabpanel.horizontal .tab-row ul {
    text-align: left;
    display: inline-block;
    width: 100%;
    padding-top: 4px;
    background: #eee;
}

.tabpanel.horizontal li {
    display: inline-block;
}

span.tabpanel.horizontal {
    flex-direction: column;
}

.horizontal .tab-row
 a {
    border-top-left-radius: 17px;
    border-top-right-radius: 16px;
    padding: 12px 20px;
    /* min-width: 20px; */
    text-align: center;
    border-bottom: 2px solid black;
    margin-bottom: -2px;
    /* background: #f6f6f6; */
}

.horizontal .tab-row,
li:first-child a {
    margin-left: 6px;
    border-right: 1px black solid;
}

.horizontal .tab-row {
    border-right: none;
    border-bottom: 2px solid black;
}

.horizontal .tab-row
 li:last-child a {
    border-right: 1px black solid;
    /* background: #f6f6f6; */
}

.horizontal .tab-row li.selected a {
    border-bottom-color: rgb(99, 99, 99);
    background: rgb(99, 99, 99);
}

.tab-panel {
    padding: 20px;
    flex-grow: 1;
    background-color: #f7f7f7;
    overflow-y: auto;
}

.tab-panel .form-content {
	margin: 10px 20px;
}

.tab-panel.editor span.row.submit input {
	margin-right: 0px;
}

.tab-panel form {
    border: 1px solid;
    background-color: #fff;
}

.tab-panel form h5 {
    background: aliceblue;
    margin: 0px;
    padding: 10px 10px;
}



.form-content {
    
    /* margin-top: 12px; */
}

div.inline {
    display: inline-block;
}
	
	
h2.page-header {
	width: 100%;
    padding: 10px 30px;
    color: white;
    background: rgba(88, 88, 90, 0.47);
    margin: 0;
    margin-bottom: 10px;
}

h2.page-header.no-break {
	margin-bottom: 0;
}

/*** Toast Container ***/
div.toast-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000000;
}

div.toast-container > div {
	display: flex;
    align-items: center;
}



ul.feedbackPanel li {
    width: 100%;
    text-align: center;
    padding: 10px;
    border: 3px solid;
    margin: 8px 0px;
    border-radius: 3px;
    font-weight: bold;
}

ul.feedbackPanel li.feedbackPanelSUCCESS {
    background: #c2ec82;
    border-color: #a6ce39;
}

ul.feedbackPanel li.feedbackPanelINFO {
    background: #8dd5ff;
    border-color: #00aeef;
}

ul.feedbackPanel li.feedbackPanelWARNING {
    background: #ffff9c;
    border-color: #ffd503;
}

ul.feedbackPanel li.feedbackPanelERROR {
    background: salmon;
    border-color: #ef4023;
}

ul.feedbackPanel {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    margin-top: 7px;
    padding: 0px;
    list-style-type: none;
}


/** Controls **/

div.controls-container {
	width: 100%;
	z-index: 100;
}

div.controls {
    float: right;
    margin-right: 8px;
    margin-top: 6px;
    margin-bottom: -45px;
}


/* Auto Complete Styles */
div.wicket-aa-container div {
    background: white;
    margin-top: 1px;
}

div.wicket-aa-container ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

div.wicket-aa-container ul li.selected {
    background: grey;
    color: white;
}

div.wicket-aa-container ul li {
    padding: 5px;
}

/* General Table styles */
table {
    border-spacing: 0px;
    width:	100%;
}

table:not(.no-paginate-correct).paginated {
    margin-top: -40px;
}
	
table thead th {
	padding: 15px 23px;
	font-size:large;
	background: aliceblue;
}

table thead th.wicket_orderNone a span:after {
	content: "\f0dc";
	padding-left: 5px;
	font-family: FontAwesome;
}
table thead th.wicket_orderUp a span:after {
	content: "\f0de";
	padding-left: 5px;
	font-family: FontAwesome;
}
table thead th.wicket_orderDown a span:after {
	content: "\f0dd";
	padding-left: 5px;
	font-family: FontAwesome;
}

tr.odd {
    background: #eee;
}

tr.new-spanned-row td {
    border-top: 1px black solid;
}

tbody td {
	padding: 12px 20px;
}

tr.navigation div {
    display: inline-block;
    /* text-align: right; */
}

tr.navigation td {
    text-align: right;
    padding: 5px 10px 10px 10px;
}

tr.retired {
    background: #ff9f9f;
}

tr.free {
    background: #e394f0;
}

td.actions {
    width: 200px;
}

.norecords-td {
	padding: 15px 30px;
}

.maxsizewarning-td {
    padding: 20px;
    background: #f7f797;
    border: 3px yellow solid;
}

.low-reports td {
    background: #f7f797;
    border-top: 3px yellow solid;
    border-bottom: 3px yellow solid;
}

.low-reports td:first-child {
    border-left: 3px yellow solid;
}

.low-reports td:last-child {
    border-right: 3px yellow solid;
}

.csvexport-td {
	text-align: right;
	padding: 5px;
}

.csvexport-td .label {
	padding-right: 5px;
}

/* Button Styles */
.button, .ui-widget-content .button {    
    display: inline-block;
    width: 30px;
    height: 20px;
    background: #4E9CAF;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    margin: 2px;
    cursor: pointer;
}

.button:hover {
    background: #355a6b;
}

.dangerous {
    background: #b30000 !important;
}

.dangerous:hover {
    background: #830000 !important;
}

.disabled.button, .disabled.button:active, .disabled.button:hover {
    background: grey;
    cursor: default;
    color:white;
}

.button.text {
	width: auto;
	text-decoration: none;
	padding: 5px 15px;
}

span.fa-passwd-reset {
    position: relative;
    width: 100%;
    height: 14px;
    display: inline-block;
}

span.fa-passwd-reset .fa {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 27px;
    margin-top: -4px;
}

span.fa-passwd-reset .fa.fa-lock {
    font-size: 13px;
    margin-top: 3px;
}

.button:active {
    color: #ccc;
    background: #2f5e6a;
}

.create .button, .create.button {
	background: #008000
}

.create .button:active, .create.button:active, .create .button:hover, .create.button:hover {
	background: #024802
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.create-user {
    float: right;
    width: 300px;
    margin-right: 100px;
}

.create-user.hidden {
    margin-right: -500px;
}

/*****************/
/** Bulk Import **/
/*****************/

.import {
    /* margin-top: -30px; */
    margin-bottom: 0;
}

.import span.row {
    display: inline-block;
    /* padding: 5px; */
}

.import h3 {
    margin-bottom: 2px;
}

div.body {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
}

/******************/
/** Colour Block **/
/******************/
.colour-block.Red {
    background: #ef4023;
}

.colour-block.Blue {
    background: #00aeef;
}
.colour-block.Green {
    background: #a6ce39;
}
.colour-block.Yellow {
    background: #ffd503;
}

span.colour-block {
    display: inline-block;
    width: 20px;
    height: 10px;
}

div.colour-panel {
    text-align: center;
}


div.report {
	padding: 0px 20px 40px 20px;
	flex-grow: 1
}

div.user-report {
	flex-grow: 1
}

div.user-report h2.page-header {
    width: inherit;
}

div.monthly-reports {
}

div.monthly-reports .month-selector {
	float:right;
	margin-top: -50px;
}

.month-selector select {
    height: 30px;
    padding: 5px;
}

.month-selector input {
    height: 30px;
    padding: 5px;
    width: 80px;
}

div.monthly-reports table {
	width: 100%;
	padding-bottom: 30px;
}

.monthly-reports .email-report a.button{ 
	width: initial;
    margin: 0;
    padding: 10px;
}

.monthly-reports .email-report i.fa {
    padding: 10px;
    font-size: larger;
}

.monthly-reports .email-report {
   float: right;
   height: 40px;
}

.monthly-reports .email-report input {
    height: 100%;
    padding: 10px;
    width: 250px;
}

.create-client form {
	padding-left: 20px;
}

/**
 * Standard Editor
 */

.editor form span.row {
    display: block;
    padding: 5px 0px;
}

.editor form span.row h5 {
    margin: 0;
}


.editor form span.row label {
    width: 359px;
    display: inline-block;
    vertical-align: top;
    margin: 3px 0px;
}

.editor form span.row div label {
	padding: 5px;
}

.editor form span.row > span.full-width {
    width: 100%;
}

.editor form span.row > span {
	display: inline-block;
}

.editor form span.row.multi label {
    width: 140px;
}

.editor form span.row.multi-line span  {
	width: calc(100% - 120px);
}

.editor form span.row.multi.multi-line span  {
	width: calc(100% - 150px);
}

.editor form span.choice label {
    display: inline;
}

.editor form input[type=password],
.editor form input[type=text],
.editor form input[type=email],
.editor form select,
.editor form textarea {
    padding: 5px;
    width: 200px;
}

.editor.wide
 .question {
    max-width: 450px;
}

.editor.wide
 form textarea {
    width: 340px;
    max-width: 340px;
}


.editor form textarea {
	height: 60px;	
	font-family: sans-serif;
}

.editor form input[type=checkbox] {
    display: inline-block;
    height: 18px;
    width: 16px;
}

.checkbox-panel {
	margin-right: -30px;
	position: relative;
}

.checkbox-panel label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
  	left: 0;
    background: #eee;
    border: 1px solid #888;
    border-radius: 4px;
}

.editor form span.row .checkbox-panel label {
	width: 20px;
}

/**
* Styling for a tick/cross checkbox
*/
.tick-cross-check-div {
  position: relative;
  padding: 4px 8px;
  border-radius:40px;
  margin-bottom:4px;
  min-height:30px;
  padding-left:40px;
  display: flex;
  align-items: center;
}
.tick-cross-check-div:last-child {
  margin-bottom:0px;
}

.tick-cross-checkbox {
  appearance: none;
  position: absolute;
  top:50%;
  left:5px;
  transform:translateY(-50%);
  background-color: #F44336;
  width:30px;
  height:30px;
  border-radius:40px;
  margin:0px;
  outline: none; 
  transition:background-color .5s;
}
.tick-cross-checkbox:before {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  background-color:#ffffff;
  width:20px;
  height:5px;
  border-radius:40px;
  transition:all .5s;
}

.tick-cross-checkbox:after {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-45deg);
  background-color:#ffffff;
  width:20px;
  height:5px;
  border-radius:40px;
  transition:all .5s;
}
.tick-cross-checkbox:checked {
  background-color:#4CAF50;
}
.tick-cross-checkbox:checked:before {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) translate(-4px,3px) rotate(45deg);
  background-color:#ffffff;
  width:12px;
  height:5px;
  border-radius:40px;
}

.tick-cross-checkbox:checked:after {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) translate(3px,2px) rotate(-45deg);
  background-color:#ffffff;
  width:16px;
  height:5px;
  border-radius:40px;
}

/**
 * Display the tick inside the checkbox
 */
.checkbox-panel label:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 12px;
				height: 5px;
 			background: transparent;
 			top: 4px;
 			left: 2px;
 			border: 4px solid #333;
	border-top: none;
	border-right: none;

	transform: rotate(-45deg);
}

/**
 * Create the hover event of the tick
 */
.checkbox-panel label:hover::after {
	opacity: 0.5;
}

/**
 * Create the checkbox state for the tick
 */
.checkbox-panel input[type=checkbox]:checked + label:after {
	opacity: 1;
}
.checkbox-panel input[type=checkbox]:disabled + label {
    background: #ccc;
				border-color: #ccc;
}
.checkbox-panel input[type=checkbox]:disabled + label:hover {
	cursor: not-allowed;
}
.checkbox-panel input[type=checkbox]:disabled + label:hover::after {
	opacity: 0;
}

.editor span.row.submit {
	height: 30px;
}

.editor span.row.submit input {
    width: auto;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 15px;
}

.user-filter input[type=text],
.user-filter input[type=email],
.user-filter select {
    padding: 5px;
    width: 200px;
}

/**
*	The following are all used for a nice rounded toggle switch
*/

 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 2.2em;
  height: 1.2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 0.8em;
  width: 0.8em;
  left: 0.2em;
  bottom: 0.2em;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #4E9CAF;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4E9CAF;
}

input:checked + .slider:before {
  -webkit-transform: translateX(1em);
  -ms-transform: translateX(1em);
  transform: translateX(1em);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1.2em;
}

.slider.round:before {
  border-radius: 50%;
} 


.checkbox-container {
	align-items: center;
	display:flex;
}

.checkbox-label {
	padding: 5px;
}

span.combined {
    display: inline-block;
}

span.radio-option {
    display: block;
    padding-left: 10px;
}
.radio-choice {
    width: 100%;
    display: block;
    line-height: 25px;
}
.radio-choice input {
    float: left;
    height: 18px;
}
.radio-choice label {
    width: 98%;
    white-space: nowrap;
    padding-left: 2px;
    float: left;
}

.editor span.warning {
    width: 100%;
    padding: 20px;
    background: #ffff9c;
    border-color: #ffd503;
    border: 4px solid #ffd503;
    display: inline-block;
    box-sizing: border-box;
    margin-top: -20px;
}

.filter.editor form span.filter-option {
    vertical-align: top;
    padding-top: 5px;
    display: inline-block;
}

.filter.editor form span.filter-option label {
    padding: 5px;
    min-width: 80px;
    display: inline-block;
}

.filter.editor form span.filter-option.text label {
    min-width: 0px;
    vertical-align: top;
}

/* Specific editor overrides */
.editor.statement form span.row label {
	width: 250px;
}

.editor.statement form span.row input[type=text]  {
    width: 60%;
}

.editor.statement form span.row input[type=hidden]  {
    width: 60%;
}

span.choice {
    position: relative;
	margin: 10%;
    display: block;
    width: 90%;
    height: 90%;
}
span.position-wheel {
	width: 400px;
    height: 400px;
    display: inline-block;
    background-image:url('./colour-wheel-ver-AAA51F55286085710E3419EACBDA142E.png');
}

span.position-wheel span.option {
    position: absolute;
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

span.choice span.option input[type="checkbox"],
span.choice span.option input[type="radio"] {
    display: none;
}

span.choice span.option input[type="checkbox"] + label, 
span.choice span.option input[type="radio"] + label {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    background: white;
    text-align: center;
    padding: 8px 7px 6px 7px;
}

span.choice span.option input[type="checkbox"]:checked + label, 
span.choice span.option input[type="radio"]:checked + label {
    background: black;
    color: white;
}


.editor.statement form span.row .choices label {
    width: 100px;
}

.editor form span.row.multi-line span span.clients {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    max-height: 400px;
    overflow-y: auto;
}

.editor form span.row.multi-line span span.choices {
    display: flex;
    min-width: 120px;
    justify-content: space-between;
    align-items: center;
    flex-basis: 30%;
    padding: 2px 5px;
}

.editor form span.row.multi-line span span.choices label {
	overflow-x: hidden;
}

.editor form span.row.multi-line span span.choices input[type=checkbox] {
	min-width: 16px;
}

span.subdomain {
    font-size: smaller
}
span.subdomain:before {
    content: "(";
}

span.subdomain:after {
    content: ")";
}

/* Modal Styles */
div.modal-background {
    background: rgba(20,20,20,0.8);
    z-index: 100;
}

div.modal-background .modal-content {
    position: relative;
    top: 100px;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    right: 0;
    width: 40%;
    background: white;
}

.modal-confirm div.modal-background .modal-content {
	width: 400px;
}

.modal-confirm span.warning-icon i { 
	margin-left: -20px;
    font-size: 4em;
    float: left;
}

.modal-confirm span.warning-text { 
	display: block;
    text-align: center;
    width: calc(100% - 30px);
    min-height: 50px;
}

div.modal-background .modal-content .info {
    text-align: center;
}

div.modal-background .modal-content .info p  {
    padding: 20px;
}


div.modal-background .modal-content a.dismiss {
    font-size: x-large;
    background: black;
    color: white;
    padding: 10px 13px;
    border-radius: 22px;
    width: 20px;
    height: 24px;
    display: block;
    top: 0px;
    margin-top: -20px;
    margin-right: -20px;
    float: right;
    cursor: pointer;
}

.modal-content h2 {
    padding: 20px;
    background: lightgrey;
    margin-top: 0px;
    margin-bottom: 0px;
}

.modal-content .content {
    height: fit-content;
}


.modal-content .form-content {
	padding:20px 40px;
}

.modal-content .right-content {
	text-align: right;
}

.modal-content .buttons {
	padding: 0 5px 5px 0;
}

#loadingsplash.uploading .uploading-message {
	display: block;
}

#loadingsplash .uploading-message {
	display: none;
}

#loadingsplash .result-message {
	display: none;
}

#loadingsplash.success .result-message {
	display: block;
}

#loadingsplash .error-display {
	max-height: 200px;
	overflow-y: auto;
	
}



/*** Question input Styles ***/
.questions-editor {
	display: inline-flex;
	max-width: calc(100% - 140px);
}

span.question-selection {
    width: calc(100% - 140px);
}

div.question-list {
	display: flex;
    flex-wrap: wrap;
    max-width: 1450px;
}

.column > .questions-editor div.question-list {
	flex-direction: column;
}

.column > .questions-editor {
	max-width: inherit;
}

.editor form .question-list span.row label {
    width: 50px;
}

.editor form .question-list span.order {
    width: 45px;
    padding-top: 8px;
    display: inline-block;
    text-align: left;
}

div.question {
    padding: 5px 10px 5px 13px;
    border: 1px dashed black;
    max-width: 310px;
    display: flex;
}

div.question .controls {
	display: flex;
	flex-direction: column;
}

div.question a.remove {
	padding: 3px 0px;
}

div.question a.remove i {
	font-size: 24px;
	color: red; 
}

div.question .handle {
	font-size: 24px;
	color: #ccc
}

div.question .handle:hover {
	cursor: pointer;
	color: #ddd
}

/**
 * review status page
 */
tr.completed td {
    color: green;
}
tr.completed td:last-child::after {
    content: "\f00c";
    font-family: FontAwesome;
}

tr.completed td:last-child {
    text-align: center;
    font-size: 20px;
}

.c-download {
	background: url('./c-icon-ver-978AB1E72E5507E89BE76FE83EE74CBA.png');
    display: inline-block;
    height: 17px;
    width: 15px;
    margin-bottom: -3px;
    padding-top: 0px;
    background-size: 14px 17px;
    background-repeat: no-repeat;
}