/*
//===================================================================================
// Copyright (c) Calnex Solutions Ltd.  All rights reserved.
// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY
// OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT
// LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
// FITNESS FOR A PARTICULAR PURPOSE.
//===================================================================================
// The contents of this file should not be copied or distributed
// without permission being granted by Calnex Solutions Ltd.
//=================================================================================== 
*/

/*
    The css defined here styles the content with respect to sizing. General use of this product 
    is expected to be on devices supporting screen resolutions greater than the minimum supported 
    and so the font sizes and dimensions start to look odd on larger resolutions. 
    
    To this end the styling in this file satisfies the regular screen size case. Similar styling will 
    exist in other css files for the small screen size case at least, if we need to increase sizes for 
    large screen support then we can add one. Media queries are employed in the Index.cshtml file to 
    decide on the inclusion of the appropriate sizing file
*/

/* Size our navigation bar for the regular case */
.navbar {
    min-height: 26px;
    margin-bottom: 0;
}

.navbar-brand,
.navbar-nav li a {
    line-height: 26px;
    height: 26px;
    padding-top: 0;
	font-size: 14px;
}

/* Clock Reference Input Internal/External Control */
.clockRefInCtrl {
	width: 90px;
	height: 18px;
	background: #333;
	margin: 0px;
	border-radius: 50px;
	position: relative;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.clockRefInCtrl:after {
    content: 'External';
    font: 8px/18px Arial, sans-serif;
    color: #000;
    color: #00bf00;
    position: absolute;
    right: 10px;
    z-index: 0;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.clockRefInCtrl:before {
    content: 'Internal';
    font: 8px/18px Arial, sans-serif;
    color: #00bf00;
    position: absolute;
    left: 10px;
    z-index: 0;
    font-weight: bold;
}

.clockRefInCtrl_disable_int:before {
	content: 'Internal';
}

.clockRefInCtrl_disable_int:after {
	content: '';
}

.clockRefInCtrl label {
	display: block;
	width: 40px;
	height: 12px;
	border-radius: 50px;

	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	cursor: pointer;
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 1;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.clockRefInCtrl input[type=checkbox]:checked + label {
	left: 46px;
}

/* Clock Reference Input Internal/External Control - Extended to support Chinese language selection in Chrome */
.clockRefInCtrlExt {
    width: 90px;
    height: 18px;
    background: #333;
    margin: 0px;
    border-radius: 50px;
    position: relative;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

	.clockRefInCtrlExt > svg:first-child {
        width: 90px;
        height: 18px;
        position: absolute;
        top: 3px
    }

		.clockRefInCtrlExt > svg:first-child text {
            font: bold 8px/18px Arial, sans-serif;
            fill: #00bf00;
        }

	.clockRefInCtrlExt label {
		display: block;
		width: 40px;
		height: 12px;
		border-radius: 50px;
		-webkit-transition: all .4s ease;
		transition: all .4s ease;
		cursor: pointer;
		position: absolute;
		top: 3px;
		left: 3px;
		z-index: 1;
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
		background: #fcfff4;
		background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
		background: linear-gradient(to top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
	}

	.clockRefInCtrlExt input[type=checkbox]:checked + label { left: 46px; }

/* On/Off slider that's used for Paragon */
.OnOffSliderCtrl {
	width: 65px;
	height: 18px;
	background: #333;
	margin: 0px;
	border-radius: 50px;
	position: relative;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.OnOffSliderCtrl:after {
	content: 'Off';
	font: 10px/18px Arial, sans-serif;
	color: #000;
	color: #00bf00;
	position: absolute;
	right: 10px;
	z-index: 0;
	font-weight: bold;
	text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.OnOffSliderCtrl:before {
	content: 'On';
	font: 10px/18px Arial, sans-serif;
	color: #00bf00;
	position: absolute;
	left: 10px;
	z-index: 0;
	font-weight: bold;
}

.OnOffSliderCtrl label {
	display: block;
	width: 30px;
	height: 12px;
	border-radius: 50px;

	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	cursor: pointer;
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 1;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.OnOffSliderCtrl input[type=checkbox]:checked + label {
	left: 32px;
}