/*                                  █████████   ██  ██  ██
                                                ██  ██  ██
                                    █████████   ██  ██  ██
 ███████████████  ███████                       ██  ██  ██       █████
 ███████████████  ███████████       █████████   ██  ██  ██      ██     ███
       ███        ███      ███                                 ███     ███
       ███        ███       ██     ██████████     ████████   ████████ ████████
       ███        ███      ███   ████           ███      ███   ███     ███
       ███        ███████████    ████           ███       ██   ███     ███
       ███        ████████         ████████     ██        ███  ███     ███
       ███        ███                    ████   ██        ██   ███     ███
       ███        ███                    ████   ███      ███   ███     ███
       ███        ███            ██████████      ██████████    ███      ██████
                                                    ████                  ████
	TPsoft 2000-2017
	CSS Document for KancelTPsoftorg

	posledna editacia:
                    2017-01-22 23:48  Igor

    Sive pozadie    #333
    Svetla modra    #babdfc      186,189,252
           Modra    #545BFE      84,91,254
     Tmava modra    #2a2d80

     uctovnictvo    #544794
       zakaznici    #588535
        projekty    #006296
serverove sluzby    #C06C28
      monitoring    #747474

*/

.hide {
	display: none !important;
}
.messages-error,
.messages-warning,
.messages-ok,
.messages-info {
	padding: 5px;
	padding-left: 30px;
	color: black;
}
.messages-error {
	border: 1px red solid;
	background-color: #fcc;
}
.messages-error .fa-ban {
	position: absolute;
	left: 10px;
    top: 10px;
	color: #a00;
}
.messages-warning {
	border: 1px #ffa500 solid;
	background-color: #FFDD88;
}
.messages-warning .fa-warning {
	position: absolute;
	left: 10px;
    top: 10px;
	color: #ffa500;
}
.messages-ok {
	border: 1px green solid;
	background-color: #cfc;
}
.messages-ok .fa-check {
	position: absolute;
	left: 10px;
    top: 10px;
	color: #0a0;
}
.messages-info {
	border: 1px blue solid;
	background-color: #ccf;
}
.messages-info .fa-info-circle {
	position: absolute;
	left: 10px;
    top: 10px;
	color: #00a;
}
.fa-check.colored,
.green {
	color: #0a0;
}
.fa-ban.colored,
.red {
	color: #F22;
}
.fa-warning.colored,
.orange {
	color: #ffa500;
}
.fa-info-circle.colored,
.blue {
	color: #22f;
}
.lightblue {
	color: #aaf;
}

table th,
table td {
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.hide {
	display: none;
}
.container-100 {
	width: 100%;
	height: 100%;
	display: table;
	text-align: center;
}
.cell-middle {
	display: table-cell;
	vertical-align: middle;
}
.cleaner {
	height: 50px;
}
.left {
	float: left;
}
.right {
	float: right;
}
.center {
	text-align: center;
}
.width100 {
	width: 100%;
}
.bold {
	font-weight: bold;
}
.breaker {
	display: block;
	clear: both;
}
.messages-error {
	border: 1px red solid;
	background-color: #fcc;
	/*background-image: url(../images/error.png);*/
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding: 5px;
	padding-left: 30px;
}
.messages-ok {
	border: 1px green solid;
	background-color: #cfc;
	/*background-image: url(../images/ok.png);*/
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding: 5px;
	padding-left: 30px;
}
.green {
	color: #00BB00;
}
.pointer {
	cursor: pointer;
}
.wrap {
	white-space: wrap;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
}

table {
	width: 100%;
}

table th {
	background-color: #34323F;
	color: #808080;
}

table th,
table td {
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

html,
body {
	margin: 0px;
	padding: 0px;
	background-color: #333;
	background-image: url(../images/background3.png);
	color: white;
	overflow-x: hidden;
}
hr {
	border-color: #808080;
}

/* --------------------------------------------------------------------------
	D E B U G
   -------------------------------------------------------------------------- */
.br { border: 1px red solid; }
.bg { border: 1px green solid; }
.bb { border: 1px blue solid; }
.by { border: 1px yelow solid; }
.bm { border: 1px magenta solid; }

/* --------------------------------------------------------------------------
	  Globalne
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
	color: /*#545BFE;*/ white;
}
.line-h1,
.line-h2,
.line-h3,
.line-h4 {
	line-height: 60px;
}
@media(max-width:676px) {
	h1 {
		line-height: 30px !important;
		font-size: 25px;
	}
	h2 {
		line-height: 25px !important;
		font-size: 20px;
	}
}
.row {
	margin-left: 0px;
	margin-right: 0px;
	clear: both;
}
a,
a:visited {
	color: rgba(255,255,255,0.5);
}
a.normal,
a.normal:visited {
	color: rgba(255,255,255,1);
}
a:hover,
a:focus {
	text-decoration: none;
    color: rgba(255,255,255,1);
}

/* --------------------------------------------------------------------------
      Prihlasovacia obrazovka
   -------------------------------------------------------------------------- */
#signin {
	display: inline-block;
	text-align: left;
}
#signin h2 {
	color: #08660E;
}
.form-signin {
	width: 300px;
}

/* --------------------------------------------------------------------------
	  Uvodna obrazovka
   -------------------------------------------------------------------------- */
.top {
	margin-top: 50px;
	border-bottom: 1px #545BFE solid;
	padding-bottom: 20px;
}
@media(max-width: 575px) {
	.top {
		margin: 0px;
	}
	.top h1 {
		font-size: 120%;
	}
}
.btn,
.btn:visited {
	color: white;
	cursor: pointer;
}
.btn-primary,
.btn-primary:visited {
	color: white;
	background-color: #545BFE;
	border-color: #2a2d80;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus {
	color: #545BFE;
	background-color: white;
	border-color: #545BFE;
}
.btn-secondary,
.btn-secondary:visited {
	color: white;
	background-color: #2a2d80;
	border-color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:active:focus {
	color: #2a2d80;
	background-color: white;
	border-color: #000;
}
.btn-default,
.btn-default:visited,
.btn-default:focus,
.btn-default:hover {
	background-position: 0 0;
	background-color: #2a2d80 !important;
	background-image: linear-gradient(to bottom, #2a2d80 0%, #001A09 100%);
	border-color: #2a2d80 !important;
	color: black;
}
.btn-default:active,
.btn-default-active,
.btn-default-active:hover,
.btn-default-active:focus {
	background-position: 0 -15px;
	background-color: #545BFE !important;
	background-image: linear-gradient(to bottom, #2a2d80 0%, #545BFE 100%);
	background-repeat: repeat-x;
	border-color: #545BFE;
	color: white;
	text-shadow: none;
}
.btn-big {
	font-size: 200%;
}

/* --------------------------------------------------------------------------
	  Formulare
   -------------------------------------------------------------------------- */
.group {
	width: 100%;
}
.group-2,
.group-3 {
	width: 50%;
	display: inline-block;
	float: left;
}
.group-3 {
	width: 33%;
}
.group label,
.group-2 label,
.group-3 label {
	display: inline-block;
	width: 40%;
	vertical-align: top;
}
.toggle {
	font-size: 30px;
	cursor: pointer;
}
.toggle-on {
	color: rgba(255,255,255, 0.8);
}
.toggle-off {
	color: rgba(0,0,0, 0.2);
}
::placeholder {
	color: #bbb;
}
.group input,
.group-2 input,
.group-3 input,
.group textarea,
.group-2 textarea,
.group-3 textarea,
.group select,
.group-2 select,
.group-3 select,
.group .inputs,
.group-2 .inputs,
.group-3 .inputs,
.group .toggle,
.group-2 .toggle,
.group-3 .toggle {
	display: inline-block;
	width: 50%;
	margin-bottom: 15px;
	background-color: transparent;
	border-width: 0px;
	border-bottom: 1px white solid;
	color:white;
}
.group option,
.group optgroup,
.group-2 option,
.group-2 optgroup,
.group-3 option,
.group-3 optgroup {
	color: black;
}
.group .normal,
.group-2 .normal,
.group-3 .normal {
	border-width: 0px;
}
@media(max-width: 1199px) {
	.group-2 {
		width: 100%;
	}
}
@media(max-width: 991px) {
    .group-3 {
		width: 100%;
	}
	.group label,
	.group-2 label,
	.group-3 label,
	.group input,
	.group-2 input,
	.group-3 input,
	.group textarea,
	.group-2 textarea,
	.group-3 textarea,
	.group select,
	.group-2 select,
	.group-3 select,
	.group .inputs,
	.group-2 .inputs,
	.group-3 .inputs,
	.group .toggle,
	.group-2 .toggle,
	.group-3 .toggle {
		width: 40%;
	}
}
@media(max-width: 575px) {
	.group-3 {
		width: 100%;
	}
	.group label,
	.group-2 label,
	.group-3 label,
	.group input,
	.group-2 input,
	.group-3 input,
	.group textarea,
	.group-2 textarea,
	.group-3 textarea,
	.group select,
	.group-2 select,
	.group-3 select,
	.group .inputs,
	.group-2 .inputs,
	.group-3 .inputs,
	.group .toggle,
	.group-2 .toggle,
	.group-3 .toggle {
		width: 100%;
	}
}
.group .w100,
.group-2 .w100,
.group-3 .w100 {
	width: 100%;
}
.group .btn,
.group-2 .btn,
.group-3 .btn {
	width: auto;
}
.toggle {
	border-width: 0px !important;
}
.space {
	height: 50px;
	clear:both;
}
@media(max-width: 575px) {
	.space {
		height: 10px;
	}
}

.table-head {
	background-color: rgba(255,255,255,0.2) /*#545BFE*/;
	color: white;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
}

.table-row {
	border-bottom: 1px rgba(255,255,255,0.5) /*#545BFE*/ solid;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
}
.table-row input,
.table-row select,
.table-row textarea {
	background-color: transparent;
	border-width: 0px;
	border-bottom: 1px white solid;
	color: white;
	max-width: 100%;
}
.table-row option,
.table-row optgroup {
	color: black;
}

/* -----------------------------------------------------------------------------
	Posuvac textu
   -------------------------------------------------------------------------- */
.marquee {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
	Homepage Index
   -------------------------------------------------------------------------- */
.logo {
	margin-top: 20px;
}
.user-profile {
	background-color: #777;
	margin-top: 20px;
	min-height: 100px;
	/*vertical-align: middle; */
	padding-left: 0px;
	max-height: 120px;
	/*overflow: hidden;*/
}
@media(max-width: 767px) {
	.user-profile {
		margin-top: 0px;
	}
}
.user-profile .fa-power-off {
	margin-top: 10px;
}
.user-profile .face {
	height: 120px;
}
.user-profile .icons {
	padding-left: 10px;
	padding-top: 10px;
}
.user-profile .user-name {
	font-size: 20px;
	padding-bottom: 10px;
}
@media(max-width: 767px) {
	.user-profile .user-name {
		font-size: 15px;
	}
}

.panel-box {
	padding: 20px;
    height: 290px;
}
.panel {
	background-size: cover;
	height: 100%;
}
.panel-accounting {
	background-image: url(../images/panel-accounting-600.jpg);
}
.panel-customers {
	background-image: url(../images/panel-customers-600.jpg);
}
.panel-projects {
	background-image: url(../images/panel-projects-600.jpg);
}
.panel-servers {
	background-image: url(../images/panel-servers-600.jpg);
}
.panel-monitoring {
	background-image: url(../images/panel-monitoring-600.jpg);
}
.panel-ta3 {
	background-color: rgb(3,66,142);
}
.panel-dennikn {
	background-color: rgb(38,35,37);
}
.panel-meteo {
	background-color: #009CBE;
}
.panel-filter {
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	padding: 20px;
	overflow: hidden;
	transition: background-color 0.5s ease-out;
}
.panel-meteo .panel-filter {
	background-color: #009CBE;
}
.panel-accounting .panel-filter:hover,
.overlayer-accounting {
	background-color: #544794;
}
.panel-customers .panel-filter:hover,
.overlayer-customers {
	background-color: #588535;
}
.panel-projects .panel-filter:hover,
.overlayer-projects {
	background-color: #006296;
}
.panel-servers .panel-filter:hover,
.overlayer-servers {
	background-color: #C06C28;
}
.panel-monitoring .panel-filter:hover,
.overlayer-monitoring {
	background-color: #747474;
}
.panel h2 {
	color: white;
}
.panel ul {
	color: white;
}
.overlayer {
	width: 0px;
	height: 0px;
	position: fixed;
	background-image: url(../images/background4.png);
}
.panel-ta3 .marquee {
	font-size: 20px;
	color: white;
	margin-top: 50px;
}
.panel-ta3 .update-time,
.panel-dennikn .update-time,
.panel-meteo .update-time,
.panel-yr .update-time {
	float: right;
}
.panel-ta3 .newsbox,
.panel-dennikn .newsbox {
	margin-top: 20px;
	color: white;
	overflow: hidden;
}
.panel-yr .newsbox {
	margin-top: 10px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
	Uctovnictvo
   -------------------------------------------------------------------------- */
@media(min-width: 1200px) {
	.padding-lg {
		padding-top: 30px;
	}
}
.section-item {
}
.section-panel {
	display: block;
	background-color: rgba(255,255,255,0.5);
	margin: 20px;
	padding: 20px;
	height: 100px;
	border-left: 30px white solid;
	transition: margin 0.5s, height 0.5s, background-color 0.5s;
}
.section-panel:hover {
	margin: 0px;
	height: 140px;
	background-color: rgba(255,255,255,0.8);
}
.section-panel h2 {
	color: #333;
	font-size: 20px;
}
.backlink,
.backlink:hover,
.backlink:visited,
.backlink:active,
.backlink:focus {
	color: white;
	font-size: 30px;
	margin-right: 20px;
}
.iconlink,
.iconlink:hover,
.iconlink:visited,
.iconlink:active,
.iconlink:focus {
	color: white;
	font-size: 20px;
	margin-right: 10px;
    margin-left: 10px;
}
.notifyclose,
.notifyclose:hover,
.notifyclose:visited,
.notifyclose:active,
.notifyclose:focus {
	color: #000;
	font-size: 20px;
	margin-right: 10px;
	margin-left: 10px;
}
.newsbox .item {
	display: none;
}
.filter,
.topup {
	background-color: rgba(0,0,0,0.25);
	color: white;
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
}
.filter select option,
.filter select optgroup,
.topup select option,
.topup select optgroup {
	color: black;
}

.onerow {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px white solid;
}

.number-negative {
	color: #F88;
}
.number-neutral {
	color: white;
}
.number-positive {
	color: #0C0;
}

.ui-tooltip {
	white-space: pre-line;
}

.folder-item {
}
.folder-panel {
	display: block;
	background-color: rgba(255,255,255,0.5);
	margin: 20px;
	padding: 20px;
	height: 60px;
	transition: margin 0.5s, height 0.5s, background-color 0.5s;
}
.folder-panel:hover {
	margin: 0px;
	height: 90px;
	background-color: rgba(255,255,255,0.8);
}
.folder-panel h2 {
	color: #333;
	font-size: 20px;
	display: inline-block;
}
.folder-panel .fa-folder-open {
	display: inline-block;
	margin-right: 20px;
	font-size: 20px;
	transition: font-size 0.5s, color 0.5s, line-height 0.5s;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.8);
}
.folder-panel:hover .fa-folder-open {
	font-size: 30px;
	line-height: 50px;
	color: rgba(255, 255, 255, 1);
}
@media(max-width: 575px) {
	.folder-panel {
		margin: 5px;
	}
}

.notifications {
	position:absolute;
	top: 0px;
	right: 0px;
	width: 25%;
}
.notification {
	background-color: rgba(0, 0, 0, 0.8);
	margin: 20px;
	margin-bottom: 0px;
	padding: 20px;
	width: 100%;
	float: right;
	right: 0px;
	display: block;
	clear: both;
}
@media(max-width: 1199px) {
	.notifications {
		width: 50%;
	}
}
@media(max-width: 767px) {
	.notifications {
		width: 90%;
	}
}