/*
 **********************************************************************************
 * Copyright (C) 2017-2020 by KEYARK, INC. - All Rights Reserved.
 * All information contained herein is proprietary and confidential to KEYARK, INC.
 * Any use, reproduction, or disclosure without the written
 * permission of KEYARK, INC. is prohibited.
 * Written by Victoria Pinchuk <vpinchuk@keyark.com>
 **********************************************************************************
*/
body, html {
	font-family: Arial, Helvetica, sans-serif;
    height: 100%; 
    width:100%;
    text-align: left; 
    margin: 0;
    padding: 0;
    border: none;
    cursor: default;
    background-color: #f0f0f0;
    overflow:hidden;
}

input:focus, textarea:focus, select:focus, a:focus, a:focus > *,[contenteditable="true"]:focus, 
input:active, textarea:active, select:active, a:active, a:active > *,[contenteditable="true"]:active {
    outline: none;
}

strong, select {
	font-family: Arial, Helvetica, sans-serif;
}

mark, .mark {
	background-color: #ffffcc !important;
    outline: 1px solid #ffff00 !important;
}

textarea, .textarea {
	font-family: Arial, Helvetica, sans-serif;
	white-space: pre-wrap;
}

a {	text-decoration: none;}
li {
	list-style-type:none;
	text-align:left;
	padding: .1em .6em;
	margin: .2em;
	cursor: default;
}
hr {
    margin: 0;
}

select option {
	background-color: #f0f0f0;
}

.shadow-light {
        box-shadow: 0 1px 6px #ddd;	
-webkit-box-shadow: 0 1px 6px #ddd;
   -moz-box-shadow: 0 1px 6px #ddd;
}

.shadow {
		box-shadow: 3px 3px 3px 0px #ccc;
-webkit-box-shadow: 3px 3px 3px 0px #ccc;
   -moz-box-shadow: 3px 3px 3px 0px #ccc;
}

.shadow_stroke {
		box-shadow: 1px 1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
   -moz-box-shadow: 1px 1px 1px 1px #ccc;
}

.stroke {
	  text-shadow: -.1em -.1em 0 #333, .1em -.1em 0 #333, -.1em .1em 0 #333, .1em .1em 0 #333;
}

.wrap-text{
	white-space: pre-wrap;
}
.wrap-space {
	white-space: normal;
}


.fill {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
}

.dis {color: #999; }

.expired, .hover:hover {
    opacity:.8;
}

.flexcol {
	    display: flex;
	    display: -webkit-flex; 
    	flex-flow: column; 
-webkit-flex-flow: column;
}

.flexrow {	
	    display: flex;
	    display: -webkit-flex; 
	    flex-flow: row;  
-webkit-flex-flow: row;
}

.grow {
		flex-grow: 1;
-webkit-flex-grow: 1;
		flex-basis: auto;
-webkit-flex-basis: auto;
}

.grow.equal {
		flex-basis: 0;
-webkit-flex-basis: 0;
}

.noshrink {
		flex-shrink: 0;
-webkit-flex-shrink: 0;
		flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}

.wrap {
		flex-shrink: 0;
-webkit-flex-shrink: 0;
		flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

.shrink {
		flex-shrink: 1;
-webkit-flex-shrink: 1;
}

.content-width {
		flex-basis: auto;
-webkit-flex-basis: auto;
}

.scrollable { 
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.box, /* .lpanel, .npanel, */ .cpanel, .panel {overflow: hidden;} /* for proper scrolling: very outer box height = 100% and overflow=hidden for all parents  */

.lpanel, .cpanel, .npanel, .panel {
	margin: 0;
	padding: 0; 
	font-size: small;
	border: 1px solid #ccc;
}

.lpanel, .npanel {margin-right: 1px;} /* double line imitation for resizable*/

.lpanel, .cpanel {
	background-color: white;
	left:0 !important; 
}

.cpanel {
	border: none;
    overflow-y:scroll; 
}

.panel {background-color: #f0f0f0; width:100%}
.npanel {background-color: #f6f6f6;} /*#f9f9ff;*/

.block {display:block;}


.link {
	font-family: "Times New Roman", Times, serif;
    text-decoration: underline;
	color: #0066ff;
    font-style: italic;
    cursor: pointer;
}

.link:hover {opacity: .7;}

.dropdown {
    position: relative;
    display: inline-block;
    overflow: visible;
    text-align: left;
    z-index: 92;
}

.dropdown-content, .sub-content {
	position: absolute;
    display: none;
    padding: 0;
    margin: 0;
    z-index:93;
    box-shadow: 0px .2em .3em 0px #ccc;
}


.dropdown-content {
	background-color: white;
    font-weight: normal;
    padding: .5em 0;
    border-radius: 0 0 .3em .3em;
    cursor: default;
    max-height: 25em;
}

#dbschema + .dropdown-content {
	overflow: auto;
	max-height: 25em;
}

span.dropdown-content {
	display: block;
	color: #3366cc;
	border: 1px solid #ccc;
	padding: .5em;
}

.border { border: 1px solid #c0c0ff !important;}

.border:active, .border:focus {
	border: 1px inset #ddd !important;
	border-bottom-color: #0000ff !important;
}

.custom-icon.decrease, 
.custom-icon.increase {
	padding: 0;
	color: #3366cc;
}

.custom-icon.decrease.dis, 
.custom-icon.increase.dis {
	color: #ccc;
}

.sample {
	font-family: Arial, Helvetica, sans-serif;
	color: #3366cc;
	padding: 0 .3em 0 .2em;
	font-weight: bold;
}

.header, .footer {
	background-color: #004080;
	margin:0;
	padding: 0; 
	text-align: center;
}

.main {
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 0 0 .5em .5em;
}

.buttons {
    margin: 0;
    padding: .1em 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    align-items: center;
}

p.buttons {
	border: 1px solid #ccc;
    border-bottom: none;
    background-color: #ddd; 
/*     background-image: linear-gradient(300deg, #999 5em, white, #ddd 5.3em); */
}

/*.buttons > *:not(input) {
    margin-top: -2px;
}*/

.buttons .delimiter {
    margin: 0 1em;
    border-right: 1px solid #999;
    height: 1.2em;
}

.ptitle {
	display: inline-block;
	margin: 0;
	margin-top: -1px;
	color: white;
    font-size: medium;
    font-weight: bold;
	text-align: right;
	padding: .2em .4em 0 2.4em;
	text-shadow: 1px 1px 1px #333;
	background-image: linear-gradient(300deg, #999 82%, white 83%, #999 87%,#ddd 88%);
}

.ptitle:not(.dis):hover,  /* .custom-icon.refresh:hover, */ .custom-icon.extra:hover {
	text-shadow: 1px 1px 1px white;
	color: #666;
	cursor: pointer;
}

.ptitle.dis {
	cursor: default;
	text-shadow: none;
	color: white;
	font-weight: normal;
}

.plmin {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	color: #004080;
	white-space: nowrap;
	padding: .1em .5em .1em .3em;
	background-image: linear-gradient(to bottom, #ccc, white, white, #ccc); 
	border: 1px outset #ccc;
	border-radius: .2em;
	font-size: small;
	cursor: pointer;
}

.plmin.nolabel { padding-right: .2em;}

.plmin + .plmin {margin-left: .5em;}


.plmin.dis, .plmin.dis:hover {
	color: #999999;
	cursor: default;
}

.plmin:not(.dis):hover {
	border: 1px solid white;
	color: #336699;
	text-shadow: 1px 1px 1px white;
	background-image: linear-gradient(to bottom, white, #ccc, #ccc, white); 
}



div.msg {
	position: absolute;
	top:0;
	left: 0;
	right:0;
	margin: 0;
	z-index: 101;
	text-align: center;
}
div.inptxt {
	display: table;
	margin: .2em 1em; 
	padding-left: .6em;
	white-space: nowrap;
	background-image: linear-gradient(to right, #ccc, white .5em);	
	border: none; border-bottom: 1px solid #999;
}

div.inptxt > input[type=text]  {
	display: inline-block;
	margin-left: .2em;
	padding-left: .1em;
	border: 1px solid transparent;
	min-width:13.5em;
	font-size: 1em;
}

div.inptxt > input:focus {
	border: 1px solid white;
}
/* Dialog custom style*/
.no-close.ui-dialog{
	background-color: white;
}
.no-close.ui-dialog .ui-dialog-titlebar-close {
	display: none;
}
.no-close.ui-dialog .ui-widget-header {
	background: #004080;
	color: white;
}

.no-close.ui-dialog textarea {
	font-size: .9em;
	background-color: white;
    width: 100%;
    height: 100%;
    padding: .5em;
    margin-top: .5em;
    overflow: auto;
}

#message {
	display: inline-block;
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: large;
	padding: 0.5em;
}

.warning {
	background-color: #ffffcc;
	color: #666600;
}

.error {
	background-color: #ffcccc;
	color: #cc0000;	
}


.inprogress_icon { /*tab icon rotating*/
	display: inline-block;
	position: relative;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

.inprogress_panel { /* simplified imitation of windows_progress_cursor <div class='inprogress_panel'><div class='spinner'></div></div>*/
	position: absolute;
    width: 99%; /* <100 to do not block panel resizing lines */
    left: .5%;
    height: 100%;
	background-color: rgba(255,255,255, .5);
	z-index:91;
}

.spinner, .spinner_text, .spinner_cancel {
	position: absolute;
	top: 20%;
	left: 40%;
/*   border-image: linear-gradient(to left, #33ccff 1%, #3399ff 50%, #33ccff 100%)  */
/*                 100% 0 100% 0/3px 0 3px 0 stretch; */ 
}

.spinner {
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	-webkit-animation: spin 1s linear infinite; /* Safari */
	animation: spin 1s linear infinite;
}

.spinner_text, .spinner_cancel {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 1em;
    padding-right: .5em;
    vertical-align: middle;
    text-align: center;    
}

.spinner_text { 
	padding-top: 1em;
	width: 4.2em;
}
.spinner_cancel { 
	padding-top: .4em;
	width: 3em;
}

.spinner_text .percent {
    background-color: white;
}
.spinner_text .cancel, .spinner_cancel .cancel {
    float:right;
}

.progress_cursor {
	cursor: progress !important;
}

.spinner.big {
	width: 2.4em;
	height: 2.4em;
}

.insert_progress {
    position: relative;
    top: 4%;
    left: 0;
    padding: 0;
    margin: 0 3em;
	text-align: center;
    border: 1px solid #999;
    border-radius: .5em;
    background-color: #ddd;
    background: linear-gradient(#ddd 10%, white 30%, white 70%, #ddd 90%);
/*     background-size: 200% 100%;
    animation: gradient 5s linear infinite;
    -webkit-animation: gradient 5s linear infinite; */
}
.bar {
	height: 1.6em;  
	width:.1em; 
	background-color: #33ccff;
	background: linear-gradient(#3399ff, #33ccff 50%, #3399ff);
/*   background: linear-gradient(120deg, #3399ff 30%, #33ccff 40%, white 50%, #33ccff 60%, #3399ff 70%);
    background-size: 200% 100%;
    animation: gradient 15s linear infinite;
    -webkit-animation: gradient 15s linear infinite; */ 
}

.bold {	font-weight: bold;}

.italic {font-style: italic;}

.color-green {color: green;}

.color-red { color: red;}
.color-navy { color: #000099;}

.blue {
	border: .3em solid #3399ff;
	border-top-color: #33ccff;
}

.reverse {
	border: .3em solid #33ccff;
	border-top-color: #3399ff;
}

.purple {
	border: .3em solid #9900ff;
	border-top: .3em solid #cc99ff;
}

.clipboard {
	position: absolute;
    padding: .3em;
    border-radius: .5em;
    box-shadow: 0 0 .5em #999;
}

.clipboard-transfer {
	/* background-color: white;
	opacity: .5;*/
	border: 1px solid #999;
	border-radius: .5em;
}

.graybox {
    background-color: #999;
    color: white;
    border: 1px solid white;
}

.whitebox {
    background-color: white;
    color: black;
    border: 1px solid #ccc;
}

.rotate90 {
	display: inline-block;
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg); /* Standard syntax */
}

.rotate45:after, .rotate45:before {
	display: inline-block;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); /* Standard syntax */
}
.rotate315:after, .rotate315:before {
	display: inline-block;
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari */
    transform: rotate(-45deg); /* Standard syntax */
}  
.rotateCW:before, .rotateCW:after {
	display: inline-block;
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg); /* Standard syntax */
}


.flipH:before {
	display: inline-block;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg); /* Standard syntax */
}

.rotateCCW:before, .rotateCCW:after {
	display: inline-block;
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg); /* Standard syntax */
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes gradient {
	0% {background-position: 5% 50%;}
	50% {background-position: 95% 50%;}
	100% {background-position: 5% 50%;}
}
/* Safari */
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes gradient {
	0% {background-position: 5% 50%;}
	50% {background-position: 95% 50%;}
	100% {background-position: 5% 50%;}
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

@-webkit-keyframes zoomout {
  from {-webkit-transform:scale(1)} 
  to {-webkit-transform:scale(0)}
}

@keyframes zoomout {
  from {transform:scale(1)} 
  to {transform:scale(0)}
}


/*
 **********************************************************************************
 * Copyright (C) 2017-2020 by KEYARK, INC. - All Rights Reserved.
 * All information contained herein is proprietary and confidential to KEYARK, INC.
 * Any use, reproduction, or disclosure without the written
 * permission of KEYARK, INC. is prohibited.
 * Written by Victoria Pinchuk <vpinchuk@keyark.com>
 **********************************************************************************
*/