/*
These two css is to wrap the data in comboboxes, if it is too long
*/
.x-list-item-label{
    height: 100% !important;
 }
 
 .x-list-label{
    white-space: pre-wrap !important;
 }
 
.x-field-radio .x-field-mask::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	top: 12px;
	left: auto;
	right: 21px;
	background-color: #d0d0d0;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	-ms-border-radius: 16px;
	-o-border-radius: 16px;
	border-radius: 16px;
}

.x-field-radio .x-field-mask::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 9px;
	left: auto;
	right: 18px;
	background-color: #ddd;
	-webkit-border-radius: 26px;
	-moz-border-radius: 26px;
	-ms-border-radius: 26px;
	-o-border-radius: 26px;
	border-radius: 26px;
}

/***************************************************************************************************
										VISIT WINDOW CSS
****************************************************************************************************/
.visitDate { 
	color: #444;
	BACKGROUND-COLOR:white;
	font-family: Verdana;
	font-size:14px;
}

.expiredVisit { 
	color: #444;
	BACKGROUND-COLOR:white;
	font-family: Verdana;
	font-size:14px;
	text-decoration: line-through;
}

/***************************************************************************************************
										REPORT CSS
****************************************************************************************************/
.reportTitleCls { 
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	font-family: Verdana;
	color: #009997;
}

.reportLabelTextCls { 
	font-size: 12px;
	font-family: Verdana;
	color: #444;
}

.reportLabelHeaderTextCls { 
	font-size: 15px;
	font-family: Verdana;
	color: #444;
}

.reportLabelBlueTextCls { 
	font-size: 15px;
	font-family: Verdana;
	color: blue;
}

/**********************************************************
					POPUP WINDOW CSS
***********************************************************/
.popupWinTitleCls { 
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	font-family: Verdana;
	color: #009997;
}

.popupWinLabelTextCls {
	font-size: 12px;
	font-family: Verdana;
	color: #444;
}

/***************************************************************************************************
										ACTION SUMMARY CSS
****************************************************************************************************/
.actionDetailHelp { 
	color: #444;
	font-family: Verdana;
	font-size:12px;
}

.actionSummaryText {
	color:darkgreen;
	font-family: Verdana;
	font-size:15px;
	font-weight:bold;
	text-decoration: underline;
}

/***************************************************************************************************
										Segmented Buttons CSS
****************************************************************************************************/
.x-segmentedbutton-v .x-button {
-webkit-border-top-left-radius: 0.0em;
border-top-left-radius: 0.0em;
-webkit-border-bottom-left-radius: 0.0em;
border-bottom-left-radius: 0.0em;
-webkit-border-top-right-radius: 0.4em;
border-top-right-radius: 0.4em;
        color:white;
        background:darkgray;
}
    
.x-segmentedbutton-v .x-button.x-button-pressed {
    background: white;
    color:black;
}

.x-segmentedbutton-v .x-button:not(:first-child) {
border-top: 0;
}

.form-lbl {
  background:white;
  color:#888888;
}

.pageBackgroundImg {
  
  background: url(../images/touch/site-bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.codingComboCls
{
    background:white;
    border-color:lightgray;
    border-style:solid;
    border-width:thin;
    min-height: 5px;
    border-radius:0.4em;
    font-family: Verdana;
	font-size: 13px;
	height: 40px;
}

.codingHistoryHeaderLabelCls
{
    background:lightgray;
    font-family: Verdana;
    font-size:12px;
    font-weight:bold;
    text-align:center;
}

.codingHistoryTextCls
{
    background:white;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    border-radius:0.4em !important;
    font-size: 70%;
    font-family: Verdana;
    text-align:center;
}

.notificationWinCls {
	background: white !important;
	overflow: hidden !important;
}

/*******************************************************************
				Look and Feel for images in a DataView
********************************************************************/
.photos {
	/* Prevent vertical gaps */
	line-height: 0;
	-webkit-column-gap: 0px;
	margin: 10px 10px 0 15px;
}
 
.photos img {
	height:200px;
	width:250px;
	margin: 0px 10px 10px 0px;
	border: 2px solid #009997;
	border-radius: 5px;
	padding: 5px;
}

.photos-small {
	/* Prevent vertical gaps */
	line-height: 0;
	-webkit-column-gap: 0px;
	margin: 10px 10px 0 10px;
}
 
.photos-small img {
	height:100px;
	width:150px;
	margin: 0px 10px 5px 0px;
	border: 2px solid #009997;
	border-radius: 5px;
	padding: 5px;
}

/*******************************************************
			Subject Form Look and Feel CSS
********************************************************/

.dataview-item {
   border-right: 1px solid #000;
   border-bottom: 5px solid #59535E;
   float:left;   
   padding:2px;
}

.x-form-c {
    background: white;
    -webkit-border-radius: 1em !important;
    border-radius: 1em !important;
}

.scrollContainer .x-scroll-container {
	background-color: white !important;
}

.first-panel-cls {
    -webkit-border-radius: 3em !important;
    border-radius: 3em !important; /*firefox*/
    background: #ECECEC;
    height: auto;
    /*border-color:green;*/
    /*border-style:solid;*/
    /*border:1;*/
}

.selected-panel-cls {
   -webkit-border-radius: 3em !important;
    /*border-radius: 2em !important;*/
    background: #D1CECE;
    height:30px;
    border-color:black;
    border-style:dashed;
    border-width:thin;
    
}

.textAreaNotResizeCls .x-input-el {
	resize: none !important;
	background:white;
    border-color:lightgray;
    border-style:solid;
    border-width:thin;
    border-radius:0.4em;
}

.disabledComboCls .x-input-el {
	min-height: 5px !important;
	border-color:lightgray;
    border-style:solid;
    border-width:thin;
	border-radius:0.4em;
}

.defaultLabelCls
{
	background: white;
	color:#000000;
	font-family:Verdana;
    padding: 0 20px !important;
}

.customLabelCls
{
	background: white;
	color:#000000;
	font-size: 70%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
}

.selectedLabelCls
{
	background: white;
	color:black;
	font-size: 70%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
}

.checkboxLabelCls
{
	background: white;
	min-height: 5px;
	font-size: 90%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
    border-radius:0.4em;
    color:black important;
    /*margin-left: -10px;*/
}

.radioLabelCls
{
	background: white;
	color:#000000;
	font-size: 90%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
    border-radius:0.4em;
    color:black !important;
    /*margin-left: -20px;*/
}

.afterSaveCls
{
    background:lightblue;
}
.normalTextCls
{
    background:white;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    min-height: 5px;
    border-radius:0.4em !important;
    font-size: 70%;
    color:#000; !important;
    -webkit-text-fill-color:#000 !important;
}

.textArea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
 font-family: Helvetica, Arial, sans-serif;
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.abnormalLabTextCls
{
    background:white;
    color:red !important;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    min-height: 5px;
    border-radius:0.4em !important;
    font-size: 70%;
}

.abnormalLabValuesTextCls
{
    background:rgb(147, 190, 158);
    min-height: 5px;
    border-radius:0.4em !important;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    font-size: 70%;
}

.radioTextCls
{
    background:white;
    border-color:lightgray !important;
    border-width:thin !important;
    border-style:solid !important;
    min-height: 5px;
    border-radius:0.4em !important;
    font-size:85%;
    height: 35px;
}

.radioTextCls .x-field-input
{
    margin-left: -20px;
}

.checkboxTextCls
{
    background:white;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    min-height: 5px;
    border-radius:0.4em !important;
    font-size: 70%;
	margin-bottom: 8px;
}
.checkboxTextCls .x-field-input
{
    margin-left: -10px;
}

.comboboxCls
{
    background:white;
    border-color:lightgray;
    border-style:solid;
    border-width:thin;
    min-height: 5px;
}

.reasonComboCls
{
    background:white;
    border-color:rgb(163, 157, 157);
    border-style:solid;
    border-width:thin;
    border-radius:0.4em;
    font-size: 70%;
    font-family:Verdana;
    min-height: 5px;
}

.searchTextCls
{
    background:white;
    border-color:black;
    border-style:solid;
    border-width:thin;
}

.searchSubjectTextCls
{
    background:white;
    border:solid thin rgb(163, 157, 157);
    border-radius:0.4em;
    font-size:14px;
    font-family:Verdana;
}
.searchLabelCls
{
    background:#ECECEC;
    text-align:right;
}
.test
{
    font-weight:bold;
    background:green;
    border:1;
    border-color:black;
    border-style:solid;
}
.editTextCls
{
    background:beige;
    min-height: 5px;
    border-radius:0.4em !important;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    font-size: 70%;
}

.editTextCls .x-field-input
{
    margin-left: -20px;
}

.editRadioTextCls
{
    background:beige;
    min-height: 5px;
    border-radius:0.4em !important;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    font-size: 85%;
	height: 35px;
}

.editRadioTextCls .x-field-input
{
    margin-left: -20px;
}

.editRadioCls
{
    background:beige;
    min-height: 5px;
    font-size: 85%;
	font-family:Verdana !important;
    text-align: left;
    /*margin-left: -20px;*/
    border-radius: 0.4em;
}

.editCheckboxCls
{
    background:beige;
    min-height: 5px;
    border-radius:0.4em !important;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    font-size:70%;
    margin-bottom:8px;
}

.editCheckboxCls .x-field-input
{
    margin-left: -10px;
}

.editCheckboxLabelCls
{
    background:beige;
    min-height: 5px;
    font-size: 90%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
    border-radius:0.4em;
    /*margin-left: -10px;*/
}

.enteredTextCls
{
    background:	#E0F3E7;
    min-height: 5px;
    border-color:lightgray;
    border-style:solid;
    border-width:thin;
    border-radius:0.4em;
    font-size: 70%;
    color:#000; !important;
    -webkit-text-fill-color:#000 !important;
}

.enteredTextRedCls
{
    background:	#E0F3E7;
    min-height: 5px;
    border-color:lightgray;
    border-style:solid;
    border-width:thin;
    border-radius:0.4em;
    font-size: 70%;
    color:red !important;
    -webkit-text-fill-color:red !important;
}

.selectedTextCls
{
	background: #D1CECE;
    border-color:black !important;
    border-style:dashed !important;
    border-width:thin !important;
    min-height: 5px;
    border-radius:0.4em !important;
    font-size: 70%;
}

.enteredAbnormalLabTextCls
{
    background:	#E0F3E7;
    color : red !important;
    min-height: 5px;
    border-color:lightgray !important;
    border-style:solid !important;
    border-width:thin !important;
    border-radius:0.4em !important;
    font-size: 70%;
}

.enteredRadioCls
{
    background:	#E0F3E7;
    min-height: 5px;
    border-color:lightgray !important;
    border-width:thin !important;
    border-radius:0.4em !important;
    font-size:85%;
    height: 35px;
}

.selectedRadioCls
{
	background:	#D1CECE;
    min-height: 5px;
    border-style:dashed !important;
    border-color:black !important;
    border-width:thin !important;
    border-radius:0.4em !important;
    font-size:85%;
    height: 35px;
}

.enteredRadioCls .x-field-input
{
    margin-left: -20px;
}

.selectedRadioCls .x-field-input
{
    margin-left: -20px;
}

.enteredCheckboxCls
{
    background:	#E0F3E7;
    min-height: 5px;
    border-color:lightgray;
    border-width:thin;
    border-radius:0.4em;
    font-size:70%;
    margin-bottom:8px;
}

.enteredCheckboxCls .x-field-input
{
    margin-left: -10px;
}

.selectedCheckboxCls
{
   	background:	#D1CECE;
    min-height: 5px;
    border-color:black !important;
    border-style:dashed !important;
    border-width:thin !important;
    border-radius:0.4em !important;
    font-size: 70%;
	margin-bottom: 8px;
}

.selectedCheckboxCls .x-field-input
{
    margin-left: -10px;
}

.allQueryClosedWhiteCls
{
	background:	#FFFFFF;
    min-height: 5px;
    border-color:darkgray !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size: 70%;
	margin-bottom: 8px;
}

.allQueryClosedWhiteCls .x-field-input
{
    margin-left: -10px;
}


.allQueryClosedWhiteRadioCls
{
	background:	#FFFFFF;
    min-height: 5px;
    border-color:darkgray !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size:85%;
    height: 35px;
}
.allQueryClosedWhiteRadioCls .x-field-input
{
    margin-left: -20px;
}

.allQueryClosedCls
{
	background:	#E0F3E7;
    min-height: 5px;
    border-color:darkgray !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size: 70%;
	margin-bottom: 8px;
}

.allQueryClosedRadioCls
{
	background:	#E0F3E7;
    min-height: 5px;
    border-color:darkgray !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size:85%;
    height: 35px;
}
.allQueryClosedRadioCls .x-field-input
{
    margin-left: -20px;
}

.anyQueryOpenWhiteCls
{
    background:	#FFFFFF;
    min-height: 5px;
    border-color:#FAC34B !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size: 70%;
}

.anyQueryOpenWhiteCls .x-field-input
{
    margin-left: -10px;
}

.anyQueryOpenWhiteRadioCls
{
    background:	#FFFFFF;
    min-height: 5px;
    border-color:#FAC34B !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size:85%;
    height: 35px;
}
.anyQueryOpenWhiteRadioCls .x-field-input
{
    margin-left: -20px;
}

.anyQueryOpenCls
{
    background:	#E0F3E7;
    min-height: 5px;
    border-color:#FAC34B !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size: 70%;
}

.anyQueryOpenRadioCls
{
    background:	#E0F3E7;
    min-height: 5px;
    border-color:#FAC34B !important;
    border-style:solid !important;
    border-width:2px !important;
    border-radius:0.4em !important;
    font-size:85%;
    height: 35px;
}
.anyQueryOpenRadioCls .x-field-input
{
    margin-left: -20px;
}

.checkboxEnteredWhiteLabelCls
{
	background: #FFFFFF;
	min-height: 5px;
	font-size: 90%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
    border-radius:0.4em;
    /*margin-left: -10px;*/
}

.radioboxEnteredWhiteLabelCls
{
	background: #FFFFFF;
	min-height: 5px;
	font-size: 85%;
	font-family:Verdana;
    text-align: left;
    border-radius:0.4em;
    /*margin-left: -20px;*/
}

.checkboxEnteredLabelCls
{
	background: #E0F3E7;
	min-height: 5px;
	font-size: 90%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
    border-radius:0.4em;
    /*margin-left: -10px;*/
}

.checkboxSelectedLabelCls
{
	background: #D1CECE;
	min-height: 5px;
	font-size: 90%;
	font-family:"Times New Roman", Times, serif;
    text-align: left;
    border-radius:0.4em;
    /*margin-left: -10px;*/
}

.radioboxEnteredLabelCls
{
	background: #E0F3E7;
	min-height: 5px;
	font-size: 85%;
	font-family: Verdana !important;
    text-align: left;
    border-radius:0.4em;
    /*margin-left: -20px;*/
}

.radioboxSelectedLabelCls
{
	background: #D1CECE !important;
	min-height: 5px;
	font-size: 85%;
	font-family: Verdana !important;
    text-align: left;
    border-radius:0.4em;
    border-color:black !important;
    /*margin-left: -20px;*/
    
    
}

.focusCls
{
    background:beige;
}

/*****************************************************************************************
									GRID AND LIST CSS
******************************************************************************************/
/*------------------------------------------------*/
/* Subject List CSS: SubjectPanel.js: start */
/*------------------------------------------------*/ 
.subjectListHeaderCls {
  
  background: rgb(243,243,243);
  border:1;
  border-radius:0.4em !important;
}

.subjectListCls .x-list-disclosure {
   
    background-image: url('../images/touch/arrow_right1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
}

.subjectListCls {
	background: transparent;
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.subjectListCls .x-list-item.x-list-item-tpl {
	border-bottom: 1px solid rgb(169,169,169);
}

.subjectListCls .x-list-item {
	width:100%;
}

.subjectListCls .x-scroll-scroller-horizontal {
	width:100%;
	min-width:600px;
}

.subjectListCls .x-scroll-scroller {
	width:100% !important;
}

/*------------------------------------------------*/
/* Report Grid CSS: ReportPanel.js: start */
/*------------------------------------------------*/ 
.reportGridCls {
	background: transparent !important;
	color: green !important;
}

.reportGridCls .x-grid-row.x-grid-item-odd {
	background-color: transparent !important;
}

.reportGridCls .x-grid-column {
	line-height: 64px !important;
	height: 64px !important;
}

.reportGridCls .x-grid-row {
	border-bottom: 1px solid rgb(169,169,169) !important;
}

.reportGridCls .x-grid-row.x-item-selected {
	background-color: #F3F3F3 !important;
}

.reportGridCls .x-grid-cell {
	font-family: Verdana !important;
	font-size: 1em !important;
	line-height: 60px !important;
}

/*------------------------------------------------*/
/* Action Detail List CSS: ActionDetailWin.js: start */
/*------------------------------------------------*/ 
.actionDetailListCls {
	background: transparent;
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.actionDetailListCls .x-list-item.x-list-item-tpl {
	background: white;
	border-bottom: 1px solid rgb(169,169,169);
}

/*------------------------------------------------*/
/* GRID CSS: TouchEventController.js: start */
/*------------------------------------------------*/ 

/* For the bar at the bottom (Add new row)*/
.title-bar-grid {
  position: relative;
  /*border: 1px solid #f5f5f5;*/
  border-color: darkgray;
  background-color: #f5f5f5;
  border-radius:0.4em;
  min-height: 2.0em;
  overflow: hidden;
}

.title-bar-grid .x-button {
  border: 1px solid #999999;
  border-top-color: #a6a6a6;
  background-color: #298C57;
  color: black;
}

/* Grid Header */
.x-grid .x-grid-header-container {
	border-radius:0.4em;
}

.x-grid .x-grid-column {
	font-size: medium;
	font-family: Verdana;
	border-style: none;
}

/* Arrange the text in the Cell (height) */	
.x-grid .x-grid-cell {
	line-height: 30px;
	height:40px !important;
}

/* Arrange the text in the Header (height) */
.x-grid .x-grid-column {
	line-height: 30px;
	height:30px !important;
}

.img-grid-column {
	line-height: 30px;
	padding : 0 !important;

}

/* Not show row lines */
.x-grid .x-grid-row {
	border-style: none; 
}

/* Selected row color */
.x-grid .x-grid-row.x-item-selected {
	background-color: #F3F3F3;
}

/* To Show a bigger checkbox in Grid */
input.largerCheckbox
{
	width: 	20px;
	height: 20px;
	margin: 10px 0 0 0 !important;
}

/*------------------------------------------------*/
/* GRID CSS: TouchEventController.js: end */
/*------------------------------------------------*/ 

.x-toolbar-dark {
	background-color:: green !important;
}

.x-img-background-white {
    background:white;
    
}

.field-panel {
        background:white;
}

.FormPanelCls {
    -webkit-border-radius: 3em !important;
    border-radius: 2em !important;
    background-color: #ECECEC;  
}

.folder-mod-list-item-selected {
  background-color: darkgray !important;
}

/***************************************************************************************************
										Drag & Drop CSS
****************************************************************************************************/
.x-droppable {
    opacity: 1;
}

.x-drop-active {
    opacity: 1;
    border: black solid;
}

.x-drop-invalid {
    background-color: red;
}

.x-drop-hover {
    border: black solid;
    background: black;
    background-position: center center;
  	background-repeat: no-repeat;
}

.x-draggable-c {
        
}
.x-dragging-c {
    z-index:9999999;
    position:relative;
    opacity : 0.3;
}

/***************************************************************************************************
													ACTION SHEET
****************************************************************************************************/
.x-sheet-action-cls {
  padding: 0.7em;
  border-top: 1px solid #092e47;
  background-image: none;
  background-color: rgba(87, 112, 102, 1);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
/* background-color: rgba(3, 17, 26, 0.9);
  background-image: -webkit-linear-gradient(top, rgba(11, 60, 94, 0.9), rgba(6, 31, 49, 0.9) 3%, rgba(0, 2, 3, 0.9));
  background-image: -moz-linear-gradient(top, rgba(11, 60, 94, 0.9), rgba(6, 31, 49, 0.9) 3%, rgba(0, 2, 3, 0.9));
  background-image: -o-linear-gradient(top, rgba(11, 60, 94, 0.9), rgba(6, 31, 49, 0.9) 3%, rgba(0, 2, 3, 0.9));
  background-image: linear-gradient(top, rgba(11, 60, 94, 0.9), rgba(6, 31, 49, 0.9) 3%, rgba(0, 2, 3, 0.9));*/
 /***************************************************************************************************
													CHECK BOXES
****************************************************************************************************/
 .x-field-custom .x-input-checkbox:checked  + .x-field-mask:after  {
    content: "";
    height: 45px;
    width: 45px;
    position: absolute;
    top: 0;
    right: 1em;
    background-image:url(http://findicons.com/files/icons/2015/24x24_free_application/24/ok.png);
    /*background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);*/
    /*background-image:url(http://findicons.com/files/icons/2337/wireframe_toolbar_icons/48/checkbox_checked.png);*/
    background-image:url(http://findicons.com/files/icons/2344/faenza/48/checkbox.png);
    background-size: contain;
    display: block;
}

.x-field-custom .x-input-checkbox  + .x-field-mask:after {
    content: "";
    height: 45px;
    width: 45px;
    position: absolute;
    top: 0;
    right: 1em;
    /*background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);*/
    background-image:url(http://findicons.com/files/icons/2337/wireframe_toolbar_icons/48/checkbox_unchecked.png);
    background-size: contain;
    display: block;
}

/*fix firefox to show the scrollbars in Sencha Touch */
.x-scroll-indicator.rounded > :nth-child(2){
   -webkit-transform-origin:0% 0%;
   transform-origin:0% 0%;
   background-color:#333;
}

/*fix firefox select-field mask problem */
.x-field-select:after {
	pointer-events: none; /*click penetrate */
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    top: 50%;
    left: auto;
    right: 0.7em;
    background-color: inherit;
    background-size: 1em 1em;
    background-image: url('data:img/jpg;base64,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');
    margin-top: -.5em;
}
/*fit the field height*/
.x-field {
	min-height:0;
	margin-bottom:10px;
}

/*
.x-msgbox {
	background-color: #000;
	border: 0.15em solid black;
}

 .x-msgbox-dark .x-msgbox-text {
    color: #fff !important;
    font-family: Verdana;
}


.x-toolbar-dark .x-title {
    color: #fff !important;
    font-family: Verdana;
}
*/

.x-label-align-right .x-component-outer{
    flex : unset;
}

.input-font-red
{
	-webkit-text-fill-color:red !important;
}

.subject-count {
	font: 16px Verdana;
	padding: 0 8px;
	height:100%;
	min-width:1%; /* fix for phone*/
	line-height:45px; 
	text-align:center; 
	color:#000
}

.subjectno-label {
	padding:4px 5px 0 15px !important;
	background: white;
	font: 14px Verdana;
  	color:#444;
}

.x-carousel-indicator {
	pointer-events: none;
}

.menu-header {
  border-bottom: solid 1px #d0d0d0;
}

.addSubjectInputCls {
	background:lightgray;
    border-color:white !important;
    border-style:solid !important;
    border-width:thin !important;
    min-height: 5px;
    border-radius:0.4em !important;
    font-size: 0.8em;
    color:#000; !important;
    -webkit-text-fill-color:#000 !important;
}

/*  fix Sencha’s loading spinner after Chrome 43 */
@keyframes x-loading-spinner-rotate{
	0%{transform:rotate(0deg);-ms-transform:rotate(0deg);}
	8.32%{transform:rotate(0deg);-ms-transform:rotate(0deg);}
	8.33%{transform:rotate(30deg);-ms-transform:rotate(30deg);}
	16.65%{transform:rotate(30deg);-ms-transform:rotate(30deg)}
	16.66%{transform:rotate(60deg);-ms-transform:rotate(60deg)}
	24.99%{transform:rotate(60deg);-ms-transform:rotate(60deg)}
	25%{transform:rotate(90deg);-ms-transform:rotate(90deg)}
	33.32%{transform:rotate(90deg);-ms-transform:rotate(90deg)}
	33.33%{transform:rotate(120deg);-ms-transform:rotate(120deg)}
	41.65%{transform:rotate(120deg);-ms-transform:rotate(120deg)}
	41.66%{transform:rotate(150deg);-ms-transform:rotate(150deg)}
	49.99%{transform:rotate(150deg);-ms-transform:rotate(150deg)}
	50%{transform:rotate(180deg);-ms-transform:rotate(180deg)}
	58.32%{transform:rotate(180deg);-ms-transform:rotate(180deg)}
	58.33%{transform:rotate(210deg);-ms-transform:rotate(210deg)}
	66.65%{transform:rotate(210deg);-ms-transform:rotate(210deg)}
	66.66%{transform:rotate(240deg);-ms-transform:rotate(240deg)}
	74.99%{transform:rotate(240deg);-ms-transform:rotate(240deg)}
	75%{transform:rotate(270deg);-ms-transform:rotate(270deg)}
	83.32%{transform:rotate(270deg);-ms-transform:rotate(270deg)}
	83.33%{transform:rotate(300deg);-ms-transform:rotate(300deg)}
	91.65%{transform:rotate(300deg);-ms-transform:rotate(300deg)}
	91.66%{transform:rotate(300deg);-ms-transform:rotate(330deg)}
	100%{transform:rotate(300deg);-ms-transform:rotate(330deg)}
}

sup {
    vertical-align: super;
}