/**
This file defines the default look and feel of CTAT components.

Table of Contents:
** CTAT General
 	#CTAT Generated Components
** Button Based Components
	#CTAT Generated button components
** CTAT Text Based Components
	#CTAT Table Components
	#CTAT Text Components
	#CTAT Numeric Stepper
** CTAT Stateful Components
	#CTAT Checkbox
	#CTAT Radio Button
	#CTAT Combobox
	#CTAT Jumble
	#CTAT Drag-N-Drop
	#CTAT Drag Source
** CTAT SVG Based Component
	#CTAT SVG Component
	#CTAT Number Line
	#CTAT Pie Chart
	#CTAT Fraction Bar
	#CTAT Protractor
** Feedback Components
	#CTAT Hint Button
	#CTAT Done Button
	#CTAT Hint Window
	#CTAT Skill Window
** Container Components
	#CTAT Scroll Pane Component
** Multimedia Components
	#CTAT Video
** Disabling
	#CTAT Button Disabled
** Grading
	#CTAT incorrect
	#CTAT correct
	#CTAT hint
	#CTAT highlight
** Scrim
** Global Utility
	#unselectable, #hidden
*/


/******************************** CTAT General *******************************/

/*-----------------------------------------*\
	#CTAT Generated Components
	Base class for CTAT generated components
\*-----------------------------------------*/

.CTAT-gen-component {
	/* assume generated component is always within a div and that it should occupy the entire div */
	width: 100%;
	height: 100%;
	padding: 0px;
}


/*********************** CTAT Component Size Defaults ************************/

.CTATAudioButton {
	display: inline-block;
}
.CTATButton, .CTATSubmitButton {
	display: inline-block;
}
.CTATComboBox {
	display: inline-block;
}
.CTATHintButton,
.CTATDoneButton {

	color:white;
	width: 68px;
	height: 68px;
}
.CTATDragNDrop {
	width: 160px;
	height: 100px;
}
.CTATDragSource {
	width: 160px;
	height: 100px;
}
.CTATFractionBar {
	width: 240px;
	height: 70px;
}
.CTATGroupingComponent {}
.CTATGroupingComponent[data-ctat-use-componentlist="true"] {
	visibility: hidden;
}
.CTATHintWindow,
.CTATSkillWindow {
	margin: 2px;
	width: 240px;
	height: 140px;
	flex: auto;
}
.CTATImageButton {}
.CTATJumble {}
.CTATNumberLine {
	width: 360px;
	height: 90px;
}
.CTATNumericStepper {
	width: 60px;
	display: inline-block;
}
.CTATPieChart {
	width: 100px;
	height: 100px;
}
.CTATTextArea {
	display: inline-block;
}

.CTATTextField {}

.CTATTextInput {
	width: 100px;
	display: inline-block;
}

.CTATMathInput {
	width: 100px;
	display: flex;
	flex-direction: row;
	align-items: center;
	background: white;
	border: 1px solid black;
}

.CTATMathInput .guppy_active,.guppy_inactive {
	width: 100%;
}

.CTATMathInput-left,.CTATMathInput-right {
	width: 48%;
}

.CTATMathInput-equals {
	padding: 0px 3px;
}

.CTATMathInput-left {
	text-align: right;
}

.CTATMathInput-right {
	text-align: left;
}

.CTATMathInput .guppy_buttons {
	display: none !important;
}

/************************** Button Based Components **************************/

/*---------------------------------------------*\
	#CTAT Generated Button Components
	Covers CTATAudioButton, CTATButton, CTATDoneButton, CTATHintButton
\*---------------------------------------------*/

.CTAT-button { /* For the generated <button> */
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	font: inherit;
}
.CTAT-button:hover {} /* when the mouse is hovering over the <button> */
.CTAT-button--clicked {} /* when the <button> is being clicked */
.CTAT-button:disabled {} /* when the <button> is disabled */


/******************** CTAT Text Based Components ***********************/
/* Note: see CTAT Grading for modifying how text based components look for grading */

/*-----------------------------------------------------*\
	#CTAT Table Components
\*-----------------------------------------------------*/

.CTATTable {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.CTATTable--cell textarea {
	width: 95%;
	height: 100%;
	outline: none;
	box-shadow: none;
	border: none;
	background-color: inherit;
}
.CTATTable--cell[data-ctat-enabled=false] {
	background-color: lightgray;
}
.CTATTable--cell textarea.CTAT--hint {
	box-shadow: 0px 0px 15px 5px yellow;
	background-color: yellow;
}
.CTATTable--row {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	flex: none;
}
.CTATTable--cell {
	flex: none;
	border: 1px solid black;
	overflow: hidden;
	width: 4em; /* cell width */
	height: 1.2em; /* cell size */
}
.CTATTable--headers {
	flex: none;
}
.CTATTable .CTATTable--header {
	background-color: linen; /* set header background color */
}
.CTATTable--header textarea {
	text-align: center;
	font-weight: bold; /* change header font */
}

/*---------------------------------------------------*\
	#CTAT Text Components
\*---------------------------------------------------*/

.CTATTextField .ctattextfield-marker {
	position: absolute;
	z-index: 99999;
	width: 2px;
	height: 1em;
	background-color: #0000B3;
	cursor: pointer;
}
.CTATTextField .ctattextfield-marker .handle {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: #0000B3;
}
.CTATTextField .ctattextfield-marker .start-handle {
	right: -8px;
	top: -10px;
	box-shadow: #555555 1px 1px 1px;
}
.CTATTextField .ctattextfield-marker .end-handle {
	left: -8px;
	bottom: -10px;
	box-shadow: #555555 -1px -1px 1px;
}

.CTATTextArea > textarea {
	overflow: hidden;
	resize: none;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	font: inherit;
	text-align: inherit;
}

.CTATTextInput > input[type="text"],
.CTATTextInput > input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	font: inherit;
	text-align: inherit;
}

.CTATMathInput {
	background-color: white;
	border-style: solid;
}
.CTATMathInput .katex .katex-html {
	display: block;
}

/*-------------------------------------------------------*\
	#CTAT Numeric Stepper
\*-------------------------------------------------------*/

.CTATNumericStepper > input {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	font: inherit;
}

/*-------------------------------------------------------*\
	#CTATMathInput
\*-------------------------------------------------------*/
.no-touch .guppy_osk {
	display: none;
}


/************************* CTAT Stateful Components ***************************/

/*------------------------------------------------*\
	#CTAT CheckBox
	#CTAT Radio Button
\*------------------------------------------------*/

.CTATCheckBox,
.CTATRadioButton { /* Container for the button and label. */
	display: inline-flex; /* this should be either inline-flex or flex */
	align-items: center;
	flex-direction: row;
}
/* extra styling for the sub entities */
.CTATCheckBox--button,
.CTATRadioButton--button {} /* Added to the generated <input> */
.CTATCheckBox--label,
.CTATRadioButton--label {} /* Added to the generated <label> */

/*---------------------------------------------------------*\
	#CTAT ComboBox
\*---------------------------------------------------------*/

.CTATComboBox > select { /* inherit from Component */
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	font: inherit;
	color: inherit;
}

/*---------------------------------------------------------*\
	#CTAT Jumble
\*---------------------------------------------------------*/

.CTATJumble { /* general jumble component styling, (eg) the bounding box */
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	display: inline-flex;
}
.CTATJumble--item { /* for each individual item in the jumble */
	border: 1px solid transparent;
	padding: 0.5ch;
	cursor: default;
	user-select: none;
}
.CTATJumble--item[draggable="true"] { /* for items that are being dragged */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	cursor: move;
}
.CTATJumble--item--home {
	opacity: 0.4;
}
.CTATJumble--item--over { /* for items that are under the dragged item and would be moved by dropping the item */
	border-style: dashed;
	border-color: blue;
}

/*-----------------------------------------------*\
	#CTAT Drag-N-Drop
\*-----------------------------------------------*/

.CTATDragNDrop { /* Basic DragNDrop box look */
	border: 1px solid grey;
	border-radius: 5px;
}
.CTATDragNDrop--valid-drop { /* Added when the CTATDragNDrop is a valid drop */
	border: 1px dashed blue;
}
.CTATDragNDrop--item { /* styling to apply to all draggable items */
	cursor: grab;
}
.CTATDragNDrop--item:active {
	cursor: grabbing;
}

/*-----------------------------------------------*\
	#CTAT Drag-Source
\*-----------------------------------------------*/

.CTATDragSource { /* Basic DragSource box look */
	border: 1px solid grey;
	border-radius: 5px;
}
.CTATDragSource--valid-drop { /* Added when the CTATDragNDrop is a valid drop */
	border: 1px dashed blue;
}
.CTATDragSource--item { /* styling to apply to all draggable items */
	cursor: grab;
}
.CTATDragSource--item:active {
	cursor: grabbing;
}

/******************** CTAT SVG Based Component *************************/

/*-----------------------------------------------*\
	#CTAT SVG Component
\*-----------------------------------------------*/

.CTAT-svg {
	border-radius: 5px;
	box-sizing: border-box;
	background-color: white;
}

/*-------------------------------------------------------*\
	#CTAT Number Line
\*-------------------------------------------------------*/

.CTATNumberLine--container {
	border: 1px solid #CCCCCC;
	padding: 10px;
}
.CTATNumberLine--cursor {
	fill: black;
	fill-opacity: 0.5;
	stroke-width: 0px;
	stroke: black;
	stroke-opacity: 0.5;
}
.CTATNumberLine--point {
	fill: black;
	stroke-width: 0px;
	/* r: 7px; only supported in Chrome */
}
.CTATNumberLine--axis {
	stroke: black;
	stroke-linecap: round;
	stroke-width: 2px;
	fill-opacity: 0;
}
.CTATNumberLine--tickmark {
	stroke: black;
	stroke-width: 2px;
}
.CTATNumberLine--tickmark-label {
	stroke: none;
	fill: black;
}
.CTATNumberLine--large-tickmark {
	stroke-width: 4px;
}
.CTATNumberLine--large-tickmark-label {
	transform: translate(0px, -3px);
}
.CTATNumberLine--small-tickmark {}
.CTATNumberLine--small-tickmark-label {
	stroke: none;
	fill: black;
	transform: translate(0px, -2px);
}
.CTATNumberLine--denominator-tickmark {
	stroke: purple;
}
.CTATNumberLine--denominator-tickmark-label {
	display: none;
}


/*-------------------------------------------------------*\
	#CTAT Chat Panel
\*-------------------------------------------------------*/

.CTATChatPanel{
	 margin: 10px;
	 display: flex;
	 flex-direction: column;
	 align-items: stretch;
	 width: 300px;
	 height: 50px;
}
.CTATChatPanel--chat-area{
 	flex-grow: 1;
	border: 2px solid rgb(211, 211, 211);
	overflow-y: auto;
	padding: 7px;
	background-color: white;
}
.CTATChatPanel--input-div{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-left: 2px solid rgb(211, 211, 211);
	border-right: 2px solid rgb(211, 211, 211);
	background-color: white;
}
.CTATChatPanel--warning-div{
	margin: 0.5em 1em;
	background-color: white;
}
.CTATChatPanel--message-box{
 	border: 2px solid rgb(211, 211, 211);
	resize: none;
	margin: 1px;
	font-family: Verdana;
	background-color: white;
}
.CTATChatPanel--single-message{
	border-radius: 5px;
  	background-color: white;
	border: 1px solid #9096a0;
	box-shadow: 2px 2px #9096a0;
	margin-bottom: 5px;
	margin-top: 2px;
	max-width: 90%;
	word-wrap: break-word;
	padding: 5px 8px;
	display: inline-block;
	float: right;
	clear: both;
	font-family: Verdana;
	position: relative;
}
.CTATChatPanel--send-button{
	width: 20%;
	border: 2px solid #9096a0;
	border-radius: 10px;
	margin-top: 5px;
}
.CTATChatPanel--timestamp{
	font-size: .8em;
	color: grey;
	padding-right: 3px;
	float: right;
}
.CTATChatPanel--other-message{
	border-radius: 5px;
	position: relative;
	background-color: #c7edfc;
	margin-bottom: 5px;
	margin-top: 2px;
	max-width: 90%;
	word-wrap: break-word;
	padding: 5px 8px;
	display: inline-block;
	font-family: Verdana;
}
.CTATChatPanel--comp-message{
	border-radius: 5px;
	position: relative;
	background-color: #d5dde8;
	margin-bottom: 5px;
	margin-top: 2px;
	max-width: 90%;
	word-wrap: break-word;
	padding: 5px 8px;
	display: inline-block;
	font-family: Verdana;
}

/*-------------------------------------------------------*\
	#CTAT Pie Chart
	#CTAT Fraction Bar
\*-------------------------------------------------------*/

.CTATPieChart--container { /* pie chart container */
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	overflow: visible;
	/*--explode: 10px; only supported in moz */
}
.CTATFractionBar--container { /* fraction bar container */
	border: 2px solid #CCCCCC;
	border-radius: 5px;
}
.CTATPieChart--piece { /* pie chart wedge */
	stroke: black;
	stroke-width: 1px;
	fill: purple;
	overflow: visible;
}
/* Can specify .CTAT-pie-chart--piece[data-value="1/4"] to change color based on values */
.CTATPieChart--piece[data-selected="false"] { /* deselected pie chart wedge */
	fill-opacity: 0.2;
}
.CTATFractionBar--piece { /* fraction bar piece */
	padding: 2px;
	stroke-width: 1px;
	stroke: black;
	fill: purple;
}
.CTATFractionBar--piece[data-selected="false"] { /* deselected fraction bar piece */
	fill-opacity: 0.2;
}
.CTATFractionBar--label { /* fraction bar piece value labels */
	display: none;
	pointer-events: none;
}

/*-------------------------------------------------------*\
	#CTAT Protractor
\*-------------------------------------------------------*/

.CTATProtractor {
  min-height: 200px;
  min-width: 400px;
  max-width: 1000px;
  max-height: 500px;
  display: contents;
}

.CTATProtractor--container {
  height: auto;
  width: 100%;
  outline: 2px solid cornflowerblue;
  outline-offset: -2px;
}

.CTATProtractor--compass {
  stroke: rgb(131, 171, 245);
  stroke-width: 3px;
  fill: none;
}

.CTATProtractor--ticks {
  stroke: rgb(163, 118, 5);
  stroke-width: 4px;
}

.CTATProtractor--labels {
  text-anchor: middle;
  fill: rgb(47, 110, 182);
  font-size: 80%;
}

.CTATProtractor--label90 {
  font-weight: bold;
  font-size: 125%;
}

.CTATProtractor--label-origin {
  text-anchor: middle;
  font-style: italic;
  stroke: none;
  font-size: 125%;
  fill: blue;
}

.CTATProtractor--protrays {
  stroke: rgb(0, 204, 194);
  fill: rgb(0, 204, 194);
  stroke-width: 2;
}

.CTATProtractor--fgrays {
  stroke: blue;
  fill: blue;
  stroke-width: 2;
}

.CTATProtractor--labelray {
  text-anchor: middle;
  font-style: italic;
  stroke: none;
  font-size: 100%;
}

.CTATProtractor--select {
  cursor: grab;
  user-select: auto;
}

.CTATProtractor--correct {
  filter: drop-shadow(-1px 0 3px limegreen) drop-shadow(1px 0 3px limegreen)
    drop-shadow(0 1px 3px limegreen);
}
.CTATProtractor--incorrect {
  filter: drop-shadow(-1px 0 3px red) drop-shadow(1px 0 3px red)
    drop-shadow(0 1px 3px red);
}
.CTATProtractor--hint {
  filter: drop-shadow(-1px 0 3px yellow) drop-shadow(1px 0 3px yellow)
    drop-shadow(0 1px 3px yellow);
}

/************************** Feedback Components *******************************/

/*---------------------------------------------*\
	#CTAT Hint Button
\*---------------------------------------------*/

/* Also used for in CTATHintWindow to increase connection */
/* Should .CTATHintWindow--button--* be added so that they can be modified independently? */
/* This is in the SVG section because of the option to have SVG buttons as part of the component.
	If this feature is dropped, then this should be moved to its own section */
.CTATHintButton { /* for that classic CTAT look and feel */
	font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
}
.CTAT-hint-button { /* on the <button> */
	border: 1px solid orange;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 0;
	background-color: gold; /*#FFCC33;*/
	font: inherit;
	cursor: pointer;
}
.CTAT-hint-button--icon { /* on the ? */
	position: relative;
	top: -5px;
	height: 60%;
	pointer-events: none;
	font-size: 44px;
	font-weight: bold;
}
.CTAT-hint-button--text { /* on the text (eg) "Hint" */
	pointer-events: none;
}
.CTAT-hint-button--hover { /* added when moused over */
	background-color: #E6C200 /*#FFED3A*/;
}
.CTAT-hint-button--clicked { /* added when it is clicked */
	background-color: #FFDB19 /*#FFED3A*/;
}

/*--------------------------------------------------*\
	#CTAT Done Button
\*--------------------------------------------------*/

.CTATDoneButton { /* default Done button font for that classic CTAT feel */
	font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
}
.CTAT-done-button { /* for the <button> inside the CTATDoneButton */
	border: 1px solid green;
	border-radius: 5px;
	border-color: green;
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: #88CC44;
	font: inherit;
	cursor: pointer;
}
.CTAT-done-button--content { /* for the <div> inside the <button> */
	width: inherit;
	height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}
.CTAT-done-button--icon { /* for the checkmark */
	position: relative;
	top: -5px;
	height: 60%;
	font-size: 44px;
	font-weight: bold;
	pointer-events: none;
}
.CTAT-done-button--text { /* for the text (eg) Done */
	margin-bottom: 5px;
	flex: none;
	pointer-events: none;
}
.CTAT-done-button--hover { /* added when hovering over the button */
	background-color: #5C8A00;
}
.CTAT-done-button--clicked { /* added when clicking the button */
	background-color: #85AD33;
}

/*-----------------------------------------------*\
	#CTAT Hint Window
\*-----------------------------------------------*/

.CTATHintWidget .CTATHintWindow { /* Hint window styling, assumes single instance */
	position: absolute;
	left: 0;
	right: 71px;
	top: 0;
	bottom: 0;
	width: auto;
	height: auto;
}

.CTATHintWindow { /* hint window container styling */
	border-radius: 5px;
	border: 1px solid #CCCCCC;
	padding: 5px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: #DDDDDD;
	user-select: none;
}
.CTATHintWindow--hint-content { /* Hint window content (eg) hints */
	margin-bottom: 5px;
	border: 1px solid #CCCCCC;
	padding: 2px;
	flex: auto;
	overflow: auto;
	background: white;
	text-align: left;
	cursor: default;
}
.CTATHintWindow--hint-button-area { /* area containing the buttons */
	flex: none;
	display: flex;
	justify-content: space-between;
}
.CTATHintWindow--hint-indicator {
	flex: 1;
	text-align: center;
}
.CTATHintWindow--hint-indicator-bullet {
	color: #9a9a9a;
}
.CTATHintWindow--button { /* hint window buttons, also uses CTAT hint button style, mostly for coloring */
	border-radius: 5px;
	width: 82px;
	height: 20px;
	font: 11px Helvetica Neue, Helvetical, Arial, sans-serif;
	line-height: 16px;
}
.CTATHintWindow--button-icon { /* the arrows in the buttons */
	margin-left: 3px;
	margin-right: 3px;
	vertical-align: middle;
	font-weight: bold;
}
.CTATHintWindow--previous {} /* hint window previous button */
.CTATHintWindow--next {} /* hint window next button */

/*-----------------------------------------------------*\
	#CTAT Skill Window
\*-----------------------------------------------------*/

.CTATSkillWindow { /* skill window container */
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 5px;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background-color: #FAFAFA;
	font-size: 12px;
}
.CTATSkillWindow--skill { /* container for meter + label */
	flex: none;
	display: flex;
}
.CTATSkillWindow--bar { /* skill meter bar */
	border: 1px solid #CCCCCC;
	border-radius: 0.5em;
	height: 1em;
	flex: 1;
	overflow: hidden;
	background-color: white;
}
.CTATSkillWindow--bar--nonmastered { /* skill meter bar non-mastery fill */
	height: 100%;
	background: gold;
}
.CTATSkillWindow--bar--mastery { /* skill meter bar mastery fill */
	height: 100%;
	background: #88CC44;
}
.CTATSkillWindow--label { /* skill meter label */
	margin-left: 5px;
	height: 1.5em;
	flex: 2;
	overflow: hidden;
	text-align: left;
	white-space: nowrap;
}


/***************************** Container Components ***************************/

/*---------------------------------------------------------------------------*\
	#CTAT Scroll Pane Component
\*---------------------------------------------------------------------------*/

/* For the scroll pane component, probably not the best way to specify it
	 given how html authoring will happen, but it works for now. */
[data-ctat-component="CTATScrollPaneComponent"] {
	border: 4px;
	display: block;
	overflow-x: hidden;
	overflow-y: scroll;
}


/*********************** Multimedia Components ********************************/

/*----------------------------------------------------------------------------*\
	#CTAT Video
\*----------------------------------------------------------------------------*/

video.CTAT-gen-component {
	background-color: inherit;
}


/********************************* Disabling **********************************/

/*-------------------------------------------------------*\
	#CTAT Button Disabled
\*-------------------------------------------------------*/

/*button.CTAT-gen-component:disabled,*/
button.CTAT-hint-button:disabled,
button.CTAT-done-button:disabled,
button.CTATHintWindow--button:disabled {
	border: 1px solid darkgrey;
	background-color: #EDEDED;
	color: #9A9A9A;
	cursor: default;
}


/********************** Grading **************************/

/*-------------------------------------------------------*\
	#CTAT incorrect
\*-------------------------------------------------------*/

.CTAT--incorrect {
	box-shadow: 0px 0px 7px 2px red;
}
textarea.CTAT--incorrect,
input.CTAT--incorrect[type="text"],
input.CTAT--incorrect[type="number"]{
	box-shadow: none;
	color: red;
}
label.CTAT--incorrect {
	box-shadow: none;
	text-shadow: 0px 0px 5px red;
}
input.CTAT--incorrect[type="checkbox"],
input.CTAT--incorrect[type="radio"] {
	box-shadow: 0px 0px 5px 0px red;
}
.CTATNumberLine--point.CTAT--incorrect {
	fill: red;
	fill-opacity: 0.7;
}

/*-------------------------------------------------------*\
	#CTAT correct
\*-------------------------------------------------------*/

.CTAT--correct { /* general correct highlighting */
	box-shadow: 0px 0px 7px 2px limegreen;
}

textarea.CTAT--correct,
input.CTAT--correct[type="text"],
div.CTATMathInput.CTAT--correct { /* font color change for text components */
	box-shadow: none;
	color: limegreen;
}
label.CTAT--correct { /* labels for checkboxes and radio buttons */
	box-shadow: none;
	text-shadow: 0px 0px 5px limegreen;
}
input.CTAT--correct[type="checkbox"],
input.CTAT--correct[type="radio"] {
	box-shadow: 0px 0px 5px 0px limegreen;
}
.CTATNumberLine--point.CTAT--correct {
	fill: limegreen;
}

/*-------------------------------------------------------*\
	#CTAT hint
\*-------------------------------------------------------*/

.CTAT--hint {
	position: relative;
	z-index: 2;
	box-shadow: 0px 0px 7px 5px yellow;
}
label.CTAT--hint {
	box-shadow: none;
	text-shadow: 0px 0px 5px yellow;
}
input.CTAT--hint[type="checkbox"],
input.CTAT--hint[type="radio"] {
	box-shadow: 0px 0px 5px 0px yellow;
}

/*-------------------------------------------------------*\
	#CTAT highlight
\*-------------------------------------------------------*/

.CTAT--highlight {
	box-shadow: 0px 0px 15px 5px yellow;
}
label.CTAT--highlight {
	box-shadow: none;
	text-shadow: 0px 0px 5px yellow;
}
input.CTAT--highlight[type="checkbox"],
input.CTAT--highlight[type="radio"] {
	box-shadow: 0px 0px 5px 0px yellow;
}

/********************** Scrim **************************/

/*-------------------------------------------------------*\
	Used by the Scrim
\*-------------------------------------------------------*/

.ctatpageoverlay {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background-color: rgba(128, 128, 128, 0.5);
}
.css3-windows-7 .fenster {
	position: absolute;
	left: 50%;
	top: 50%;
	box-shadow: 0 0 0 1px #EEEEEE inset, 0 0 15px rgba(0, 0, 0, 0.9);
	border: 1px solid black;
	border-radius: 7px;
	width: 389px;
	height: 146px;
	padding-bottom: 46px;
	transform: translate(-50%, -50%);
	background-color: rgba(160, 160, 160, 0.4);
}
.css3-windows-7 .fenster .titel {
	margin: 0px;
	height: 16px;
	padding: 6px 0 6px 28px;
	overflow: hidden;
	background: transparent url(data:image/gif;base64,R0lGODlhEAAQAPcAAAAAAP///8TAwv39/ikvVJGUp+rr8UtRcVBWdomNoh0nUiQtVSgyWikyWvHy9u/w9BglViAtXSIvXCUwWwEXVQIYVgMZWAQaWAUbWQUbWAYcWQcdWgcdWQccWAgeWgkfWwogXAsgXQshXQshXA0iXg0iXQ4jXw4kXw4jXg8kXxAlYBElYBEmYBInYRMoYhMoYRMoYBMnXxYrZBYpYBgtZhgsZRktZhkuZhovZx0waCI2bCY5bjFDdTRGeDpMfD5PfkJSgUNUgkdXhEpahllnkGJvloiSr5GbtpOct5ylvaKqwKmwxba8zrm/0L7E1M3R3dzf6N/i6t3g6PLz9g8lXxAmYBguZmVzmGp4nHOAoqqyxsHH1r/F1Ovt8vX2+Pr7/P+eGP+fGP+dGf+bGv6bGvqZG/mZHPiYHPOWHeqSIOWQIcuEKPmYHPaXHfWWHeiQIeaPIeeQIuOOIuKOIuCMI9yLJNGFJ9CFJ8+DKMuCKcyCKo5jO4FeP4dhQXtcRG9VRWZQSP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAIEALAAAAAAQABAAAAjdAHEIxNGnTZyDB8/4wUFDh4qHKvaIIcPmjJkxYPioMGGlhccWf/DocVMGTR47gFqowPGxxQwYBOCIobOgQwyVLD+i8IDgjZg5BYq4WLFSJwslAnzKSTDAyIUqOVl8WDLlgFIIQLCIKNqCA5EAQhQolQCixAuuHpw0qcBg7MeiVGoYyGKhrRg5Et6yTJHDwRUMDdKEUZPXY1EVLKAgoTDhTp01EfR6zHCki4wRLVmQwOmxxI4HWj5oOJFiwwkeLLi20DDEy5YgN2z4YJIkg+oWGXpw+RJFypcnP0JADQgAOw==) no-repeat 6px 6px;
	text-overflow: ellipsis;
	font: normal 12px/16px "Segoe UI", Arial, sans-serif;
	color: black;
	text-shadow: 0 0 1px white, 3px 3px 5px white, -3px -3px 5px white, -3px 3px 5px white, 3px -3px 5px white;
	/*cursor: move;*/
	white-space: nowrap;
}
.css3-windows-7 .fenster .inhalt {
	position: relative;
	margin: 0 6px;
	box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.65);
	border: 1px solid #666666;
	border-radius: 1px;
	height: 100%;
	padding: 5px;
	overflow: auto;
	background-color: white;
	font: bold 16px arial, sans-serif;
	color: black;
	text-align: center;
	vertical-align: middle;
}
.css3-windows-7 .inhalt p {
	margin-bottom: 10px;
}
.css3-windows-7 .inhalt img {
	margin: 0 20px 10px 0;
	border: 0px solid #DDDDDD;
	padding: 1px;
	background-color: #F1F1F1;
}

/* Resizeable */
.ui-resizable-handle {
	position: absolute;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n,
.ui-resizable-s {
	left: 0;
	width: 100%;
	height: 7px;
}
.ui-resizable-n {
	top: -5px;
	cursor: n-resize;
}
.ui-resizable-s {
	bottom: -5px;
	cursor: s-resize;
}
.ui-resizable-e,
.ui-resizable-w {
	top: 0;
	width: 7px;
	height: 100%;
}
.ui-resizable-e {
	right: -5px;
	cursor: e-resize;
}
.ui-resizable-w {
	left: -5px;
	cursor: w-resize;
}
.ui-resizable-se,
.ui-resizable-sw,
.ui-resizable-nw,
.ui-resizable-ne {
	width: 12px;
	height: 12px;
}
.ui-resizable-se {
	right: 0;
	bottom: 0;
	cursor: se-resize;
}
.ui-resizable-sw {
	left: 0;
	bottom: 0;
	cursor: sw-resize;
}
.ui-resizable-nw {
	left: 0;
	top: 0;
	cursor: nw-resize;
}
.ui-resizable-ne {
	right: 0;
	top: 0;
	cursor: ne-resize;
}

.scrimButton {
	margin: 2px;
	border: 1px solid #000000;
	border-radius: 6px;
	box-shadow: inset 0px 1px 0px 0px white;
	padding: 6px 24px;
	display: inline-block;
	background: linear-gradient(to bottom, #F9F9F9 5%, #E9E9E9 100%);
	cursor: pointer;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0px 1px 0px white;
	color: #666666;
}
.scrimButton:hover {
	background: linear-gradient(to bottom, #E9E9E9 5%, #F9F9F9 100%);
}
.scrimButton:active {
	top: 1px;
	position: relative;
}

/******************************* Global Utilities ******************************/

/*-------------------------------------------------*\
	#unselectable, #hidden
	General classes for making entities unselectable or hidden
\*-------------------------------------------------*/

.unselectable {
	user-select: none;
}
.hidden {
	display: none !important;
}