/* main page */

html
{
    height: 100%;
}

body
{
    font-family: Calibri, "PT Sans", sans-serif;
    font-size: 18px;
    color:#989898;    
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    /*color: White;*/
    width:100%;
    height:100%;
}

::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5rem;
    background-color: #b4b4b4;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: #01486c;
}

::-webkit-scrollbar-thumb {
    background-color: #01486c;
}

a.red-link:link {
    color: #980000;
    text-decoration: underline;
}
a.red-link:visited {
    color: #980000;
    text-decoration: underline;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

a:hover {
    color: white;
    text-decoration: none;
}

a:active {
    color: white;
    text-decoration: none;
}

.float-clear
{
    clear: both;
    height: 0px;
    display: block;
}

#mainContent
{
}

#mainContent>.header
{
    background: #DD0022;    
    border-bottom: 1px solid white;
    z-index: 10;
    overflow: visible;
    width: 100%;
    color: White;
}

#mainContent>.inner-header
{
    z-index: 5;
}


#mainContent>.content
{
}

.am2-logo
{
    background-image: url("images/icons/viasat_logo_82.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-color: transparent;
    display: block;
    width: 82px;
    height: 82px;
    margin: 0px;
    z-index: 1000;    
    float: left;
}

#logindisplay
{
    margin: 0px 0px 0px 0px;
    width: 100%;
}

.page-title
{
    font-weight: bold;
    float: left;
    white-space: nowrap;
    display: block;
    margin: 0px 0px 0px 4px;
}

.page-login
{
    float: right;
    white-space: nowrap;
    display: block;
    margin-right: 2px;
}

.text-input {
    width: 150px;
    height: 20px;
    border: 1px solid #5e91c6;
    margin:0px;
    padding-left: 4px;
    font-size: 12px;
}

.select-input {
    width: 150px;
    height: 22px;
    border-width: 0px;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    border: 1px solid #5d8fc5;
    font-family: Calibri, "PT Sans", sans-serif;
}
.cma-link {
    color: #980000;
    text-decoration: underline;
    cursor:pointer;
}

.cma-link:hover {
    color: white;    
}

/* CHECKBOX */
input[type=checkbox] {
    position: relative;
    cursor: pointer;
}

    input[type=checkbox]:before {
        content: "";
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        top: 0;
        left: 0;
        background-color: white;
        border: 1px solid #014a6e;
    }

input[type=checkbox]:disabled:before {
        background-color: #e6e6e6;
}


input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    border: solid #01486c;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 1px;
    left: 5px;
}

input[type=checkbox]:checked:disabled:after {
        border: solid #4d4d4d;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
/* END CHECKBOX */

/* Logon
----------------------------------------------------------*/
.title
{    
    color:White;
    font-size:15px;
    margin:8px 4px 0px 20px;
    height:26px;
}

.loginLabel
{
    color:White;
    font-size:12px;    
    height:28px;
    display:inline-block;           
}
.loginInput
{       
    float:right;    
    cursor:default;
    padding-left: 4px;
}

#loginErrorMessage
{
    float:right;
    height:20px;
    color:Red;
    margin-right:50px;
}

#cbRememberMe
{
    margin:0px;
    padding:0px;
}

#logOnImage
{       
    width:100px;
    margin: 4px 6px 0px 14px;       
}

.logOnFlag
{       
    width:22px;
    margin: 2px;    
    float:right; 
    cursor:pointer;
}

#loginForm
{
    display:inline-block;
    width:296px;
    margin-right:4px;
    position:relative;
    bottom:14px;
}

#loginButton {
    width: 152px;
    height: 23px;
    border-width: 0px;
    border-spacing: 0px;
    font-size: 15px;
    font-family: Calibri, "PT Sans", sans-serif;
    color: Gray;
    float: right;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: Red;
    background-image: -webkit-gradient( linear, left top, left bottom, from(#f40f0f), to(#a1050a) );
    background-image: -moz-linear-gradient( center top, #f40f0f, #a1050a );
    background-image: -o-linear-gradient(top, #f40f0f, #a1050a);
    -pie-background: linear-gradient(top, #f40f0f, #a1050a);
    /*behavior: url('../Content/PIE.htc'); przeniesine do _Layout.cshtml*/
}

.logonMargin
{
    width:100%;
    height:50%;
    visibility:hidden;   
    float:left;
    margin-top:-75px; /*Polowa wysokosci okna logowania*/
}

.centered
{ 
    margin-left:auto;
    margin-right:auto;
    clear: both;  
    position: relative;
    top: -200px;
    /* IE4ever Hack: Hide from IE4 **/
    position: static;  
    width: 426px;
    height: 150px;  
}

.logonPlaq
{ 
    position: absolute; 
    z-index:10;  
    background-color: Black;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#525252),        
        to(#1d1d1d)
    );
    background: -moz-linear-gradient(
        center top,
        #525252,
        #1d1d1d
    );
    background: -o-linear-gradient(top,  #525252, #1d1d1d);
    background: -ms-linear-gradient(top,  #525252, #1d1d1d);
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;   
    -pie-background: linear-gradient(top,  #525252, #1d1d1d);
    /*behavior: url('../Content/PIE.htc'); przeniesine do _Layout.cshtml*/     
}

.biznes{  
    position: absolute;
    width:433px;
    height:689px;  
    z-index:2;     
    background-image:url(images/busines.png);     
    margin-left:-260px; 
    margin-top:-185px;
}

.girl
{
    position: absolute;
    width:383px;
    height:599px;  
    z-index:3;     
    background-image:url(images/girl.png);     
    margin-left:-500px; 
    margin-top:-280px;
}

.boy
{
    position: absolute;
    width:380px;
    height:275px;  
    z-index:3;     
    background-image:url(images/boy.png);     
    margin-left:690px; 
    margin-top:-90px;
}

.child
{
    position: absolute;
    width:411px;
    height:407px;  
    z-index:3;     
    background-image:url(images/child.png);     
    margin-left:346px; 
    margin-top:-196px;
}

.laptop
{
    position: absolute;
    width:235px;
    height:185px;  
    z-index:3;     
    background-image:url(images/laptop.png);     
    margin-left:430px; 
    margin-top:90px;
}

.package
{
    position: absolute;
    width:327px;
    height:281px;  
    z-index:2;     
    background-image:url(images/package.png);     
    margin-left:416px; 
    margin-top:-136px;
}


.personal
{
    position: absolute;
    width:1680px;
    height:900px;  
    z-index:2;     
    background-image:url(images/all.png);  
    margin-left:-630px; 
    margin-top:-380px;
}

.v-logon-container{
    display: grid;
    display: -ms-grid;
    grid-template-columns: minmax(450px, 1fr) 1fr;
    grid-template-rows: 50px 2fr 340px 3fr;
    -ms-grid-columns: minmax(450px, 1fr) 1fr;
    -ms-grid-rows: 50px 2fr 340px 3fr;
    align-content:stretch;
    height: 100%;
    min-height: 600px;
    font-family: Calibri, "PT Sans", sans-serif;
    font-size: 18px;
    color:#989898;
}

.v-logon-right-panel {
    grid-column-start: 2;
    grid-row: 1 / 5;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    /*    background-image: url('images/background.png');
    background-position: bottom center;
    background-repeat: no-repeat;*/
    background-color: #ffffff;
}

.v-logon-right-info {
    display: flex;
    grid-column-start: 2;
    grid-row: 2 / 5;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 3;
    margin: 0% 10vw;
    height: 85vh;
    min-height: 500px;
    overflow-y: hidden;
    align-items: center;
}

    .v-logon-right-info::-webkit-scrollbar {
        height: 0.3rem;
        width: 0.3rem;
    }

.v-logon-right-info-text {
    color: #01486c;    
    text-align: justify;
    font-size: calc(12px + .6vw);
    margin: auto;
}

.v-logon-logo{
    grid-column-start: 1;
    grid-row-start: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    justify-self:center;
    align-self: center;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
}

.v-logon-rodo {
    grid-column-start: 1;
    grid-row-start: 4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
    padding: 5%;
    padding-top: 0px;
    text-align: justify;
    /*align-self: flex-start;*/ /*uncoment when additional message is visible*/
    align-self: end;
    -ms-grid-row-align: end;
    font-size: 12px;
}

.v-logon-message {
    padding: 5%;
    padding-top: 10px;
    text-align: justify;
    font-size: 14px;
    color: red;
}

.v-logon-form-container{
    grid-column-start: 1;
    grid-row-start: 3;  
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    justify-self:center;
    align-self: start;
    -ms-grid-row-align: start;
    -ms-grid-column-align: center;
}
.v-logon-form{    
    display: grid;    
    grid-template-columns: auto;
    grid-template-rows: 53px 70px 30px 40px 30px 24px 92px;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 53px 70px 30px 40px 30px 24px 92px;
    width: 400px;
    /*height: 340px;*/
    position:relative;
}

.v-logon-form-header{
    margin: 10px 0px;
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-column-start: 1;
}

.v-logon-form-flag{
    float:right;
    margin-left: 4px;
    cursor: pointer;
}

.v-logon-form-title {
    float: left;
    color: #01486c;
    font-size: 26px;
}

a.v-logon-form-link:link {
    color: #43ACE2;
    text-decoration: underline;
}
a.v-logon-form-link:visited {
    color: #43ACE2;
    text-decoration: underline;
}

.v-logon-form-input-container{    
    padding: 0px 0px 11px 0px;
    border-bottom: solid 1px #EDEDED;
    display: flex;
    align-self:end;
    -ms-grid-row-align: end;
}

    .v-logon-form-input-container img {
        flex-grow: 0;
        margin-right: 20px;
        width: 23px;
        height: 23px;
    }

    .v-logon-form-input-container input{
        flex-grow: 1;
        padding-right: 20px;
        border: 0;
        outline: 0;
        background-color:transparent;
        box-shadow: none;        
        font-family: Calibri, "PT Sans", sans-serif;
        font-size: 18px;
        color:#989898;
    }

    .v-logon-form-input-container input::placeholder {
        font-family: Calibri, "PT Sans", sans-serif;
        font-size: 18px;
        color:#989898;
    }

.v-logon-form-input-login{
    -ms-grid-row: 2;
    grid-row-start: 2;
    grid-column-start: 1;
}
.v-logon-form-input-password{
    -ms-grid-row: 4;
    grid-row-start: 4;
    grid-column-start: 1;
    padding-top: 4px;
}

.v-logon-form-remember-container {
    position: relative;
    cursor: pointer;
    display: block;
    user-select: none;
    padding-left: 44px;
    margin-top: 4px;
    justify-self: start;
    -ms-grid-column-align: start;
    -ms-grid-row: 6;
    grid-row-start: 6;
    grid-column-start: 1;
}

.v-logon-form-remember-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.v-logon-form-remember-container span{
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  background-color: #EDEDED;
}

/*.v-logon-form-remember-container:hover input ~ span {
  background-color: #ccc;
}*/

.v-logon-form-remember-container:hover input ~ span:after {
  display: block;
  /*opacity: 0.4;*/
}

.v-logon-form-remember-container input:checked ~ span {
  background-color: #43ACE2;
}

.v-logon-form-remember-container span:after {
  content: "";
  position: absolute;
  display: none;
}

.v-logon-form-remember-container input:checked ~ span:after {
  display: block;
  opacity: 1;
}

.v-logon-form-remember-container span:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.v-logon-form-login {
    background-color:#43ace2;
    height: 46px;
    margin-top: 46px;      
    width:100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
    -ms-grid-row: 7;
    grid-row-start: 7;
    grid-column-start: 1;
    border: 0;
    padding: 0px;
    width: 70%;
    justify-self: center;
    -ms-grid-column-align: center;
}
.v-logon-form-login:hover {
    background-color: #5eb8e6;
}
/*.v-logon-form-login:hover .v-logon-form-login-text{
    color: #989898;
}*/
.v-logon-form-login-text{
    color: #FFFFFF;    
    display:inline-block;
    font-family: Calibri, "PT Sans", sans-serif;
    font-size: 22px;
    justify-self:center;
    align-self: center;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
}
.v-logon-form-login-error{
    -ms-grid-row: 3;
    grid-row-start: 3;    
    grid-column-start: 1;
    color:red;
    font-size:12px;
}
.v-logon-form-password-error{
    -ms-grid-row: 5;
    grid-row-start: 5;
    grid-column-start: 1;
    color:red;
    font-size:12px;
}
.v-logon-help{
    grid-column-start: 2;
    grid-row-start: 1;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    background-color: transparent;
    margin: 10px 20px;
    justify-self:end;
    -ms-grid-column-align: end;
    display: flex;
    align-items:center;
}

.v-logon-help a {
    margin: 20px;
    color: #989898;
    text-decoration: none;
}

.v-loader-container{    
    visibility:collapse;
    grid-row: 1 / 8;
    grid-column-start: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 7;
    z-index: 1;
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}
.v-loader {    
    justify-self:center;
    align-self: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    border: 6px solid #EDEDED;
    border-top: 6px solid #43ACE2;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: v-spin 2s linear infinite;    
}
.v-logon-right-info-text > p, .v-logon-right-info-text li {
    padding: 0px 4px;
}

@keyframes v-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (max-width: 851px) {
    .v-logon-right-panel {
    display: none;
    }
    .v-logon-right-info{
        display: none;
    }
    .v-logon-help {
        grid-column-start: 1;
        -ms-grid-column: 1;
    }
    .v-logon-help a{
        color: #989898;        
    }
    .v-logon-help a:visited{
        color: #989898;        
    }
    .v-logon-container {
        grid-template-columns: minmax(450px, 1fr);
        -ms-grid-columns: minmax(450px, 1fr)
    }

}

/*
 *	PANES & CONTENT-DIVs
 */
.ui-layout-pane { /* all 'panes' */
	background:	#FFF; 
	border:		1px solid #BBB;
	/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
	   otherwise you may get double-scrollbars - on the pane AND on the content-div
	*/
	padding:	10px; 
	overflow:	auto;
	}
	/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
	.ui-layout-content {
		padding:	10px;
		position:	relative; /* contain floated or positioned elements */
		overflow:	auto; /* add scrolling to content-div */
	}

/*
 *	RESIZER-BARS
 */
.ui-layout-resizer	{ /* all 'resizer-bars' */
	background:		#DDD;
	border:			1px solid #BBB;
	border-width:	0;
	}
	.ui-layout-resizer-drag {		/* REAL resizer while resize in progress */
	}
	.ui-layout-resizer-hover	{	/* affects both open and closed states */
	}
	/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
		otherwise color shifts while dragging when bar can't keep up with mouse */
	.ui-layout-resizer-open-hover ,	/* hover-color to 'resize' */
	.ui-layout-resizer-dragging {	/* resizer beging 'dragging' */
		background: #C4E1A4;
	}
	.ui-layout-resizer-dragging {	/* CLONED resizer being dragged */
		border-left:  1px solid #BBB;
		border-right: 1px solid #BBB;
	}
	/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
	.ui-layout-resizer-dragging-limit {	/* CLONED resizer at min or max size-limit */
		background: #E1A4A4; /* red */
	}

	.ui-layout-resizer-closed-hover	{ /* hover-color to 'slide open' */
		background: #EBD5AA;
	}
	.ui-layout-resizer-sliding {	/* resizer when pane is 'slid open' */
		opacity: .10; /* show only a slight shadow */
		filter:  alpha(opacity=10);
		}
		.ui-layout-resizer-sliding-hover {	/* sliding resizer - hover */
			opacity: 1.00; /* on-hover, show the resizer-bar normally */
			filter:  alpha(opacity=100);
		}
		/* sliding resizer - add 'outside-border' to resizer on-hover 
		 * this sample illustrates how to target specific panes and states */
		.ui-layout-resizer-north-sliding-hover	{ border-bottom-width:	1px; }
		.ui-layout-resizer-south-sliding-hover	{ border-top-width:		1px; }
		.ui-layout-resizer-west-sliding-hover	{ border-right-width:	1px; }
		.ui-layout-resizer-east-sliding-hover	{ border-left-width:	1px; }

/*
 *	TOGGLER-BUTTONS
 */
.ui-layout-toggler {
	border: 1px solid #BBB; /* match pane-border */
	background-color: #BBB;
	}
	.ui-layout-resizer-hover .ui-layout-toggler {
		opacity: .60;
		filter:  alpha(opacity=60);
	}
	.ui-layout-toggler-hover , /* need when NOT resizable */
	.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
		background-color: #FC6;
		opacity: 1.00;
		filter:  alpha(opacity=100);
	}
	.ui-layout-toggler-north ,
	.ui-layout-toggler-south {
		border-width: 0 1px; /* left/right borders */
	}
	.ui-layout-toggler-west ,
	.ui-layout-toggler-east {
		border-width: 1px 0; /* top/bottom borders */
	}
	/* hide the toggler-button when the pane is 'slid open' */
	.ui-layout-resizer-sliding  ui-layout-toggler {
		display: none;
	}
	/*
	 *	style the text we put INSIDE the togglers
	 */
	.ui-layout-toggler .content {
		color:			#666;
		font-size:		12px;
		font-weight:	bold;
		width:			100%;
		padding-bottom:	0.35ex; /* to 'vertically center' text inside text-span */
	}


/* general thingies */

.button-red {
    color: White;
    display: block;
    text-align: center;
    user-select: none;
    cursor: pointer;
    background: #43ACE2;
    border: none;
    padding: 6px;
}

.button-red:hover
{
    color:#d5d5d5;
}

    .button-red:active {
        background: #43ACE2;
    }

.button-red-sq
{
    color: #FFFFFF;
    font-size: 22px;
    display: block;
    text-align: center;
    margin: 1px;
    user-select: none;
    background: #43ace2;
    cursor: pointer;
}

.button-red-sq:hover
{
    color:#d5d5d5;
}

.button-red-sq:active
{
    background: #43ACE2;
}

/* User Details */
.userDetails {
    margin-left: 2px;
    margin-right: 4px;
}

/* Devices form */
.detailsEntry
{
    float:left;
    height:22px;
    padding: 8px 4px;
    margin: 0px 4px 4px 0px;
    background-color: #83C4E5;    
    border: 1px solid #ACE3FF;
}

.detailsEntryNewLine
{
    clear:left;
}

.clear-width{
    width:auto;
}

.clear-height{
    height:auto;
}

.detailButtonsContainer
{
    width:100%;
    margin: 0px;
    float: left;
}

.deviceButton
{    
    display: inline-block;
    margin-right: 4px;
    padding:4px 8px;
}
.deviceButtonDisabled {
    background-color: #bfbfbf;
}
.deviceButtonDisabled:active {
    background-color: #bfbfbf;
}
.deviceButtonDisabled:hover {
    color: #fff;
    cursor: default;
}
.devicesList
{
    float:left;
    padding:0px;
    overflow-y:auto;
    overflow-x:hidden;
    margin-right:10px;
    margin-top: 2px;
    font-size: 18px;
}

.devicesList tbody{
    background-color: #83C4E5;
    border: 1px solid #ACE3FF;
}

    /* CSS FOR DEMO WINDOW */
    .devicesList tbody {
        background-color: transparent;
        border: none;
    }
.devicesList {
    background-color: rgba(230, 230, 230, 0.8);    
    border-bottom: none;
    color: #000;
}
    .usersList .dataTables_wrapper {
        color: #000;
        font-size: 18px;
    }

.devicesList th > div {
    background-color: #01486C;
    padding: 3px 0px;
    height: 20px;
    color: #fff;
}
.devicesList th {
    border: 1px solid #112934;
    background: #01486C;
}
.devicesList td{
    padding: 2px 10px;
    white-space:nowrap;
}
.deviceDetails
{
    height:100%;
    overflow:auto;
    margin-top: 4px;
}

.deviceDetailsMap {
    margin: 0px 5px 4px 0px;
    background-color: #83C4E5;
    float: left;
    margin-right: 10px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.49);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.49);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.49);
}

.deviceDetailsPanel {
    clear: both;
    display: block;
    padding: 8px 4px;
    /*margin: 0px 4px 4px 0px;*/
    position: relative;
    /*background-color: #83C4E5;*/
    /*background-color: rgba(236, 236, 238, 0.7)*/
    /*border: 1px solid #ACE3FF;*/
    min-height: 22px;
}

.deviceList {
    display: inline-block;
    /*width: 130px;*/
    overflow:hidden;    
    margin: 0px;
    padding: 0px;    
    float:left;
    font-size: 18px;
}

    .deviceList ul {
        background-color: rgba(204, 204, 204, 0.30980392156862746);
        margin: 4px 0px 4px 0px;
        padding: 0px 0px 0px 0px;
        list-style-type: none;
        height: 200px;
        overflow-y: scroll;
        border: 1px solid #b4b4b4;
        min-width: 120px;
    }

    .deviceList li {
        margin: 0px 0px 0px 0px;
        padding: 4px 4px 0px 4px;
    }

    .deviceList li.selected {
        background-color: lightgray;
        color: #000;
    }

.deviceListButton {
    width: 30px;
    height: 30px;
    margin: 4px;
    display: block;
    font-weight:bold;
    font-size:20px;
}

.devDetailsPanel
{
    height:100%;
    overflow:auto;
    display:none;
}

.tempSlider.ui-widget-content {
    height: 5px;
    top: -5px;
    background: #009FFF; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #009FFF, #ec2F4B); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #009FFF, #ec2F4B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /*background: -moz-linear-gradient(left, blue 0%, lightGrey 50%, red 100%);
    background: -webkit-linear-gradient(left, blue 0%, lightGrey 50%, red 100%);
    background: -o-linear-gradient(left, blue 0%, lightGrey 50%, red 100%);
    background: -ms-linear-gradient(left, blue 0%, lightGrey 50%, red 100%);
    background: linear-gradient(left, blue 0%, lightGrey 50%, red 100%);
    -pie-background: linear-gradient(left, blue 0%, lightGrey 50%, red 100%);*/
    display: inline-block;
    width: 100%;
    border: none;
}
.tempSlider .ui-slider-handle {
    background: none !important;
    border-radius: 50px;
    width: 20px !important;
    height: 20px !important;
    background-color: #01486c !important;
    border: 1px solid #ACE3FF !important;
    top: -9px !important;
    outline: none !important;
}
/*div.ui-widget-header{
    background:none;
    background-color:transparent;    
}*/

/* Popup*/
.popupBackgroud {
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.3);
    display:none;
    left: 0px;
    top:0px;
}
.popupContainer {
    padding: 15px;
}

.popupForm {
    /*background-color: #83C4E5;*/
    background-color: rgb(236, 236, 238);
    position: relative;
    border: 2px solid #01486C;
    color: #000;
}
#popup-bg .popupForm {
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    display: block;
    width: 450px;
    min-height: 170px;
    border: none;
}
#popup-bg .popupForm .popupTitle {
    text-align: center;
    padding: 5px 0px;
}
#popup-bg .popupForm .popup-message {
    position: absolute;
    display: flex;
    flex-flow: column;
    height: 60%;
    width: 100%;
    justify-content: center; 
    align-items: center;
}
#popup-bg .popupForm .popup-message span {
}
.popupTitle {
    text-align: center;
    background-color: #01486C;
    margin: 0px;
    padding: 6px 10px;
    color: #fff;
    font-size: 18px;
}
.popupForm .btnContainer {
    bottom: 10px;
    display: block;
    position: absolute;
    height: 25px;
    width: 430px;
    text-align: center;
    margin: 5px 10px;
}
.popupForm .btnContainer .deviceButton {
    min-width: 80px;
    margin: 0px 5px;
}
.popupFormRow {
    /*background-color:black;*/
}


/* cmaZonePanel plugin */

.zoneInfoForm {
    width: 320px;
    border: 2px solid #112934;
}
.zoneInfoForm .user-card {
    box-shadow: none;
}
.zoneInfoForm .group label::before {
    content: none !important;
}
.assignZoneDetails {    
    padding: 2px 2px 2px 8px;
    float: left;    
}

.zoneButton {
    width: 60px;
    display: inline-block;
    margin: 0px;
    padding-bottom:4px;
    float:right;    
}

.zoneInfoButton {
    float:none;
    width: 80px;
    margin-right: -1px;
    display: inline-block;
    padding-bottom:2px;
}

.zoneTypeButton {
    width:100px; 
    height:22px;
    z-index:1;
    position:absolute;
}

.zoneDetailsExpander {
    display: inline-block;
    background-image: url("images/shared.png");
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
}

.expandedZoneDetails {
    background-position: 0px -36px;
}

.expandedZoneDetails:hover
{
    background-position: -18px -36px;
}

.collapsedZoneDetails {
    background-position: 0px -54px;
}

.collapsedZoneDetails:hover
{
    background-position: -18px -54px;
}

/* Users panel*/
.changePassForm {
    width: 370px;
    font-size: 18px;
}
.changePassForm .popupFormRow {
    padding: 5px;
    margin: 15px;
}
.changePassLabel {
    padding:4px;
    display: inline-block;
}

.changePassInput {
    float: right;
    width:120px;
    margin-right: 4px;
}

.changePassButton {
    width:100px;
    margin-right:4px;
}
.inactive-user{
    color: #999;
}
 /* Extension Panels */
.card-panel {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.20);
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.74);
    height: 88px;
    width: 80%;
    overflow: hidden;
    transition: 375ms cubic-bezier(0.4, 0.0, 0.2, 1);
    /* to position in middle */
    margin: 10px auto;
    font-size: 18px;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.49);
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.49);
    cursor: pointer;
}
.card-panel .shareContent {
        display: block;
        padding: 10px 20px;
        color: #999;
}
.panelActive {
    height: auto;
}
    .panelActive .shareContent {
        display: none;
    }
    .panelActive .nonSharedContent {
        /* When closing, wait 75ms before fading and fade for longer */
        transition: 250ms;
        transition-delay: 75ms;
        opacity: 1;
        padding: 20px;
        color: #000;
        cursor: default;
    }

.nonSharedContent {
    transition: 75ms;
    opacity: 1;
}
.nonSharedContent a {
        color: #43ACE2;
}

.panel-header {
    width: auto;
    height: 30px;
    padding: 15px 10px 7px 10px;
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.12);*/
}
.panel-title {
    float: left;
    font-weight: bold;
}
.panel-time {
   float: right;
}
.panel-content {
    line-height: 1.5rem;
    height: auto;
}

/* Details Cards */
.user-card {
    position: relative;
    width: auto;
    padding: 15px;
    color: black;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
    margin-bottom: 9px;
    float: left;
    margin-right: 10px;
}
.jstree li.jstree-device.user-card {
    float: none;
    padding: 4px;
    margin: 4px 4px 4px 33px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
}

.ui-layout-pane-east > .properties-content .user-card{
    background-color: rgba(255, 255, 255, 0.5);
}

.tempClass {
    position: absolute;
    z-index: 1000;
    top: -1000px;
}
.user-card .group, 
.popupForm .group {
    position: relative;
    padding-bottom: 15px;
}
.user-card .group-text-info {
    height: 40px;
}
.popupForm .group {
        margin: 15px;
}
.user-card .card-title {
    font-size: 24px;
    padding-bottom: 15px;
}
         /* CARD SELECTORS */
.user-card .group-selector {
    margin-bottom: 45px;
}
.user-card .select-text {
    height: 35px;
    position: relative;
    background-color: transparent;
    width: 300px;
    font-size: 18px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #757575;
    padding-left: 2px;
}

    /* Remove focus */
.user-card .select-text:focus {
        outline: none;
        border-bottom: 1px solid rgba(0,0,0, 0);
}

/* Use custom arrow */
.user-card .select .select-text {
    appearance: none;
    -webkit-appearance: none
}

.user-card .select:after {
    position: absolute;
    top: 18px;
    right: 10px;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

/* LABEL ======================================= */
.user-card .select-label {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
}

/* active state */
.user-card .select-text:focus ~ .select-label {
    color: #5264AE !important;
    top: -20px;
    transition: 0.2s ease all;
    font-size: 14px;
}

.user-card .select-text:valid ~ .select-label, .user-card .select-text:disabled ~ .select-label {
    color: #999;
    top: -11px;
    transition: 0.2s ease all;
    font-size: 14px;
}
/* BOTTOM BARS ================================= */
.user-card .select-bar {
    position: relative;
    display: block;
    width: 300px;
}

    .user-card .select-bar:before, .user-card .select-bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 2px;
        position: absolute;
        background: #01486C;
        transition: 0.2s ease all;
    }

    .user-card .select-bar:before {
        left: 50%;
    }

    .user-card .select-bar:after {
        right: 50%;
    }

/* active state */
.user-card .select-text:focus ~ .select-bar:before, .user-card .select-text:focus ~ .select-bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.user-card .select-highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}
        /* CARD INPUTS */
.user-card input, .popupForm input {
        font-size: 18px;
        padding: 10px 10px 5px 5px;
        display: block;
        width: 285px;
        border: none;
        border-bottom: 1px solid #757575;
        background-color: transparent;
}
.user-card .group-checkbox input[type=checkbox] {
    top: -5px;
    width: 16px;
    height: 16px;
}
.user-card .group-checkbox input[type=checkbox]:before {
    border: 1px solid #01486C;
}
.user-card .group-checkbox input[type=checkbox]:disabled {
    border: 1px solid #4d4d4d;
    cursor: default;
}
.user-card .group-checkbox input[type=checkbox]:disabled:before {
        border: 1px solid #4d4d4d;
        cursor: default;
}
.user-card .group input[type=checkbox]:checked:after {
    top: 2px;
    left: 5px;
}
.user-card .group .terms-of-use a {
    position: relative;
    top: -4px;
    margin-left: 10px;
    color: #43ACE2;
}
.user-card .group textarea, .popup-content .group-textarea textarea {
    font-size: 18px;
    padding: 10px 10px 5px 5px;
    display: block;
    width: 285px;
    border: none;
    border-bottom: 1px solid #757575;
    background-color: #cccccc4f;
    font-family: Calibri, "PT Sans", sans-serif;
}
.user-card .group-textarea, .popup-content .group-textarea {
    margin-bottom: 0px;
}
.user-card .group-checkbox {
    padding-top: 10px;
    margin-bottom: 10px;
    height: 16px;
}
.user-card .text-info {
    font-size: 18px;
    padding: 10px 10px 8px 5px;
    display: block;
    width: 285px;
    border: none;
    background-color: transparent;
}

.user-card input:focus, .popupForm input:focus, .user-card textarea:focus {
    outline: none;
}

.group label {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    top: -50px;
    font-size: 14px;
}
.group-textarea label {
    top: -145px;
}
.group-textarea textarea:focus ~ .bar:after, .group-textarea textarea:focus ~ .bar:before {
    width: 50%;
}

.user-card input:focus ~ label, .popupForm input:focus ~ label, .user-card textarea:focus ~ label {
    color: #5264AE;
}

.user-card .bar, .popupForm .bar {
    position: relative;
    display: block;
    width: 300px;
}
.user-card .bar:before, .user-card .bar:after, .popupForm .bar:before, .popupForm .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #01486C;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
}
.user-card .bar:before, .popupForm .bar:before, .popup-content .bar:before {
        left: 50%;
}

    .user-card .bar:after, .popupForm .bar:after, .popup-content .bar::after {
        right: 50%;
    }

.user-card input:focus ~ .bar:before, .user-card input:focus ~ .bar:after {
    width: 50%;
}

.user-card .highlight, .popupForm .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/*.user-card input:focus ~ .highlight, .popupForm input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}*/
.user-card .detailButtonsContainer {
    padding-top: 5px;
}
/* ANIMATIONS FOR CARDS ================ */
@-webkit-keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}

/* USERS DEVICE LIST */
.user-card .deviceDetailsPanel .deviceList {
    color: #000;
}
.user-card .deviceDetailsPanel .deviceList span {
        color: #999;
        font-size: 18px;
        font-weight: normal;
        pointer-events: none;
        left: 5px;
        top: 10px;
        font-size: 14px;
}
    .user-card .deviceDetailsPanel .deviceList ul {
        margin-top: 5px;
        background-color: #cccccc4f;
    }
    .user-card .deviceDetailsPanel .deviceList ul li {
        color: #000;
        font-size: 18px;
        padding: 2px 4px;
    }
.user-card .deviceDetailsPanel .button-red {
    background-color: #43ACE2;
    width: 58px;
    height: 27px;
    position: relative;
    top: 45%;
    transform: translate(0%, 0%);
    padding: 0px;
    font-size: 21px;
}

.user-card .deviceDetailsPanel .button-red-vertical {
    background-color: #43ACE2;
    width: 27px;
    height: 58px;
    position: relative;
    top: 45%;
    transform: translate(0%, 0%);
    padding: 0px;
    font-size: 21px;
    display: table;
    cursor: pointer;
}

.user-card .deviceDetailsPanel .vertical {
    transform: rotate( 270deg );
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    left: -2px;
    position: relative;
    width: 0px;
    color: #fff;
}

.user-card-2 {
    margin-bottom: 10px;
}
    .user-card-2 .deviceList {
        float: none;
        padding-right: 5px;
        padding-left: 5px;
    }
.user-card-2 .deviceDetailsPanel, .user-card-3 .deviceDetailsPanel {
    padding: 0px;
    display: flex;
}
.user-card-2 .card-title, .user-card-3 .card-title {
    margin-bottom: 0px;
}
/* DEVICE CARD */
.dev-card-1 .text-input {
    width: 275px;
}
.dev-card-1 .group {
    height: 60px;
    margin-bottom: 0px;
}
.dev-card-1 .card-title {
    height: 45px;
}
.dev-card-1 .group-selector {
    margin-bottom: 10px;
}
.dev-card-1 .group-checkbox {
    height: 20px;
    padding-top: 30px;
    padding-bottom: 10px;
}
.dev-card-1 .group-checkbox input {
    display: inline-block;
}
.dev-card-1 .group-slider {
    margin-bottom: 40px;
}
.dev-card-1 .group-slider input, .dev-card-1 .group-slider input {
    text-align: center;
    width: 120px;
}
.dev-card-1 .group-slider input:disabled {
    border-bottom: 1px solid rgba(117, 117, 117, 0.31);
}
.dev-card-1 .group-slider input:last-of-type {
    position: absolute;
    left: 165px;
    top: 0px;
}
.user-card .group .group-double-inputs:last-of-type {
    position:absolute;
    left: 165px;
    top: 0px;
}
.user-card .group .dash {
    position: absolute;
    left: 144px;
    top: -4px;
    font-size: 24px;
}
.user-card .group .group-double-inputs input {
    text-align: center;
}
.dev-card-1, .dev-card-3, .dev-card-2 {
    min-width: 302px;
}
.dev-card-2 .group .group-double-inputs label {
    position: absolute;
    top: -12px;
}
.dev-card-2 .group .group-double-inputs:last-of-type label {
    left: -160px;
}
.dev-card-2 .group .group-double-inputs input:focus ~ label {
    z-index: 3;
}
.dev-card-2 .group .group-double-inputs select:focus ~ label {
        z-index: 3;
        color: #5264AE;
}
.dev-card-2 .group .group-double-inputs input {
    width: 120px;
}
.dev-card-2 .group .group-double-inputs .bar {
    width: 135px;
}
.outputStatePanel .dev-card-3 .card-title {
    margin-bottom: 40px;
}
.dev-card-3 .group-checkbox:first-of-type {
    margin-top: 45px;
}
.dev-card-3 .group-checkbox {
    padding-top: 10px;
    padding-right: 10px;
    margin-bottom: 0px;
    height: auto;
}
.dev-card-3 .group-checkbox input[type=checkbox] {
    top: -47px;
}
.dev-card-3 .group-checkbox:last-of-type {
    height: 0px;
}
.dev-card-3 .group-textarea label {
    top: -110px;
}
.dev-card-3 .group-textarea {
    margin-bottom: 10px;
}
/* device tooltips config */
.mapConfigContainer {
    overflow-y: auto;
    height: 100%;
    position: relative;
}
    .mapConfigContainer .devicesList {
        display: none;
    }
    .mapConfigContainer .devicesList th {
        border: 1px solid #01486c;
    }
    .mapConfigContainer .mapConfig-devices-hint {
        color: #000;
    }
    .mapConfigContainer .mt-context {
        width: auto;
    }
.deviceSelectorContainer span {
    margin-left: 8px;
}
.deviceSelectorContainer .mt-set-all-d-toggle {
    background-color: transparent;
    margin: 0 0 0 11px;
    padding: 0;
    float: left;
}
.mapConfigContainer .mt-img-button {
    margin-top: 2px;
    margin-left: 9px;
}
.mt-panel {
    position: relative;
    background-color: #83c4e5;
    margin: 0px 0px 0px 0px;
    overflow-y: auto;
    border: 1px solid #ace3ff;
    padding: 14px;
}
.mt-context
{    
    overflow-y: hidden;
    padding: 10px 4px;
    display: flex;
    align-items:flex-start;
}
.mapConfigContainer .mt-context {
    max-width: 980px !important;
    padding: 10px;
}
.mt-context-selector{
    flex: none;
}
.mt-device-list-table
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    overflow:auto;
}
.mt-properties-list tr {
    padding-right: 5px;
    padding-bottom: 10px;
    white-space: nowrap;
}
.mapConfigContainer .devicesList tbody td:nth-child(1) {
    padding-right: 10px;
}

.mapConfigContainer .devicesList tbody tr:hover {
    background-color: lightgray;
}

.tooltip-device-tick span
{
    background-image: url("jsTree/d_blue.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-color: transparent;
    display: block;
    width: 18px;
    height: 18px;
    margin: 0px 0px 0px 0px;
    position: relative;
    left: 0px;
    top: 0px;
}

.tooltip-device-enabled.tooltip-device-checked .tooltip-device-tick span
{
    background-position: -36px -36px;
}

.tooltip-device-enabled.tooltip-device-unchecked .tooltip-device-tick span
{
    background-position: 0px -36px;
}

.tooltip-device-disabled .tooltip-device-tick span
{
    background-position: 0px -18px;
}

.mapConfigContainer .devicesList tbody tr.tooltip-device-selected td {
    background-color: lightgray;
    color: #000;
}

/*.mt-device-list-table tbody tr.tooltip-device-selected:hover
{
    background-color: rgba(0, 0, 150, 0.7);
}*/
.mt-properties-list .deviceSelectorContainer .mt-checkbox-disabled {
    pointer-events: none;
    background-image: none;
    background-color: #e6e6e6;
    height: 17px;
    width: 17px;
}
.mt-properties-list .deviceSelectorContainer .mt-text-disabled {
    font-size: 18px;
    color: #999;
}
.mt-properties-list table
{
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    overflow: auto;
}
.mapConfig-card-1 table tr td:nth-child(2) {
    padding-right: 10px;
}
.mapConfig-card-1 table tr td:nth-child(3) {
    padding-left: 5px;
}
.mapConfig-card-1 table tr td:nth-child(2):hover {
    background-color: lightgray;
}
.mapConfig-card-1 table tr td:nth-child(4):hover {
    background-color: lightgray;
}

.mt-properties-list td.mt-properties-selected {
    background-color: lightgray;
    color: #000;
}

.mt-properties-list td.mt-tick span
{
    background-image: url("jsTree/d_blue.png");
    background-repeat: no-repeat;
    background-position: 0px -18px;
    background-color: transparent;
    display: block;
    width: 18px;
    height: 18px;
    margin: 0px 0px 0px 0px;
    position: relative;
    left: 0px;
    top: 0px;
}

.mt-properties-list td.mt-name
{
    width: 250px;
}

.mt-properties-list td.mt-tick
{
    padding-right: 10px;
    width: 18px;
}

.mt-properties-list td.mt-properties-enabled.mt-properties-checked.mt-tick span
{
    background-position: -36px -36px;
}

.mt-properties-list td.mt-properties-enabled.mt-properties-unchecked.mt-tick span
{
    background-position: 0px -36px;
}

    .mt-properties-list td.mt-properties-disabled {
        color: #999;
    }
        .mt-properties-list td.mt-properties-disabled span {
            background-image: none;
            background-color: #e6e6e6;
            height: 17px;
            margin: 0px 0px 0px 1px;
            width: 17px;
        }

.mt-set-all-d-button {
    background-image: url("jsTreeCmaExt/jsTree-dev-ext.png");
    background-repeat: no-repeat;
    background-position: -36px 0px;
    background-color: transparent;
    display: block;
    width: 19px;
    height: 19px;
    margin: 0px 0px 0px 0px;
    position: relative;
    left: 0px;
    top: 0px;
}
.mt-set-all-d-toggle span {
    background-image: url(jsTree/d_blue.png);
    background-repeat: no-repeat;
    background-position: 0px -18px;
    display: block;
    width: 17px;
    height: 17px;
    margin: 0px 0px 0px 0px;
    position: relative;
    left: 0px;
    top: 0px;
}

.tooltip-devices-checked span {
    background-position: -36px -36px;
}

.deviceSelectorContainer .toggleOptions {
    position: relative;
    left: -21px;
}
.deviceSelectorContainer span:nth-child(2) {
    position: relative;
    left: -20px;
    font-size: 18px;
}
.deviceSelectorContainer .toggleOptions-label {
    position: relative;
    left: 90px;
}
.mt-panel-buttons {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.mt-button {
    display: block;
    padding: 4px 4px 4px 4px;
    margin: 1px 0px 0px 0px;
}

.mt-set-all-d-button .mt-img-button
{
    background-position: -72px -36px;
}

.mt-unset-all-d-button .mt-img-button
{
    background-position: -90px -36px;
}

.mt-set-all-p-button .mt-img-button
{
    background-position: -72px -36px;
}

.mt-unset-all-p-button .mt-img-button
{
    background-position: -90px -36px;
}

.mt-text-button
{
    padding-left: 10px;
    padding-right: 10px;
}

/* progress-bar */

div.progress-bar {
    display: block;
    position: relative;
    width: 196px;
    height: 16px;
    background-color: transparent;
    border-style: solid;
    border-color: rgb(227, 229, 200);
    border-width: 2px;
}

div.progress-bar-value {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 192px;
    height: 12px;
    background-color: #83c4e5;
}

/*div.progress-bar-value.progress-bar-value-working
{
    background-color: rgb(217, 232, 16);
}*/

div.progress-bar-value.progress-bar-value-success {
        background-color: #83c4e5;
}

div.progress-bar-value.progress-bar-value-error
{
    background-color: rgb(217, 21, 21);
}

/* refuel cards styles */

.rc-tabs-div
{
    padding-top: 14px;
}

.rc-tabs-div span {
        position: relative;
        padding: 10px;
        background-color: #ececee;
        color: #999999;
}

.rc-tabs-div span.selected {
    background-color: #43ACE2;
    color: #fff;
}

.rc-tabs-div span:hover {
    background-color: #43ACE2;
    color: #fff;
}

.rc-refuels-div
{
    top: 45px !important;
    /*background-color: gray;*/
}

.rc-imports-div
{
    top: 45px !important;
    /*background-color: green;*/
}

.rc-file-div
{
    background-color: rgba(0, 0, 0, 0.5);
}

.rc-switch-button
{
    background-color: blue;
}

.rc-open-file-panel-button
{
    display: block;
}

.rc-file-div input.file
{
    position: absolute;
    top: 4px;
    left: 4px;
    width: 400px;
    height: 20px;
}

.rc-file-div input.button
{
    position: absolute;
    top: 4px;
    left: 408px;
    width: 200px;
    height: 20px;
}

.rc-file-div select.select
{
    position: absolute;
    top: 28px;
    left: 4px;
    width: 400px;
    height: 20px;
}

.rc-file-div select.select
{
    position: absolute;
    top: 28px;
    left: 4px;
    width: 400px;
    height: 20px;
}

.rc-file-div div.progress-bar
{
    position: absolute;
    top: 28px;
    left: 408px;
}

/* table look and feel - black/grey */
.dataTables_wrapper {
    overflow: auto;
}
table.black-grey-table-theme {
    font-family: Calibri, "PT Sans", sans-serif;
    font-size: 18px;
    white-space: nowrap;
    border-collapse: collapse;
    border: none;
    border-spacing: 1px;
    color: #000;
}

table.black-grey-table-theme tbody {
    font-size: 18px;
}

    table.black-grey-table-theme thead th {
        border: none;
        color: #fff;
        font-size: 18px;
        text-align: center;
        background: #01486C;
        padding: 10px;
        margin-left: 5px;
        margin-top: 5px;
    }

table.black-grey-table-theme tbody tr {
        vertical-align: top;
        text-align: center;
        background: rgb(225, 225, 225);
}
table.black-grey-table-theme tbody tr td:first-of-type {
        text-align: left;
        padding-right: 20px;
}

table.black-grey-table-theme tbody tr:nth-child(even) {
            background: #ececee;
}

table.black-grey-table-theme tbody tr:hover {
        background: rgb(211, 211, 211);
}

table.black-grey-table-theme tbody td
{
    border: none;
    padding: 3px;
    vertical-align: top;
    text-align: center;
}

/*Konfiguracja aplikacji*/
.appConfigContainer .deatailsFrame .group-selector select, .appConfigContainer .deatailsFrame .group-selector .select-bar {
    margin-left: 50px;
    width: 250px;
    top: 10%;
}
.appConfigContainer .deatailsFrame .group-selector .upIcon {
    margin-top: 10px;
    margin-left: 5px;
}
.appConfigContainer .group label {
    left: 0px;
}
.appConfigContainer .group-textarea {
    margin-top: 20px;
    margin-bottom: 10px;
}
.appConfigContainer .categoryContainer .deviceList span {
        color: #999;
        font-weight: normal;
        pointer-events: none;
        left: 5px;
        top: 10px;
        font-size: 14px;
}
.appConfigContainer .categoryContainer .app-span-title {
        color: #999;
        font-weight: normal;
        pointer-events: none;
        left: 5px;
        top: 10px;
        font-size: 14px;
}
.appConfigContainer .sectionTitle:first-of-type {
    margin-top: 0px;
}
.appConfigContainer .group-colorpicker {
    height: 20px;
}
.appConfigContainer .group-colorpicker label{
    top: -40px
}
.categoryContainer .group:first-of-type {
    margin-top: 20px;
}
.categoryContainer .group {
    height: 40px;
}

.pointCategoryButton {
    display: inline-block;
    padding: 6px 8px;
    margin-bottom: 4px;       
}

.sectionTitle {
    background-color: #112934;
    padding: 11px 0px 11px 4px;
    display: block;
    clear: both;
    margin-top: 2px;
}

.categoryContainer {
    width: 100%;
    /*padding: 10px 0px 0px 0px;*/
    /*border: 1px solid #ace3ff;*/
    display: inline-block;
    /*background-color: #83c4e5;*/
}

.sectionContent {
    margin: 0px 0px 10px 10px;
}

/*.tabPanelContent {
    margin-left:4px;
    margin-right:4px;
    border-radius:4px;
}*/

span.upIcon{
    display: inline-block;    
    background-repeat:no-repeat;
    position: absolute;
    width:30px;
    height:40px;
}

/*Common*/

.deatailsFrame {
    /*-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border:1px solid white;
    padding:4px*/
}
.deatailsFrame .group-textarea {
    height: auto;
}
.detailsLabel {
    display:inline-block;
    text-align:right;
    width:50px;
}

.masterSection {
    overflow: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 200px;
    position: absolute;
    background-color: rgba(230, 230, 230, 0.8);
    font-size: 18px;
    color: #000;
}

.detailsSection {
    overflow: auto;
    top: 0px;
    bottom: 0px;
    left: 200px;
    right: 0px;
    position: absolute; 
    /*border-left: 6px solid rgba(0, 0, 0, 0.40);*/
}

.errorSection{
    padding: 4px 0px;
    margin: 4px 0px 10px 0px;
}

.hidden-item{
    display: none;
}

.rent-data-table .circle {
      width: 16px;
      height: 16px;
      border-radius: 8px;
      background-color: #14b514;
      border: 1px solid black;
      margin: 2px 0px 2px 0px;
      display: inline-block;
    }
.rent-data-table .circle.yellow{
      background-color:rgb(207, 215, 27);
    }
.rent-data-table .circle.red{
      background-color:#980000;
    }

/* Konfiguracja konta */
.acc-config-card-1 .group:nth-of-type(5) {
    margin-bottom: 0px;
}
.acc-config-card-2 ul {
    min-height: 285px;
}
.acc-config-card-2 .card-title {
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.acc-config-card-2 .deviceDetailsPanel {
    padding: 5px 0px 0px 0px;
}


/*DevExpress Reports*/
.devReportViewerWrapper {
     overflow-x:auto;
     overflow-y:scroll;
     background-color:white;
}

.devReportWrapper {
     overflow-x:hidden;
     overflow-y:visible;
     background-color:white;
}

.devToolbarWrapper {
     overflow-x:visible;
     overflow-y:visible;
     background-color:white;
}

/* date time picker styles */

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: 0.4 !important;
}


/* DeltaCurVehLoc */

.deltaCurVehLoc table {
    text-align: center;
    background-color: transparent;
    font-size: 24px;
    width: 100%;
}

.deltaCurVehLoc td, .deltaCurVehLoc th {
    border: 1px solid gray;
    padding: 4px;
    text-align: center;
    background-color: #ececee;
    font-size: 24px;
    color: #000;
}
/*.deltaCurVehLoc tr:nth-child(even) td {
    background-color: #83c4e5;
}*/
.deltaCurVehLoc2 td {
    background-color: transparent !important;
}

.deltaCurVehLoc2 td, .deltaCurVehLoc2 th {
    border: 0px;
    padding: 4px;
    background-color: transparent;
}

tr.deltaCurVehLoc3 {
    vertical-align: top;
}



div.deltaCurVehLoc2  {
    border: 0px;
    max-height: 374px;
    display: block;
    overflow-y: auto;
    vertical-align:top;
}

.delta-dev-desc{
    font-size: 14px;
    display: block;
    margin-top: -6px;
}

.delta-dev-name{
    display:block;
}
/*.delta-table, .delta-th, .delta-td {
  border: 1px solid black;
}*/

/* contact */
.contact {
    margin-top: 4px;
    overflow: auto;
    height: 100%;
}
.contact a {
    color: #43ACE2;
}
    .contact .user-card {
        min-height: 230px;
    }
    .contact .group-contact-info {
        height: 70px;
        margin-bottom: 0px;
        margin-top: 20px;
    }
    .contact .group-contact-info label {
        top: -75px;
    }
    .contact .group-contact-info .text-info {
        padding: 2px 5px;
    }
    .contact .group-text-info-wide {
        height: 55px;
    }
    .contact .group-text-info-wide label {
        top: -70px;
    }
    .contact .group-contact-phones {
        height: 100px;
        padding-top: 10px;
    }
    .contact .group-contact-phones .text-info {
        padding: 0px 5px;
    }
    .contact .group-contact-phones label {
        top: -110px;
    }
    .contact .group-contact-mobile-badges span {
        padding: 0px 10px 0px 5px;
    }
    .contact .group-contact-mobile-badges {
        margin-top: 35px;
        height: 55px;
    }
    .contact .group-contact-mobile-badge {
        height: 70px;
    }
    .contact .group-contact-mobile-badges label {
        top: -85px;
    }
    .contact .group-contact-mobile-badge label {
        top: -95px;
    }
    .contact .group-contact-mobile-badges .badge-apple {
        width: 130px;
    }
    .contact .group-contact-mobile-badges .badge-google {
        position: absolute;
        top: -7px;
        margin-left: 5px;
    }
    .contact .badge-google {
        margin-left: -10px;
        width: 150px;
    }
    .contactForm {
        height: 100%;
        overflow-y: auto;
    }
.contactForm .detailsEntry {
    background-color: #43ACE2;
}
.contactForm .user-card {
    margin-top: 4px;
    width: 306px;
}
.contact-card-1 a {
    color: #43ACE2;
}
.margin-top{
    margin-top: 14px;
}

.desc-label{
    vertical-align: top;
}

.desc-container{
    display:block;
}

.contact-button{
    float:right;
    padding: 0px 14px 4px 14px;
    margin-left: 4px;
}

.send-to-me{
    margin: 0px 4px 0px 0px;
    position:relative;
    top:2px;
}

.contact-input{
    width:130px;
}

.email-input{
    width:200px;
}

.subject-desc{
    color: #999;
    position: relative;
    display:none;        
    font-size: 11px;
    width: 300px;
    margin: 4px 15px 0px 5px;
}

.contact-details-container{
    float:left;
}

.contact-desc-label {
    color: #999;
    font-size: 14px;
    margin-left: 5px;
}

.contact-expect-label {
    color: #999;
    font-size: 14px;
    margin-left: 5px;
    display: none;
}

.contact-copy-label{
    font-size: 14px;
    position: relative;
    cursor:pointer;
    left: 25px;
    top: -2px;
    color: #999;
}

.contact-card-2 .group-attachments .attachments{
    visibility: hidden;
    height: 0px;
}
.contact-card-2 .group-attachments .contact-button {
    float:unset;
}
.file-entry{
    font-size: 18px;
    padding-bottom: 8px;
    display: block;
    position: relative;
    top: -10px;
    margin-left: 5px;
}
.contact-card-2 .group .file-entry .contact-button {
    float: right;
}
.contact-card-2 .group-textarea .bar {
    top: -33px;
    width: 312px;
}
.contact-card-2 .group-checkbox input[type=checkbox] {
    top: 15px;
}
.contact-card-2 .group-checkbox .contact-button {
    position: relative;
    top: -4px;
}

/* WORKTIME CARD */
.worktime-card {
    display: grid;
}
.worktime-title {
    color: #01486C;
    font-weight: bold;
}
.worktime-value {
    padding-top: 2px;
}

/* User Acc */
.user-card .theme-selector ul {
    list-style: none;
    /*display: inline-flex;*/
    padding-left: 0px;
    margin: 0px;
    width: 310px;
}

    .user-card .theme-selector ul li {
        padding: 5px;
        cursor: pointer;
    }

        .user-card .theme-selector ul li:hover {
            background-color: lightgray;
        }

        .user-card .theme-selector ul li label {
            position: unset;
            font-size: 14px;
            color: #999;
            display: block;
            margin-bottom: 6px;
        }

    .user-card .theme-selector ul .theme-selected {
        border-bottom: 3px solid #43ACE2;
    }

    .user-card .theme-selector ul li img {
        /*height: 100px;*/
        border: 1px solid #757575;
    }

.acc-config-card-3 .group-selector {
    margin-bottom: 5px;
}

/* INTEGRATIONS */
.group-selector select {
    margin-top: 10px;
}

/* NAVIGATION TAB PANELS */
.tabsNavigation {
    width: 100%;
    display: inline-block;
    margin-top: 4px;
}

.tabsNavigation ul {
    float: left;
    color: #999999;
    margin: 0px;
    padding: 0px;
    list-style: none;
    background-color: #ECECEE;
    display: inline-flex;
}

.tabsNavigation ul .active-tab {
    background-color: #01486C;
    color: white;
}

.tabsNavigation ul li {
    border-right: #CCCCCC 1px solid;
}

.tabsNavigation ul li a {
    display: inline-block;
    cursor: pointer;
    padding: 4px 8px 5px 8px;
    margin: 0px;
    height: 18px;
    min-width: 90px;
    font-size: 16px;
    margin-right: 4px;
}

.tabsNavigation ul li:hover {
    background-color: #43ace2;
}

.tabDetailsContainer {
    display: none;
}

.active-container {
    width: 100%;
    display: block;
    overflow: auto;
}



/* USER REPORTS SETTINGS */
.reportsPanel {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
}


.reportsPanel .reportListContainer {
    order: 1;
}
.reportsPanel .reportAssignBtn {
    order: 2;
}
.reportsPanel .favoriteListContainer {
    order: 3;
}
.reportsPanel .reportPlacementBtn {
    order: 4;
}





/* DOTS */
.dot {
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: .125rem solid;
    display: inline-block;
    background-color: currentColor;
}

.dot-green {
    color: limegreen;
}

.dot-red {
    color: orangered;
}

.dot-yellow {
    color: gold;
}

.dot-transparent {
    color: transparent;
}

/* PUESC */
.card-title-puesc .close-btn {
    cursor: pointer;
    right: 10px;
    position: absolute;
    width: 14px;
    height: 14px;
    background-image: url(./Map/Buttons/cancel-black.png);
    top: 22px;
}

    .card-title-puesc .close-btn:hover {
        background-image: url(./Map/Buttons/cancel-black-hover.png);
    }

.puesc-legend .close-btn {
    cursor: pointer;
    right: 10px;
    position: absolute;
    width: 14px;
    height: 14px;
    background-image: url(./Map/Buttons/cancel-black.png);
    top: 19px;
}

    .puesc-legend .close-btn:hover {
        background-image: url(./Map/Buttons/cancel-black-hover.png);
    }

.puesc-legend p {
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
}

.puesc-legend a {
    color: #43ACE2;
}