/* RNA */
html {
    overflow-y: scroll; 
}

body {
	font-family: Tahoma, Arial;
	font-size: 12px;
    background-color: #FFFFCC;
    background-image: url('img/rna-logo-background-vertical.png');
    background-repeat: repeat-y;
    background-position: 10pt 0;
    background-attachment:fixed;
    height: 100%;
}

div.wrapper {
	width: 760px;
	width: 1000px;
	margin: 20px auto;
	padding: 10px;
	border: 1px solid black;
    height: 100%;
}

h3 {
    margin-top: 0;
}

a {
    color: #990000;
    text-decoration: none;
    border-bottom: 1px dotted #990000;
}

a:hover {
    color: #990000;
    text-decoration: none;
    border-bottom: 1px solid #cc0000;
}

a:visited {
    color: #990000;
    text-decoration: none;
    border-bottom: 1px dotted #990000;
}

input[type=text] {
    width: 130px;
    border: 1px solid #cccccc;
}

input.required[type=text] {
    width: 130px;
    border: 1px solid #CD0000;
    font-weight: bold;
}

input[type=password] {
    width: 130px;
    border: 1px solid #cccccc;
}

input[type=button] {
	background-color: #FAB437;
	border-radius: 5px;
	border-bottom-color: #E77817;
	border-style: solid;
	font-size: 11px;
	font-weight: normal;
	width: 113px;
}

input[type=file] {
	border-radius: 5px;
	font-size: 11px;
	font-weight: normal;
}

input[type=submit] {
	background-color: #FAB437;
	border-radius: 5px;
	border-bottom-color: #E77817;
	border-style: solid;
	font-size: 11px;
	font-weight: normal;
	width: 113px;
}

input.lite[type=submit] {
    width: auto;
}

.transparent {
    opacity:0.75;
}

div.floatvsreplacer {
	border: 1px solid #000000;
    background-color: #FFFAEA;
	text-align: center;
	width: 270px;
	padding: 10px;
    position:absolute;      
    height:126px;
    top: 50%;
    left: 50%;
    margin-top:-63px; /* negative number 1/2 height */
    margin-left:-135px; /* negative number 1/2 width */
    display: block;
    box-shadow: 10px 10px 10px #333333;
    visibility: hidden;
}

div.floatvsconfirm {
	border: 1px solid #000000;
    background-color: #FFDDDD;
	text-align: center;
	width: 270px;
	padding: 10px;
    position:absolute;      
    height:126px;
    top: 50%;
    left: 50%;
    margin-top:-63px; /* negative number 1/2 height */
    margin-left:-135px; /* negative number 1/2 width */
    display: block;
    box-shadow: 10px 10px 10px #333333;
    visibility: hidden;
}

div.floatpaymentsdata {
	border: 1px solid #000000;
    background-color: #fcfcfc;
	text-align: left;
	width: 500px;
	padding: 10px;
    position:absolute;      
    height:500px;
    top: 50%;
    left: 50%;
    margin-top:-250px; /* negative number 1/2 height */
    margin-left:-250px; /* negative number 1/2 width */
    display: block;
    box-shadow: 10px 10px 10px #333333;
    visibility: hidden;
}

div.floatallpaymentsheduleconfig {
	border: 1px solid #000000;
    background-color: #FFFAEA;
	text-align: center;
	width: 270px;
	padding: 10px;
    position:absolute;      
    height:126px;
    top: 50%;
    left: 50%;
    margin-top:-63px; /* negative number 1/2 height */
    margin-left:-135px; /* negative number 1/2 width */
    display: block;
    box-shadow: 10px 10px 10px #333333;
    visibility: hidden;
    z-index: 500;
}

div.floatexportconfig {
	border: 1px solid #000000;
    background-color: #FFFAEA;
	text-align: center;
	width: 270px;
	padding: 10px;
    position:absolute;      
    height:96px;
    top: 50%;
    left: 50%;
    margin-top:-48px; /* negative number 1/2 height */
    margin-left:-135px; /* negative number 1/2 width */
    display: block;
    box-shadow: 10px 10px 10px #333333;
    visibility: hidden;
}

div.popuppayments {
	border: 1px solid #000000;
    background-color: #FFFAEA;
	text-align: center;
	width: 700px;
    height: 500px;
	padding: 10px;
    position: fixed;      
    right: 30px;
    top: 10px;
    display: block;
    box-shadow: 10px 10px 10px #333333;
    visibility: hidden;
    overflow: hidden;
    z-index: 2147483647;
}

div.floatmsg { /* div pro hlaseni */
	border: 1px solid #000000;
    vertical-align: middle;
    border-radius: 10px;
	text-align: center;
	width: 400px;
	padding: 10px;
    position:absolute;      
/*    height:50px;*/
    top: 50%;
    left: 50%;
    margin-top:-25px; /* negative number 1/2 height */
    margin-left:-200px; /* negative number 1/2 width */
    display: block;
    box-shadow: 10px 10px 10px #333333;
    z-index: 1000;
}

div.users_list { /* div pro seznam uzivatelu pro predani poptavky */
	border: 1px solid #000000;
    background-color: #FFFAEA;
    vertical-align: middle;
	text-align: center;
	width: 300px;
	padding: 10px;
    position:absolute;      
    top: 50%;
    left: 50%;
    margin-top:-25px; /* negative number 1/2 height */
    margin-left:-150px; /* negative number 1/2 width */
    display: block;
    box-shadow: 10px 10px 10px #333333;
    z-index: 500;
    visibility: hidden;
}

.err {
    background-color: #FFDDDD; /* err color 4 floatmsg */
}

.msg {
    background-color: #DDFFDD; /* msg color 4 floatmsg */
}

form.login { /* formular pro prihlaseni */
	border: 1px dotted #000000;
	text-align: center;
	width: 270px;
	/*margin: 100px auto;*/
	padding: 10px;
    background-image: url(img/rna-logo-login.png);
    background-position: center;
    background-repeat: no-repeat;
    position:absolute;      
    width:270px;    
    height:120px;
    top: 50%;
    left: 50%;
    margin-top:-60px; /* negative number 1/2 height */
    margin-left:-135px; /* negative number 1/2 width */
    display: block;
}

.caption {
    background-color: #ffffff;
    display: block;    
    margin-bottom: 10px;
    margin-top: 10px;
    opacity: 0.8;
}

.alignright {
    text-align: right;
}

.alignrightmargined {
    text-align: right;
}

.alignleft {
    text-align: left;
}

p.loginerror {
    margin: auto;
    text-align: center;
    background-color: #FFB8A2;
    margin: 20px 60px;
    padding: 20px;
}

.username {
	font-weight: bold;
}

div.menubar {
    width: 100%;
    clear: both;
    margin-bottom: 10px;
    display: block;
    height: 50px;
}

.menuform {
	display: inline;
    float: left;
    margin-right: 5px;
}

input.menubutton {
	background-color: #ffff00;
}

.ldivider { /* oddelovac nalevo */
    margin-left: 6px;
    border-left: 1px solid #000000;
    padding-left: 10px;
}

.rdivider { /* oddelovac napravo */
    margin-right: 6px;
    border-right: 1px solid #000000;
    padding-right: 10px;
}

.withline {
    border-right: 1px solid #000000;
}
/* zahlavi ********************************************************************/
div.head {
    /* background-image: url("img/logo-smaller.png"); */
    /* background-repeat: no-repeat; */
    height: 60px;
    /* padding-left: 140px; */
    border-bottom: 1px solid black;
    vertical-align: top;
    margin-bottom: 10px;
}

div.logo {
    background-image: url("img/logo-smaller.png");
    background-repeat: no-repeat;
    width: 128px;
    height: 50px;
    cursor: pointer;
    float: left;
    margin-right: 10px;
}
/* zahlavi - konec ************************************************************/

/* menu uzivatele *************************************************************/
div.usermenu {
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    padding-bottom: 10px;
    vertical-align: bottom;
    height: 50px;
}
/* menu uzivatele - konec *****************************************************/

/* formulare pro zadavani klienta *********************************************/
div.personal {/* formular pro zadani osoby */
	float: left;
	margin: auto 15px auto 5px;
	padding: 10px 70px;
	background-color: #FFE7A8;
/*    width: 223px;*/
    width: 350px;
    min-height: 350px;
}

div.corporation { /* formular pro zadani firmy */
	float: left;
	display: none;
	padding: 10px;
	clear: right;
	padding: 10px 65px;
	background-color: #FFF1CE;
/*    width: 240px;*/
    width: 350px;
    height: 350px;
}

td.keytd {
	text-align: right;
}

.indentright {
    padding-right: 10px;    
}

.indentleft {
    padding-left: 10px;
}

.indentboth {    
    padding-left: 10px;
    padding-right: 10px;    
}

tr.formtr {
	height: 30px;
}

div.note { /* poznamka ke klientovi */
	width: 725px;
	clear: left;
	float: left;
	margin: 10px 5px;
}

textarea.notes { /* poznamka ke klientovi */
/*	width: 745px;*/
	width: 980px;
	height: 60px;
}

div.closing { /* uzaviraci div pro zarovnane pokracovani */
	clear: both;
	margin: auto 20px;
	text-align: center;
}

.required { /* zvyrazneni povinne polozky */
    border: 1px solid #CD0000;
    font-weight: bold;
}

.normal { /* normalni textova polozka u osoby*/
    border: 1px dotted #FFA500;
}

.normal2 { /* normalni textova polozka u firmy */
    border: 1px dotted #FA8072;
}
/* formulare pro zadavani klienta - konec *************************************/

/* formular pro vyhledavani ***************************************************/
table.searchtable {
    display: block;
    padding: 0;
    margin-left: 20px;
    margin: 0 0 0 5px;
    padding-left: 10px;
    border-left: 1px solid #000000;
    height: 50px;
}

tr.thin {
    height: 4px;
    font-weight: bold;
    padding: 0;
    font-size: 10px;
    margin-left: 20px;
}
/* formular pro vyhledavani - konec *******************************************/

/* tabulka s vysledky hledani *************************************************/
table.find {
	width: 100%;
	padding: 10px;
	border-spacing: 0;
}

th.find {
	text-align: center;
 	background-color: #FFC611;
}

th.finddark {
	text-align: center;
 	background-color: #E8AE00;
}

tr.find1 {
	background-color: #FFF1CE;
	cursor: pointer;
	border: 1px dotted #000000;
}

tr.find1:hover {
	background-color: #FFFAEA;
}

tr.find2 {
	background-color: #FFE7A8;
	cursor: pointer;
}

tr.find2:hover {
	background-color: #FFFAEA;
}

tr.find1ne {
	background-color: #FFF1CE;
	border: 1px dotted #000000;
}

tr.find1ne:hover {
	background-color: #FFFAEA;
}

tr.find2ne {
	background-color: #FFE7A8;
}

tr.find2ne:hover {
	background-color: #FFFAEA;
}

tr.invisible {
	display: none;
}

td.find {
  	border-bottom: 1px dotted #000000;
  	padding-left: 5px;
}

td.servicename {
    cursor: pointer;    
}

td.servicename:hover {
    cursor: pointer;
    background-color: moccasin;    
}

td.findz { /* smlouva zaslat */
  	border-bottom: 1px dotted #000000;
    background-image: url("img/contract_new.png");
    background-position: right;
    background-repeat: no-repeat;
}

td.findo { /* smlouva odeslana */
  	border-bottom: 1px dotted #000000;
    background-image: url("img/contract_sent.png");
    background-position: right;
    background-repeat: no-repeat;
}

td.findv { /* smlouva vracena */
  	border-bottom: 1px dotted #000000;
    background-image: url("img/contract_returned.png");
    background-position: right;
    background-repeat: no-repeat;
}

td.title {
  	border-bottom: 1px dotted #000000;
	text-align: center;
	font-weight: bold;
}

td.title1 { /* jmeno/prijmeni */
  	border-bottom: 1px dotted #000000;
	text-align: center;
	font-weight: bold;
	width: 80px;
}

td.title2 { /* nazev spolecnosti */
  	border-bottom: 1px dotted #000000;
	text-align: center;
	font-weight: bold;
	width: 200px;
}

td.title3 {
  	border-bottom: 1px dotted #000000;
  	width: 530px;
}

td.title4 {
  	border-bottom: 1px dotted #000000;
  	text-align: left;
    padding-left: 5px;
    font-weight: bold;
    vertical-align: top;
}

td.onehundred {
	width: 100px;
}

td.twohundred {
	width: 200px;
}

td.find1 {
	cursor: pointer;
	border-bottom: 1px dotted #000000;
}

td.find1:hover {
	background-color: #FFFAEA;
}

td.find2 {
	cursor: pointer;
	border-bottom: 1px dotted #000000;
}

td.find2:hover {
	background-color: #FFFAEA;
}

td.find3ne {
	background-color: #FFE7A8;
}

td.findp {
	border-bottom: 1px dotted #000000;
    padding-left: 5px;
    vertical-align: top;
}

.companyname {
	color: #800040;
}

form.clientid { /* form pro odeslani ID klienta k zobrazeni */
	display: none;
}

form.vsreplacer {
    float: right;
    vertical-align: middle;
}

div.icons { /* ikony stavu smlouvy a stavu sluzeb */
    float: right;
    display: inline;
    margin-right: 15px;
}

div.client { /* udaje o klientovi */
    float: left;
    display: inline;
}

.small {
	font-size: 10px;
	font-weight: bold;
	position: relative;
	top: -1px;
}

td.iptv {
    padding: 5pt;
}

td.iptv:hover {
    background-color: #FF99CC;
    cursor: pointer;
}

label.pack {
    cursor: pointer;
}

.packlabel {
    position: relative;
    top: -3px;
}
/* tabulka s vysledky hledani - konec *****************************************/

/* detail klienta *************************************************************/
div.person { /* fyzicka/kontaktni osoba */
    border: 1px dotted #333333;
    /*width: 353px;*/
    width: 475px;
    min-height: 80px;
    float: left;
    padding: 10px;
    padding-top: 0;
    display: block;
    margin-bottom: 10px;
	background-color: #FFE7A8;
}

div.company { /* spolecnost */
    border: 1px dotted #333333;
    /*width: 353px;*/
    width: 470px;
    min-height: 80px;
    padding: 10px;
    padding-top: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
	background-color: #FFF1CE;
}

div.clientnote { /* poznamka */
    border: 1px dotted #333333;
    background-color: #FFFFAE;
    padding: 5px;
    clear: both;
    margin: 10px auto;
}

div.meta { /* metainforamce */
    border: 1px dotted #333333;
    background-color: #FFFFE6;
    font-size: 9px;
    padding: 5px;
    text-align: right;
    clear: both;
}

div.monthsset {
    display: block;
    clear: both;
    margin: 15px 8px 15px 6px;
    background-color: #FFFFE6;
    padding: 5px;
}

table#months tr td p {
/*    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);*/
    width: 25px;
    height: 40px;
    white-space: nowrap;
    position: relative;
    top: 15px;
    left: 8px;
    display: block;
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
      -ms-transform: rotate(-90.0deg);  /* IE9+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
          transform: rotate(-90.0deg);  /* Standard */
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 0;
}

div.services { /* vypis sluzeb */
    background-color: #FFF0CA;
    border: 1px dotted #333333;
    padding: 5px;
    padding-top: 0;
    clear: both;
    margin-bottom: 10px;
}

div.servicedetail2 { /* detail sluzby - needitovatelny */
    width: 98%;
    border-bottom: 2px solid #999999;
    border-right: 2px solid #999999;
    border-top: 2px solid #F9F9F9;
    border-left: 2px solid #F9F9F9;
    background-color: #E9E9E9;
    margin: 10px auto;
    padding: 5px;
    padding-top: 0;
    clear: both;
    display: block;
}

div.servicedetail { /* detail sluzby - editovatelny */
    width: 98%;
    border-bottom: 2px solid #999999;
    border-right: 2px solid #999999;
    border-top: 2px solid #F9F9F9;
    border-left: 2px solid #F9F9F9;
    background-color: #E9E9E9;
    margin: 10px auto;
    padding: 5px;
    padding-top: 0;
    clear: both;
    display: block;
	cursor: pointer;
}

div.servicedetail:hover {
    background-color: #F9F9F9;
    border-bottom: 2px solid #bbbbbb;
    border-right: 2px solid #bbbbbb;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
}

div.servicedata { /* technicka data sluzby / adresa sluzby */
    float: left;
    width: 330px;
    display: block;
    margin-bottom: 10px;
}

div.servicemeta { /* meta data sluzby */
    float: left;
    width: 265px;
    font-size: 9px;
    display: block;
    text-align: right;
}

div.servicenote { /* poznamka u skuzby */
    border: 1px dotted #333333;
    background-color: #eeeeee;
    padding: 5px;
    clear: both;
}

div.sdattr { /* popisek technickych dat sluzby */
    display: block;
    width: 60px; /* puvodni hodnota 80 */
    text-align: right;
    float: left;
    margin-right: 5px;
}

.statusa { /* aktivni sluzba */
    color: #00CC00;
    font-weight: bold;
}

.statuso { /* omezena sluzba */
    color: #FFA500;
    font-weight: bold;
}

.statuso2 { /* omezena sluzba - vypis dluzniku */
    color: #CC6600;
    font-weight: bold;
}

.statusb { /* blokovana sluzba */
    color: #FF3333;
    font-weight: bold;
}

.statusb2 { /* blokovana sluzba - vypis dluzniku */
    color: #FF0000;
    font-weight: bold;
}

.status3, .status2, .status1 { /* infokanal */
    color: #3399FF;
    font-weight: bold;
}

.statusp { /* pripominka platby */
    color: #666666;
    font-weight: bold;
}

.statuss { /* STOP */
    color: #ffffff;
    background-color: #FF0000;
    font-weight: bold;
    text-align: center;
}

.statusz { /* blokovana sluzba */
    color: #ffffff;
    background-color: #FF0000;
    font-weight: bold;
}

.statusx { /* neidentifikovatelny dluh */
    color: #0000FF;
    font-weight: bold;
}

.big {
    font-size: 16px;
    margin-bottom: 10px;
    line-height:200%
}

/* detail klienta - konec *****************************************************/

/* formular pro pridani sluzby ************************************************/
div.servicevalues {/* formular pro zadani sluzby */
	float: left;
	margin: auto 15px auto 5px;
	padding: 10px 65px;
	background-color: #FFE7A8;
    /*width: 232px;*/
    width: 350px;
}

.wifi {
    background-color: #FFFFAE;
}

.optik {
    background-color: #FFF1CE;
}

.voip {
    background-color: #FFE7A8;
}

.variant {
    background-color: #FFCEDB;
}

div.ruian {
    overflow: auto; /* Enable scroll if needed */
    overflow-y: scroll;
	border: 1px solid #000000;
    background-color: #FFFAEA;
	text-align: center;
	width: 700px;
    height: 500px;
	padding: 10px;
    position: fixed;      
    right: 30px;
    top: 10px;
    display: block;
    box-shadow: 10px 10px 10px #333333;
    visibility: hidden;
    /*overflow: hidden;*/
    z-index: 2147483647;

}

/* Tlacitko Zavrit - X */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* formular pro pridani sluzby - konec ****************************************/

/* tlacitka menu **************************************************************/
img.ibuttonl {
    border: 0;
    cursor: pointer;
    float: left;
    margin-left: 10px;
}

img.ibuttonr {
    border: 0;
    cursor: pointer;
    float: right;
    margin-right: 50px;
}

form.forml {
    float: left;
    margin-left: 5px;
}

form.formr {
    float: right;
    margin-right: 5px;
}
/* tlacitka menu - konec ******************************************************/

/* ucetni pohled **************************************************************/
th.accounting {
    border-bottom: 1px solid #000000;
    background-color: #FFC611;
}

td.acname {
    padding-left: 10px;
    border-bottom: 1px dotted #000000;
}

td.acdate {
    text-align: right;
    padding-right: 20px;
    border-bottom: 1px dotted #000000;
}

td.acprice {
    text-align: right;
    padding-right: 10px;
    border-bottom: 1px dotted #000000;
}

div.payments {
    width: 350px;
    padding-top: 10px;
    text-align: center;
    float: left;
	background-color: #FFFFFF;
    margin: 10px;
    border: 1px dotted #000000;
}

div.paymentsInPopup {
    width: 270px;
    padding-top: 10px;
    text-align: center;
    float: right;
	background-color: #FFFFFF;
    margin: 10px;
    border: 1px dotted #000000;
}

th.paymentsth {
    padding-bottom: 3px;
}

td.paymentsmonth {
    text-align: left;
    padding-left: 10px;
}

td.paymentsprice {
    text-align: right;
    padding-right: 20px;
}
/* ucetni pohled - konec ******************************************************/

/* nastenka *******************************************************************/
p.bbnews {
	font-weight: bold;
	color: #A80000;
}
/* nastenka - konec ***********************************************************/

/* pridani skupiny infokanalu *************************************************/
.invisible { /* seznam je neviditelny az do jeko aktivaci vyberem */
	display: none;
}

select.blank {
	width: 150px; /* prazdny seznam + sirka ostatnich seznamu */
}
/* pridani skupiny infokanalu - konec *****************************************/

/* divy pro jQuery - administrace poptavek ************************************/
.invisible_new, .invisible_assigned, .invisible_delayed, .invisible_impossible {
    display: none;
}

.pullarrow {
    float: right;
    cursor: pointer;
}
/* divy pro jQuery - administrace poptavek - konec ****************************/

/* divy pro MySQL errorhandling ***********************************************/
div.mysqlerrorreport {
    border: 2px solid #FF0000;
    background-color: #ffffff;
    padding: 10px;
    background-image: url("img/error.png");
    background-repeat: no-repeat;
    background-position: top 5px right 5px;
    margin: 10px 0;
}

h4.error {
    color: #FF0000;
    margin: 0 0 10px;
}

div.sqlquery {
    color: #333333;
    background-color: #dddddd;
    border: 1px #999999 dotted;
    padding: 5px;
    margin: 5px 0;
    font-family: courier;
    font-weight: bold;
}
/* divy pro MySQL errorhandling - konec ***************************************/

/* divy pro zobrazeni informaci ***********************************************/
div.information {
    border: 2px solid #FFCC00;
    background-color: #ffffff;
    padding: 10px;
    background-image: url("img/info.png");
    background-repeat: no-repeat;
    background-position: top 5px right 5px;
    margin: 10px 0;
    min-height: 40px;
}

h4.infotext {
    color: #FF6600;
    margin: 0 0 10px;
}

/* divy pro zobrazeni informaci - konec ***************************************/

/* sloupce grafu pro statistiky ***********************************************/
table.bargraph {
    width: 100%;
    margin: 15px auto;
    text-align: center;
    border-spacing: 0;
    border-collapse: collapse;
}

table.bargraph th {
    background-color: #FFC611;
}

p.moneytext {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform:rotate(-45deg);     
    margin: 15px auto 30px auto;
    font-weight: bold;
    font-size: 8pt;   
}

.bar50 {
    width: 50px;
    position: relative;
    bottom: -1px;
}

.h50 {
    height: 50px;  
}

.h10 {
    height: 10px;  
}

.bartd {
    vertical-align: bottom;
    width: 8.33%;   
    border-bottom: 1px solid #000000; 
}

.bartdnegative {
    vertical-align: top;
    width: 8.33%;   
}

div.legendbox {
    width: 11px;
    height: 11px;
    border: 1px solid #000000;
    display: inline-block;
    position: relative;
    top: 2px;
    margin-top: 15px;
}

.barblue {
    cursor: help;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #87e0fd;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZTBmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzUzY2JmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDdmYWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #87e0fd 0%, #53cbf1 40%, #007fad 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#007fad));
    background: -webkit-linear-gradient(left,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    background: -o-linear-gradient(left,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    background: -ms-linear-gradient(left,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    background: linear-gradient(to right,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#007fad',GradientType=1 );
}

.barblue:hover {
    background: #70D3FF;
}

.bargreen {
    cursor: help;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #c8ff89;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M4ZmY4OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzUzZWQ3YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYmFhMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #c8ff89 0%, #53ed7c 40%, #0baa00 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c8ff89), color-stop(40%,#53ed7c), color-stop(100%,#0baa00));
    background: -webkit-linear-gradient(left,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    background: -o-linear-gradient(left,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    background: -ms-linear-gradient(left,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    background: linear-gradient(to right,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8ff89', endColorstr='#0baa00',GradientType=1 );    
}

.bargreen:hover {
    background: #67FF53;
}

.barred {
    cursor: help;
    display: block;
    clear: both;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #ffb289;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjI4OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2UyODk1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMzAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #ffb289 0%, #e28951 40%, #d30000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffb289), color-stop(40%,#e28951), color-stop(100%,#d30000));
    background: -webkit-linear-gradient(left,  #ffb289 0%,#e28951 40%,#d30000 100%);
    background: -o-linear-gradient(left,  #ffb289 0%,#e28951 40%,#d30000 100%);
    background: -ms-linear-gradient(left,  #ffb289 0%,#e28951 40%,#d30000 100%);
    background: linear-gradient(to right,  #ffb289 0%,#e28951 40%,#d30000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb289', endColorstr='#d30000',GradientType=1 );
}

.barred:hover {
    background: #F3A171;
}

.bargray {
    cursor: help;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #ededed;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2M5YzljOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YzRjNGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #ededed 0%, #c9c9c9 40%, #4c4c4c 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ededed), color-stop(40%,#c9c9c9), color-stop(100%,#4c4c4c));
    background: -webkit-linear-gradient(left,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    background: -o-linear-gradient(left,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    background: -ms-linear-gradient(left,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    background: linear-gradient(to right,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#4c4c4c',GradientType=1 );
}

.bargray:hover {
    background: #DCDCDC;
}

.baryellow {
    cursor: help;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #feffce;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmZjZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNmM5MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #feffce 0%, #ffff00 40%, #c6c900 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#feffce), color-stop(40%,#ffff00), color-stop(100%,#c6c900));
    background: -webkit-linear-gradient(left,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    background: -o-linear-gradient(left,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    background: -ms-linear-gradient(left,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    background: linear-gradient(to right,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffce', endColorstr='#c6c900',GradientType=1 );
}

.baryellow:hover {
    background: #FEFF8B;
}

.barbluev {
    cursor: help;
    float: left;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #87e0fd;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZTBmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzUzY2JmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDdmYWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #007fad 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#007fad));
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#007fad 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#007fad',GradientType=1 );
}

.barbluev:hover {
    background: #70D3FF;
}

.bargreenv {
    cursor: help;
    float: left;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #c8ff89;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M4ZmY4OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzUzZWQ3YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYmFhMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #c8ff89 0%, #53ed7c 40%, #0baa00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8ff89), color-stop(40%,#53ed7c), color-stop(100%,#0baa00));
    background: -webkit-linear-gradient(top,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    background: -o-linear-gradient(top,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    background: -ms-linear-gradient(top,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    background: linear-gradient(to bottom,  #c8ff89 0%,#53ed7c 40%,#0baa00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8ff89', endColorstr='#0baa00',GradientType=1 );    
}

.bargreenv:hover {
    background: #67FF53;
}

.barredv {
    cursor: help;
    float: left;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #ffb289;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjI4OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2UyODk1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMzAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffb289 0%, #e28951 40%, #d30000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb289), color-stop(40%,#e28951), color-stop(100%,#d30000));
    background: -webkit-linear-gradient(top,  #ffb289 0%,#e28951 40%,#d30000 100%);
    background: -o-linear-gradient(top,  #ffb289 0%,#e28951 40%,#d30000 100%);
    background: -ms-linear-gradient(top,  #ffb289 0%,#e28951 40%,#d30000 100%);
    background: linear-gradient(to bottom,  #ffb289 0%,#e28951 40%,#d30000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb289', endColorstr='#d30000',GradientType=1 );
}

.barredv:hover {
    background: #F3A171;
}

.bargrayv {
    cursor: help;
    float: left;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #ededed;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2M5YzljOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YzRjNGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ededed 0%, #c9c9c9 40%, #4c4c4c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(40%,#c9c9c9), color-stop(100%,#4c4c4c));
    background: -webkit-linear-gradient(top,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    background: -o-linear-gradient(top,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    background: -ms-linear-gradient(top,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    background: linear-gradient(to bottom,  #ededed 0%,#c9c9c9 40%,#4c4c4c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#4c4c4c',GradientType=1 );
}

.bargrayv:hover {
    background: #DCDCDC;
}

.baryellowv {
    cursor: help;
    float: left;
    box-shadow: 2px -2px 3px grey;
    margin: auto;
    background: #feffce;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmZjZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNmM5MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #feffce 0%, #ffff00 40%, #c6c900 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffce), color-stop(40%,#ffff00), color-stop(100%,#c6c900));
    background: -webkit-linear-gradient(top,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    background: -o-linear-gradient(top,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    background: -ms-linear-gradient(top,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    background: linear-gradient(to bottom,  #feffce 0%,#ffff00 40%,#c6c900 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffce', endColorstr='#c6c900',GradientType=1 );
}

.baryellowv:hover {
    background: #FEFF8B;
}
/* sloupce grafu pro statistiky - konec ***************************************/

/* ProgresBar pro dlouhe skripty ******************************************** */
.progressbar {
    position: absolute;
    height: 12pt;
    width: 730px;
    text-align: right;
    clear: both;
    display: block;
    border: 1px solid red;
}

.progress {
    background: darkorange;
}

/* Novy progresBar */
/* Kontejner progressbaru */
.progressBarContainer {
    width: 100%; /* Šířka progressbaru na stránce */
    height: 30px;
    background-color: #f0f0f0; /* Světle šedé pozadí */
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 20px 0;
    position: relative; /* Důležité pro umístění textu */
}

/* Oranžový vyplňující pruh s animací */
.progressBarFill {
    height: 100%;
    width: 0%; /* Počáteční šířka, dynamicky se mění PHP/JS */
    
    background-color: #ff8c00; /* Základní oranžová barva */
    border-radius: 5px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);

    /* Plynulejší animace pro samotné rozšiřování pruhu */
    transition: width 0.3s ease-out; 

    /* --- ANIMACE PRUHŮ --- */
    background-image: linear-gradient(
        -45deg, /* Šikmé pruhy */
        rgba(255, 255, 255, .2) 25%, /* Světlejší pruh */
        transparent 25%, /* Průhledný prostor */
        transparent 50%,
        rgba(255, 255, 255, .2) 50%, /* Další světlý pruh */
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent /* A zbytek průhledný */
    );
    background-size: 40px 40px; /* Velikost jednoho opakování vzoru (pruhu) */
    animation: moveStripes 2s linear infinite; /* Animace: název, trvání, rychlost, opakování */

    /* Zajištění, že se pruhy objeví až když se pruh začne plnit */
    overflow: hidden; 
}

/* Definice animace pro posun pruhů */
@keyframes moveStripes {
    from {
        background-position: 0 0; /* Začátek animace (pozice pozadí) */
    }
    to {
        background-position: 40px 0; /* Konec animace (posun o jednu velikost pruhu) */
    }
}
/* Text s procenty */
.progressText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333; /* Barva textu */
    font-weight: bold;
    z-index: 10; /* Zajistí, že bude text nad pruhem */
}

/* Log pro kontrolu (volitelné) */
#log {
    margin-top: 20px;
    padding: 10px;
    border: 1px dashed #ddd;
    max-height: 200px;
    overflow-y: auto;
}
/* ProgresBar pro dlouhe skripty - konec ************************************ */

/* Formatovani vystupu PHP chyb ***********************************************/
span.phpError {
    font-family: 'Courier New', Courier, monospace;
    display: block;
    white-space: pre-wrap; /* Umožní zalamování a zachová mezery/konce řádků */
    word-wrap: break-word; /* Starší specifikace pro zalamování (IE) */
    overflow-wrap: break-word; /* Novější specifikace pro zalamování */
    background-color: #333333;
    color: #67FF53;
    padding-left: 30px; /* Přidávám padding pro lepší čitelnost */
    /* padding-top: -10px; */
}

span.phpError b {
    color: #FFA2A2;
    font-weight: normal;
    font-weight: 500;
}
/* Formatovani vystupu PHP chyb - konec ***************************************/

/* Formatovani textu na fakture v PDF *****************************************/
.registrace {
    font-size: 6pt;
}
/* Formatovani textu na fakture v PDF - konec *********************************/