.view-color-green {
    background-color: rgba(77, 250, 144, 0.3);
}
.view-color-yellow {
    background-color: rgba(250, 190, 77, 0.3);
}
.view-color-red {
    background-color: rgba(255, 84, 104, 0.3);
}

.view-item-disabled {
    opacity: 0.5;
}

.toolbar-header-style {
    background-color: #5fa2dd !important;
}

body.x-border-layout-ct, div.x-border-layout-ct {
    background-color: #ffffff !important;
}

.x-fieldset {
    overflow: visible !important; /* workaround for Safari issue */
}

#attribution {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: x-small;
}

#spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border-top: 6px solid #5fa2dd;
    border-right: 6px solid transparent;
    animation: spinner .6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}


.caseDetails div{
	overflow: visible !important;
}
.caseDetails {
	overflow-x: hidden !important;
	overflow-y: scroll !important;
}

.caseInstructions, 
.caseDetails,
.alertPhase,
.validationPhase,
.escalationPhase,
.pinkertonPhase,
.g4sPhase,
.approvalPhase,
.dhlPhase,
.managementPhase,
.caseDetails,
.managementPhase,
.smsUpdate,
.positionUpdate,
.updateCaseInfo,
.caseDetails,
.caseLog
{
	background-color:#ffffff !important;
	border:1px solid #999999 !important;
	border-radius:6px !important;
	position:relative !important;
	padding-top:60px !important;
}
.caseInstructions legend, 
.caseDetails legend,
.alertPhase legend,
.validationPhase legend,
.escalationPhase legend,
.pinkertonPhase legend,
.g4sPhase legend,
.approvalPhase legend,
.dhlPhase legend,
.managementPhase legend,
.smsUpdate legend,
.positionUpdate legend,
.updateCaseInfo legend,
.caseDetails legend,
.managementPhase legend,
.caseDetails legend,
.caseLog legend
{	
	background-image: linear-gradient(to top, #f2f2f2, #ffffff, #ffffff) !important;
	background-size: 100% 100%  !important;
	background-repeat: no-repeat  !important;
	border-radius:6px 6px 0px 0px !important;
	
	padding-left:20px !important;
	position:absolute !important;
	top:0px !important;
	left:0px !important;
	color:#000000 !important;
	font-weight:400 !important;
	border-bottom:1px solid #999999 !important;
}
.caseInstructions legend div, 
.caseDetails legend div,
.alertPhase legend div,
.validationPhase legend div,
.escalationPhase legend div,
.pinkertonPhase legend div,
.g4sPhase legend div,
.approvalPhase legend div,
.dhlPhase legend div,
.managementPhase legend div,
.caseDetails legend div,
.managementPhase legend div,
.smsUpdate legend div,
.positionUpdate legend div,
.updateCaseInfo legend div,
.caseDetails legend div,
.caseLog legend div
{	
	color:#111111 !important;
	font-weight:bold !important;
}

.whiteBG{
	background-color:#ffffff !important;
}

.validationPhase div, .pinkertonPhase div{
	width:auto !important;
	height:auto !important;
	*border: 1px solid #ff0000 !important;
	*padding: 2px !important;
}
.validationPhase label, .pinkertonPhase label{
	*border: 1px solid #00ff00 !important;
	*padding: 2px !important;
}



/*radio buttons bar*/
.validationPhase div div div div div div div div div input[type="radio"], .pinkertonPhase div div div div div div div div div input[type="radio"]  {
	position: absolute !important;
	clip: rect(0, 0, 0, 0) !important;
	height: 1px !important;
	width: 1px !important;
	border: 0 !important;
	overflow: hidden !important;	
	display:inline-block !important;
}
.validationPhase div div div div div div div div div input[type="text"], .pinkertonPhase div div div div div div div div div input[type="text"]  {
	width:176px !important;
}
.validationPhase div div div div div div div div div input[type="checkbox"], .pinkertonPhase div div div div div div div div div input[type="checkbox"]  {
	cursor:pointer !important;
}

/*first labels*/
.validationPhase label , .pinkertonPhase label {
	background-color: #ffffff !important;
	color: #333333 !important;
	font-weight: none !important;
}

/*blue buttons*/
.phaseButton label {
	background-color: #62A1D7 !important;
	color: #ffffff !important;
	line-height: 1 !important;
	text-align: left !important;
	border: 1px solid #497AA2 !important;
	position:relative !important;	
	
	padding:18px 24px !important;
	padding-left:55px !important;
	margin-left:-3px !important;
	width:auto !important;
	height:auto !important;
	white-space: nowrap !important;
	cursor:pointer !important;
	color:#ffffff !important;
	font-weight: bold !important;
}



.phaseButtonHighlight:first-of-type label
{
	background-color:#497AA2 !important;
} 


.iconAdvantage label {
	background-image: url("/images/icon-advantage.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconAdvantageNA label {
	background-image: url("/images/icon-advantage-na.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconConfirmed label {
	background-image: url("/images/icon-confirmed.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconEscalation label {
	background-image: url("/images/icon-escalation.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconFalseAlarm label {
	background-image: url("/images/icon-false-alarm.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconNoAnswer label {
	background-image: url("/images/icon-no-answer.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconPhone label {
	background-image: url("/images/icon-phone.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconPilot label {
	background-image: url("/images/icon-pilot.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconUnsure label {
	background-image: url("/images/icon-unsure.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}
.iconVoicemail label {
	background-image: url("/images/icon-voicemail.png") !important;
	background-repeat:no-repeat !important;
	background-position:top left !important;
	background-color: #62A1D7 !important;
}


.caseDetails label{
	margin-left:1px !important;
	margin-right:10px !important;
}

.redColor {
	color:red;
	font-size: 16px;
	display: block;
	text-align: right;
}

.greenColor {
	color: green;
	font-size: 16px;
	display: block;
	text-align: right;
}



.smsRedColor {
	color:red;
	font-size: 16px;
	display: block;
	text-align: right;
}

.smsGreenColor {
	color: green;
	font-size: 16px;
	display: block;
}
	

.zee-gy{
	width: 100% !important;
	height: auto;
	left: 0 !important;
	top:0 !important;
	overflow: hidden auto !important;
}
.great-div{
	position: relative;
	overflow: hidden auto !important;
	height: 100vh !important;
    padding-bottom: 500px !important;
}


.x-fieldset-header{
	z-index: 100000000 !important;
}

.display-class .x-panel{
	display: table-cell !important;
}
.display-class-sms{
	display: table-cell;
	padding-left:40px !important;
	vertical-align: top !important;
}

.display-class-sms label:nth-child(2) {
	background-color: #62A1D7 !important;
	color: #ffffff !important;
	line-height: 1 !important;
	text-align: left !important;
	border: 1px solid #497AA2 !important;
	position:relative !important;	
	
	padding:18px 24px !important;
	padding-left:55px !important;
	margin-left:-3px !important;
	width:auto !important;
	height:auto !important;
	white-space: nowrap !important;
	cursor:pointer !important;
	color:#ffffff !important;
	font-weight: bold !important;
}
.display-class-sms-trail label:nth-child(2) {
	background-color: #62A1D7 !important;
	color: #ffffff !important;
	line-height: 1 !important;
	text-align: left !important;
	border: 1px solid #497AA2 !important;
	position:relative !important;	
	
	padding:18px 24px !important;
	padding-left:55px !important;
	margin-left:-3px !important;
	width:auto !important;
	height:auto !important;
	white-space: nowrap !important;
	cursor:pointer !important;
	color:#ffffff !important;
	font-weight: bold !important;
}
.left-rt{
	width: 33% !important;
	display: table-cell !important;
	padding:0 20px !important;
}
.scrollable_tab {
	overflow: hidden scroll !important;
	height: 140px !important;
}
#cssLoader{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	background: url('http://local.traccar.com/other/Bubble-Loading-Gif.gif') 
				50% 50% no-repeat rgb(249,249,249);
}

#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:1000000;

}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:#5fa2dd;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}