@font-face {
   font-family: 'ChakraPetchLight';
      src: url('fonts/ChakraPetch-Light.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'ChakraPetchSemiBold';
      src: url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'ChakraPetchRegular';
      src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'ChakraPetchBold';
      src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

:root {
  --fontFaimly_default: 'ChakraPetchRegular', sans-serif;
  --fontFaimly_text: 'ChakraPetchRegular', sans-serif;
  --fontFaimly_header: 'ChakraPetchLight', sans-serif;
  --fontFaimly_button: 'ChakraPetchBold', sans-serif;
  --fontFaimly_semi: 'ChakraPetchSemiBold', sans-serif;
  --merchwork-color: rgb(70,0,202);
  --merchwork-color-font: #171618;
  --merchwork-color2: #ffca0d;
  --merchwork-color2-font: #ffca0d;
}


li {
    padding: 5px 0px 5px 0px;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--fontFaimly_default);
    min-height: 100vh;
    font-size: 16px;
    min-width: 1000px;
    
}


a img {
    border: 0px;
}

.logobox {
    position: absolute;
    top:0px;
    width: 100%;
    height: 34px;
    z-index: 99;
    background: rgb(138,138,138);

}

.logobox .container .logo {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 34px;
}

.logobox .container .logo a {
    display: block;
    position: relative;
    height: 34px;
    margin: 0;
    padding: 0px 25px;
   
}

.logobox .container .logo img {
    padding-top: 8px;
    width: 100px;
}

.logobox .container .logo a:hover {
   
    -webkit-transition: color 0.2s linear;
    transition: color 0.2s linear;
}


.container {
    position: relative;
    margin: 0px auto 0px auto;
    min-width: 568px;
    max-width: 1100px;

}


.container h1 {
    margin: 20px 0px 10px 0px;
    text-transform: uppercase;
    font-size: 40px;
    letter-spacing: -1px;
    line-height: 40px;
    color: var(--merchwork-color-font);
    font-weight: normal;
}

.container .h2 {
    margin: 10px 0px 10px 0px;
    padding: 0px;
    font-size: 19px;
}







.bigscreen {
    position: relative;
    min-height: 100vh;
    background-color: rgb(231,231,231);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    padding-top: 1px; /* nebo overflow: hidden; */
}


.bigscreen .smallscreen {
    position: relative;
    margin: 0px auto 0px auto;
    height: 100%;
   
    padding: 0px;
    min-width: 568px;
    max-width: 1100px;
}





.loginform {
    color: white;
    background-color: var(--merchwork-color);
    border-radius: 15px;
    width: 280px;
    
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    padding: 18px;
    box-shadow: 0px 0px 550px rgb(222,222,222);
   
    background: linear-gradient(32deg, var(--merchwork-color2), var(--merchwork-color));
}

.form-row {
    display: block;
    padding: 10px 0px;
}

.form-row label {
    width: 95px;
    display: inline-block;
}

.form-row:not(.checkbox) label {
    width: 88px;
    display: inline-block;
    text-align: right;
    padding: 0px 5px;
    font-size: 14px;
}

.form-row .logininput {
    width: 135px;
    height: 16px;
    display: inline-block;
    padding: 8px;
    font-size: 16px;
}

.form-row label.label-remeber {
    width: 150px;
    display: inline-block;
}

.loginform h2 {
    color: white;
    font-size: 45px;
}

.loginform td label {
    color: white;
    font-size: 14px;
}

.loginform td {
    text-align: right;
}

.loginform td .subtext {
    color: white;
    font-size: 9px;
}


.loginform img {
    width: 80%;
    padding: 20px 10%;
    margin: 0px auto;
}


.loginsubmit  {
    color: white;
    
    padding: 15px 0px;
    border: 0px;
    cursor: pointer;
    width: 100%;
}

.logininput  {
    color: white;
    
    padding: 5px 5px;
    border: 1px solid gray;
    width: 160px;
    font-size: 14px;

}

.label  {
    color: white;
    text-align: right;
    white-space:nowrap;

}

.smalllabel  {
    color: silver;
    font-size: 11px;
    text-align: right;
}




a {
    text-decoration: underline;
    color: var(--merchwork-color-font);
}

a:hover {
    text-decoration: none;

}

a img {
    border: 0;
}



input[type=submit] {
    font-size: 13px;
    color: black;
    padding: 6px 9px;
    /* border: 0px; */
    background-color: var(--merchwork-color2);
    cursor: pointer;
    /* min-width: 50px; */
    margin: 0px 0px;
    border-radius: 0px;
    border: none;
    min-height: 32px;
}

.form-row input[type=submit] {
    font-size: 16px;
    color: black;
    padding: 10px 10px 10px 8px;
    /* border: 0px; */
    background-color: var(--merchwork-color2);
    cursor: pointer;
    /* min-width: 50px; */
    margin: 0px 0px;
    border-radius: 10px;
    
}

button {
    color: black;
    border: 0px;
    background-color: transparent !important;
    cursor: pointer;
    margin: 0px 0px;
    padding: 0px;
}

button img {
    opacity: .5;
}

button img:hover {
    opacity: .8;
}

input[type=submit]:hover {
    background-color: rgb(212,212,212);
}

input[type=text] {
    font-size: 12px;
    color: black;
    height: 19px;
    padding: 1px 5px;
    border: 1px solid rgb(223,223,223);
    width: 96%;
}


input[type=image] {
    padding: 3px;
    border: 0px;
    cursor: pointer;
    margin: 0px;
    opacity: .5;
}

input[type=image]:hover {
    opacity: .8;
}






.both {
    clear: both;
    font-size: 1px;
    padding: 0px;
    margin: 0px;
}





#hlava {
    position: relative;
    width: 100%;
    background: white;

}

#hlava-obsah {
    position: relative;
    width: 1129px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    height: 45px;
    text-align: right;
}

#nadpis {
    position: relative;
    margin-left: 0px;
    margin-right: auto;
    margin-top: 0px;
    height: 75px;
    font-size: 13px;
    font-weight: normal;
    color: rgb(69,68,71);

}

#headliner {
    position: relative;
    width: auto;
    min-width: 989px;
    height: 60px;
    background: linear-gradient(253deg, var(--merchwork-color2), var(--merchwork-color));
}



#headliner .logo {
    position: absolute;
    width: 230px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    top: 0px;
    padding: 0px;
    cursor: pointer;
}

#headliner .logo img {
    position: absolute;
    left: 15px;
    top: 15px;
}



#headliner .loged{
    position: absolute;
    z-index: 10000;
    right: 0px;
    top: 0px;
    width: 355px;
    height: 60px;
}

#headliner .loged .face{
    position: absolute;
    left: 7px;
    top: 5px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50px;
}

#headliner .loged .name{
    position: absolute;
    left: 64px;
    top: 2px;
    font-size: 18px;
   
}

#headliner .loged .company{
    position: absolute;
    left: 10px;
    top: 23px;
    font-size: 14px;
    
}

#headliner .loged .logout{
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 11px;
    color: silver;
}

#headliner .loged .user{
    position: absolute;
    right: 50px;
    top: 6px;
    font-size: 11px;
    color: silver;
}

#headliner .loged .setup{
    position: absolute;
    right: 30px;
    top: 6px;
    font-size: 11px;
    color: silver;
}


#headliner .loged .search{
    position: absolute;
    right: 10px;
    width: 280px;
    top: 28px;
    font-size: 14px;
    color: silver;
}

#headliner .loged .search #livesearch{
    z-index: 10000;
    position: relative;
    width: 280px;
    top: 0px;
    font-size: 12px;
    color: silver;
    background-color: rgb(243,243,243);
}

#headliner .loged .search #livesearch a{
    display: block;
    text-decoration: none;
    padding: 2px 5px;
    color: black;
}
#headliner .loged .search #livesearch a:hover{
    background-color: rgb(231,231,231);
}







.text-str {
    position: absolute;
    width: 60%;
    height: 57px;
    top:50px;
    left: 0px;
}

.top {
    position: relative;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}
.servicebox {
    padding: 0px;
    margin: 0px;
}

.servicebox li {
    display: block;
    float: left;
    position: relative;
    width: 200px;
    height: 166px;
    margin-left: 0px;
    margin-right: 31px;
    margin-top: 15px;
}
.servicebox li:last-child {
    margin-right: 0px;

}

.servicebox li .header {
    display: block;
    color: rgb(69,68,71);
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 5px solid rgb(223,223,223);
    line-height: 18px;
    padding-bottom: 5px;
    min-height: 36px;
}

.servicebox li .cur {
    display: block;
    position: absolute;
    top: 55px;
    left: 0px;
    color: rgb(69,68,71);
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
}

.servicebox li .inf {
    display: block;
    position: absolute;
    right: 0px;
    top: 65px;
    width: 100%;
    height: 83px;
    text-align: right;
    color: rgb(69,68,71);
    font-size: 50px;
    font-weight: normal;
    text-transform: uppercase;

}

.servicebox li .inf small {

    font-size: 25px;

}



.servicebox li .bottom {
    display: block;
    position: absolute;
    top: 152px;
    left: 0px;
    color: rgb(69,68,71);
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;


}

.p {
    position: relative;
    padding-left: 298px;
    padding-top: 22px;
    height: 240px;
    font-size: 16px;

    background-color: transparent;
    background-position:left 42px;
    background-repeat:  no-repeat;
}

.p a {
    color:  white;
    text-decoration: none;
}

.p ul {

}

.p ul li {
    color:  white;
    text-decoration: none;
    list-style-image: url("true-index.gif");
}


#pata {
    position: relative;
    margin-top: 100px;
    width: auto;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    background: var(--merchwork-color);
}

#pata:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 157px;
    height: 40px;
    background: url(logo-white.png) 10px 10px no-repeat;
    background-size: 133px;
    opacity: 0.8;
}

.pata-txt {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: normal;
    color: rgba(255,255,255,0.3);
    text-align: right;
}

.pata-txt a {
    text-decoration: underline;
    color: white;
}

.pata-txt a:hover {
    text-decoration: none;
}

#container {
    position: relative;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;



}
.menu {
    display: none;
    position: absolute;
    width: 230px;
    margin-right: 0px;
    left: 10px;
    top: -5px;
    z-index: 1000;
    background-color: white;
    border: 1px solid silver;
    box-shadow: silver 0px 0px 20px;
}

.levemenu {
    margin: 0px;
    padding: 0px;
}

.levemenu li {
    display: block;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.levemenu li a {
    display: block;
    list-style-type: none;
    background-color: rgb(220,237,255);
    border-right: 1px solid white;
    padding: 2px 6px;
    text-align: right;
    text-decoration: none;
    vertical-align: top;
    text-transform: uppercase;
    font-size: 1px;
    font-weight: normal;
    color: white;
    height: 3px;
}

.levemenu a small {
    display: block;
    font-size: 12px;
}

.levemenu li a:hover {
    background-color: rgb(220,237,255);
}

.levemenu .active a {
    border-right: 0px;
}



/* sub */

.levemenu li .sub{
    display: block;
    list-style-type: none;
    border: none;
    background: transparent  4px center no-repeat;
    padding: 2px 6px 2px 30px;
    text-align: left;
    text-decoration: none;
    vertical-align: top;
    font-size: 14px;
    text-transform: none;
    font-weight: normal;
    color: black;
    height: 22px;
}


.levemenu li .sub:hover {
    background-color: rgb(211,233,255);
}



.telo {
    position: relative;
    width: auto;
    min-width: 989px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    color: black;
    border-left: 0px solid rgb(223,223,223);
    font-size: 13px;
}


.telo .sluzba   {

}

.telo .sluzba > table.structuretable  {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
    margin-top: 10px;
}

.telo .sluzba > table.structuretable > tbody > tr > td  {
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    color: rgb(69,68,71);
    padding: 0px 10px;
}

.telo .sluzba > table.structuretable > tbody > tr > td > table, 
.telo .sluzba > table.structuretable > tbody > tr > td > form > table{
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
    margin: 0px 0px 25px 0px; 
}

.telo .sluzba > table.structuretable > tbody > tr > td > table > tbody > tr > td  {
    border-bottom: 1px solid rgb(223, 223, 223);
    vertical-align: middle;
}


h2  {
    color: var(--merchwork-color-font);
    margin: 0px 0px 0px 0px;
    font-size: 45px;
    font-weight: normal;
    padding: 6px 0px 6px 10px;
    text-transform: uppercase;

}

h2 span  {
    color: black;
    font-size: 17px;
    font-weight: normal;
    text-transform: none;
}

.telo .sluzba p {
    color: black;
}

.telo .sluzba th {
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid rgb(204, 204, 204);
    vertical-align: bottom;
    color: black;
    font-size: 13px;
    padding: 0px 0px 0px 12px;
    height: 30px;
}

.telo .sluzba td {
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    color: rgb(69,68,71);
    padding: 5px 3px;
}

.telo .sluzba td label {
    padding: 0px 8px 0px 2px;
    border: 1px solid silver;
    box-sizing: border-box;
    margin: 2px 0px;
    white-space: nowrap;
    display: inline-block;
    border-radius: 3px;
    background: #f3f3f3;
}

.telo .sluzba td a {
    /*margin: 5px; */
}

.telo .sluzba .active td {
    background-color: var(--merchwork-color-font);
    padding: 2px 6px;
    text-align: left;
    height: 85px;
    vertical-align: top;
    font-size: 14px;
    font-weight: normal;
    color: white;
}

tr.hovered:hover  {
    background-color: rgb(231,231,231);
    cursor: pointer;
}

.telo .sluzba .vyuctovani td.newline  {
    border-top: 1px solid rgb(204,204,204);
    text-align: right;
    padding: 0px;
}

.telo .sluzba .vyuctovani td  {
    color: black;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.telo .sluzba .logs td.newline  {
    border-top: 1px solid rgb(204,204,204);
    text-align: right;
    padding: 0px;
    background: white;
}

.telo .sluzba .logs td  {
    color: black;
    font-size: 12px;
}
.telo .sluzba .logs tr:nth-child(even) {
    background: rgb(248,248,248)
}

.rowbutton  {
    display: none;
    padding: 0px;
    margin: 0px;
    height: 16px;
}

.rowbutton img  {
    opacity: .5;
}

.rowbutton img:hover  {
    opacity: .8;
}







.telo .sluzba th a  {
    color: black;
    text-decoration: none;
}

.telo .sluzba th a:hover  {
}

.telo .sluzba .invoice td  {
    border-bottom: 1px solid  rgb(223,223,223);
    vertical-align: middle;
}



.telo .sluzba .help td {
    text-align: left;
    vertical-align: top;
    font-size: 12px;
    font-weight: normal;
    color: gray;
    border-bottom: 0px;
}

.textinput  {
    width: 98%;
    padding: 0px;


}

.selectinput  {
    width: 100%;
    font-size: 13px;
    color: black;
    height: 29px;
    margin: 5px 2px;
    padding: 0px 0px 0px 2%;
    border: 1px solid rgb(220, 237, 255);
}
input[type="text"],
input[type="email"],
input[type="number"]{
    height: 23px;
    margin: 5px 2px;
    padding: 0px 0px 0px 2%;
    font-size: 13px;
    color: black;
}


.telo .sluzba .active small {
    display: block;
    font-size: smaller;
    font-weight: normal;
    color: white;
}

.telo .sluzba .active .provoz-ok {
    font-size: 20px;
    font-weight: normal;
    color: white;
    text-transform: uppercase;
    background-color: rgb(0,90,133);
    text-align: right;

}

.telo .sluzba .inactive td {
    background-color: rgb(179,187,197);
    border-top: 1px solid white;
    padding: 2px 6px;
    text-align: left;
    height: 85px;
    vertical-align: top;

    font-size: 14px;
    font-weight: normal;
    color: white;
}

.telo .sluzba .inactive small {
    display: block;
    font-size: smaller;
    font-weight: normal;
    color: white;
}

.telo .sluzba .inactive .provoz-ok {
    font-size: 20px;
    font-weight: normal;
    color: white;
    text-transform: uppercase;
    background-color: rgb(69,68,71);
    text-align: right;
}

.telo .sluzba td small {
    font-size: smaller;
    font-weight: normal;
    color: rgb(69,68,71);
}

.telo .sluzba td .service {
    color: white;
    font-size: 29px;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    text-transform: none;
}

.telo .sluzba .totalcount td {
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    font-weight: normal;
    background-color: rgb(243,243,243);
}


.percentil {
    font-size: 12px;
    background-color: rgb(223,223,223);
    position: relative;
}

.percentil .percentil-text {
    font-size: 12px;
    color: rgb(179,187,197);
    position: absolute;
    text-align: center;
    left: 40%;
    width: 20%;
    top: 0px;
    text-transform: uppercase;
}

.percentil .percentil-bar {
    background-color: var(--merchwork-color-font);
}

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

.popisy {
    height: 220px;
    margin: 0px;
    width: 10%;
    float: left;
    text-align: right;
    font-size: 10px;
}

.popisy span {
    display: block;
    width: 100%;
    text-align: right;
    height: 9.6%;
    color: rgb(179,187,197);
    padding-right: 11px;
    box-sizing: border-box;
}

.chart {
    background: white url(chart-lines.png) repeat;
    height: 201px;
    margin: 10px 0px 100px 0px;
    width: 90%;
    float: right;
}

.chart .vertical .bar {
    position: relative;
    float: left;
    /* sirka na dni v mesici 3.2% na mesice v roce 8.2% pozor meni se casto primo v sablone */
    width: 3.2%;
    margin-left: 1%;
    height: 201px;
    background: none;
}

.chart .vertical .bar .percentil-bar {
    background-color: var(--merchwork-color-font);
    position: absolute;
    bottom: 0px;
    width: 25%;
    /* left se meniva take casto v sablone */
    left: 20%;

}

.chart .vertical .bar .percentil-bar.vystavenefaktury{
    background-color: rgba(0,142,202,0.5);
    border-top: 3px solid var(--merchwork-color-font);
}

.chart .vertical .bar .percentil-bar.prijatefaktury{
    background-color: rgba(229,243,249,0.5);
    border-top: 3px solid var(--merchwork-color-font);
}

.chart .vertical .bar .percentil-bar.vydaneplatby{
    background-color: rgba(229,243,249,0.5);
    border-top: 3px solid var(--merchwork-color-font);
}

.chart .vertical .bar .percentil-bar.prijateplatby{
    background-color: rgba(229,243,249,0.5);
    border-top: 3px solid var(--merchwork-color-font);
}

.chart .vertical .bar .percentil-bar.vystavenenabidky{
    background-color: rgba(0,142,202,0.5);
    border-top: 3px solid var(--merchwork-color-font);
}

.chart .vertical .bar span {
    display: block;
    position: absolute;
    bottom: -17px;
    left: 0px;
    text-align: left;
    color: rgb(179,187,197);
    font-size: 10px;
}

.label {
    color: rgb(179,187,197);

}



.texttinymce {
    color: #000;
    font-size: 10px;
    height: 350px;
}


.show_all_item {
    float: right;
    text-align: left;
    display: block;
    font-size: 12px;
    padding: 8px 8px 8px 28px;
    cursor: pointer;
    margin: 0px 0px;
    background: url('./ico/pages-4-16.png') 8px 50% no-repeat;
    background-color: rgb(231,231,231);
    color: black;
    text-decoration: none;
}

.show_all_item:hover {
    background-color: rgb(212,212,212);
}


.new_list_item {
    float: right;
    text-align: left;
    display: block;
    font-size: 12px;
    padding: 8px 8px 8px 28px;
    cursor: pointer;
    margin: 0px 0px;
    background: url('./ico/1385002168_plus.png') 8px 50% no-repeat;
    background-color: rgb(231,231,231);
    color: black;
    text-decoration: none;
    min-width: 100px;
}

.new_list_item:hover {
    background-color: rgb(212,212,212);
}

.edit_list_item {
    float: right;
    text-align: left;
    display: block;
    font-size: 12px;
    padding: 8px 8px 8px 8px;
    cursor: pointer;
    margin: 0px 0px;
    background-color: rgb(231,231,231);
    color: black;
    text-decoration: none;
}

.edit_list_item:hover {
    background-color: rgb(212,212,212);
}

.cancel_list_item {
    float: right;
    text-align: left;
    display: block;
    font-size: 12px;
    padding: 8px 8px 8px 8px;
    cursor: pointer;
    margin: 0px 0px;
    background-color: rgb(212,212,212);
    color: black;
    text-decoration: none;
}

.cancel_list_item:hover {
    background-color: rgb(190,190,190);
}

.categorytree ul{
    padding: 0px 0px 0px 15px;
}


.categorytree .category {
    position: relative;
    list-style-type: image;
    list-style-image: url('./ico/category.png');
    margin: 0px 0px 0px 15px;
    padding: 0px 5px;
    cursor: pointer;

    /* background: url("hor_line.png") center left no-repeat; */
}

.categorytree .category span a {
    text-decoration: none;
    color: gray;
}

.categorytree .category span a.includedinstyle {
    color: black;
    font-weight: bold;
}

.categorytree .category.disabled span a {
    color: silver;
}

.categorytree .category.active {
    background-color: rgb(223,223,223);
}

.categorytree .category:hover {
    background-color: rgb(243,243,243);
}

.categorytree .category.active:hover {
    background-color: rgb(212,212,212);
}

.buttons {
    padding: 0px 0px;
    background-color: rgb(243,243,243);
    height: 32px;
}

.buttons .left,
.buttons .right {
    display: flex;
    gap: 0;
}

.buttons .left {
    width: 50%;
    float: left;
    text-align: left;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}

.buttons .right {
    width: 50%;
    float: right;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
    
}

.buttons .right a, .buttons .left a  {
    display: inline-block;
    font-size: 12px;
    padding: 8px 8px 8px 28px;
    cursor: pointer;
    margin: 0px 0px;
    background: 8px 50% no-repeat;
    background-color: rgb(231,231,231);
    color: black;
    text-decoration: none;
}

.buttons .right a:hover, .buttons .left a:hover {
    background-color: rgb(212,212,212);
}

.buttons .right a {
    text-align: right;
    position: relative;
}

.buttons .left a {
    text-align: left;
}

.hormnimenubcg {

}

.hornimenu {
    margin: 0px;
    padding: 0px;
    height: 60px;
}

.hornimenu li {
    display: block;
    float: left;
    margin: 0px;
    padding: 0px;
}

.hornimenu li a {
    display: block;
    margin: 0px;
    padding: 0px 15px;
    height: 60px;
    text-decoration: none;
}

.hornimenu li a span {
    display: block;
    margin: 0px;
    padding: 0px 0px;
    min-width: 45px;
    height: 60px;
    color: white;
    line-height: 90px;
    font-size: 9px;
    text-decoration: none;
    text-transform: uppercase;
    background-repeat: no-repeat;
    background-position: center 12px;
    text-align: center;
}



.hornimenu li .logom img {
    margin: 15px 0px 0px 0px;
}




.boxmenu {
    display: block;
    padding: 0px;
    margin: 0px;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    background-color: var(--merchwork-color2);
}

.boxmenu ul{
    display: block;
    margin: 0px;
    padding: 0px;

}

.boxmenu ul li{
    display: block;
    margin: 0px;
    padding: 0px;
    position: relative;
}

.boxmenu ul li:hover{
    background-image: none;
}

.boxmenu ul li ul{
    display: block;
    margin: 0px;
    padding: 0px;
}


.boxmenu ul li ul li{
    display: inline-block;
    min-height: 0px;
    width: auto;
    margin: 0px;
    padding: 0px;
    border: 0px;

}

.boxmenu ul li ul li:hover{
    border: 0px;
}

.boxmenu ul li ul li a{
    display: block;
    margin: 0px;
    padding: 10px 20px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--merchwork-color-font);
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    font-weight: bold;
}

.boxmenu ul li ul li a:Hover{
    background-color: rgb(70 0 202);
    color: white;
}

.boxmenu .nadpis {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 12px;
    color: white;
    text-transform: uppercase;
}

.pagerbox {
    margin: 0px !important;
    padding: 0px !important;
    text-align: right;
    background-color:rgb(243,243,243);
    border-top: 1px solid rgb(222,222,222);
}

.pagerbox .pager td {
    margin: 0px !important;
    padding: 0px !important;
    vertical-align: middle !important;
    font-size: 12px !important;
}

.pagerbox .pager td a {
    text-decoration: none;
    color: black;
    font-size: 12px;
    font-weight: normal;
}
.pagerbox .pager td form {
    display: block;
    margin: 0px !important;
    padding: 0px !important;
}

.pagerbox .pager td form #pager {
    display: block;
    margin: 0px !important;
    padding: 0px !important;
}

.pagerbox .pager td a.itemspage {
    background-color: rgb(243,243,243);
    opacity: .5;
    padding: 3px;
}

.pagerbox .pager td a.itemspage:hover {
    background-color: rgb(231,231,231);
    opacity: .8;
}

.pagerbox .pager td a.itemspage {
    opacity: .5;
}

.pagerbox .pager td .pagearrow {
    opacity: .3;
    width: 16px;
}

.pagerbox .pager td .pagearrow.active {
    opacity: .5;
}

.pagerbox .pager td .pagearrow.active:hover {
    opacity: .8;
}

.pagerbox .pager td .pagenumber {
    font-size: 11px;
    padding: 5px
}

.pagerbox .pager td.listedinfo {
    opacity: .5;
}

.percenttube {
    margin-top: 5px;
    position: relative;
    height: 10px;
    width: 100%;
    background-color: rgb(243,243,243);
}

.percenttube .percentil {
    position: absolute;
    height: 10px;
    width: 1%;
    background-color: rgb(223,223,223);
}

.percenttube .percentil.active {
    background-color: var(--merchwork-color-font);
}

h2.clickable {
    font-size: 25px;
    margin: 10px 10px;
    padding: 10px 10px 10px 48px;
    font-weight: normal;
    color: var(--merchwork-color-font);
    cursor: pointer;
    display: block;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    text-align: left;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    position: relative;
}

h2.clickable:hover {
    background-color: rgb(242,242,242);
    border: 1px solid rgb(198,198,198);
    color: #444;
}

h2.clickable span {
    display: block;
    line-height: 29px;
    font-size: 16px;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 0px 0px 0px 0px;
    font-weight: bold;
    color: #444;
    background-color: silver;
    border-radius: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
}


.chat .newbuttons {
    padding: 0px;
    text-align: right;
}

.chat .newbuttons img {
    cursor: pointer;
}


.chat .message {
    position: relative;
    color: #444;
    margin: 5px 0px;
    padding: 10px 10px 15px 90px;
    text-align: left;
    min-height: 50px;
    background-color: rgb(248,248,248);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    border-radius: 6px;
}

.chat .action {
    position: relative;
    color: gray;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 10px;
    text-align: left;
    font-size: 12px;
}

.chat .action .date {
    display: inline-block;
    width: 77px;
    font-size: 12px;
    color: rgb(222,222,222);
}

.chat .message.new {
    background-color: rgb(237,239,244);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    border-radius: 6px;
}

.chat .message.new .title {
    width: 50%;
    font-size: 16px;
}

.chat .message.new .text {
    width: 86%;
}

.chat .img {
    margin: 0px;
    position: absolute;
    top: 17px;
    left: 17px;
    max-width: 45px;
    max-height: 45px;
    border-radius: 50px;
}

.chat .message .topline {
    font-size: 16px;
    margin: 0px;
    padding: 4px 0px;
    color: black;
}

.chat .message .topline .title {
    color: black;
    font-weight: bold;
}

.chat .message .topline .name {
    color: gray;
}

.chat .message .topline .date {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: rgb(222,222,222);
}

.chat .message .topline .delicon {
    display: block;
    position: absolute;
    top: 30px;
    right: 5px;
}

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
    .chatbox {
        width: 100%;
    }
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
    .chatbox {
        width: 60%;
    }
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
    .chatbox {
    }
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
    .chatbox {
    }
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
    .chatbox {
    }
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
    .chatbox {
        width: 26.26%;
    }
}

.chatbox {
    display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;

    min-width: 272px;
    min-height: 285px;
    font-size: 12px;
    background-color: white;
    border: 1px solid rgb(204,204,204);
}

.chatbox .headline {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 34px;
    background-color: rgb(222,222,222);
}

.chatbox .headline .title {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 34px;
    font-size: 16px;
    color: white;
}

.chatbox .headline .title img {
    position: absolute;
    left: 0px;
    top: 0px;
    max-width: 34px;
    max-height: 34px;
}

.chatbox .headline .title span {
    position: absolute;
    left: 42px;
    top: 5px;
}

.chatbox .headline .refresh {
    display: block;
    position: absolute;
    top: 8px;
    right: 28px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.chatbox .headline .hide {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.chatbox .headline .show {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.chatbox .messagebody {
    display: block;
    position: absolute;
    top: 35px;
    left: 0px;
    width: 100%;
    height: 214px;
    background-color: rgb(245,245,245);
    overflow: scroll;
    overflow-x: hidden;
}

.chatbox .messagebody .message {
    display: block;
    position: relative;
    width: 100%;
    font-size: 12px;
    margin: 5px 5px;
    padding: 9px;
    width: 70%;
    min-height: 30px;
    border-radius: 6px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.chatbox .messagebody .message .infos {
    display: block;
    position: relative;
    font-size: 10px;
    color: gray
}

.chatbox .messagebody .message .infos b {
    color: black
}

.chatbox .messagebody .message .infos .link {
}

.chatbox .messagebody .message .infos .link img {
    width: 8px;
    height: 8px;
}

.chatbox .messagebody .message .precteno {
    display: block;
    position: relative;
    font-size: 10px;
    color: silver;
    text-align: right;
}

.chatbox .messagebody .message.my {
    text-align: right;
    background-color: rgb(237,239,244);
    float:right;
    clear: right;
}

.chatbox .messagebody .message.enemy {
    text-align: left;
    background-color: white;
    float:left;
    clear: left;
    padding-left: 50px;
}

.chatbox .messagebody .message.enemy .portrait, .chatbox .messagebody .message.my .portrait {
    max-width: 30px;
    max-height: 30px;
    position: absolute;
    top: 8px;
    border-radius: 30px;
}

.chatbox .messagebody .message.enemy .portrait {
    left: 10px;
}

.chatbox .messagebody .message.my .portrait {
    right: 10px;
}



.chatbox .inputbox {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 35px;
    font-size: 12px;
    background-color: rgb(222,222,222);
}



.chatbox .inputbox .to {
    width: 95%;
}

.chatbox .inputbox .text {
    width: 89%;
}

.soucty {
    border-spacing: 0px;
    border-collapse: separate;

}

.soucty tr td,
.soucty tr th {
    white-space: nowrap;
    text-align: right;
    padding: 5px 10px !important;
    color: rgb(69,68,71);
    border-bottom: 1px solid #DFDFDF;
}
.soucty tr th {
    text-align: left;
    font-size: 14px;
    font-weight: normal;
}
.soucty tr td {
    text-align: right !important;
    color: white;
}

.soucty tr td.total {
    text-align: right;
    color: white;
    background-color: black;
}

.soucty tr td.rate,
.soucty tr td.rsymbol {
    text-align: right;
    padding: 5px 0px !important;
}