/* general */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import "../scss/style.css";
.color1 {
  background-color: #00ABFF;
}

.color2 {
  background-color: #c92828;
}

.color3 {
  background-color: #80fc03;
}

a {
  color: #172F4E;
}

#logo_div a {
  background-image: url(/grafika/new/logo.svg);
  margin-top: -7px;
}

.logo-footer {
  background-image: url(/grafika/new/logowhite.svg);
  width: 230px;
  height: 80px;
  display: block;
  background-size: 100%;
  background-repeat: no-repeat;
}

input[type=checkbox]:checked {
  border: none;
  margin-top: 6px;
}

.helpdesk-person {
  width: 60%;
  margin-right: 5px;
  background-image: url(/grafika/new/helpdesk.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

body.v-light .nk-sidebar .metismenu li ul li.active a {
  color: #172F4E;
  background-color: #eaeaea;
}

.table-bordered td, .table-bordered th, .table-bordered {
  border: none !important;
}

.brand-white {
  display: none;
}

.nk-sidebar .metismenu > li a > i {
  font-size: 18px !important;
}

.mini-nav .nk-sidebar .metismenu a {
  position: relative;
  display: block;
  padding: 10px 1px;
  outline-width: 0;
  transition: all 0.3s ease-out;
}
.mini-nav .helpdesk {
  display: none;
}
.mini-nav .nav-header .brand-logo a {
  padding: 13px 17px;
  display: block;
}
.mini-nav .badge {
  margin-top: -14px;
  margin-right: -48px;
}

*,
*:focus,
*:hover {
  outline: none !important;
}

* {
  font-optical-sizing: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  background: rgb(248, 249, 250);
  scroll-behavior: smooth;
  width: 100%;
  min-width: 100%;
  position: relative;
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  color: #172F4E !important;
  background: rgb(248, 249, 250);
  width: 100%;
  min-width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Webkit based browsers */
meter[value="1"]::-webkit-meter-optimum-value {
  background: red;
}

meter[value="2"]::-webkit-meter-optimum-value {
  background: yellow;
}

meter[value="3"]::-webkit-meter-optimum-value {
  background: yellow;
}

meter[value="4"]::-webkit-meter-optimum-value {
  background: orange;
}

meter[value="5"]::-webkit-meter-optimum-value {
  background: orange;
}

meter[value="6"]::-webkit-meter-optimum-value {
  background: green;
}

/* Gecko based browsers */
meter[value="1"]::-moz-meter-bar {
  background: red;
}

meter[value="2"]::-moz-meter-bar {
  background: yellow;
}

meter[value="3"]::-moz-meter-bar {
  background: yellow;
}

meter[value="4"]::-moz-meter-bar {
  background: orange;
}

meter[value="5"]::-moz-meter-bar {
  background: orange;
}

meter[value="6"]::-moz-meter-bar {
  background: green;
}

.pw-meter {
  margin-left: 200px;
  margin-top: -20px;
  margin-bottom: 15px;
}

.pw-meter1 {
  margin-top: -15px;
}

#colorToggleButton {
  text-align: left;
  background: none;
  margin-left: 0;
  cursor: pointer;
  color: #172F4E;
}

.calendar-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url("/grafika/new/calendar.svg"); /* Replace 'eye-icon.png' with the path to your open eye icon */
  background-size: cover;
  margin-left: -32px;
  margin-bottom: -5px;
  cursor: pointer;
}

.credit-header a {
  background: #f3f3f3 !important;
  padding: 6px 8px;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.6s;
  font-weight: 600;
}
.credit-header a:hover {
  background: #172F4E !important;
  color: white;
  transition: all 0.6s;
}
.credit-header a:hover span {
  color: white;
  transition: all 0.6s;
}
.credit-header a span {
  color: #00ABFF;
  transition: all 0.6s;
}

.credit-box {
  height: 28px;
  margin-top: 16px;
  background: #f3f3f3 !important;
  padding: 6px 8px;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.6s;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.credit-box .credit-amount {
  color: #172F4E;
  transition: all 0.6s;
  text-decoration: none;
  font-weight: 600;
  margin: 0 7px;
}
.credit-box .credit-amount:hover {
  color: #00ABFF;
  transition: all 0.6s;
}
.credit-box .credit-add {
  font-size: 18px;
  color: #00ABFF;
}
.credit-box .credit-add:hover {
  color: #ffbc0a;
  transition: all 0.6s;
}

.edit-view span {
  background: #f3f3f3 !important;
  padding: 2px 4px;
  border-radius: 4px;
  margin-right: 5px;
  transition: all 0.6s;
}

.edit-view span:hover {
  background: #172F4E !important;
  color: white !important;
  padding: 2px 4px;
  border-radius: 4px;
  margin-right: 5px;
  transition: all 0.6s;
}

.eye-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("/grafika/new/eye.svg"); /* Replace 'eye-icon.png' with the path to your open eye icon */
  background-size: cover;
  cursor: pointer;
  margin-left: -32px;
  margin-bottom: -3px;
}

.eye-icon.closed, .eye-icon-login.closed {
  background-image: url("/grafika/new/eye-o.svg"); /* Replace 'closed-eye-icon.png' with the path to your closed eye icon */
}

.eye-icon-login {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(/grafika/new/eye.svg);
  background-size: cover;
  cursor: pointer;
  margin-left: -35px;
  margin-bottom: 3px;
}

.grey {
  background: rgb(181, 181, 181) !important;
}

.grey:hover {
  background: #00ABFF !important;
}

select {
  min-height: 35px;
}

.inline-flex {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

h1 {
  margin: 0;
  padding: 0;
  text-transform: none;
  font-weight: 600;
  font-size: 26px;
  color: #172F4E;
  border: none;
  font-family: "Poppins", sans-serif;
  padding-bottom: 10px;
}

h2 {
  width: 590px;
  line-height: 36px;
  font-size: 21px;
  font-weight: 600;
  text-decoration: none !important;
  color: #172F4E;
  padding-left: 0px;
  padding-bottom: 10px;
  font-family: "Poppins", sans-serif;
}

h2.zluty {
  background: none;
  margin-bottom: 0;
}

h2.dlouhy {
  width: 760px;
  background: white;
}

h3 {
  font-size: 16px;
  color: #172F4E;
  font-weight: 600;
  margin: 0 0 5px 0;
  font-family: "Poppins", sans-serif;
}

h4 {
  color: #172F4E;
  font-size: 100%;
  font-weight: bold;
  margin: 0 0 10px;
  font-family: "Poppins", sans-serif;
}

h5 {
  font-size: 90%;
  font-weight: bold;
  color: #172F4E;
  margin: 20px 0 10px 0;
}

h6 {
  font-size: 90%;
  font-weight: bold;
  color: #172F4E;
  margin: 10px 0 10px 0;
}

p {
  margin-bottom: 15px;
  line-height: 190%;
  color: #172F4E;
}

ul,
ol {
  line-height: 140%;
  color: #172F4E;
}

body.v-light h1,
body.v-light h2,
body.v-light h3,
body.v-light h4,
body.v-light h5,
body.v-light h6 {
  color: #172F4E;
}

.act-number {
  font-size: 50px;
  font-weight: 600;
}

.cistic {
  padding: 0;
  margin: 0;
  list-style: none;
  float: none;
  height: 1px;
  width: 1px;
  font-size: 1px;
  line-height: 1px;
  margin: -1px -1px 0 0;
  clear: both;
}

table {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
}

.admin table {
  overflow-x: scroll;
  display: block;
}
.admin input[type=submit] {
  background: #00ABFF !important;
  color: white !important;
}
.admin input[type=submit]:hover {
  background: #172F4E !important;
  color: white !important;
}

.dataTable {
  display: table !important;
}

td,
th {
  padding: 5px 10px;
  font-weight: 400;
}

/*
#main-wrapper table tr:nth-child(4n) {
  background: $grey;
}
  */
#main-wrapper table.kategorie tr:hover {
  background: #f4f4f4;
}

#main-wrapper table.kategorie thead tr:hover {
  background: #fff;
}

input,
textarea,
select {
  font-family: "Inter", sans-serif;
  font-size: 100%;
  color: #172F4E;
  padding: 14px;
  background: #f4f4f4;
  border-radius: 5px;
  cursor: auto;
}

select {
  cursor: pointer;
}

dl > dt {
  width: 30px;
  float: left;
  line-height: 150%;
}

dl > dd {
  margin-left: 30px;
  line-height: 150%;
}

.strong {
  font-weight: bold;
}

.small {
  font-size: 90%;
}

.yellow {
  color: #fff;
}

.blue {
  color: #2084e8;
}

.green {
  color: #1ac050;
}

.vetsi {
  font-size: 110%;
}

.white {
  color: white;
}

.sedy {
  color: #999;
}

.red {
  color: #ea1717;
}

.floatleft {
  float: left !important;
}

.imgright {
  float: right;
  margin: 0 0 20px 20px;
}

.mt0 {
  margin-top: 0 !important;
}

.pr130 {
  padding-right: 130px !important;
}

.p0 {
  padding: 0 !important;
}

.pl20 {
  padding-left: 20px !important;
}

.anon-number {
  margin-top: 10px;
  color: black;
  display: inline-block;
  position: relative;
}

.simple-hover-tooltip {
  position: absolute;
  display: none;
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 12px;
  z-index: 99999;
  width: 210px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.sender-message {
  padding: 20px 25px !important;
  border-left: 5px solid #00ECBC;
}

#gdpr-lightbox-agreement iframe {
  margin: 0px auto;
  height: 90%;
  min-height: 300px;
  width: 800px;
  display: block;
  border: 0px none;
  top: 5%;
  position: relative;
  border-radius: 2px;
  font-family: "Inter", sans-serif;
}

.text-body {
  padding: 25px;
}

p.buttons a {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  /* background: #7dff7d; */
  text-decoration: none;
  /* color: #9300ff; */
  background: #00ABFF;
  border-radius: 8px;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}

body.v-light .nk-sidebar .metismenu a {
  color: rgba(0, 0, 0, 0.7411764706);
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  margin-top: 3px;
  border-radius: 0px;
  letter-spacing: 0;
}

body.v-light .nk-sidebar .metismenu > li:hover > a, body.v-light .nk-sidebar .metismenu > li:focus > a {
  background: #eeeeee;
  color: black;
}

body.v-light .nk-sidebar .metismenu li ul li:hover a, body.v-light .nk-sidebar .metismenu li ul li:focus a {
  color: black;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

.zone {
  margin: 20px 0;
  width: 80%;
  height: 50%;
  border: 1px dotted rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  text-align: center;
  color: #777777;
  z-index: 20;
  transition: all 0.3s ease-out;
  padding: 30px;
}
.zone .btnCompression .active {
  background: #eb6a5a;
  color: white;
}
.zone i {
  text-align: center;
  font-size: 10em;
  color: #777777;
  margin-top: 50px;
}
.zone .selectFile {
  height: 30px;
  margin: 20px auto;
  position: relative;
  width: 130px;
}
.zone label,
.zone input {
  cursor: pointer;
  display: block;
  height: 35px;
  left: 0;
  top: 0;
  width: 100%;
  border-radius: 2px;
  color: #172F4E !important;
}
.zone label {
  background: #eaeaea;
  color: #777777;
  display: inline-block;
  font-size: 14px;
  line-height: 35px;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
}
.zone input[type=file] {
  opacity: 0;
}

.zone.in {
  color: white;
  border-color: white;
  background: #172F4E;
}
.zone.in i {
  color: #fff;
}
.zone.in label {
  background: #fff;
  color: #172F4E;
}

.zone.hover {
  color: white;
  border-color: white;
  background: #00ABFF;
  border: 1px dotted #172F4E;
}
.zone.hover i {
  color: white;
}
.zone.hover label {
  background: #fff;
  color: #172F4E;
}

.zone.fade {
  transition: all 0.3s ease-out;
  opacity: 1;
}

input[type=checkbox] {
  vertical-align: text-bottom;
  margin-right: 5px;
  cursor: pointer;
}

input[type=radio] {
  vertical-align: middle;
  margin-right: 5px;
  cursor: pointer;
}

input[type=checkbox] {
  width: 18px;
  height: 18px;
}

.group {
  display: flex;
  line-height: 30px;
  align-items: center;
  position: relative;
  width: 105%;
}

input {
  height: 38px;
  line-height: 15px;
  padding: 0 5rem;
  padding-left: 3rem;
  border: 2px solid transparent;
  border-radius: 5px;
  outline: none;
  background-color: #f8fafc;
  color: #172F4E;
  transition: 0.5s ease;
  padding: 8px 12px;
}

input::placeholder {
  color: #94a3b8;
}

input:focus,
input:hover {
  outline: none;
  border-color: #00ABFF;
  background-color: #fff;
}

.icon {
  position: absolute;
  left: 1rem;
  fill: none;
  width: 1rem;
  height: 1rem;
  margin-top: -7px;
}

.e-card {
  margin: auto;
  margin-bottom: 30px;
  background: transparent;
  box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);
  position: relative;
  width: 330px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 540px;
  height: 700px;
  opacity: 0.5;
  left: 0;
  top: 0;
  margin-left: -50%;
  margin-top: -70%;
  background: linear-gradient(744deg, #4090ff, #42a9f3 60%, #00ddeb);
}

.infotop {
  text-align: center;
  font-size: 20px;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  color: rgb(255, 255, 255);
  font-weight: 600;
}
.infotop img {
  width: 50px !important;
  height: 50px !important;
  margin-right: 0 !important;
  padding: 10px !important;
}
.infotop a {
  color: white;
}

.name-wave {
  font-size: 15px;
  font-weight: 100;
  position: relative;
  top: 1em;
  text-transform: lowercase;
}

.wave:nth-child(2),
.wave:nth-child(3) {
  top: 230px;
}

.playing .wave {
  border-radius: 40%;
  animation: wave 6000ms infinite linear;
}

.wave {
  border-radius: 40%;
  animation: wave 110s infinite linear;
}

.playing .wave:nth-child(2) {
  animation-duration: 8000ms;
}

.wave:nth-child(2) {
  animation-duration: 100s;
}

.playing .wave:nth-child(3) {
  animation-duration: 10000ms;
}

.wave:nth-child(3) {
  animation-duration: 90s;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#radial-total-chart .apexcharts-legend-series {
  cursor: pointer;
  line-height: normal;
  margin: 0 5px !important;
  text-align: right;
}

/*** right ****/
#stahuj,
#sluzby2,
#nadpis-info,
#nadpis-zabava,
#nabidka-uspor,
#info-zabava {
  width: 133px;
  height: 28px;
  padding: 15px;
  color: #172F4E;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 35px;
  font-size: 18px;
}

#nadpis-info {
  background: url("../grafika/info-zabava.png");
}

#nadpis-zabava {
  background: url("../grafika/nadpis-zabava.png");
}

#tematicke {
  width: 133px;
  height: 41px;
  line-height: 41px;
  padding-left: 50px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  background: url("../grafika/tematicke.png");
  margin-bottom: 10px;
}

input[type=file] {
  margin: auto;
  height: 60px;
  border-radius: 2px;
  background: #fff !important;
}

.drop-title {
  color: #777777;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  transition: color 0.2s ease-in-out;
}

.upload-container {
  position: relative;
  transition: background 0.2s ease-in-out, border 0.2s ease-in-out !important;
  margin: 10px 0 30px 0;
  z-index: 10;
  text-align: left;
}
.upload-container p {
  color: #777777;
}
.upload-container input[type=file]::file-selector-button {
  margin-top: 20px;
  margin-left: 23px;
  margin-right: 10px;
  border: none;
  padding: 10px 20px;
  background: #172F4E;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  transition: background 0.5s ease-in-out;
}

.upload-container input {
  background: transparent !important;
  border: 1px dashed #c4c4c4;
  outline-offset: -10px;
  padding: 170px 31% 80px 31%;
  text-align: center !important;
  width: 100%;
  z-index: 100;
  position: relative;
  transition: background 0.5s ease-in-out, border 0.5s ease-in-out !important;
}

.upload-container input:hover,
.upload-container input:active,
.upload-container input:focus {
  background: rgba(0, 0, 0, 0.1333333333) !important;
  border-color: #111;
}

.upload-container:hover input[type=file]::file-selector-button {
  margin-top: 20px;
  margin-left: 23px;
  border: none;
  padding: 10px 20px;
  background: #00ABFF !important;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  transition: background 0.5s ease-in-out !important;
}

.upload-btn {
  margin-left: 100px;
  padding: 7px 20px;
}

.upload-info {
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  z-index: 0;
}
.upload-info img {
  filter: brightness(0.8);
}

/***************** layout *************/
#registration {
  background: white;
  padding: 30px;
  border-radius: 0px 15px 15px 15px;
}

#obal {
  max-width: 100vw;
  background: white;
  box-shadow: 0px 20px 20px 1px rgba(194, 209, 217, 0.2);
}

#main {
  width: 100vw;
  text-align: left;
  margin: 0 auto;
  background: url("");
  background-size: cover;
}

#leaderboard {
  width: 1300px;
  padding-bottom: 10px;
  text-align: left;
  margin: 0 auto;
}

#leaderboard .reklama {
  margin: 5px 0 0 0;
}

#seolista {
  width: 1300px;
  padding: 14px 0px;
  font-size: 90%;
  line-height: 180%;
  text-align: center;
  margin: 0 auto;
}

#seolista strong {
  padding-right: 15px;
}

#seolista a,
#seolista a:visited {
  color: #172F4E;
}

#seolista a:hover,
#seolista a:active,
#seolista a:focus {
  color: #2084e8;
}

#seolista .oddelovac {
  color: white;
}

#top {
  width: 1300px;
  margin: auto;
  height: 70px;
  position: relative;
  text-align: left;
  background: white;
}

@media (max-width: 1299px) {
  #top {
    padding: 0 30px;
  }
}
#logo {
  width: 237px;
  font-size: 150%;
  color: #172F4E;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  float: left;
}

#logo a,
#logo span {
  width: 237px;
  display: block;
  position: absolute;
  top: 12px;
  left: 0;
}

#logo_div a,
#logo_div span {
  display: block;
  left: 10px;
  top: 17px;
  background-size: 91%;
  background-repeat: no-repeat;
  height: 47px;
  width: 200px;
}

#lista_horni {
  width: 707px;
  height: 37px;
  padding-top: 6px;
  float: right;
}

#lista_horni_old {
  width: 707px;
  height: 37px;
  padding-top: 20px;
  float: right;
}

#kosik {
  width: 500px;
  height: 18px;
  padding: 5px 0 0 28px;
  color: white;
  background: url("../grafika/kosik.jpg") no-repeat center left;
  float: left;
}

#kosik a,
#kosik a:visited {
  color: #fff;
}

#kosik a:hover,
#kosik a:active,
#kosik a:focus {
  color: #6fc8eb;
}

#hledani {
  width: 144px;
  height: 24px;
  padding-left: 26px;
  background: url("../grafika/lupa.jpg") no-repeat center left;
  float: right;
}

input#hledej {
  width: 109px;
  height: 18px;
  padding: 6px 0 0 6px;
  font-size: 90%;
  border: 0;
  background: white url("../grafika/hledej.jpg");
  float: left;
}

input#go {
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  font-size: 90%;
  text-align: center;
  background: #fff url("../grafika/go.jpg");
  float: left;
}

/* topmenu */
#topmenu {
  display: none;
}

ul#topmenu table {
  border: 0;
  background: none;
}

ul#topmenu table td {
  border: 0;
  padding: 0;
  background: none;
}

ul#topmenu {
  width: 744px;
  height: 63px;
  background: white;
  margin: 0;
  font-weight: bold;
  padding: 10px 3px 0 0;
  float: right;
  _overflow: hidden;
}

ul#topmenu li {
  width: 124px;
  height: 63px;
  background: url("../grafika/divider.jpg") no-repeat right center;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}

ul#topmenu li#sest {
  background: none;
}

#topmenu a,
#topmenu a:visited,
#topmenu span {
  width: 124px;
  height: 28px;
  display: block;
  padding-top: 35px;
  text-decoration: none;
  color: #172F4E;
  text-align: center;
}

#topmenu a:hover,
#topmenu a:active,
#topmenu a:focus,
#topmenu span {
  color: #172F4E;
  padding-top: 30px;
}

.dobiti-button {
  background: #519bbd;
  border-radius: 2px;
  display: inline-flex;
  padding: 5px 25px;
  margin-right: 15px;
}
.dobiti-button a {
  color: white !important;
  text-decoration: none;
  font-weight: 400;
}

/*** submenu ***/
ul#topmenu li ul li.last {
  border: 0 !important;
}

ul#topmenu li#tri:hover a.top_link,
ul#topmenu li#tri a.top_link:hover {
  color: #172F4E;
}

ul#topmenu li#pet:hover a.top_link,
ul#topmenu li#pet a.top_link:hover {
  color: #172F4E;
}

ul#topmenu li#pet a.aktiv {
  width: 124px;
  height: 28px;
  display: block;
  padding-top: 35px;
  text-decoration: none;
  color: #172F4E;
  text-align: center;
}

ul#topmenu table {
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
}

ul#topmenu table td {
  border: 0;
}

ul#topmenu li:hover {
  position: relative;
  z-index: 200;
}

ul#topmenu a:hover {
  position: relative;
  white-space: normal;
  z-index: 200;
}

ul#topmenu :hover ul.sub {
  width: 120px;
  height: 174px;
  margin: 0;
  padding: 0;
  font-size: 90%;
  text-transform: none;
  font-weight: normal;
  border: 2px solid #ddd;
  text-align: left;
  list-style: none;
  list-style-image: none;
  background: #2f2f2f;
  z-index: 1000;
  position: absolute;
  top: 55px;
  left: 0;
  display: block; /* dulezite */
  z-index: 300;
  white-space: nowrap;
}

ul#topmenu :hover ul#three.sub {
  height: 104px;
}

ul#topmenu :hover ul.sub li {
  width: 120px;
  height: 34px;
  border-bottom: 1px solid #ddd;
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: none;
  background: none;
  display: block;
  float: left;
  position: relative;
}

ul#topmenu :hover ul.sub li a,
span.active {
  width: 120px !important;
  height: 34px !important;
  padding: 0 !important;
  font-weight: 400 !important;
  color: white !important;
  line-height: 34px !important;
  text-align: center;
  display: block;
  text-decoration: none;
  background: #2f2f2f !important;
}

ul#topmenu :hover ul.sub li a:hover,
span.active {
  background: none !important;
  color: white !important;
}

ul#topmenu ul {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content {
  background: white;
  margin-bottom: 70px;
  border-radius: 5px;
  padding: 30px;
  box-shadow: 0px 20.2109px 40.4219px -6.73698px rgba(39, 76, 119, 0.16);
}

.search-bar input {
  height: 40px !important;
}
.search-bar input::placeholder {
  color: #878787;
  font-size: 14px;
  font-weight: 400;
}

.rotate-neg-45 {
  transform: rotate(-45deg);
}

.delivery-status2.unknown > .mdi {
  color: #eed700 !important;
  border-radius: 0.25rem;
}
.delivery-status2.failed > .mdi {
  color: #f82e45 !important;
}
.delivery-status2.success > .mdi {
  color: #1ac050 !important;
  border-radius: 0.3rem 0.25rem;
}
.delivery-status2.inprogress > .mdi {
  color: #66B2B2 !important;
  border-radius: 0.25rem;
}

.delivery-status.delivered {
  color: #1ac050;
}

.delivery-status.not-delivered {
  color: #f82e45 !important;
}

.delivery-status.sent {
  color: #172F4E;
}

#caller {
  width: 100%;
  position: relative;
}

#caller h2 {
  margin: 0;
  padding: 10px 0 10px 80px;
  text-shadow: 1px 1px 1px #fff;
  font-size: 22px;
  font-family: "Inter", sans-serif;
  background: none;
}

#caller .content {
  padding: 50px;
  position: relative;
  z-index: 100;
}

#caller h3 {
  margin: 0 0 15px 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
  font-family: "Inter", sans-serif;
}

.caller-address-book {
  background: #f0f0f0 !important;
  border-radius: 5px !important;
  padding: 5px;
}

#caller #odesilatel-container {
  float: right;
  position: relative;
  z-index: 1000;
  width: 100%;
}
#caller #odesilatel-container select {
  width: 100%;
}

.called-number .border-shadow.input {
  width: 100%;
}
.called-number .border-shadow.input select,
.called-number .border-shadow.input input {
  width: 100%;
  height: 38px;
}
.called-number span,
.called-number label {
  margin-top: 15px;
}

#caller h3#info-about-call {
  margin: 20px 0 10px 0;
}

#caller #search-input {
  margin: 0;
  padding: 1px;
  background: white;
  display: inline-block;
  padding-right: 10px;
  width: 50%;
}

#caller #search-line {
  display: inline-block;
  width: 415px;
}

#caller #search-input #search {
  border: 0;
  background: transparent;
  width: 90%;
}

#caller a#search-btn {
  background: black;
  display: inline-block;
  width: 24px;
  height: 22px;
  position: relative;
  left: -10px;
  behavior: url(/styles/PIE.htc);
}

#caller a#search-btn span {
  display: none;
}

#caller #add-rec-input {
  margin: 0;
  padding: 1px;
  background: white;
  display: inline-block;
  padding-right: 10px;
}

#caller #add-rec-input #add-rec {
  border: 0;
  background: transparent;
}

#caller a#add-rec-btn {
  background: black;
  display: inline-block;
  height: 19px;
  line-height: 19px;
  position: relative;
  left: -10px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 80%;
  font-weight: bold;
  letter-spacing: -1px;
  padding: 0 10px 0 20px;
}

.border-shadow {
  margin: 0;
  padding: 1px;
  display: inline-block;
  position: relative;
  behavior: url(/styles/PIE.htc);
}

.border-shadow.input {
  width: 150px;
}

.border-shadow.big {
  margin: 0;
  padding: 1px;
  background: white;
  display: inline-block;
  width: 200px;
  height: 125px;
}

#caller .clear-left {
  clear: left;
}

#caller .columns {
  font-size: 90%;
  font-weight: bold;
}

#caller .colmn-1,
#caller .colmn-2,
#caller .colmn-3 {
  float: left;
  height: 100%;
}

#caller .colmn-1,
#caller .colmn-2 {
  margin-right: 20px;
}

#caller .colmn-1 {
  width: 40%;
}

#caller .colmn-2 {
  width: 50%;
}

#caller textarea {
  width: 99%;
  height: 99%;
  border: 0;
  background: transparent;
  height: 70px;
}

#caller #recivers {
  width: 190px;
}

#caller ul#peoples-menu {
  margin: 0;
  padding: 0;
  width: 305px;
}

#caller ul#peoples-menu li {
  margin: 0;
  padding: 3px 6px 10px 6px;
  list-style: none;
  display: inline-block;
  text-align: center;
}

#caller ul#peoples-menu li.selected {
  background: #729338;
}

#caller ul#peoples-menu li.selected a {
  color: white;
}

#caller ul#peoples-menu li a {
  color: black;
  text-decoration: none;
  font-size: 90%;
}

#caller ul#peoples-menu li a:hover {
  color: white;
}

#caller h4 {
  margin: 5px 0;
  padding: 0;
  color: black;
}

#caller #msg-info {
  font-size: 90%;
  margin-top: 20px;
  float: left;
}

#caller #msg-info em {
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.5);
  font-style: normal;
  border: 1px solid #8db844;
  padding: 5px 10px;
}

#caller-logo {
  width: 54px;
  height: 83px;
  position: absolute;
  top: -20px;
  left: 20px;
  z-index: 999;
}

#caller #call_info {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-size: 90%;
}

#caller #call_info th {
  background: black;
  color: #ababab;
  font-size: 80%;
  font-weight: normal;
}

#caller #call_info th {
  padding: 4px 10px;
  border-right: 1px solid black;
}

#caller #call_info td {
  padding: 8px 10px;
}

#caller #call_info td {
  border-bottom: 1px solid black;
  border-right: 1px solid #c9caba;
  background: #f5f7e2;
}

#caller #call_info td.last {
  border-right: 1px solid black;
}

#caller #call_info .first {
  text-align: left;
}

#caller .footer a {
  color: black;
  font-size: 80%;
  font-weight: bold;
  padding: 3px 0 3px 20px;
  background: transparent url(../images/caller/add-credit.png) 0 center no-repeat;
}

#caller-price-list {
  clear: both;
  width: 700px;
  border-left: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  border-collapse: collapse;
  font-size: 90%;
  text-align: center;
}

#caller-price-list thead {
  text-align: center;
  background: #b6ea59;
}

#caller-price-list th,
#caller-price-list td {
  padding: 10px 20px;
}

#caller-price-list tr.odd td {
  background: #f5f5f5;
}

#caller-price-list td,
#caller-price-list th {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

#caller-price-list .state {
  background: white;
  border: 1px solid #e1e1e1;
  font-size: 80%;
  padding: 2px 2px 2px 24px;
}

#caller-price-list .state.cz {
  background: white url("../images/caller/flags/czech-republic.png") 3px center no-repeat;
}

#caller-price-list .state.fin {
  background: white url("../images/caller/flags/finland.png") 3px center no-repeat;
}

#caller #caller-man {
  width: 150px;
  height: 272px;
  background: url(../images/caller/caller-man.png) 0 0 no-repeat;
  float: right;
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 10;
}

#caller .number {
  color: white;
  display: inline-block;
  width: 20px;
  height: 25px;
  line-height: 25px;
  border: 2px solid white;
  padding-left: 5px;
  /*font-size: 120%;*/
  font-size: 18px;
  margin-right: 7px;
  font-weight: bold;
  font-family: "Inter", sans-serif;
  position: relative;
}

#caller .colmn-2 {
  font-weight: normal;
}

#caller #country_code {
  display: inline-block;
  width: 32px;
  text-align: right;
}

/*** modra lista ***/
#lista {
  width: 929px;
  height: 35px;
  padding: 11px 38px 0 17px;
  color: white;
  background: #2084e8 url("../grafika/lista.jpg");
  font-size: 90%;
  float: left;
  display: none;
}

#lista a,
#lista a:visited {
  color: white;
}

#lista a:hover,
#lista a:focus,
#lista a:active {
  color: #172F4E;
}

#login {
  width: 709px;
  height: 24px;
  float: left;
}

#login a {
  display: inline-block;
  padding-top: 4px;
}

#login #prihlaseny a {
  padding-top: 0 !important;
}

#login label {
  float: left;
  padding-top: 4px;
}

#username,
#username2 {
  padding-left: 25px;
  height: 18px;
}

#username2 {
  height: 22px;
}

input#user {
  width: 122px;
  height: 19px;
  padding: 5px 0 0 3px;
  margin-right: 7px;
  color: #172F4E;
  border: 0;
  background: white url("../grafika/user.jpg");
  float: left;
}

input#heslo {
  width: 105px;
  height: 19px;
  padding: 5px 0 0 3px;
  color: #172F4E;
  margin-left: 3px;
  border: 0;
  background: white url("../grafika/heslo.jpg");
  float: left;
}

input#prihlasit,
input#odhlasit {
  width: 80px;
  height: 24px;
  text-align: center;
  font-size: 14px;
  color: #172F4E;
  padding: 0;
  margin: 0px;
  float: left;
  font-weight: 600;
  cursor: pointer;
  background: none !important;
}

#credit a {
  color: #172F4E !important;
  text-decoration: none;
}

a.prihlasit {
  display: block;
  width: 100px;
  height: 24px;
  text-align: center;
  font-size: 14px;
  color: #172F4E;
  font-weight: 700;
  padding: 0;
  margin: 0 10px;
  float: right;
  color: #172F4E !important;
  text-decoration: none;
  position: relative;
  left: 30px;
  border-radius: 5px !important;
}

input#odhlasit {
  float: none;
}

#prihlaseny {
  height: 60px;
  line-height: 22px;
  display: inline-block;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: right;
  cursor: pointer;
}
#prihlaseny a, #prihlaseny input {
  color: #172F4E;
  border: none !important;
}
#prihlaseny a:hover, #prihlaseny input:hover, #prihlaseny input:focus, #prihlaseny input:active {
  color: #00ABFF;
  border: none !important;
  font-weight: 500;
}
#prihlaseny input:hover, #prihlaseny input:focus, #prihlaseny .hover-red:hover input, #prihlaseny .hover-red:hover i {
  color: #f82e45 !important;
}

.menu-id, .menu-id:hover {
  cursor: default;
  font-size: 12px;
  font-weight: 500;
  color: grey;
  background-color: #f3f3f3 !important;
}

#prihlaseny .oddelovac {
  padding-bottom: 5px;
  display: inline-block;
}

#credit {
  padding-left: 20px;
  padding-bottom: 5px;
  display: inline-block;
  margin-top: -5px;
}

#tarif {
  padding-bottom: 5px;
  display: inline-block;
}

a#dobit,
a#dobit:visited {
  color: white !important;
  font-weight: bold;
}

a#dobit:hover,
a#dobit:active,
a#dobit:focus {
  color: white;
}

#sender #submit {
  margin-top: 12px;
  padding: 5px 20px !important;
  display: inline-block;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  color: white;
  border: none !important;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 100%;
  font-size: 15px;
  font-family: Arial;
  font-weight: bold;
  position: relative;
  z-index: 100;
  background: #00ABFF !important;
  border-radius: 2px;
  behavior: url(/styles/PIE.htc);
}

.DynarchCalendar {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  background: white !important;
  font: 11px Arial, Helvetica, sans-serif;
  line-height: 14px;
  position: relative;
  cursor: default;
  width: 200px;
  padding: 10px !important;
  border: 1px solid #eff2f7 !important;
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1) !important;
  border-radius: 2px !important;
}

.DynarchCalendar-body {
  position: relative;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
  background: white !important;
}

#ie {
  height: 24px;
  display: inline-block;
}

#navigace {
  width: 212px;
  height: 24px;
  line-height: 24px;
  float: right;
}

#navigace .oddelovac {
  color: #6fc8eb;
  padding: 0 10px;
}

#homepage {
  padding-left: 18px;
  background: url("../grafika/domovska.jpg") no-repeat center left;
}

#doporucit {
  padding-left: 18px;
  background: url("../grafika/doporucit.jpg") no-repeat center left;
}

.arrowbig {
  position: absolute;
  top: 230px;
  left: 492px;
}

.arrowbig2 {
  position: absolute;
  top: 230px;
  left: 337px;
}

input.search-button, .search-button {
  font-family: "Poppins", sans-serif;
  margin-left: 0px;
  height: 40px;
  line-height: 18px;
  font-weight: 500;
  color: WHITE;
  padding-left: 25px;
  display: inline-block;
  background-color: #00ABFF !important;
  border-radius: 0 5px 5px 0 !important;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  border: none !important;
}

/****** obsah *********/
#obsah {
  float: left;
}

#inner {
  float: left;
}

#left {
  width: 280px;
  min-height: 100vh;
  height: 100%;
  float: left;
  padding: 20px;
  background: white;
  box-shadow: 0px 20.2109px 40.4219px -6.73698px rgba(39, 76, 119, 0.16);
}

.prof-btn {
  width: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px;
  margin: 8px;
  opacity: 0.6;
}

.login-data {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.login-data .name {
  color: #172F4E;
  font-size: 14px;
  font-weight: 600;
}
.login-data .mdi-account {
  padding: 3px 4px;
  border-radius: 5px;
  margin-right: 5px;
  color: white;
  background: #172F4E;
}
.login-data .mdi-chevron-down {
  margin-left: 1px;
  font-weight: 900;
  font-size: 16px;
}

.carousel-indicators li {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 10px !important;
  height: 10px !important;
  background: #a3a3a3 !important;
  border-radius: 10px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
}

.carousel-indicators .active {
  background-color: #00ABFF !important;
}

#SMSTag {
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}

#RCSTag {
  transform: translatey(0px);
  animation: float 3s ease-in-out infinite;
}

#ViberTag {
  transform: translatey(0px);
  animation: float 5s ease-in-out infinite;
}

#OmniTag {
  transform: translatey(0px);
  animation: float 4s ease-in-out infinite;
}

#Dots {
  transform: scale(1);
  animation: pulse 5s ease-in-out infinite;
}

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
#Shortcut {
  transform: translatey(0px);
  animation: shortcut 6s ease-in-out;
}

#Week {
  transform: translatey(0px);
  animation: week 6s ease-in-out;
}

@keyframes shortcut {
  0% {
    transform: translatey(0px);
  }
  10% {
    transform: translatey(0px);
  }
  20% {
    transform: translateY(680px);
  }
  100% {
    transform: translateY(680px);
  }
}
@keyframes week {
  0% {
    transform: translatey(0px);
  }
  17% {
    transform: translatey(0px);
  }
  24% {
    transform: translateY(-300px);
  }
  100% {
    transform: translateY(-300px);
  }
}
#Day, #Limit {
  transform: translatex(0px);
  animation: day 6s ease-in-out infinite;
}

#Month {
  transform: translatey(0px);
  animation: month 6s ease-in-out infinite;
}

@keyframes month {
  30% {
    transform: translatex(0px);
  }
  27% {
    transform: translatex(0px);
  }
  40% {
    transform: translatex(-577px);
  }
  100% {
    transform: translatex(-577px);
  }
}
@keyframes day {
  0% {
    transform: translatex(0px);
  }
  36% {
    transform: translatex(0px);
  }
  46% {
    transform: translatex(805px);
  }
  100% {
    transform: translatex(805px);
  }
}
#Text1 {
  opacity: 0;
  animation: fadeintop1 6s ease-in-out;
}

#Text2 {
  opacity: 0;
  animation: fadeintop2 6s ease-in-out;
}

#Text3 {
  opacity: 0;
  animation: fadeintop3 6s ease-in-out;
}

#Zprava {
  opacity: 0;
  animation: fadeinbottom 6s ease-in-out;
}

#Connect {
  opacity: 0;
  transform: translate(0px);
  animation: popin 6s ease-in-out;
}

@keyframes fadeintop1 {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }
  10% {
    opacity: 0;
    transform: translateY(-300px);
  }
  20% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeintop2 {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }
  20% {
    opacity: 0;
    transform: translateY(-300px);
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeintop3 {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }
  30% {
    opacity: 0;
    transform: translateY(-300px);
  }
  40% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeinbottom {
  0% {
    opacity: 0;
    transform: translateY(300px);
  }
  45% {
    opacity: 0;
    transform: translateY(300px);
  }
  50% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes popin {
  0% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  44% {
    opacity: 1;
  }
  45% {
    opacity: 0.4;
  }
  47% {
    opacity: 1;
  }
  48% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
body.v-light .header-right .icons > a {
  color: #172F4E;
  font-weight: 600;
}

body.v-light .header {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(120, 130, 140, 0.13);
}

.panel {
  padding-left: 17px;
}

#center {
  width: 1019px;
  padding: 0 15px 0 16px;
  float: left;
  margin: 20px 100px;
}

#center.siroky {
  width: 1019px !important;
}

#right {
  width: 170px;
  float: right;
  display: none;
}

.helpdesk {
  padding-left: 20px;
  padding-bottom: 50px;
  background: white;
}
.helpdesk h4, .helpdesk a {
  font-size: 14px;
  color: black !important;
  font-weight: 500;
}
.helpdesk a:hover {
  color: #00ABFF !important;
  font-weight: 500;
}
.helpdesk h3 {
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  color: black !important;
  font-weight: 500 !important;
}
.helpdesk p {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7411764706);
}
.helpdesk .helpdesk-image {
  display: inline-flex;
  color: grey;
  padding: 10px 35px 0 0;
  vertical-align: middle;
  align-items: center;
}
.helpdesk .helpdesk-image h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}
.helpdesk .helpdesk-image i {
  height: 24px;
  margin-right: 11px;
  font-size: 19px;
  color: #00ABFF !important;
}

#chart {
  max-width: 900px;
  margin: 0 auto 35px auto;
  font-family: "Inter", sans-serif !important;
}

.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
  opacity: 1;
  height: 3px !important;
}

.form-group table {
  display: flex;
}
.form-group table .button {
  background: #00ABFF !important;
  border-radius: 5px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  cursor: pointer;
  border: none;
}
.form-group table .button:hover {
  background: #f4f4f4 !important;
  border: none;
  color: #172F4E;
}

.info-box:hover .arrow-img {
  right: 40px;
  transition: all 0.8s ease-in;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

#widgetControlsDropdown {
  display: none;
  /* Hide the default checkbox */
}
#widgetControlsDropdown input[type=checkbox] {
  display: none;
}
#widgetControlsDropdown {
  /* Style the label */
}
#widgetControlsDropdown label {
  display: inline-block;
  padding: 5px 20px;
  margin: 5px;
  border-radius: 5px;
  background-color: #e6e6e6;
  border: 2px solid #e6e6e6;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  font-weight: 500;
  font-size: 14px;
}
#widgetControlsDropdown {
  /* When the checkbox is checked, change the background and border color */
}
#widgetControlsDropdown input[type=checkbox]:checked + label {
  background: rgb(248, 248, 248);
  border: 2px solid #00ABFF;
}
#widgetControlsDropdown {
  /* When hovering, change the border color */
}
#widgetControlsDropdown label:hover {
  border-color: #46a4ca;
}

#settingsButton {
  cursor: pointer;
  background: none;
}

#caret {
  font-size: 14px;
}

.widgets {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Default: 2 columns */
  grid-gap: 10px;
  grid-auto-flow: dense; /* Add this line */
}

.country-buttons, .date-buttons {
  margin-top: 15px;
}

.country-buttons #btn-country-cz {
  border-radius: 5px 0 0 5px;
}

.country-buttons #btn-country-sk {
  border-radius: 0 5px 5px 0;
  margin-left: -5px;
}

.country-buttons button {
  background: #f4f4f4;
  color: #172F4E;
  padding: 3px 15px;
  margin: 0;
  cursor: pointer;
  transition: all 0.3s;
}
.country-buttons button:hover {
  background: #00ECBC;
  transition: all 0.3s;
}

.country-buttons button.active {
  background: #00ECBC;
}

.date-buttons button {
  background: #f4f4f4;
  color: #172F4E;
  padding: 3px 6px;
  border-radius: 3px;
  margin-left: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
.date-buttons button:hover {
  background: #00ECBC;
  transition: all 0.3s;
}

.date-buttons button.active {
  background: #00ECBC;
}

/* Wide Mode */
.wide-mode .widgets {
  grid-template-columns: repeat(3, 1fr);
}

/* Ultra Wide Mode */
.ultra-wide .widgets {
  grid-template-columns: repeat(5, 1fr);
}

.sortable-ghost {
  opacity: 0.4;
  background: #c8ebfb;
}

#modeToggle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#normalModeButton {
  font-size: 21px;
}

#wideModeButton {
  font-size: 29px;
}

#ultraWideModeButton {
  font-size: 29px;
}

.wide-mode {
  max-width: 1710px !important; /* 1140px * 1.5 for 50% wider */
}
.wide-mode #normalModeButton span {
  color: grey;
}
.wide-mode #normalModeButton span :hover {
  color: #172F4E;
}
.wide-mode #wideModeButton span {
  color: #172F4E;
}

.ultra-wide {
  max-width: 100% !important; /* 1140px * 1.5 for 50% wider */
}
.ultra-wide .widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Adjust 250px as desired */
  grid-gap: 10px; /* Space between widgets */
  grid-auto-flow: dense; /* Allows the grid to fill in gaps */
}
.ultra-wide #normalModeButton span {
  color: grey;
}
.ultra-wide #normalModeButton span :hover {
  color: #172F4E;
}
.ultra-wide #wideModeButton span {
  color: #172F4E;
}

.widget-small {
  grid-column: span 1; /* Occupies 1 column */
}

.widget-big {
  grid-column: span 2; /* Occupies 2 columns */
}

@media (max-width: 990px) {
  .widgets {
    grid-template-columns: 1fr; /* Single column layout */
  }
  .widget-small,
  .widget-big {
    grid-column: span 1; /* All widgets occupy one column */
  }
}
#normalModeButton {
  background: white;
}
#normalModeButton span {
  color: #172F4E;
  font-size: 22px;
  cursor: pointer;
}
#normalModeButton {
  font-size: 21px;
}

#wideModeButton {
  background: white;
}
#wideModeButton span {
  font-size: 29px;
}

#ultraWideModeButton {
  font-size: 29px;
}

.wide-mode {
  max-width: 1710px !important; /* 1140px * 1.5 for 50% wider */
}
.wide-mode #normalModeButton span {
  color: grey;
  font-size: 29px;
  cursor: pointer;
}
.wide-mode #normalModeButton span :hover {
  color: #172F4E;
}
.wide-mode #wideModeButton span {
  color: #172F4E;
}

.info-box {
  border-radius: 5px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.info-box .content {
  padding: 40px;
  position: relative;
  z-index: 99;
}
.info-box .content1 {
  width: 200%;
  display: inline-flex;
  transition: all 1.2s ease-out;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.info-box .content1 .blue {
  padding: 15px;
  background: #00ABFF;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border-radius: 2px;
}
.info-box .content1 .blue .pay {
  width: 20px !important;
  margin-right: 12px;
  padding: 20px;
  transition: 0.5s;
  filter: none;
  cursor: pointer;
  transform: rotate(180deg);
}
.info-box .content1 .blue span {
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 40px;
  letter-spacing: -0.019em;
  color: white;
  padding-top: 9px;
  text-decoration: none !important;
}
.info-box .content1 .blue p {
  color: white;
  font-size: 14px;
  font-weight: 400;
  max-width: 600px;
  padding-top: 9px;
}
.info-box .content1 .blue button {
  width: 150px;
  float: right;
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  color: #172F4E;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  z-index: 50;
}
.info-box .content1 .blue button:hover {
  width: 150px;
  float: right;
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: #3d5427;
  color: white;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
}
.info-box .content1 .blue .clicked {
  color: #0f0;
}
.info-box .content1 .white {
  padding: 15px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  z-index: 100;
  background: white;
  cursor: pointer;
}
.info-box .flipped {
  transform: translateX(-50%);
  transition: all 1s ease-in;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.info-box .flipped .arrow-img {
  visibility: hidden;
}
.info-box img {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.info-box2 {
  display: inline-flex;
  border: 1px solid #eff2f7;
  border-radius: 2px;
  width: 96%;
  padding: 15px;
  position: relative;
  align-items: center;
}
.info-box2 img {
  width: 50px;
  height: 25px;
  margin-right: 12px;
}

.box-blue {
  background: #00ABFF;
  color: white !important;
  margin: 0;
}
.box-blue p,
.box-blue h1 {
  color: white !important;
}
.box-blue .btn-white {
  color: #172F4E !important;
  background: white !important;
}
.box-blue .btn-white:hover {
  color: #172F4E !important;
  background: rgb(229, 245, 255) !important;
}

.info-news {
  padding: 40px;
  width: 92%;
}

/* Carousel container */
#widgetSluzby .feature-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
  border-radius: 5px;
}

/* Feature items */
#widgetSluzby .feature {
  position: absolute;
  padding: 20px;
  width: 100%;
  top: 0;
  left: 100%; /* Start off-screen to the right */
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
#widgetSluzby .feature span {
  color: #00ABFF;
}
#widgetSluzby .feature p.first {
  color: #172F4E;
  margin-top: 15px;
  font-size: 15px;
  font-family: "Poppins";
  line-height: 19px;
  font-weight: 600;
}
#widgetSluzby .feature p.quote {
  border-left: 2px solid #00ECBC;
  padding-left: 10px;
  font-weight: 400;
  font-style: italic;
  line-height: 18px;
}
#widgetSluzby .feature p.second {
  color: #172F4E;
  margin-top: 15px;
  line-height: 18px;
}

/* Active feature */
#widgetSluzby .feature.active {
  left: 0;
  opacity: 1;
}

/* Exiting to the left */
#widgetSluzby .feature.exit-left {
  left: -100%;
  opacity: 0;
}

/* Exiting to the right */
#widgetSluzby .feature.exit-right {
  left: 100%;
  opacity: 0;
}

/* Hide the .hide class content */
.hide {
  display: none;
}

/* Style for links inside features */
#widgetSluzby .feature a, #widgetSluzby .feature button {
  padding: 9px 13px;
  color: #172F4E;
  background-color: #00ECBC;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500 !important;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  position: absolute;
  top: 360px;
  left: 50%;
  transform: translateX(-50%);
}

#widgetSluzby .feature a:hover, #widgetSluzby .feature button:hover {
  background-color: #172F4E;
  color: white;
  cursor: pointer;
}

/* Style the carousel controls */
#widgetSluzby .carousel-controls {
  display: flex;
  gap: 10px;
}

#widgetSluzby .carousel-controls .prev,
#widgetSluzby .carousel-controls .next {
  cursor: pointer;
  color: #172F4E;
  font-size: 13px;
  margin-top: -9px;
  font-weight: 400;
}

#widgetSluzby .carousel-controls .prev:hover,
#widgetSluzby .carousel-controls .next:hover {
  text-decoration: underline;
}

.info-box table tr:nth-child(2n) {
  background: #f8f8f8 !important;
}
.info-box .ad-but {
  margin: 0 2px;
}

.csv-table tr:nth-child(2n) {
  background: #f8f8f8 !important;
}

.box-white {
  color: rgba(0, 0, 0, 0.87);
  overflow-wrap: break-word;
  background-color: rgb(255, 255, 255);
  background-clip: border-box;
  box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-width: 0px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.125);
  border-image: initial;
  border-radius: 5px;
  overflow: visible;
}
.box-white .pay {
  width: 30px !important;
  max-height: 37px;
  margin-right: 12px;
  padding: 20px;
  transition: 0.5s;
  filter: none;
}
.box-white span {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.019em;
  color: #172F4E;
  padding-bottom: 9px;
  text-decoration: none !important;
  font-family: "Poppins", sans-serif;
}
.box-white span.delivery-status {
  font-size: 14px;
}
.box-white span.delivery-status span {
  font-size: 14px;
  font-weight: 400;
}
.box-white p {
  color: #172F4E;
  font-size: 14px;
  font-weight: 400;
}
.box-white a {
  text-decoration: none !important;
}
.box-white a.show-page, .box-white input.show-page, .box-white button.show-page {
  padding: 9px 13px !important;
  color: white;
  background-color: #00ABFF !important;
  float: right;
  border-radius: 5px !important;
  font-size: 14px;
  font-weight: 500 !important;
  cursor: pointer;
  height: 37px;
  font-family: "Poppins", sans-serif;
}
.box-white a.abs {
  position: absolute;
  right: 40px;
  top: 40px;
}
.box-white a.show-page:after {
  display: inline-block;
  -webkit-transform: scale(0.5, 1); /* Safari and Chrome */
  -moz-transform: scale(0.5, 1); /* Firefox */
  -ms-transform: scale(0.5, 1); /* IE 9 */
  -o-transform: scale(0.5, 1); /* Opera */
  transform: scale(0.5, 1); /* W3C */
  content: ">";
  position: relative;
  margin-left: 4px;
}
.box-white .info-data select {
  border: none !important;
  border-radius: 5px;
  padding: 7px;
  margin-right: 10px;
  background: none;
  font-weight: 700;
}
.box-white .arrow-img {
  width: 7px;
  float: right;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.8s ease-in;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.box-white .tab-content {
  display: none;
  height: 400px;
  overflow-y: scroll;
}

.acc-info {
  background: #f8f9fa;
  border-radius: 5px;
  padding: 15px;
}

.acc-widgets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-auto-flow: dense;
  margin-top: 10px;
}
.acc-widgets .colm-1 {
  grid-column: span 6/span 6;
}
.acc-widgets .colm-2 {
  grid-column: span 3/span 3;
}
.acc-widgets .colm-3 {
  grid-column: span 2/span 2;
}
.acc-widgets .acc-info {
  padding: 15px;
}
.acc-widgets a {
  font-size: 12px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}
.acc-widgets .colm-2 a {
  font-size: 18px !important;
}
.acc-widgets .colm-3 svg {
  width: 50px;
  height: auto;
  margin-top: 10px;
}
.acc-widgets .colm-3 a:hover {
  color: #00ABFF;
}
.acc-widgets .cls-1 {
  fill: #00ABFF;
  opacity: 0.8;
}
.acc-widgets #icon1 #upload {
  fill: #00ECBC;
}
.acc-widgets #icon1:hover #upload {
  animation: fly 0.6s ease-in-out;
}
.acc-widgets #icon2 #addnew {
  fill: #00ECBC;
  opacity: 1;
}
.acc-widgets #icon2:hover #addnew {
  animation: scaleup 0.6s ease-in-out;
  fill: #00ECBC;
  opacity: 1;
}
.acc-widgets #icon3 #line3 {
  fill: #00ECBC;
}
.acc-widgets #icon3:hover #line4 {
  animation: line1 0.6s ease-out;
  fill: #00ECBC;
}
.acc-widgets #icon3:hover #line1, .acc-widgets #icon3:hover #line2, .acc-widgets #icon3:hover #line3 {
  animation: line2 0.6s ease-in;
}

@keyframes fly {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}
@keyframes line1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(80px);
  }
}
@keyframes line2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-40px);
  }
}
@keyframes line3 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-12px);
  }
}
@keyframes scaleup {
  0% {
    transform: scale(1);
  }
  0% {
    transform: scale(1.1);
  }
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: rotate(1);
  }
}
.box-white2 {
  background: #ffffff;
  box-shadow: 0px 20.2109px 40.4219px -6.73698px rgba(39, 76, 119, 0.16);
  margin: 7px 0;
}
.box-white2 .pay {
  width: 30px !important;
  max-height: 37px;
  margin-right: 12px;
  padding: 20px;
}
.box-white2 h2 {
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 40px;
  letter-spacing: -0.019em;
  color: #172F4E;
  padding-top: 9px;
  text-decoration: none !important;
}
.box-white2 p {
  color: #969faf;
  font-size: 14px;
  font-weight: 400;
}
.box-white2 a {
  text-decoration: none !important;
}

.box-white3 {
  background: #ffffff;
  margin: 7px 0;
}
.box-white3 .pay {
  width: 30px !important;
  max-height: 37px;
  margin-right: 12px;
  padding: 20px;
}
.box-white3 h2 {
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 40px;
  letter-spacing: -0.019em;
  color: #172F4E;
  padding-top: 9px;
  text-decoration: none !important;
}
.box-white3 p {
  color: #969faf;
  font-size: 14px;
  font-weight: 400;
}
.box-white3 a {
  text-decoration: none !important;
}
.box-white3:hover h3, .box-white3:hover a {
  color: #00ABFF;
}

.usertool {
  opacity: 1 !important;
  margin: -10px 10px;
  position: relative;
}

.box-accent {
  background: #1a78b4 !important;
  height: 220px;
  color: white;
  padding: 20px;
  margin-bottom: 40px;
}
.box-accent img {
  width: 50px;
  height: 50px;
  padding: 0;
}
.box-accent .name {
  color: white;
  margin-top: 20px;
  font-size: 26px;
}
.box-accent p {
  color: white;
}
.box-accent .credit a {
  color: white;
  font-size: 30px;
}

.small-boxes {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.small-boxes .small-box {
  width: 30%;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1333333333);
}

#frm-finishRegistrationForm {
  background: white;
  padding: 40px;
  border-radius: 2px;
}
#frm-finishRegistrationForm input {
  background: #f4f4f4;
  border-radius: 2px !important;
  padding: 12px;
  margin: 4px 0px 20px 0px;
  display: flex;
  width: 350px;
}
#frm-finishRegistrationForm #different_postal_checkbox label {
  display: flex;
  margin-top: 10px;
}
#frm-finishRegistrationForm #different_postal_checkbox label input {
  display: block;
  width: 30px;
  margin-top: 0px;
  flex-direction: row;
}

#sender #phone_number,
#sender .border-shadow {
  overflow-y: scroll;
  overflow-x: hidden;
  background: #f4f4f4 !important;
  padding: 10px !important;
  border-radius: 2px !important;
  color: #172F4E;
}

table.blueTable {
  background-color: #ffffff;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table.blueTable a {
  background: #00ABFF;
  border-radius: 2px;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}
table.blueTable a:hover {
  background-color: #f4f4f4 !important;
  color: #172F4E !important;
  padding: 10px 20px;
}

table.blueTable td {
  border: 1px solid #f1f1f1;
}

table.blueTable thead {
  border-bottom: 2px solid #172F4E;
}
table.blueTable thead tr th {
  padding: 20px 0px;
  font-weight: 600;
}

table.blueTable tbody td {
  font-size: 14px;
  padding: 20px 0px;
}

table.blueTable tr:nth-child(even) {
  background: #ffffff;
}

table.blueTable td:nth-child(even) {
  background: #ffffff;
}

table.blueTable thead th {
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  border-left: 0px solid rgba(255, 255, 255, 0.2666666667);
}

table.blueTable thead th:first-child {
  border-left: none;
}

table.blueTable tfoot td {
  font-size: 15px;
}

table.blueTable tfoot .links {
  text-align: right;
}

table.blueTable tfoot .links a {
  display: inline-block;
  background: #1c6ea4;
  color: #ffffff;
  padding: 10px 8px;
  border-radius: 2px;
}

.blue-text {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: -0.019em;
  color: #172F4E;
  padding-right: 10%;
  padding-bottom: 40px;
}

.blacklist-name {
  color: #00ABFF !important;
}

.footer {
  background: rgba(255, 255, 255, 0);
  width: 100%;
  margin-top: 50px;
  position: relative;
  bottom: 0px;
}

.footer-white {
  background: white;
  margin-top: 50px;
  padding: 20px;
  max-width: 100vw;
  margin: auto;
  display: flex;
  justify-content: center;
}

.footer-blue {
  padding-top: 17px;
  width: 1300px;
  margin: auto;
}
.footer-blue table {
  width: 1300px;
  text-align: left;
  margin: 0 auto;
}
.footer-blue table span,
.footer-blue table h4,
.footer-blue table a {
  color: white;
  font-size: 14px;
  line-height: 18px;
}
.footer-blue table h4 {
  padding-bottom: 10px;
}

@media (max-width: 1299px) {
  .footer {
    background: #182f4e;
    width: max-content;
    margin-top: auto;
  }
  .footer-white {
    background: white;
    max-width: 100%;
  }
  .footer-blue {
    width: max-content;
  }
}
/*** right ****/
#stahuj,
#sluzby2,
#nadpis-info,
#nadpis-zabava,
#nabidka-uspor,
#info-zabava {
  width: 133px;
  height: 28px;
  padding: 15px;
  color: #172F4E;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 35px;
  font-size: 18px;
}

#nadpis-info {
  background: url("../grafika/info-zabava.png");
}

#nadpis-zabava {
  background: url("../grafika/nadpis-zabava.png");
}

#tematicke {
  width: 133px;
  height: 41px;
  line-height: 41px;
  padding-left: 50px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  background: url("../grafika/tematicke.png");
  margin-bottom: 10px;
}

a.aktivni {
  color: white !important;
  background: #00ABFF;
  border-radius: 5px;
  margin-left: -20px;
  padding-left: 20px;
  width: 300px;
}

.menu-admin a.aktivni {
  color: white !important;
  line-height: 48px;
  background: #00ABFF;
  border-radius: 5px;
  margin-left: -20px;
  padding-left: 20px;
  width: 210px;
}
.menu-admin img {
  display: none;
}

#call_price_list {
  width: 100% !important;
  font-size: 100%;
}

h2 {
  background: none;
}

#call_price_list fieldset {
  float: left;
  padding: 0;
}

#call_price_list label {
  font-size: 150%;
  display: block;
  padding-bottom: 10px;
}

#call_price_list table {
  margin-bottom: 20px;
}

#call_price_list td {
  padding: 10px 14px;
}

#call_price_list tr.even td {
  background: #f5f5f5;
}

#call_price_list .tabhead {
  font-weight: bold;
  font-size: 120%;
  padding-left: 20px;
}

#call_price_list a.vice {
  float: none;
}

#call_price_list .zeme {
  font-size: 90%;
  background: white;
  border: 1px solid #e1e0e0;
  padding: 2px;
  display: inline-block;
}

#call_price_list .zeme img {
  padding-right: 3px;
}

#call_price_list .sipecka {
  vertical-align: bottom;
}

#call_price_list .cenavolani {
  text-align: center;
  font-size: 14px;
}

#call_price_list .ikona {
  text-align: center;
  background: #ebeaea !important;
}

#call_price_list .biggger {
  font-size: 120%;
}

#call_price_list .btn {
  display: inline-block;
  height: 19px;
  line-height: 19px;
  border: 2px solid #1b1b1b;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
  font-weight: bold;
  padding: 3px 3px 3px 3px;
  margin: 0;
  width: auto;
  position: relative;
}

#call_price_list form label {
  display: block;
  width: 300px;
}

/* JS SelectBoxs */
.jsSelectBox {
  display: inline-block;
  font-size: 14px;
  height: 26px;
  padding: 4px 5px;
  text-decoration: none;
  vertical-align: top;
  margin: 0px;
}

.paySenderNumberBox .jsSelectBox,
.messageEncoding .jsSelectBox {
  display: inline-block;
  font-size: 14px;
  height: 26px;
  padding: 4px 5px;
  text-decoration: none;
  vertical-align: top;
  margin: 0px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.jsSelectBox option {
  padding: 3px 6px;
}

.selectBox-dropdown {
  min-width: 100px;
  position: relative;
  text-decoration: none;
  outline: none;
  vertical-align: middle;
  display: inline-block;
  cursor: default;
  height: 24px;
  padding: 0;
  margin-bottom: 12px;
}

.selectBox-dropdown:focus {
  border-color: #666;
}

.selectBox-dropdown .selectBox-label {
  padding: 5px 6px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  font-weight: normal;
  color: #172F4E !important;
}

.selectBox-dropdown .selectBox-arrow {
  background: url("../images/arrows/yellowArr.png") no-repeat scroll 0 0 transparent;
  display: block;
  height: 24px;
  position: absolute;
  right: 0;
  top: 5px;
  width: 27px;
}

/* Dropdown menu */
.selectBox-dropdown-menu,
.divSelect,
.ui-autocomplete {
  position: relative;
  max-height: 490px;
  min-height: 1em;
  width: 100%;
  top: 19px;
  overflow: auto;
}

#paySenderSearchContact {
  border: none !important;
}

/* Inline control */
.selectBox-inline {
  min-width: 100px;
  outline: none;
  background: #fff;
  display: inline-block;
  overflow: auto;
}

.selectBox-inline:focus {
  border-color: #666;
}

#frm-form {
  border-radius: 5px;
  max-width: 1019px;
  background: #fff !important;
  padding: 40px;
  box-shadow: 0px 20.2109px 40.4219px -6.73698px rgba(39, 76, 119, 0.16);
}
#frm-form .error {
  display: block;
  margin-top: 9px;
  color: red;
}
#frm-form tr {
  display: flex;
  flex-direction: column;
}
#frm-form .text {
  width: 160px;
  float: left;
}
#frm-form small {
  margin-left: 10px;
}
#frm-form .button {
  padding: 12px 30px;
  cursor: pointer;
  float: right;
  background: #00ABFF !important;
  color: white;
}
#frm-form .button:hover {
  background: #172F4E !important;
  color: white;
}

/* Options */
.selectBox-options,
.selectBox-options LI,
.selectBox-options LI A,
.ui-autocomplete,
.ui-autocomplete LI,
.ui-autocomplete LI A,
.divSelect,
.divSelect LI,
.divSelect LI A {
  list-style: none;
  display: block;
  cursor: default;
  padding: 0;
  margin: 0;
}

.divSelect LI A,
.ui-autocomplete LI A,
.selectBox-options LI A {
  line-height: 1.5;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  background: 6px center no-repeat;
  font-size: 14px;
  text-decoration: none;
}

.divSelect LI.sub1 A,
.ui-autocomplete LI.sub1 A,
.selectBox-options LI.sub1 A {
  padding: 3px 6px 3px 18px;
}

.divSelect LI A:hover,
.ui-autocomplete LI A.ui-state-hover,
.selectBox-options LI.selectBox-hover A {
  background-color: #eee;
  color: #172F4E !important;
}

.selectBox-options LI.selectBox-disabled A {
  color: #888;
  background-color: transparent;
}

.selectBox-options LI.selectBox-selected A {
  background-color: #c8def4;
}

.selectBox-options .selectBox-optgroup {
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  overflow: hidden;
  padding: 3px 6px;
  text-decoration: none;
  white-space: nowrap;
}

.blue-button {
  width: auto !important;
  height: 29px !important;
  line-height: 14px !important;
  text-align: center;
  font-size: 90% !important;
  text-transform: none;
  color: white;
  background: #00ABFF !important;
  border-radius: 2px !important;
  display: inline-block;
  margin-top: 3px;
  text-decoration: none;
  margin-bottom: 3px;
  cursor: pointer;
}

.pridat {
  font-weight: 400;
  color: WHITE;
  padding-left: 25px;
  display: inline-block;
  border-radius: 5px !important;
  padding: 10px 38px;
  text-decoration: none;
  text-align: center;
  font-size: 13px;
}

/* Disabled state */
.selectBox.selectBox-disabled {
  color: #888 !important;
}

.selectBox-dropdown.selectBox-disabled .selectBox-arrow {
  opacity: 0.5;
  filter: alpha(opacity=50);
  border-color: #666;
}

.selectBox-inline.selectBox-disabled {
  color: #888 !important;
}

.selectBox-inline.selectBox-disabled .selectBox-options A {
  background-color: transparent !important;
}

#caller .inputSearchBtn,
#paySender .inputSearchBtn,
#freeSenderContactBook .inputSearchBtn {
  display: block;
  height: 40px;
  opacity: 1;
  background: #00ABFF;
  padding: 9px 12px;
  border-left: none;
  float: left;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: white;
}

#caller .inputSearchBtnZoom,
#paySender .inputSearchBtnZoom {
  display: block;
  width: 38px;
  height: 38px;
  opacity: 1;
  padding: 3px 10px;
  border-left: none;
  float: left;
  opacity: 0.5;
}

#paySender {
  border-radius: 5px;
  position: relative;
  height: auto;
  font-size: 14px;
  background: #fff !important;
  padding: 50px;
  padding-bottom: 90px;
}

#paySender label {
  color: #172F4E;
  font-size: 14px;
  font-weight: bold;
  margin: 0 5px 0 0;
  line-height: 30px;
}

#paySender a {
  color: #ffffff;
}

#paySenderMessageBoxTop p {
  text-align: right;
}

#paySenderContactBook {
  width: 100%;
  height: 596px;
  float: left;
  border-radius: 5px;
  margin-right: 2%;
  background: #f0f0f0;
}

#freeSenderContactBook {
  width: 209px;
  padding: 7px 15px 15px 15px;
  float: left;
}

#ss {
  margin: 15px 0 0 0;
  padding: 0;
  list-style-type: none;
}

#paySenderContactTabs li {
  display: block;
  width: 50%;
  float: left;
  padding: 0;
  margin-left: 0;
}

#paySenderContactTabs li a {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 12px 5px;
  color: #172F4E;
  background-color: #f4f4f4;
  font-size: 100%;
  text-decoration: none;
}

#paySenderSelectedContact {
  width: 190px;
  height: 120px;
  line-height: 1, 7em;
}

#paySenderSelectedContact {
  width: 190px;
  height: 120px;
  line-height: 1, 7em;
}

#paySenderContactTabs li a:hover,
#paySenderContactBook li a:hover,
#freeSenderContactBook li a:hover {
  background-color: #00ABFF;
  color: white !important;
}

.paySenderContactTabs.persons,
.paySenderContactTabs.groups,
.paySenderContactTabs.streets {
  clear: left;
  position: relative;
  top: -19px;
}

#paySenderContactTabs {
  position: relative;
  width: 100%;
}

#paySenderContactTabs li.active a {
  background-color: #00ABFF;
  color: white !important;
}

#paySenderMiddleArrow {
  width: 32px;
  padding: 100px 0 0 8px;
  height: 142px;
  float: left;
  margin-top: 43px;
}

#paySenderReceivers {
  width: 100%;
  height: 163px;
  float: left;
  border-radius: 5px;
  background: #f0f0f0 !important;
}

.rec-header {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  padding: 0;
}
.rec-header span {
  padding: 15px 20px;
  font-weight: 500;
  font-size: 14px;
}

#paySenderSelectedReceivers {
  background: #f0f0f0 !important;
  padding: 10px !important;
  border-radius: 5px !important;
  height: 120px;
  margin: 0;
  overflow: auto;
  width: 100%;
  padding: 0;
  margin-top: -20px;
}

#paySenderReceivers li {
  border-bottom: 1px solid #e8e8e8;
  margin: 0 3px;
  padding: 3px;
  position: relative;
  list-style: none;
}

#paySenderReceivers li span {
  font-size: 14px;
  line-height: 1.5;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

#paySenderReceivers li .btnRemove {
  background: url("/grafika/new/x.svg") no-repeat scroll center center;
  height: 25px;
  width: 25px;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  padding: 3px;
}

#paySenderMessageBox table {
  font-size: 90%;
  margin: 5px 0 0 0;
}

#paySenderMessageBox td {
  min-width: 90px;
}

#paySenderMessageBox td span {
  color: #172F4E;
}

#paySenderMessageBoxTop p {
  width: 225px;
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 15px;
  margin-bottom: 9px;
  text-align: left;
}

#paySenderMessageBoxTop label {
  font-size: 16px;
}

select {
  /* styling */
  background-color: #f4f4f4;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.6em 4.3em 0.5em 1em;
  /* reset */
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* arrows */
select.classic {
  background-position: calc(100% - 12px) calc(1em - 1px), calc(100% - 17px) calc(1em + 3px), 100% 0;
  background-size: 12px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.selectBox-options,
.selectBox-options LI,
.selectBox-options LI A,
.ui-autocomplete,
.ui-autocomplete LI,
.ui-autocomplete LI A,
.divSelect,
.divSelect LI,
.divSelect LI A,
.selectBox-options LI:hover A {
  list-style: none;
  display: block;
  cursor: default;
  color: #172F4E !important;
}

.divSelect LI A:hover,
.ui-autocomplete LI A.ui-state-hover,
.selectBox-options LI.selectBox-hover A {
  color: #172F4E !important;
}

.divSelect LI A,
.ui-autocomplete LI A,
.selectBox-options LI A {
  line-height: 2em;
  padding: 4px 15px;
  white-space: nowrap;
  overflow: hidden;
  background: 6px center no-repeat;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.0666666667);
  cursor: pointer;
}

.contact-filter-plus {
  display: inline-flex;
  width: auto;
  padding: 0;
  border: none;
  border-radius: 5px;
  margin: 0px;
}

.contact-filter {
  display: inline-flex;
  width: 95%;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  border-radius: 5px;
  margin: 5px;
}

.contact-filter-calls {
  display: inline-flex;
  width: 100%;
  padding: 1px 5px;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  border-radius: 5px;
  height: 40px;
}

.messageEncoding {
  margin-right: 40px;
}

#paySenderViberBox {
  padding-top: 35px;
}

#paySenderViberBox table {
  font-size: 90%;
  margin: 5px 0 0 0;
}

#paySenderViberBox td {
  min-width: 90px;
}

#paySenderViberBox td span {
  color: #172F4E;
}

#paySenderViberBox label {
  font-size: 16px;
}

#paySender div h3 {
  padding: 0;
  color: #172F4E;
  font-size: 16px;
  font-weight: bold;
}

#paySenderTimeBoxLeft h3 {
  float: left;
  margin: 0px !important;
}

#freeSenderContactBook h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 15px 5px 0;
  padding: 0;
}

#freeSenderContactBook label {
  font-size: 14px;
  margin: 0 5px 0 0;
  line-height: 30px;
}

#paySenderMessage,
#paySenderViberText {
  width: 100%;
  height: 270px;
  border-radius: 5px 5px 0 0;
  overflow: auto;
  padding: 20px !important;
  background: #f0f0f0 !important;
  margin-bottom: 0;
}

#paySenderViberText {
  height: 150px !important;
}

#paySenderSearchContact,
#freeSenderSearchContact {
  padding: 7px 10px;
  width: 100%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  float: left;
}

#paySenderAddContact {
  padding: 7px 10px;
  height: 40px;
  float: left;
  margin-bottom: 5px;
}

#paySenderSearchContactZoom {
  padding: 7px 10px;
  width: 100%;
  height: 38px;
  float: left;
  background: none !important;
}

#paySenderAddContact::placeholder {
  color: #172F4E !important;
}

#paySenderTimeBox {
  color: #172F4E;
}

#paySenderTimeBoxLeft {
  width: 330px;
  float: left;
  display: flex;
  flex-direction: column;
}

#paySenderTimeBoxLeft #paySenderTimeTopRight {
  float: left;
}

#paySenderNumberBox {
  float: left;
  width: 200px;
  text-align: left;
}

#paySenderNumberBox .paySenderNumberBox {
  height: 30px;
}

.inline-flex-sender {
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  flex-wrap: nowrap;
}

#paySenderTimeBoxRight {
  float: left;
  margin: 0 0 20px 20px;
  width: 180px;
}

#paySenderDateBox {
  text-align: center;
  line-height: 25px;
  display: flex;
  align-items: center;
}

#paySenderDateBox label {
  display: block;
  float: left;
}

#paySenderDateBox span {
  display: block;
  float: left;
}

#paySenderDateSet {
  width: 85px;
}

#paySenderCalenderIcon {
  display: block;
  float: left;
  margin: 3px 10px 0 5px;
  cursor: pointer;
}

#paySenderHourSet,
#paySenderMinuteSet {
  width: 25px;
}

#paySenderDateSet,
#paySenderHourSet,
#paySenderMinuteSet {
  display: block;
  float: left;
  background-color: #ffffff;
  margin: 0 3px;
  padding: 2px;
  height: 31px;
  text-align: center;
}

#paySenderHourSet,
#paySenderMinuteSet {
  width: 28px;
}

#paySenderSmsTypeContainer {
  line-height: 25px;
  padding: 7px 5px 7px 10px;
}

.sms-gateway .format {
  display: block;
  width: 42px;
  float: right;
}

#paySender .format {
  width: 100%;
  background: #f0f0f0 !important;
  height: 42px;
  padding: 15px 15px 0 15px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  margin-top: -5px;
  margin-bottom: 5px;
  border-left: none;
  align-items: flex-end;
  border-radius: 0 0 5px 5px;
}
#paySender .format p {
  margin-bottom: -5px;
  color: #515860;
  font-size: 12px;
}

.message-icons {
  position: absolute;
  top: 260px;
  float: right;
  right: 27px;
  color: grey;
  font-size: 18px;
}

.message-icons-viber {
  position: absolute;
  top: 260px;
  float: right;
  right: 27px;
  color: grey;
  font-size: 18px;
}

dfn {
  background: rgba(0, 170, 255, 0.046);
  border-bottom: dashed 1px rgba(0, 0, 0, 0.8);
  border-radius: 0px;
  padding: 0 0.4em;
  cursor: help;
  font-style: normal;
  position: relative;
}

dfn::after {
  content: attr(data-info);
  display: inline;
  position: absolute;
  top: 22px;
  left: 0;
  opacity: 0;
  width: 230px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5em;
  padding: 0.5em 0.8em;
  background: #172F4E;
  color: #fff;
  pointer-events: none; /* This prevents the box from apearing when hovered. */
  transition: opacity 250ms, top 250ms;
}

dfn::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 20px;
  opacity: 0;
  width: 0;
  height: 0;
  border: solid transparent 5px;
  border-bottom-color: rgba(0, 0, 0, 0.8);
  transition: opacity 250ms, top 250ms;
}

dfn:hover {
  z-index: 2;
} /* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {
  opacity: 1;
}

dfn:hover::after {
  top: 30px;
}

dfn:hover::before {
  top: 20px;
}

.viber-cta td {
  padding: 3px 0;
}
.viber-cta input[type=file] {
  margin: auto;
  height: 40px;
  border-radius: 2px;
  background: #fff !important;
  padding: 6px 0px;
}
.viber-cta input[type=file]:active, .viber-cta input[type=file]:hover, .viber-cta input[type=file]:focus {
  border-color: #fff;
}

/* PHONE CONTAINERS */
.phone-graphic {
  position: relative;
  width: 290px;
  margin: auto;
}

.phone-container-outer {
  position: relative;
  font-family: helvetica;
  font-size: 0.8rem;
  border: 1px solid #8f8f8f;
  border-radius: 40px;
  background-color: #000;
}

.phone-container-inner {
  position: relative;
  background: #fff;
  margin: 7px;
  border-radius: 30px;
  overflow: hidden;
}

.phone-container-outer:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 650px;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0) 25%);
  z-index: 5;
  border-radius: 40px;
}

.phone-container-inner:before {
  content: "";
  position: absolute;
  top: 0;
  background-color: #000;
  width: 110px;
  height: 17px;
  left: calc(50% - 55px);
  border-radius: 0 0 20px 20px;
  z-index: 2;
}

.phone-header {
  position: absolute;
  width: 100%;
  height: 95px;
  top: 0;
  background-color: #f4f4f4;
}

.phone-header2 {
  position: absolute;
  width: 100%;
  height: 95px;
  top: 0;
  background-color: rgb(120, 107, 215);
}
.phone-header2 .phone-header-time, .phone-header2 .phone-header-icons, .phone-header2 .contact-phone {
  color: white !important;
}

.phone-header3 {
  position: absolute;
  width: 100%;
  height: 95px;
  top: 0;
  background-color: rgb(59, 139, 219);
}
.phone-header3 .phone-header-time, .phone-header3 .phone-header-icons, .phone-header3 .contact-phone {
  color: white !important;
}

/* HEADER ICONS AND TIME */
.phone-header-time {
  position: absolute;
  font-size: 0.8rem;
  top: 5px;
  left: 15px;
}

.phone-header-icons {
  position: absolute;
  top: 5px;
  right: 15px;
}

.phone-header-icons .material-icons {
  font-size: 0.9rem;
}

.phone-header-icons .material-icons.battery {
  transform: rotate(90deg);
}

.viber-button {
  background: #786BD7;
  padding: 0px 13px;
  border-radius: 16px;
  text-align: center;
  margin: auto;
  width: 90%;
  position: relative;
  display: block;
  margin: 10px;
  text-decoration: none !important;
  z-index: 9999999;
  cursor: pointer;
}

/* CONTACT IMAGE AND NUMBER */
.contact-image {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 30px;
  left: calc(50% - 17px);
  background-color: #b4b4ba;
  box-shadow: 0 0 0 3px #b4b4ba;
  border-radius: 100%;
  overflow: hidden;
  font-size: 34px;
  color: white;
}

.contact-image .material-icons {
  font-size: 2.8rem;
  color: #fff;
  margin-left: -5px;
}

.contact-phone, .contact-phone2 {
  position: absolute;
  text-align: center;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
}

.contact-phone a, .contact-phone2 a {
  color: #000;
}

/* PHONE MESSAGES */
.phone-messages {
  margin-top: 100px;
  padding: 20px;
  height: 470px;
}

.message1, .message2 {
  padding: 5px 0px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.message1 p, .message2 p {
  position: relative;
  z-index: 5;
  margin: 0;
  color: #000 !important;
  line-height: 16px;
  margin: 2px 10px !important;
  word-break: break-all;
}

.message-contact {
  position: relative;
  background-color: #f1f1f1;
  text-align: left;
  margin-right: 20%;
}

.message-you {
  position: relative;
  background-color: #3bbe41;
  color: #fff;
  text-align: right;
  margin-left: 20%;
}

.message-contact:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10px;
  height: 20px;
  width: 20px;
  background: #f1f1f1;
  border-bottom-right-radius: 15px;
}

.message-contact:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -15px;
  width: 15px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 20px;
}

.message-you:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -10px;
  height: 20px;
  width: 20px;
  background: #3bbe41;
  border-bottom-left-radius: 15px;
}

.message-you:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -15px;
  width: 15px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 20px;
}

/* PHONE FOOTER */
.phone-footer {
  position: absolute;
  height: 40px;
  bottom: 0;
  width: 100%;
  background-color: #efefef;
}

.phone-footer-icons {
  position: absolute;
  bottom: 3px;
  left: 15px;
  color: #7b838d;
  font-size: 23px;
}

.phone-footer-input {
  position: absolute;
  bottom: 4px;
  left: 50px;
  width: 200px;
  border: 1px solid #cfcfd2;
  padding: 3px 10px;
  border-radius: 30px;
}

.phone-footer-input p {
  margin: 0;
  color: #cfcfd2;
}

/* MESSAGE ANIMATION */
.message.message-you {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

.message.message-you:nth-child(3) {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3s both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3s both;
}

.message.message-you:nth-child(5) {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 5s both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 5s both;
}

.message.message-contact {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s both;
}

.message.message-contact:nth-child(4) {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4s both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4s both;
}

.message.message-contact:nth-child(6) {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 6s both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 6s both;
}

/* SLIDE IN RIGHT ANIMATION */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
/* SLIDE IN LEFT ANIMATION */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.sms-gateway .formatButtons .smile,
.sms-gateway .formatButtons .fontset,
.sms-gateway .formatButtons .narrow,
.sms-gateway .formatButtons .delivery,
.sms-gateway .formatButtons .templates {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0 2px;
}

#paySender .formatButtons .smile,
#paySender .formatButtons .fontset,
#paySender .formatButtons .narrow,
#paySender .formatButtons .delivery,
#paySender .formatButtons .templates {
  width: 22px !important;
  height: 24px !important;
}

#paySender .btnSubmitForm {
  margin-top: 30px;
  margin-left: 18px;
  text-align: center;
  font-size: 14px;
  justify-content: center;
  background-color: #00ABFF !important;
  color: white;
  gap: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  border: none !important;
  font-weight: bold !important;
  border-radius: 5px !important;
  padding: 10px 38px;
  z-index: 100;
  float: right;
}

a.koupit,
a.koupit:visited,
a.koupit:hover,
a.koupit:focus,
a.koupit:active,
a.upravit,
a.upravit:visited,
a.upravit:hover,
a.upravit:focus,
a.upravit:active,
a.smazat,
a.smazat:visited,
a.smazat:hover,
a.smazat:focus,
a.smazat:active,
a.grey,
a.grey:visited,
a.grey:hover,
a.grey:focus,
a.grey:active,
a.add2,
a.add2:visited,
a.add2:hover,
a.add2:focus,
a.add2:active,
a.registrace2,
a.registrace2:visited,
a.registrace2:hover,
a.registrace2:focus,
a.registrace2:active,
input.pridat {
  margin-left: 18px;
  text-align: center;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
  background-color: #00ABFF !important;
  color: white;
  gap: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  border: none !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  padding: 10px 38px;
  z-index: 100;
}

input.pridat-dark {
  margin-left: 18px;
  text-align: center;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
  background-color: #172F4E !important;
  color: white;
  gap: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  border: none !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  padding: 10px 38px;
  z-index: 100;
}

.nm {
  margin-left: 0 !important;
}

input.pridat-dark:hover, input.pridat:hover, .pridat:hover, #paySender .btnSubmitForm:hover {
  background-color: #f4f4f4 !important;
  color: #172F4E !important;
  cursor: pointer;
  transition: all 0.3s;
  padding: 10px 38px;
  border: none;
  outline: none !important;
  transition: all 0.6s;
}

input#save:hover {
  background-color: #f4f4f4 !important;
  color: #172F4E !important;
  cursor: pointer;
}

a.delete {
  background: #f82e45;
  font-size: 16px;
  font-weight: 200;
  color: white !important;
  padding: 3px 0px;
  animation: none;
  border: none;
  text-align: center;
  width: 27px;
  height: 27px;
  line-height: 22px;
  text-align: center;
  text-transform: none;
  border-radius: 7px;
  display: inline-block;
  margin-left: -1px;
  text-decoration: none;
  margin-bottom: 3px;
}

a.delete:hover {
  background-color: #f4f4f4 !important;
  color: #172F4E !important;
}

a.light {
  margin-left: 18px;
  text-align: center;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
  border: 1px solid #172F4E !important;
  background-color: #f4f4f4 !important;
  color: #172F4E;
  gap: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500 !important;
  border-radius: 5px !important;
  padding: 10px 38px;
  z-index: 100;
}

a.light:hover {
  border: 1px solid #172F4E !important;
  background-color: #172F4E !important;
  color: white;
}

a.upravit,
a.upravit:visited,
a.upravit:hover,
a.upravit:focus,
a.upravit:active {
  color: white;
}

a.add2,
a.add2:visited,
a.add2:hover,
a.add2:focus,
a.add2:active {
  width: 95px;
  text-align: left;
  padding-left: 25px;
  margin-bottom: 10px;
  margin-bottom: 0;
  float: right;
}

a.registrace2,
a.registrace2:visited,
a.registrace2:hover,
a.registrace2:focus,
a.registrace2:active {
  width: 188px;
  height: 29px;
  line-height: 29px;
  font-size: 100%;
  font-weight: 700;
  font-weight: bold;
}

.prijemce {
  font-weight: bold;
  padding-right: 20px;
}

.adresar {
  width: 157px;
  height: 122px;
  padding: 5px;
  background: #eae8e8 url("../grafika/adresar.jpg") no-repeat;
  overflow: hidden;
  margin-top: 10px;
}

.adresar a,
.adresar a:visited {
  display: block;
  text-decoration: none;
  color: #172F4E;
  padding: 5px 3px;
  width: 130px;
}

.adresar a:hover,
.adresar a:active,
.adresar a:focus {
  background: #fff;
  color: #172F4E;
}

#analyze_box {
  position: fixed;
  top: 97px !important;
  height: 700px !important;
  background-color: rgb(255, 255, 255) !important;
  z-index: 150 !important;
  left: 250px !important;
  width: 75% !important;
  max-width: calc(100% - 250px) !important;
  margin: 0 auto !important;
  right: 0;
  padding: 20px !important;
}

#seznam a,
#seznam a:visited {
  font-size: 90%;
  font-weight: bold;
  color: #2085e8;
  padding-right: 20px;
  display: inline-block;
}

#seznam a:hover,
#seznam a:active,
#seznam a:focus {
  color: #172F4E;
}

#vnitrni {
  height: 145px;
  overflow: auto;
}

#seznam div {
  padding: 5px 3px;
  border-bottom: 1px solid #e1e0e0;
}

#seznam div span {
  display: inline;
  padding: 0;
  border-bottom: 0;
  float: left;
}

#seznam div span.cistic {
  float: none;
  display: block;
}

#vyhody {
  width: 190px;
  height: 190px;
  padding: 30px 0 0 40px;
  float: left;
}

#brana2 #vyhody {
  height: 435px;
}

#brana.prihlaseny #vyhody {
  height: 220px;
}

.paddingtop {
  padding-top: 5px;
}

#advantage,
#advantage1,
#advantage2,
#advantage3,
#advantage4 {
  width: 200px;
  padding: 10px 0 0 30px;
  margin: 0 0 20px 30px;
  border-left: 1px solid #cccccc;
  float: right;
}

#vyhody ul,
#advantage ul {
  margin: 0;
  padding: 0;
  font-size: 90%;
}

#vyhody li,
#advantage li {
  background: url("../grafika/bullet2.png") no-repeat 0 7px;
  list-style: none;
  margin: 0;
  padding: 5px 0 5px 15px;
}

a#register,
a#register:visited,
a#nastaveni,
a#nastaveni:visited,
a#nast,
a#nast:visited {
  color: white;
  height: 18px;
  font-weight: bold;
  padding-left: 25px;
  margin-top: 10px;
  display: block;
}

a#set,
a#set:visited {
  display: inline-block;
  color: white;
  height: 18px;
  font-weight: bold;
  padding-left: 25px;
}

a#nastaveni,
a#nastaveni:visited,
a#nast,
a#nast:visited {
  margin-bottom: 10px;
  display: inline-block;
}

a#nast,
a#nast:visited {
  margin: 0;
  display: inline-block;
}

#hromadna a#nast {
  margin-left: 10px;
}

a#register:hover,
a#register:active,
a#register:focus,
a#set:hover,
a#set:active,
a#set:focus,
a#nastaveni:hover,
a#nastaveni:active,
a#nastaveni:focus,
a#nast:hover,
a#nast:active,
a#nast:focus {
  color: #fff;
}

a#facebook,
a#facebook:visited {
  height: 18px;
  font-weight: bold;
  margin-top: 10px;
  padding-left: 25px;
  background: url("../grafika/facebook.jpg") no-repeat center left;
  display: block;
}

input#add {
  width: 75px;
  height: 24px;
  text-align: center;
  text-transform: uppercase;
  font-size: 85%;
  border: 0;
  padding: 0;
  color: #172F4E;
}

#filtr {
  width: 230px !important;
  height: 19px;
  padding: 5px 0 0 5px;
  background: #e2e2e2 url("../grafika/filtr.jpg");
  font-size: 90%;
}

label#fi {
  font-weight: bold;
  padding-right: 5px;
}

#typ {
  width: 388px;
  height: 22px;
  background: white url("../grafika/typ-reklamy.jpg");
}

p#zbylo {
  width: 390px;
  font-size: 90%;
  color: white;
  margin: 10px 0 5px;
}

#spodek {
  width: 545px;
  padding: 15px 30px 0 25px;
}

#brana2 #spodek {
  width: 545px;
  padding: 0 30px 0 25px;
}

#spodek label {
  font-weight: bold;
  padding: 3px 0 0 20px;
}

#brana2 #spodek label {
  padding: 3px 0 0 15px;
}

#pocitadlo {
  width: 380px;
  font-size: 90%;
  float: left;
}

#send {
  padding-top: 5px;
}

input#napsano,
input#zbyva,
input#zbyva2 {
  width: 28px;
  height: 20px;
  padding: 4px 0 0 0;
  text-align: center;
  background: none !important;
}

input#pocet,
input#pocetsms {
  width: 38px;
  height: 20px;
  padding: 4px 0 0 0;
  text-align: center;
  background: none !important;
}

#sender #msg-info label {
  font-weight: bold;
  color: #172F4E;
}

.message.warning .content {
  background: #ffd9dd;
  border: 1px solid #f82e45;
  margin: 0;
  border-radius: 5px;
  display: flex;
  padding-left: 25px !important;
  font-size: 12px;
  color: #616161;
}
.message.warning .content img {
  width: 40px;
}

.message p {
  margin: 0;
  padding: 10px 20px !important;
  color: white;
  background: transparent;
}

.info p {
  padding: 4px 20px !important;
}

.warning p {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 24px;
  letter-spacing: -0.019em;
  color: #fff;
  margin: 0;
  background: none;
}

.warning a {
  color: white;
}

input#odeslat {
  width: 125px;
  height: 29px;
  float: right;
  text-align: center;
  font-weight: bold;
  border: 0;
  padding: 0;
  background: black url("../grafika/odeslat.jpg");
  color: white;
}

#brana2 input#odeslat {
  margin-top: 45px;
}

#info {
  font-size: 90%;
}

#vyhody img {
  border: 1px solid white;
  display: block;
  margin-bottom: 10px;
}

a#jiny,
a#jiny:visited {
  color: #172F4E;
  font-size: 90%;
}

a#jiny:hover,
a#jiny:active,
a#jiny:focus {
  color: white;
}

input#tmkod {
  width: 91px;
  height: 21px;
  padding: 3px 0 0 3px;
  background: #eae8e8 url("../grafika/spam.jpg");
  margin-left: 5px;
}

#brana2 input#cena {
  width: 43px;
  height: 20px;
  padding: 4px 0 0 0;
  background: #6dafed url("../grafika/input-blue.jpg");
  text-align: center;
  color: #172F4E;
}

#odraz {
  margin-left: 62px;
}

#odraz2 {
  margin-left: 45px;
}

#piktogramy {
  width: 25px;
  float: left;
  position: relative;
}

input#doruceni {
  width: 24px;
  height: 24px;
  background: black url("../grafika/doruceni.jpg");
  cursor: pointer;
  cursor: hand;
}

input#doruceni2 {
  width: 24px;
  height: 24px;
  background: black url("../grafika/doruceni2.jpg");
  cursor: pointer;
  cursor: hand;
}

ul#acronyms {
  width: 360px;
  margin: 0;
  padding: 0;
  font-size: 90%;
  border: 1px solid black;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 30px;
}

ul#acronyms li {
  width: 180px;
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}

ul#acronyms a,
ul#acronyms:visited {
  width: 170px;
  padding: 5px;
  background: #fff;
  color: #172F4E;
  display: block;
  text-decoration: none;
  border-bottom: 1px solid black;
}

ul#acronyms a:hover,
ul#acronyms a:focus,
ul#acronyms a:active {
  background: white;
  color: #172F4E;
}

ul#acronyms li.border a {
  width: 169px;
  border-right: 1px solid black;
}

ul#templates {
  width: 240px;
  margin: 0;
  padding: 0;
  font-size: 90%;
  border: 1px solid black;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 30px;
}

ul#templates li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid black;
}

ul#templates a,
ul#templates a:visited {
  padding: 5px;
  background: #fff;
  color: #172F4E;
  display: block;
  text-decoration: none;
}

ul#templates a:hover,
ul#templates a:focus,
ul#templates a:active {
  background: white;
  color: #172F4E;
}

ul#templates li#edit a,
ul#templates li#edit a:visited {
  padding: 8px 5px;
  background: black;
  color: white;
  display: block;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
}

ul#templates li#edit a:hover,
ul#templates li#edit a:focus,
ul#templates li#edit a:active {
  background: black;
  color: #f2cb03;
}

ul#smileys {
  width: 210px;
  margin: 0;
  padding: 0;
  font-size: 90%;
  border: 1px solid black;
  background: #fff;
  position: absolute;
  top: 0;
  left: 30px;
  z-index: 1000;
}

ul#smileys li {
  width: 105px;
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}

ul#smileys li.noborder {
  border-bottom: 0;
}

ul#smileys a,
ul#smileys:visited {
  width: 95px;
  height: 30px;
  padding: 5px;
  background: #fff;
  color: #172F4E;
  display: block;
  text-decoration: none;
}

ul#smileys a:hover,
ul#smileys a:focus,
ul#smileys a:active {
  background: white;
  color: #172F4E;
}

#spambox {
  width: 255px;
  padding-top: 20px;
  float: right;
}

#spambox img {
  border: 1px solid white;
  margin-right: 10px;
  float: left;
}

/*** podstrany ***/
#caller {
  background: white !important;
  border-radius: 5px;
}

#caller #peoples {
  width: 100% !important;
  height: 426px !important;
  background: #f0f0f0 !important;
  border-radius: 2px !important;
  padding: 0 !important;
  margin-top: -2px;
}
#caller #peoples option {
  font-size: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid #eff2f7;
}

#caller .colmn-2 select,
#caller #search-input #search,
input,
#sender #add-rec-input #prijemce {
  background: #f0f0f0 !important;
  border-radius: 5px !important;
  padding: 8px 12px;
}

.admin input, .admin textarea, .senders input, .senders textarea {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.admin input:hover, .admin textarea:hover, .senders input:hover, .senders textarea:hover {
  border: 1px solid #00ABFF !important;
}
.admin input:focus, .admin textarea:focus, .senders input:focus, .senders textarea:focus {
  border: 2px solid #00ABFF !important;
}

.admin input[type=submit] {
  border: none !important;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 14px;
  cursor: pointer;
  font-weight: 500;
}
.admin input[type=submit]:hover {
  background: #172F4E !important;
  color: white !important;
  border: none !important;
}

#caller a#search-btn {
  background: none !important;
  display: block;
  width: 19px;
  height: 15px;
  float: right !important;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  position: relative;
  /* left: -10px; */
  behavior: url(/styles/PIE.htc);
}

#caller #search-line label {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #172F4E;
  margin-bottom: 5px;
}

#caller a#search-btn img {
  width: 35px;
  height: 36px;
  margin-left: -20px;
  margin-top: 1px;
}

#caller h3 {
  margin: 0 0 15px 0;
  padding: 0;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #172F4E;
}

#caller #activate-link {
  color: #172F4E !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 3px 0 3px 20px !important;
  margin-top: 20px !important;
  float: right;
  background: none !important;
  text-decoration: underline !important;
}

#caller #call_info th {
  padding: 4px 10px !important;
  border-right: none !important;
}

#caller #call_info th {
  background: none !important;
  color: #172F4E !important;
  font-size: 80% !important;
  font-weight: normal !important;
}

#caller #call_info {
  border-top: none !important;
  border-left: none !important;
  border-collapse: collapse;
  width: 100% !important;
  text-align: center !important;
  font-size: 90% !important;
}

#caller #call_info td {
  border-bottom: none !important;
  border-right: none !important;
  background: transparent !important;
}

.vtc {
  border: 1px solid #eff2f7;
  border-radius: 2px;
  padding: 30px 90px 50px;
}

#sender #submit {
  margin-top: 12px;
  padding: 5px 10px 5px 25px;
  display: inline-block;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  color: white;
  border: 2px solid #1b1b1b;
  font-weight: bold;
  font-size: 100%;
  font-size: 15px;
  font-family: Arial;
  font-weight: bold;
  position: relative;
  z-index: 100;
  behavior: url(/styles/PIE.htc);
  height: 40px;
  margin-right: 38px;
}

#call_price_list table {
  margin-bottom: 20px !important;
  border-radius: 2px !important;
  background: white !important;
}

#call_price_list th {
  background: transparent !important;
  border: none !important;
}

#call_price_list .btn,
#add-rec-btn {
  display: inline-block;
  height: 19px !important;
  line-height: 10px !important;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  border-radius: 7px;
  border: none !important;
  color: white;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold;
  padding: 10px 15px !important;
  margin: 0;
  width: auto;
  position: relative;
  behavior: url(/styles/PIE.htc);
  background: #00ABFF !important;
  border-radius: 2px !important;
}

#call_price_list th {
  font-weight: normal;
  font-size: 100%;
  padding: 8px;
  border: 1px solid #dbf5ac;
  text-align: center;
}

#call_price_list .tarif,
#call_price_list .cenavolani {
  text-transform: none;
  font-weight: 400;
  font-size: 110%;
  padding: 7px 2px !important;
  color: #172F4E !important;
}

#call_price_list .zeme {
  font-size: 86% !important;
  background: white !important;
  border: none !important;
  padding: 2px !important;
  display: inline-block;
}

#call_price_list .ikona {
  text-align: center;
  background: WHITE !important;
}

#call_price_list .button {
  width: 60px !important;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  text-transform: none;
  color: #fff;
  background: #00ABFF;
  border-radius: 2px;
  display: inline-block;
  margin-left: 5px;
  text-decoration: none;
  margin-bottom: 3px;
  margin: auto;
}

.get-price,
.get-price a {
  color: #172F4E !important;
  font-weight: bold;
}

#piktogramy img {
  background: #172F4E;
  border-radius: 13px;
  padding: 3px;
  width: 22px;
  height: 22px;
  margin-right: 3px;
}

#sender ul#peoples-menu li a,
#sender ul#peoples-menu {
  font-weight: 300;
  font-size: 15px;
}

#breadcrumb {
  font-size: 90%;
  margin: 0;
  padding: 0;
}

#breadcrumb a,
#breadcrumb a:visited {
  color: #172F4E;
  padding-right: 10px;
  margin-right: 5px;
  display: inline-block;
  background: url("../grafika/menu3.png") no-repeat center right;
}

#breadcrumb a:hover,
#breadcrumb a:focus,
#breadcrumb a:active {
  color: #2084e8;
}

.odskok {
  padding-left: 10px;
}

img.right {
  margin-left: 20px;
  float: right;
}

/** registracni formular **/
h2.notopmargin {
  margin-top: 0;
  padding-bottom: 25px;
}

.tab-container {
  margin-top: 20px;
}

.tabs {
  list-style-type: none;
  padding: 0;
  display: flex;
}

.tabs li {
  cursor: pointer;
  border-bottom: 2px solid #ececec;
  height: 37px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.6s;
  line-height: 37px;
  padding: 0 40px;
  color: #172F4E;
}

.tabs .tab-link-main {
  padding: 0 93px;
}

.tabs .disabled {
  pointer-events: none;
  opacity: 0.35;
}

.tabs li.active, .tabs li:hover {
  border-bottom: 2px solid #172F4E;
  color: #172F4E !important;
  transition: all 0.6s;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/*
ul#navig2 {
  height: 28px;
  padding: 0;
  margin: 20px 0 0 0;
  font-weight: bold;
  margin-bottom: 10px;
}

ul#navig2 li {
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  line-height: 49px;
  background: #a8b5bd;
  color: white!important;
}

ul#navig2 li:first-child, .tabs li:first-child {
  border-radius: 5px 0 0 5px;
}

ul#navig2 li:last-child, .tabs li:last-child {
  border-radius: 0 5px 5px 0;
}

ul#navig2 li#active {
  width: 135px;
  line-height: 49px;
  height: 50px;
  text-align: center;
  color: #fff;
  background: $accent;
}

ul#navig2 a,
ul#navig2 a:visited {
  width: 135px;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  color: white!important;
}

ul#navig2 a:hover,
ul#navig2 a:active,
ul#navig2 a:focus {
  color: $accent;
}


  */
.success {
  margin-bottom: 20px;
  margin-top: 60px;
}

.message.success .content {
  background: #c8ffda;
  border: 1px solid #1ac050;
  border-radius: 5px;
  font-size: 12px;
  color: #616161;
}

#registration fieldset,
#poradna fieldset {
  padding-left: 10px;
}

#registration label,
#poradna label {
  width: 135px;
  float: left;
}

#registration option {
  padding: 0;
}

#registration .small,
#poradna .small {
  padding-left: 5px;
}

.message.info {
  background: #d6f2ff !important;
  border: 1px solid #eff2f7;
  border-radius: 5px;
  padding: 0px;
  margin-bottom: 30px;
  position: relative;
  z-index: 999;
}

.message.info .content {
  background: #d6f2ff !important;
  border: 1px solid #00ABFF !important;
  border-radius: 5px;
}

.message .content {
  position: relative;
  margin: 0 !important;
  padding: 10px !important;
}

.message p {
  margin: 0;
  padding: 20px 0 0 0;
  background: transparent;
  font-size: 14px !important;
  color: #616161;
}

.message a {
  color: #616161 !important;
  text-decoration: underline;
}

.main-content {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 100px;
}

.login-left {
  position: absolute;
  height: 100vh;
  top: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-left h1, .login-left h2, .login-left p {
  color: black !important;
  line-height: 1rem;
}
.login-left img {
  margin: 30px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1333333333);
}

.login-right {
  position: absolute;
  height: 100vh;
  top: 0;
  background: white;
  margin: 0 auto;
  display: flex;
}

form.login_form {
  background: WHITE !important;
  width: 650px !important;
  border-radius: 5px;
  /* padding: 0 0 5px 0; */
  position: relative;
  behavior: url(/styles/PIE.htc);
  padding: 50px !important;
  color: #172F4E !important;
  margin: auto;
}
form.login_form tr {
  padding: 10px 0 !important;
}
form.login_form table tr:nth-child(4n) {
  background: none !important;
}
form.login_form #login_user,
form.login_form #login_heslo {
  margin-top: 10px;
  margin-bottom: 15px;
  width: 100%;
  height: 55px;
  line-height: 30px;
  padding: 0 5rem;
  padding-left: 3rem;
  border: 2px solid transparent;
  border-radius: 5px;
  outline: none;
  background-color: #f8fafc;
  color: #172F4E;
  transition: 0.5s ease;
}
form.login_form input#prihlasit,
form.login_form input#odhlasit,
form.login_form #verify {
  height: 55px !important;
  text-align: center;
  font-size: 14px;
  background: #00ABFF !important;
  color: white;
  padding: 10px !important;
}
form.login_form .send-code {
  padding: 5px 10px;
  background: #00ABFF !important;
  color: white;
  border-radius: 8px;
  margin-top: 7px;
  float: right;
  font-size: 14px;
}
form.login_form button,
form.login_form input[type=submit] {
  cursor: pointer;
}
form.login_form input {
  margin: 5px 0;
}

.terms-privacy-text {
  font-size: 14px;
  color: gray;
  text-align: center;
  padding: 25px 20px;
  border-bottom: 1px solid #dfe8f1;
}
.terms-privacy-text a {
  font-weight: 600;
}

.text-center {
  text-align: center !important;
}

.bottom {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
  color: gray;
}
.bottom a {
  font-weight: 600;
  cursor: pointer;
  color: #172F4E;
}

.forgpass {
  text-align: right !important;
  justify-content: end;
  -webkit-text-decoration: dotted;
  text-decoration: dotted;
  display: flex;
}

form.login_form tr.form-head {
  background: white !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

form.login_form tr.form-head td {
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-radius: 8px 8px 0 0;
  -khtml-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
  /* padding: 5px 0 5px 8px; */
  border-bottom: 2px solid white !important;
  padding-bottom: 20px !important;
}

#news input,
#registration input#souhlas {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
}

.news {
  width: 150px;
  float: left;
}

#registration input.povinny,
#registration select.povinny,
#poradna input.povinny,
#poradna select.povinny {
  border: 2px solid #2693e6;
}

#odskok {
  margin-top: 30px;
}

/*** kategorie ***/
#kategorie,
#nastaveni {
  margin-top: 20px;
}

#kategorie a,
#kategorie a:visited {
  width: 185px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  margin: 0 10px 10px 0;
  font-size: 120%;
  font-weight: bold;
  color: #172F4E;
  text-decoration: none;
  display: block;
  background: #2084e8 url("../grafika/kategorie.jpg") repeat-x;
  float: left;
}

#nastaveni a,
#nastaveni a:visited {
  width: 990px;
  height: 80px;
  line-height: 79px;
  border: none;
  margin: 0 10px 18px 0;
  font-size: 120%;
  font-weight: bold;
  padding-left: 30px;
  text-decoration: none;
  display: block;
  float: left;
  border-radius: 5px;
  background: white;
  box-shadow: 0px 20.2109px 40.4219px -6.73698px rgba(39, 76, 119, 0.16);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.019em;
}

a#navod,
a#kubik {
  background: white;
  font-size: 100%;
  width: 166px;
  height: 46px;
  border: 1px solid #eff2f7;
  margin: 20px 20px 10px 0;
  font-weight: bold;
  padding: 15px 0 0 70px;
  color: #172F4E;
  text-decoration: none;
  display: block;
  float: left;
  border-radius: 2px;
}

a#kubik {
  background: white;
  font-size: 100%;
  margin-right: 0;
}

.settings-item {
  display: flex;
  align-items: center;
  position: relative;
}

.sett-img {
  width: 28px;
  height: 28px;
  margin-right: 20px;
}

.sett-arr {
  float: right;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 30px;
}

#nastaveni a#navod:hover,
#nastaveni a#navod:focus,
#nastaveni a#navod:active,
#nastaveni a#kubik:hover,
#nastaveni a#kubik:focus,
#nastaveni a#kubik:active {
  color: white;
}

#kategorie a.delsi,
#nastaveni a.delsi {
  line-height: 100% !important;
  padding-top: 20px !important;
  height: 45px !important;
}

#kategorie a.last,
#nastaveni a.last {
  margin-right: 0 !important;
}

.pagination {
  margin-top: 30px;
  text-align: center;
  display: flex;
  max-width: 1050px;
  flex-direction: row;
  flex-wrap: wrap;
}

.pagination img {
  vertical-align: bottom;
}

.pagination a,
.pagination a:visited {
  color: #172F4E;
  padding: 0 7px;
  font-weight: 600;
  height: 20px;
  display: inline-block;
}

.pagination a:hover,
.pagination a:focus,
.pagination a:active {
  color: #172F4E;
}

.pagination strong {
  padding: 0 5px;
}

/** razeni **/
.nadpis {
  height: 70px;
  color: #172F4E;
  margin: 0;
  padding: 15px;
  background: white;
  border-radius: 2px;
}

.nadpis2 {
  width: auto;
  height: 140px;
  color: #172F4E;
  margin: 30px 0 10p;
  padding: 30px;
  background: #fff;
  border-radius: 5px;
}

.nadpis h2 {
  width: 280px;
  font-size: 120%;
  font-weight: bold;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  float: left;
}

.nadpis h2#directory {
  width: 260px;
}

.table-stat-outer {
  padding: 20px;
}
.table-stat-outer h3 {
  margin: auto;
  width: 90%;
}

.table-statistics {
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 50px;
  margin: auto;
  width: 90%;
}
.table-statistics thead {
  background: #f4f4f4;
}
.table-statistics tr {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1333333333);
}
.table-statistics tr td {
  border-right: 1px solid rgba(0, 0, 0, 0.0666666667);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.table-statistics tr .stat90 {
  box-shadow: inset -8px 0px 0px -2px #2b9348;
  text-align: right;
  color: #2b9348;
}
.table-statistics tr .stat80 {
  box-shadow: inset -8px 0px 0px -2px #80b918;
  text-align: right;
  color: #80b918;
}
.table-statistics tr .stat70 {
  box-shadow: inset -8px 0px 0px -2px #bfd200;
  text-align: right;
  color: #bfd200;
}
.table-statistics tr .stat60 {
  box-shadow: inset -8px 0px 0px -2px #dfba00;
  text-align: right;
  color: #dfba00;
}
.table-statistics tr .stat50 {
  box-shadow: inset -8px 0px 0px -2px #dfa400;
  text-align: right;
  color: #dfa400;
}
.table-statistics tr .stat40 {
  box-shadow: inset -8px 0px 0px -2px #df7300;
  text-align: right;
  color: #df7300;
}
.table-statistics tr .stat30 {
  box-shadow: inset -8px 0px 0px -2px #df5600;
  text-align: right;
  color: #df5600;
}
.table-statistics tr .stat20 {
  box-shadow: inset -8px 0px 0px -2px #df3b00;
  text-align: right;
  color: #df3b00;
}
.table-statistics tr .stat10 {
  box-shadow: inset -8px 0px 0px -2px #df2100;
  text-align: right;
  color: #df2100;
}

.apexcharts-tooltip span {
  font-family: inherit;
  font-style: normal;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding-bottom: 0px !important;
}

.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
  padding-bottom: 12px !important;
}

#snippet-settingsApiServiceDatagrid-table thead, .trhead, thead tr {
  background: rgba(245, 242, 242, 0.7215686275);
  border-radius: 0 0 0 0;
  color: #172F4E;
  border-bottom: 1px solid #172F4E;
}
#snippet-settingsApiServiceDatagrid-table thead th, .trhead th, thead tr th {
  font-weight: 600;
}

#snippet-settingsApiServiceDatagrid-table thead:first-child, .trhead th:first-child, thead tr th:first-child {
  border-radius: 5px 0 0 0 !important;
  width: 14px;
  padding-left: 29px;
}

table.kategorie.adr td:first-child a {
  font-weight: 600;
  text-decoration: underline;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#snippet-settingsApiServiceDatagrid-table thead:first-child, .trhead th:last-child, thead tr th:last-child {
  border-radius: 0;
  border-radius: 0 5px 0 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, body.v-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, body.v-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: white !important;
  border: 1px solid rgba(120, 130, 140, 0.13);
  color: #67757c;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #00ABFF !important;
  border: 1px solid #00ABFF !important;
  color: #fff;
}

.sablony-nastaveni th {
  display: none;
}
.sablony-nastaveni input {
  margin-right: 5px;
}
.sablony-nastaveni label {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.hidden {
  visibility: hidden;
  display: none;
}

.razeni {
  width: 100%;
  height: 30px;
  float: right;
  text-align: right;
}

.razeni.vadr {
  width: 100%;
  position: relative;
}

.razeni.his {
  width: 100%;
}

.razeni.his fieldset {
  float: left;
}

#akce,
#team {
  float: left;
}

#datum,
.datum {
  width: 60px;
  background: white;
  border: 1px solid #a7a7a7;
  margin-right: 5px;
}

.razeni option {
  padding-right: 15px;
}

.razeni a,
.razeni a:visited {
  color: #172F4E;
}

.razeni .oddelovac {
  color: #172F4E;
}

.razeni a:hover,
.razeni a:active,
.razeni a:focus {
  color: #172F4E;
}

#gatewayTemplates {
  position: absolute;
  top: -5px !important;
  left: auto !important;
  right: 51px !important;
  width: 610px;
  height: 600px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: white;
  padding: 18px 0;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  border-radius: 5px;
  z-index: 999 !important;
}
#gatewayTemplates span {
  margin-bottom: 5px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 6px 18px;
}
#gatewayTemplates span:hover {
  background: #f4f4f4;
}

.gateway-new-template {
  margin-bottom: 12px;
  font-size: 12px;
  background: #00ABFF;
  border-radius: 2px;
  padding: 3px 7px;
  margin-right: 18px;
  color: white !important;
}

.gateway-new-template:hover {
  background: #00ABFF !important;
}

#gatewaySmileBox {
  position: absolute;
  top: 190px !important;
  left: auto !important;
  right: 25px !important;
  background: white;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  border-radius: 5px;
  width: 214px;
}
#gatewaySmileBox span {
  margin-right: 5px;
  font-size: 16px;
  cursor: pointer;
}
#gatewaySmileBox img {
  width: 20px;
}

.senders-table {
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
}
.senders-table li {
  list-style: none;
  height: 30px;
}
.senders-table li a {
  background: #00ABFF;
  color: white;
  border-radius: 5px;
  padding: 3px 4px;
  font-size: 13px !important;
  margin-right: 5px;
}
.senders-table li a:hover {
  background: #172F4E;
  color: #f4f4f4;
}

.blacklist1 {
  max-width: 100px;
  padding: 30px 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.blacklist2 {
  max-width: 200px;
}

.blacklist3 {
  max-width: 50px;
}

.blacklist4 {
  max-width: 50px;
}

input#zobrazit,
input#graf {
  width: 140px;
  padding: 0;
  text-align: center;
  background: #00ABFF !important;
  cursor: pointer;
  color: white;
  margin-right: 5px;
}

input#zobrazit:hover,
input#graf:hover {
  background: #f4f4f4 !important;
}

input#graf {
  width: 168px;
  background: url("../grafika/graf.png");
}

/* kategorie bez obrazku */
table.kategorie2 td {
  border: 1px solid #e1e0e0;
  font-size: 90%;
  padding: 2px 2px;
}

table.kategorie2.adr td {
  background: #fbfbfb;
  border: 1px solid rgba(136, 136, 136, 0.0666666667);
}

table.kategorie2 th {
  font-size: 80%;
  padding: 3px 5px;
}

table.kategorie2 td.mezera {
  padding: 0px;
  height: 0px;
}

table.kategorie input {
  padding: 0;
  margin: auto;
  text-align: center;
}

table.kategorie td {
  padding: 15px;
}

table.kategorie th {
  font-size: 14px;
  padding: 15px 10px;
}

table.kategorie th a,
table.kategorie th a:visited {
  color: WHITE;
}

table.kategorie th a:hover,
table.kategorie th a:active,
table.kategorie th a:focus {
  color: #172F4E;
}

.interpret {
  color: #172F4E;
}

table.kategorie td.mezera {
  padding: 0px;
  height: 0px;
  background: transparent;
}

th.detail {
  width: 90px;
}

th.pocet {
  width: 100px;
}

td.cena {
  text-align: center;
  font-weight: bold;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.f-right {
  float: right;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 9px;
  background-color: transparent;
  margin-left: 10px;
}

.mini-nav .nk-sidebar .metismenu > li a > i, .nk-sidebar .metismenu > li a > img, .nk-sidebar .metismenu > li a .menu-img {
  width: 32px;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 20px;
}

/* tematicke sms */
.sms_bg {
  background: white url("../grafika/sms-bg.jpg") repeat-y;
}

.sms_bg p {
  width: 550px;
  padding: 15px 25px 10px;
  margin: 0;
}

.sms_top {
  width: 600px;
  height: 5px;
  background: url("../grafika/sms-top.png");
  overflow: hidden;
}

.sms_bottom {
  width: 570px;
  height: 62px;
  padding: 10px 15px 0 15px;
  background: url("../grafika/sms-bottom.png");
  font-size: 90%;
  margin-bottom: 20px;
  position: relative;
}

.sms_bottom.videoo {
  height: 31px;
  background: url("../grafika/smsbottom.png");
}

.sms_bottom strong {
  color: white;
}

.sms_bottom.doprava {
  text-align: right;
  font-size: 100%;
}

.sms_bottom.doprava strong {
  padding-right: 5px;
}

a.poslat,
a.poslat:visited,
a.poslat:hover,
a.poslat:active,
a.poslat:focus,
a.placena,
a.placena:visited,
a.placena:hover,
a.placena:active,
a.placena:focus {
  width: 97px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #172F4E;
  text-decoration: none;
  background: #fff url("../grafika/odeslat-sms.jpg");
  display: inline-block;
  font-size: 90%;
  position: absolute;
  top: 10px;
  right: 10px;
}

a.placena,
a.placena:visited,
a.placena:hover,
a.placena:active,
a.placena:focus {
  width: 149px;
  background: #30ade3 url("../grafika/odeslat-zdarma.jpg");
  position: static;
  margin-left: 5px;
}

.sms_bottom .oddelovac {
  color: #909090;
  padding: 0 4px;
}

a.znamka,
a.znamka:visited,
a.znamka:hover {
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #172F4E;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  background: url("../grafika/znamka.png");
  margin-left: 3px;
}

.sms_bottom strong.yellow {
  color: #fff;
  font-size: 110%;
}

.sending {
  padding-top: 10px;
}

.sending a.poslat {
  position: static !important;
  margin-left: 5px;
}

.popis {
  font-size: 90%;
  margin-bottom: 20px;
}

.popis .oddelovac {
  color: #2084e8;
}

#message_bg {
  width: 603px;
  padding: 0 20px;
  background: white url("../grafika/message-bg.jpg");
  position: relative;
}

#message_top {
  width: 643px;
  height: 23px;
  background: url("../grafika/message-top.png");
}

#message_bottom {
  width: 643px;
  height: 23px;
  background: url("../grafika/message-bottom.png");
}

#message_bg h1 {
  margin: 0 0 20px 0;
}

#message_bg strong {
  width: 80px;
  float: left;
}

#message_bg p {
  line-height: 200%;
}

a#zavrit,
a#zavrit:visited,
a#zavrit:hover {
  font-weight: bold;
  height: 22px;
  line-height: 22px;
  background: url("../grafika/zavrit.jpg") no-repeat center left;
  padding-left: 30px;
  display: block;
  position: absolute;
  color: #172F4E;
  text-decoration: none;
  top: 0;
  right: 20px;
}

p#message2 {
  width: 453px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  color: white;
  background: #3bc9df url("../grafika/message.jpg");
  text-align: center;
  font-size: 150%;
  text-transform: uppercase;
}

p#message {
  width: 560px;
  height: 55px;
  padding: 5px 15px 0 15px;
  margin: 0 auto;
  color: white;
  background: #3bc9df url("../grafika/informace.jpg");
  margin-top: 20px;
}

p#message strong {
  width: auto;
  float: none;
}

#price {
  float: right;
  font-weight: bold;
}

.tvar {
  font-size: 120%;
  color: #172F4E;
}

a.vice,
a.vice:visited,
span.vice {
  height: 17px;
  line-height: 17px;
  font-weight: bold;
  float: right;
  padding-left: 20px;
  text-decoration: none;
  display: block;
}

a.vice:hover,
a.vice:active,
a.vice:focus,
a.rozcestnik:hover span {
  color: #8a8a8a;
}

a.vice.sms {
  background: url("../grafika/obalka.png") no-repeat center left;
  padding-left: 25px;
}

a#cenik,
a#cenik:visited {
  width: 165px;
  height: 44px;
  line-height: 44px;
  padding-left: 85px;
  color: white;
  margin-top: 20px;
  font-size: 120%;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  background: url("../grafika/cenik.png");
  float: right;
}

a#cenik:hover,
a#cenik:active,
a#cenik:focus {
  color: white;
}

/* adresar */
#imex {
  text-align: right;
  font-size: 90%;
}

.ad-but {
  background: #00ABFF;
  font-size: 16px;
  font-weight: 200;
  color: white !important;
  padding: 3px 0px;
  animation: none;
  border: none;
  text-align: center;
  width: 27px;
  height: 27px;
  line-height: 22px;
  text-align: center;
  text-transform: none;
  border-radius: 7px;
  display: inline-block;
  text-decoration: none;
  margin-bottom: 3px;
}

.ad-but:hover,
.ad-but:focus {
  color: white;
  background: #f4f4f4 !important;
  animation: none;
  color: #172F4E !important;
  border: none;
}

.ad-but.inactive {
  background: #f4f4f4 !important;
  color: #172F4E !important;
}

.ad-but.inactive:hover {
  background: #f4f4f4 !important;
  color: #1ac050 !important;
}

.ad-but.default, .ad-but.default:hover {
  background: #1ac050 !important;
  color: white !important;
}

.invoice-edit-table {
  width: 100% !important;
  display: table !important;
}

.datagrid *,
.datagrid *::before,
.datagrid *::after {
  box-sizing: border-box;
}
.datagrid thead {
  background: rgba(245, 242, 242, 0.7215686275);
  border-radius: 0 0 0 0;
  color: #115075;
  border-bottom: 1px solid #115075;
}
.datagrid thead th {
  padding: 15px 7px;
}
.datagrid thead th:first-child {
  border-radius: 5px 0 0 0;
}
.datagrid thead th:last-child {
  border-radius: 0 5px 0 0;
}

.datagrid .btn {
  background: #00ABFF;
  font-size: 16px;
  font-weight: 600;
  color: white;
  padding: 3px 10px;
  animation: none;
  border: none;
  text-align: center;
  height: 27px;
  line-height: 19px !important;
  text-align: center;
  text-transform: none;
  border-radius: 7px;
  display: inline-block;
  margin-left: -1px;
  text-decoration: none;
  margin-bottom: 3px;
}

.datagrid table tbody td {
  vertical-align: middle;
  padding: 7px 18px !important;
}

.datagrid table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1333333333);
}

.datagrid table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075) !important;
}

.datagrid .btn:hover,
.datagrid .btn:focus {
  color: white;
  background: #f4f4f4 !important;
  animation: none;
  color: #172F4E !important;
  border: none;
}

.datagrid .form-control {
  height: 33px !important;
  padding-left: 4px;
}

.datagrid table thead tr.row-group-actions th {
  border-bottom-width: 0 !important;
  background-color: white !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: white !important;
}

.odeslat-sms {
  color: WHITE;
  background: #00ABFF !important;
  margin-left: 5px;
  cursor: pointer;
}

a.pridat,
a.pridat:visited {
  text-decoration: none;
  margin-left: 18px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  justify-content: center;
  background-color: #172F4E;
  color: white !important;
  gap: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  border: none !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
}

.odskok a {
  margin-left: 0 !important;
}

a.pridat:hover,
a.pridat:active,
a.pridat:focus {
  color: #172F4E !important;
}

th.tlacitka {
  width: 180px;
}

th.tlacitka2 {
  width: 90px;
}

input#button {
  width: 90px;
  text-align: center;
  background: #00ABFF;
  border-radius: 2px;
  color: #172F4E;
}

input#button:hover {
  text-align: center;
  background: #00ABFF !important;
  color: white !important;
  cursor: pointer;
}

.dropaction {
  position: relative;
  display: inline-block;
}

.dropaction-toggle {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
}

.dropaction-toggle:hover {
  background-color: #0056b3;
}

.dropaction-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style: none;
  min-width: 120px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropaction-menu.hidden {
  display: none;
}

.dropaction-menu li {
  border-bottom: 1px solid #eee;
}

.dropaction-menu li:last-child {
  border-bottom: none;
}

.dropaction-menu li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.dropaction-menu li a:hover {
  background-color: #f0f0f0;
}

/* Action bar container */
.action-bar {
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: #f7f7f7;
}

/* Buttons in the action bar */
.action-button {
  background: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  transition: background-color 0.3s ease;
  border-radius: 3px;
}

.action-button:disabled {
  cursor: not-allowed;
  background: #fff !important;
  color: #bdbdbd !important;
}

.action-button:hover {
  background: #00ABFF;
  color: white;
}

.action-button.bin:hover {
  background: #F82E45;
  color: white;
}

.action-icon {
  font-size: 20px;
  color: #333; /* Normal color */
  padding: 5px 8px;
}

/* Disabled state for the checked icon */
.action-icon.disabled-icon {
  opacity: 0.5;
  color: #8b8b8b; /* Greyed-out color */
}

/* Submenu styling */
.action-group {
  position: relative;
}

/* Default submenu styling */
.action-group .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  list-style: none;
  border-radius: 5px;
  min-width: 150px;
}

/* Show submenu on hover */
.action-group:hover .submenu {
  display: block;
}

/* Disabled group: prevent submenu from appearing */
.action-group.disabled:hover .submenu {
  display: none;
}

.action-group .submenu li {
  margin: 0;
  padding: 0;
}

.action-group .submenu li a {
  color: #333;
  text-decoration: none;
  display: block;
  width: 160px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.0666666667);
  padding: 6px 20px;
  transition: all none;
}

.action-group .submenu li a:hover {
  background: #00ABFF;
  color: white;
  transition: all none;
}

/* Show submenu on hover */
.action-group:hover .submenu {
  display: block;
}

/* Icons inside buttons */
.action-button .mdi {
  font-size: 20px;
}

/* 4. Sub-submenu (.podmenu) styling */
.podmenu {
  position: absolute;
  top: 0;
  left: 100%; /* Position it to the right of the parent <li> */
  margin-left: -1px; /* slight overlap so borders meet cleanly */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 1100; /* slightly above the main menu */
}

/* By default, .podmenu is hidden via .hidden (display: none).
   We'll show it via JS if onmouseover triggers 'active("prvni")', etc.
*/
/* Sub-submenu <ul> adjustments */
.podmenu ul {
  list-style: none;
  margin: 0;
  padding: 5px 0;
}

/* Sub-submenu <li> styling */
.podmenu li {
  white-space: nowrap;
  position: relative;
}

.podmenu li a {
  display: block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
}

.podmenu li a:hover {
  background-color: #f0f0f0;
}

#hromadna {
  width: 580px;
  height: auto;
  padding: 20px 0 0 20px;
  background: white;
  overflow: hidden;
  border-radius: 2px;
}

#hromadna img {
  margin: 15px;
}

#hromadna fieldset {
  width: 100%;
  padding: 15px;
}

.big {
  font-size: 120%;
  font-weight: bold;
  padding-right: 5px;
}

.bigger {
  font-size: 150%;
}

#sender {
  width: 164px;
  height: 24px;
  background: white !important;
  margin-left: 17px;
}

input#vypocet {
  width: 160px;
  height: 37px;
  text-transform: none;
  text-align: center;
  font-size: 100%;
  background: #00ABFF !important;
  border-radius: 2px !important;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  float: right;
  margin: 20px 50px 20px 0;
}

#ano {
  margin-left: 10px;
  background: none;
  padding: 0;
}

#ne {
  background: none;
  padding: 0;
}

p.prvni {
  margin-top: 20px;
}

input#duplicita {
  background: none;
  border: 0;
  padding: 0;
}

.topmar {
  margin-top: 40px !important;
  margin-left: -10px;
}

.b0 {
  margin-bottom: 0 !important;
}

.t30 {
  margin-top: 30px;
}

img#excel {
  margin-top: 55px;
}

/* SMS connect */
ul#navig {
  height: 35px;
  padding: 0;
  margin: 0 0 1px 0;
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 0;
}

ul#navig li {
  height: 35px;
  list-style: none;
  margin: 0 2px 0 0;
  padding: 0;
  float: left;
}

ul#navig li#active {
  width: 160px;
  line-height: 35px;
  text-align: center;
  background: #00ABFF !important;
  border-radius: 2px;
  color: white;
}

ul#navig a,
ul#navig a:visited {
  width: 160px;
  height: 35px;
  line-height: 35px;
  background: url("../grafika/grey-top.png") no-repeat;
  text-decoration: none;
  text-align: center;
  color: #545454;
  display: inline-block;
}

ul#navig a:hover,
ul#navig a:active,
ul#navig a:focus {
  background: url("../grafika/yellow-top.png") no-repeat;
  color: #172F4E;
}

table.tabulka {
  border: 3px solid #fff;
  border-collapse: collapse;
  margin-left: 2px;
  margin: 0;
}

.tabulka td {
  padding: 10px;
  background: #fafafa;
  border: 1px solid #fff;
}

.tabulka tr.sudy td {
  background: white;
}

td.udaj {
  width: 85px;
  font-weight: bold;
  text-align: center;
}

.podbarveni {
  background: white;
  border: none;
  padding: 30px;
  border-radius: 2px;
  border: 1px solid #eff2f7;
}

.zahlavi th {
  border: 1px solid #fff;
}

/* identifikace odesilatele */
.ramecek {
  background: none;
  padding: 20px 20px 15px 20px;
  color: #172F4E;
  border-radius: 2px;
  border-top-left-radius: 0px;
}

.ramecek-spodek {
  width: 600px;
  height: 5px;
  background: url("../grafika/black-bottom.png");
  overflow: hidden;
}

.banky {
  padding: 0 !important;
  width: auto !important;
  margin-left: 23px;
  margin-bottom: -6px;
}

#kredit {
  margin-left: 6px;
  background: none;
  padding: 0;
}

#body {
  margin-left: 105px;
  background: none;
  padding: 0;
}

/*
ul#naviga {
  height: 35px;
  padding: 0;
  margin: 0;
  font-size: 120%;
  font-weight: bold;
}

ul#naviga a,
ul#naviga a:visited {
  text-decoration: none;
  color: #545454;
}

form#form_formular ul#naviga {
  margin-bottom: 2px;
  margin-bottom: 0;
}

ul#naviga li {
  width: 103px;
  height: 35px;
  line-height: 35px;
  list-style: none;
  margin: 0 2px 0 0;
  padding: 0;
  text-align: center;
  background: $grey;
  color: $accent;
  float: left;
  font-weight: 300;
  font-size: $ex-13;
}

ul#naviga li#sipka {
  width: 40px;
  display: none;
}

ul#naviga li:first-child {
  border-radius: 5px 0 0 5px;
}

ul#naviga li:last-child {
  border-radius: 0 5px 5px 0;
}

ul#naviga li#active {
  color: white;
  font-weight: 300;
  font-size: $ex-13;
  background: $accent-light;
}

*/
#naviga {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 20px 0;
  max-width: 250px;
}

.step {
  position: relative;
  text-align: center;
  flex: 1;
}

.circle {
  width: 30px;
  height: 30px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 16px;
  color: #ccc;
}

.step.completed .circle {
  border-color: #1ac050;
  background-color: #1ac050;
  color: #fff;
}

.step.active .circle {
  border-color: #2196f3;
  color: #2196f3;
}

.connector {
  flex: 1;
  width: 50px;
  height: 2px;
  margin: -40px;
  margin-top: -58px;
  background-color: #ccc;
}

.step.completed + .connector {
  background-color: #1ac050;
}

.step.active + .connector {
  background-color: #2196f3;
}

input#save:disabled,
#frm-finishRegistrationForm input[type=submit]:disabled {
  background: #e3e3e3 !important;
  cursor: default;
}

input#save,
input.save {
  margin-top: 0px;
  float: right;
}

#confirm-password-info {
  color: #e10707;
}

.big.yellow {
  padding-left: 10px;
}

.search-info {
  padding-top: 6px;
  visibility: hidden;
  font-size: 12px;
  margin-left: 15px;
}

.search-number {
  margin-bottom: 25px;
}

.search-number:hover .search-info {
  visibility: visible;
}

/* reklama  v sms */
input#format {
  width: 263px;
  height: 20px;
  padding: 4px;
  margin: 0 10px 0 45px;
}

input#delka,
input#cena,
input.delka {
  width: 38px;
  height: 20px;
  padding: 4px;
  text-align: center;
  color: #8c8c8c;
}

input#count {
  width: 57px;
  height: 20px;
  padding: 4pxpx;
  margin: 0 15px 0 4px;
}

input#celkem {
  width: 58px;
  padding: 4px 0 0 0;
  text-align: center;
  color: #8c8c8c;
}

#total {
  padding-left: 25px;
}

.trans-head {
  background: rgba(245, 242, 242, 0.7215686275);
  border-radius: 5px 5px 0px 0px;
  color: #172F4E;
  border-bottom: 1px solid #172F4E;
}
.trans-head th {
  font-weight: 600;
}

.trans-bottom {
  background: white;
  border-top: 1px solid #eff2f6;
}

input.koupit {
  width: 100px;
  height: 34px;
  text-align: center;
  font-size: 100%;
  line-height: 1px;
  text-transform: none;
  color: white;
  text-decoration: none;
  background: #00ABFF !important;
  border-radius: 5px !important;
}

/* systemove hlasky */
.information {
  margin-top: 20px;
}

.information .stred {
  padding: 15px 20px;
  width: 560px;
  background: url("../grafika/hlaska-y-middle.png");
  margin: 0;
}

.information .nahore {
  width: 600px;
  height: 5px;
  background: url("../grafika/hlaska-y-top.png");
  overflow: hidden;
}

.information .dole {
  width: 600px;
  height: 5px;
  background: url("../grafika/hlaska-y-bottom.png");
  overflow: hidden;
}

.information p {
  min-height: 28px;
  _height: 28px;
  font-weight: bold;
  color: #172F4E;
  font-size: 120%;
  padding: 10px 0 0 55px;
  line-height: 140%;
  margin: 0;
  background: url("../grafika/information.jpg") no-repeat 0 0;
}

.warning {
  margin-bottom: 20px;
  z-index: 9;
  position: relative;
}

.warning .stred {
  padding: 15px 20px;
  width: 560px;
}

.warning .nahore {
  width: 600px;
  height: 5px;
  overflow: hidden;
}

.warning .dole {
  width: 600px;
  height: 5px;
  overflow: hidden;
}

.succes {
  margin-top: 20px;
}

.succes .stred {
  padding: 15px 20px;
  width: 560px;
}

.succes .nahore {
  width: 600px;
  height: 5px;
  overflow: hidden;
}

.succes .dole {
  width: 600px;
  height: 5px;
  background: url("../grafika/hlaska-b-bottom.png");
  overflow: hidden;
}

.succes p {
  min-height: 28px;
  _height: 28px;
  font-weight: bold;
  color: white;
  font-size: 120%;
  padding: 10px 0 0 55px;
  line-height: 140%;
  margin: 0;
  background: url("../grafika/succes.jpg") no-repeat 0 0;
}

.none {
  display: none;
}

.block {
  display: block;
}

/* jednotlive sluzby */
#middle {
  width: 1019px;
  float: left;
}

#middle h2,
h2#kontaktni {
  width: 500px;
  margin: 30px 0 10px;
  color: white;
  background: url("../grafika/h2-5.png");
}

#middle h2#kontaktni,
h2#kontaktni {
  width: 250px;
  font-size: 100%;
  padding: 0;
  text-align: center;
  background: url("../grafika/h2-6.png");
  margin-bottom: 0;
}

#middle a.vice {
  float: none;
  margin-left: 10px;
}

#panel {
  width: 250px;
  padding-top: 25px;
  float: right;
  display: none;
}

#panel h2 {
  width: 240px;
  margin: 20px 0 0 0;
  font-size: 100%;
  color: white;
  background: url("../grafika/box-top.png");
}

#panel.bannerova h2 {
  background: url("../grafika/h2-7.png");
}

#panel.bannerova img {
  margin-top: 10px;
}

#panel.bannerova a#cenik {
  margin-top: 0;
}

#middle a#cenik,
#middle a#cenik:visited {
  width: 106px;
  height: 26px;
  line-height: 26px;
  padding-left: 40px;
  color: white;
  margin: 20px 0 0 10px;
  font-size: 90%;
  text-decoration: none;
  display: block;
  font-weight: bold;
  background: black url("../grafika/cenik2.jpg");
  float: none;
}

.boxik {
  background: #fff;
}

.boxik ul {
  margin: 0;
  padding: 10px 10px 10px 0;
  background: url("../grafika/box-bottom.jpg") no-repeat bottom left;
}

.boxik2 {
  background: #e2e0e1;
}

.boxik2 ul {
  margin: 0;
  padding: 10px 10px 10px 0;
  background: url("../grafika/box-bottom2.jpg") no-repeat bottom left;
}

ul.advantage li {
  list-style: none;
  padding: 5px 0 5px 15px;
  margin-left: 15px;
  background: url("../grafika/bullet.jpg") no-repeat 0 8px;
}

ul.interesting li {
  list-style: none;
  padding: 5px 0 5px 20px;
  margin-left: 15px;
  background: url("../grafika/bullet2.jpg") no-repeat 0 9px;
}

#middle #registration fieldset,
#poradna fieldset {
  background: #e1e0e0 url("../grafika/form-bottom.jpg") no-repeat bottom left;
  padding: 20px;
  margin-bottom: 10px;
}

#middle #registration label,
#poradna label {
  width: 150px;
  font-weight: bold;
}

#middle #registration textarea,
#poradna textarea {
  width: 310px;
  height: 70px;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  background: white;
  margin-bottom: 20px;
  color: #172F4E;
  float: left;
}

#poradna textarea {
  width: 400px;
  height: 130px;
  border: 2px solid #2693e6;
}

#middle #registration input,
#poradna input {
  width: auto;
}

#checkboxy {
  width: 300px;
  float: left;
}

#checkboxy input {
  border: 0;
  padding: 0;
  background: none;
  width: auto;
}

#middle #registration input#registrovat,
#poradna input#registrovat {
  float: right;
}

.topmargin {
  margin-top: 20px !important;
}

.sipka_modra {
  height: 18px;
  display: inline-block;
}

.sipka_zluta {
  height: 18px;
  display: inline-block;
  margin: 10px 0;
}

/* paticka */
#paticka {
  width: 890px;
  padding: 58px 20px 0 74px;
  color: #b3b3b3;
  float: left;
}

#copyright {
  display: inline-block;
  font-size: 90%;
}

#copyright a {
  color: #172F4E;
}

#copyright a:visited {
  color: #b3b3b3;
}

#copyright a:hover,
#copyright a:active,
#copyright a:focus {
  color: #fff;
}

.oddelovac {
  padding: 0 7px;
  color: #172F4E;
}

#navigation {
  display: inline-block;
}

#navigation a,
#navigation a:visited {
  width: 180px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: #172F4E;
  display: block;
  background: #ffcc00 url("../grafika/reklama.jpg");
}

#navigation a:hover,
#navigation a:active,
#navigation a:focus {
  color: #172F4E;
}

/** partneri **/
#partners {
  width: 890px;
  padding: 20px 20px 20px 74px;
  color: #b3b3b3;
  font-size: 90%;
  float: left;
  background: black;
}

/*********** dopsane styly *****************/
input.adresar_jmeno {
  width: 263px;
  padding: 4px;
  padding: 10px 15px;
  background: #f4f4f4;
  border-radius: 5px;
}

#sablony_text,
.sablony_text {
  width: 429px;
  height: 200px;
  padding: 12px;
  background: #f4f4f4;
  border-radius: 5px !important;
}

#sablony_text2,
.sablony_text2 {
  width: 396px;
  height: 200px;
  padding: 4px 3px;
  background: #f4f4f4;
  border-radius: 5px;
}

#count_info {
  font-size: 90%;
}

label.labeldelka {
  width: 200px;
  float: left;
  padding-top: 6px;
}

label.labeldelka2 {
  width: 140px;
  float: left;
}

label.delka {
  font-size: 90%;
  font-weight: bold;
  margin-left: 150px;
}

a.zpet,
a.zpet:visited,
input#confirm_back {
  height: 17px;
  line-height: 17px;
  margin-top: 20px;
  display: block;
  font-weight: bold;
  background: none;
  display: inline-block;
  position: relative;
}

input#confirm_back {
  line-height: auto;
  cursor: hand;
  cursor: pointer;
  padding: 0;
  padding-left: 20px;
  float: left;
}

a.zpet:hover,
a.zpet:active,
a.zpet:focus,
input#confirm_back:hover {
  color: #172F4E;
}

a.zpet::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #172F4E;
  transform-origin: bottom right;
  transition: transform 0.5s ease-out;
}

a.zpet:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

a.underline {
  display: inline-block;
  position: relative;
}

a.underline:hover {
  display: inline-block;
  position: relative;
  color: #172F4E;
  font-weight: 600 !important;
}

a.underline::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0px;
  left: 0;
  background-color: #172F4E;
  transform-origin: bottom right;
  transition: transform 0.5s ease-out;
}

a.underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

td.shrnuti {
  width: 80px;
}

td.shrnuti2 {
  width: 160px;
}

input#confirm_odeslat {
  width: 125px;
  height: 35px;
  float: right;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
  border: 0;
  padding: 0;
  cursor: pointer;
  cursor: hand;
  color: white;
  background: #00ABFF !important;
}

.light-theme .current {
  background: #00ABFF !important;
  color: #fff;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: default;
}

ul.navig2 {
  height: 28px;
  padding: 0;
  margin: 0;
  font-weight: bold;
  margin-bottom: 0;
}

ul.navig2 li {
  height: 28px;
  list-style: none;
  margin: 0 2px 0 0;
  padding: 0;
  float: right;
}

ul.navig2 li.active {
  width: 135px;
  line-height: 40px;
  text-align: center;
  color: #172F4E;
  background: #fff;
  height: 50px;
  border-radius: 2px 10px 0 0;
}

ul.navig2 a,
ul.navig2 a:visited {
  width: 135px;
  height: 40px;
  line-height: 40px;
  background: none;
  text-decoration: none;
  text-align: center;
  color: #172F4E;
  display: inline-block;
}

ul.navig2 a:hover,
ul.navig2 a:active,
ul.navig2 a:focus {
  background: url("../grafika/reg2.png") no-repeat;
  color: #172F4E;
}

.settings {
  border-radius: 2px;
  background: white;
  margin-top: 20px;
  position: relative;
}
.settings .line {
  width: 100%;
  margin-bottom: 35px;
}

.settings legend {
  background: none;
  color: #172F4E;
  padding: 36px 0;
  font-weight: bold;
  position: relative;
  top: -1.3em;
}

.settings label,
.settings .label {
  width: 200px;
  float: left;
  color: #172F4E !important;
}

.settings textarea {
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  border-radius: 2px;
  background: white;
}

.settings input.radio {
  border: 0;
  background: none;
  padding: 0;
  vertical-align: middle;
}

.settings option {
  padding-right: 10px;
}

input.ulozit,
a.button,
a.button:hover,
a.button:visited,
a.button:focus,
a.button:active {
  width: 125px !important;
  height: 29px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  border: 0;
  padding: 0;
  margin-top: 20px;
  background: url("../grafika/register.png");
  text-decoration: none;
  color: white;
  float: right;
}

.nofloat {
  float: none !important;
}

.vysvetlivka {
  font-size: 90%;
  padding-left: 200px;
  _padding-left: 205px;
}

.vysvetlivka2 {
  font-size: 90%;
  padding-left: 200px;
  display: inline-flex;
  transition: all 1s ease-in;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.odskok2 {
  margin-left: 200px;
}

.odskok3 {
  margin-left: 250px;
  display: inline-flex;
  transition: all 1s ease-in;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

a.button,
a.button:hover,
a.button:visited,
a.button:focus,
a.button:active {
  line-height: 29px;
  margin-bottom: 20px;
  margin-bottom: 0;
  display: block;
}

a.bigbutton,
a.bigbutton:hover,
a.bigbutton:visited,
a.bigbutton:focus,
a.bigbutton:active,
input.bigbutton {
  width: 179px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 120%;
  border: 0;
  padding: 0;
  margin-top: 20px;
  background: black url("../grafika/aktivovat.jpg");
  text-decoration: none;
  color: white;
  display: block;
}

input.bigbutton {
  float: right;
}

ul.obalky li {
  list-style: none;
  background: url("../grafika/odrazka.png") no-repeat 0 7px;
  margin-left: 10px;
  padding-left: 30px;
}

/* change box */
#changebox,
#changebox1,
#changebox2,
#changebox3,
#changebox4 {
  padding: 10px 20px 0;
  border: 2px solid #e1e0e0;
  margin-bottom: 20px;
  background: #f5f5f5;
  min-height: 235px;
  _height: 235px;
}

ul#navig3,
ul#navig4 {
  height: 28px;
  padding: 0;
  margin: 20px 0 0 0;
  font-weight: bold;
}

ul#navig3 li {
  width: 108px;
  height: 28px;
  list-style: none;
  margin: 0 2px 0 0;
  padding: 0;
  background: url("../grafika/reg4.png") no-repeat;
  text-decoration: none;
  text-align: center;
  color: white;
  display: inline-block;
  line-height: 28px;
  cursor: hand;
}

ul#navig3 li#active {
  width: 108px;
  line-height: 28px;
  text-align: center;
  color: #172F4E;
  background: url("../grafika/reg5.png") no-repeat;
}

ul#navig3 li.vydelek {
  background: url("../grafika/reg6.png") no-repeat;
}

ul#navig3 li:hover {
  background: url("../grafika/reg5.png") no-repeat;
  color: #172F4E;
  cursor: pointer;
}

p.claim {
  font-size: 200%;
  line-height: 130%;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#changebox h1,
#changebox1 h1,
#changebox2 h1,
#changebox3 h1,
#changebox4 h1 {
  color: #172F4E;
}

#changebox h2,
#changebox1 h2,
#changebox2 h2,
#changebox3 h2,
#changebox4 h2 {
  color: #172F4E;
  font-size: 150%;
  font-weight: normal;
  margin: 5px 0 10px;
  padding: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e1e0e0;
  background: none;
  height: auto;
  width: auto;
  line-height: normal;
}

ul.provize li {
  background: url("../grafika/bullet2.png") no-repeat 0 7px;
  list-style: none;
  margin: 0;
  padding: 5px 0 5px 15px;
}

/* sluzby - rozcestnik */
.sluzba,
.sluzba2 {
  width: 470px;
  height: 160px;
  line-height: 79px;
  border: none;
  margin: 0 10px 18px 0;
  font-size: 120%;
  font-weight: bold;
  padding: 0px 30px;
  color: #000;
  text-decoration: none;
  display: block;
  float: left;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0px 20.2109px 40.4219px -6.73698px rgba(39, 76, 119, 0.16);
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.019em;
  color: #172F4E;
}

#caller .number {
  display: none !important;
}

#caller .footer a {
  color: #172F4E !important;
  font-size: 80%;
  font-weight: 400 !important;
  padding: 3px 20px 3px 20px !important;
  background: none !important;
}

.columns {
  display: flex;
}

#caller .colmn-1 {
  width: 47% !important;
}

.input-group-text {
  background-color: transparent !important;
  border: none !important;
  cursor: pointer;
}

.table-sm td {
  padding: 7px !important;
}

.btn-sm,
.btn-group-sm > .btn {
  font-size: 0.75rem !important;
}

.sluzba p,
.sluzba2 p {
  margin: 5px 0 0 0;
  line-height: 130%;
  font-weight: 400;
}

#middle .sluzba h2,
#middle .sluzba2 h2 {
  width: auto;
  height: auto;
  line-height: normal;
  background: none;
  padding: 0;
  margin: 0;
  color: #2084e8;
  font-size: 120%;
}

.pripad,
.pripad2 {
  width: 250px;
  float: left;
}

.pripad2 {
  float: right;
}

.pripad h4,
.pripad2 h4 {
  width: 240px;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  color: #172F4E;
  background: white;
  margin: 20px 0 0 0;
}

p.textik {
  min-height: 80px;
  _height: 80px;
  padding: 10px;
  margin: 0;
  border: 1px solid #e2e0e1;
}

p.tarif {
  font-size: 90%;
  padding-left: 5px;
  margin: 5px 0 0 0;
}

#chart-graphType1,
#chart-graphType2,
#chart-graphCategory1,
#chart-graphCategory2 {
  padding: 0 6px;
  display: inline-block;
}

.datepicker th,
.datepicker td {
  padding: 0 !important;
}

#pagination {
  display: block;
  background-color: transparent;
  margin: 5px;
}

#pagination .first,
#pagination .next,
#pagination .prev,
#pagination .last {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 2px 3px;
}

#pagination .first {
  background-image: url("/grafika/tablesorter/first.png");
}

#pagination .next {
  background-image: url("/grafika/tablesorter/next.png");
}

#pagination .prev {
  background-image: url("/grafika/tablesorter/prev.png");
}

#pagination .last {
  background-image: url("/grafika/tablesorter/last.png");
}

#pagination input.pagedisplay {
  background-color: #000;
  color: #fff;
  width: 50px;
  text-align: center;
  vertical-align: top;
}

.category_icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #000;
  -moz-box-shadow: 1px 1px 2px 1px #ccc;
  -webkit-box-shadow: 1px 1px 2px 1px #ccc;
  box-shadow: 1px 1px 2px 1px #ccc;
}

.type_bar {
  display: block;
  width: 50px;
  height: 10px;
  overflow: hidden;
  -moz-box-shadow: 1px 1px 2px 1px #ccc;
  -webkit-box-shadow: 1px 1px 2px 1px #ccc;
  box-shadow: 1px 1px 2px 1px #ccc;
}

.type_bar > span {
  display: inline-block;
  height: 10px;
}

.type_bar > .type0 {
  background-color: #888;
}

.type_bar > .type1 {
  background-color: #5484ed;
}

.type_bar > .type2 {
  background-color: #dc2127;
}

.type_bar > .type3 {
  background-color: #51b749;
}

.mtooltip {
  display: block;
  position: absolute;
  z-index: 100;
}

.mtooltip-box {
  top: 10px;
  left: 10px;
  border: solid 1px #5897fb;
  -moz-box-shadow: 1px 1px 2px 1px #ccc;
  -webkit-box-shadow: 1px 1px 2px 1px #ccc;
  box-shadow: 1px 1px 2px 1px #ccc;
  min-width: 50px;
  min-height: 20px;
  background-color: #fff;
  padding: 5px;
  border-radius: 2px 5px 5px 5px;
  -webkit-border-radius: 2px 5px 5px 5px;
  -khtml-border-radius: 2px 5px 5px 5px;
  -moz-border-radius: 2px 5px 5px 5px;
}

.userToolBox {
  width: 250px;
  position: relative;
}

.ussdBox {
  width: 600px;
  position: relative;
}

.ResendBox {
  width: 600px;
  position: relative;
}

.demandToolBox {
  width: 400px;
  position: relative;
}

.demandToolBox .title,
.ussdBox .title,
.ResendBox .title,
.userToolBox .title {
  background-color: #cae6fc;
  min-height: 10px;
  padding: 5px;
  font-weight: bold;
  border-radius: 2px 5px 5px 5px;
  -webkit-border-radius: 2px 5px 5px 5px;
  -khtml-border-radius: 2px 5px 5px 5px;
  -moz-border-radius: 2px 5px 5px 5px;
}

.demandToolBox .content,
.ussdBox .content,
.ResendBox .content,
.userToolBox .content {
  padding: 10px;
}

.ussdBox .content {
  min-height: 250px;
}

.demandToolBox .buttons,
.ussdBox .buttons,
.ResendBox .buttons,
.userToolBox .buttons {
  text-align: right;
  padding: 5px;
  border-top: solid 1px #ddd;
}

.demandToolBox input[type=button],
.ussdBox input[type=button],
.ResendBox input[type=button],
.userToolBox input[type=button] {
  background-color: #cae6fc;
  border-radius: 2px 5px 5px 5px;
  -webkit-border-radius: 2px 5px 5px 5px;
  -khtml-border-radius: 2px 5px 5px 5px;
  -moz-border-radius: 2px 5px 5px 5px;
  text-transform: uppercase;
  border: solid 1px #aaa;
}

.demandToolBox .close,
.ussdBox .close,
.ResendBox .close,
.userToolBox .close {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 6px;
  width: 12px;
  height: 12px;
  background-image: url("/grafika/icon_close.gif");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.mail_icon {
  background-image: url("/grafika/mail_icon.png");
  background-position: center center;
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  display: inline-block;
}

.usertool .web_icon {
  background-image: url("/grafika/world_icon.png");
  background-position: center center;
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  display: inline-block;
}

.usertool .priority_icon > .high {
  background-image: url("/grafika/important_icon.png");
  background-position: center center;
  background-repeat: no-repeat;
  height: 12px;
  width: 12px;
  display: inline-block;
  vertical-align: middle;
}

.usertool .temporary_credit_icon {
  background-image: url("/images/coins.png");
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.ticket-icon {
  width: 30px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  border: solid 1px rgba(0, 0, 0, 0.3333333333);
  line-height: 18px;
  border-radius: 3px 3px 3px 3px;
  background-color: #fff;
  box-shadow: 1px 1px 2px 1px #ccc;
}

.businessTicketBox {
  width: 600px;
  text-align: left;
  margin: 8px;
}

.businessTicketBox table {
  width: auto;
}

.businessTicketBox table td {
  padding: 2px 4px;
}

.businessTicketBox table tr.odd {
  background-color: #f4f4f4;
}

.businessTicketBox table tr.even {
  background-color: #f4f4f4;
}

.businessTicketBox table tr.system_message {
  color: #999;
}

.businessTicketBox .contents > div {
  padding-top: 12px;
}

.businessTicketBox .contents > div > .label {
  font-weight: bold;
  font-size: 15px;
  border-bottom: solid 1px #aaa;
  line-height: 28px;
  color: #172F4E;
}

.businessTicketBox .buttons {
  float: right;
  font-size: 14px;
  font-weight: normal;
}

.businessTicketBox input[type=button] {
  border-radius: 5px;
  color: white !important;
  background-color: #00ABFF !important;
  cursor: pointer;
  border: none !important;
  margin-top: -10px;
  font-weight: 500;
}
.businessTicketBox input[type=button]:hover {
  background-color: #172F4E !important;
}

.businessTicketBox .action_add_note,
.businessTicketBox .action_scheduled_call,
.businessTicketBox .action_change_salesmann {
  padding: 15px 15px 30px 15px;
}

.businessTicketBox .action_add_note textarea {
  width: 100%;
  height: 100px;
  border: solid 1px #aaa;
}

.tooltip-container {
  position: absolute; /* We'll place it based on mouse cursor pageX/pageY */
  display: none; /* Hidden by default */
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 99999; /* High enough to be above everything */
  width: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.tooltip-container button {
  border-radius: 5px;
  color: white !important;
  background-color: #00ABFF !important;
  cursor: pointer;
  border: none !important;
  font-weight: 500;
}
.tooltip-container button:hover {
  background-color: #172F4E !important;
}
.tooltip-container div {
  margin-bottom: 5px;
}
.tooltip-container .label, .tooltip-container label {
  color: #172F4E;
}

.tooltip-container strong {
  display: block;
  margin-bottom: 8px;
}

.tooltip-container .edit-btn {
  margin-top: 8px;
  cursor: pointer;
  background: #f7f7f7;
  border: 1px solid #ccc;
  padding: 4px 8px;
  text-decoration: none;
}

.ticket-popup-container {
  position: absolute; /* We'll position it near the cursor on hover */
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 99999;
  width: 630px; /* Adjust to fit your layout */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #000;
}
.ticket-popup-container .label, .ticket-popup-container label {
  color: #172F4E;
}

.action.link {
  color: #2187e8;
  cursor: pointer;
}

.businessTicketBox .close {
  display: none;
}

.businessTicketBox select,
.businessTicketBox input {
  border: solid 1px #aaa;
}

.box_statistic label, .box_statistic .label {
  color: #172F4E !important;
}

#ip_box .close {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 12px;
  width: 12px;
  height: 12px;
  background-image: url("/grafika/icon_close.gif");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

#ip_box {
  padding: 15px;
}

#ip_box .title {
  font-size: 18px;
  font-weight: bold;
  border-bottom: solid 1px #eee;
  height: 25px;
  text-align: left;
  padding-left: 25px;
}

#user_graph_box .close {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 12px;
  width: 12px;
  height: 12px;
  background-image: url("/grafika/icon_close.gif");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

#user_graph_box {
  padding: 15px;
}

#user_graph_box .title {
  font-size: 18px;
  font-weight: bold;
  border-bottom: solid 1px #eee;
  height: 25px;
  text-align: left;
  padding-left: 25px;
}

#user_graph_box .buttons {
  border-top: solid 1px #eee;
  height: 24px;
  padding: 5px;
}

#user_graph_box .buttons input {
  background-color: #cae6fc;
  border-radius: 2px 5px 5px 5px;
  -webkit-border-radius: 2px 5px 5px 5px;
  -khtml-border-radius: 2px 5px 5px 5px;
  -moz-border-radius: 2px 5px 5px 5px;
  text-transform: uppercase;
  border: solid 1px #aaa;
  margin: 0 5px;
}

#user_graph {
  height: 395px;
  width: 750px;
}

.route-test th {
  font-size: 90%;
  padding: 5px 10px;
}

.route-test td {
  background: none repeat scroll 0 0 white;
  border: 1px solid #e1e0e0;
  padding: 5px;
  border-bottom: solid 2px #fff;
}

.message.info-beta {
  background: url("/images/icon_info.png") no-repeat scroll 18px 18px #eed700;
}

.message.info-beta .content {
  background: #eed700;
}

.demandtool > span {
  color: #2187e8;
  font-weight: bold;
}

input.bluebutton {
  background-color: #cae6fc;
  border-radius: 2px 5px 5px 5px;
  -webkit-border-radius: 2px 5px 5px 5px;
  -khtml-border-radius: 2px 5px 5px 5px;
  -moz-border-radius: 2px 5px 5px 5px;
  text-transform: uppercase;
  border: solid 1px #aaa;
}

.sms-mail-add-backlist .row select,
.sms-mail-add-backlist .row input.text,
.sms-obce-form select,
.sms-obce-form input.text,
.auto-bill select,
.auto-bill input.text {
  float: none;
}

.sms-mail-add-backlist .row input.text,
.sms-obce-form input.text,
.auto-bill input.text {
  width: 250px;
}

.auto-fak-slevy input.text {
  width: 100px;
  float: left;
}

th.action_none > div,
th.action_junk > div,
th.action_inquiry > div {
  position: relative;
  height: 100px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

th.action_none > div > div,
th.action_junk > div > div,
th.action_inquiry > div > div {
  position: absolute;
  top: 42px;
  left: -46px;
  white-space: nowrap;
}

td.action_none {
  background-color: #99ff99;
}

td.action_junk {
  background-color: #ffcccc;
}

td.action_inquiry {
  background-color: #ffff99;
}

/* nette form black */
form.black-form {
  background: none repeat scroll 0 0 #000000;
  color: #ffffff;
  padding: 20px 20px 15px;
}

form.black-form th {
  text-align: right;
}

form.black-form .text,
form.black-form select {
  width: 250px;
  float: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #efc904;
}

form.black-form .button {
  color: #000000;
  background-color: #efc904;
  min-width: 100px;
  float: right;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

form.black-form ul.error {
  color: #ff0000;
  font-weight: bold;
}

form.black-form ul.error li {
  list-style: none;
}

.ramecek ul.error {
  border: 1px solid #ff0000;
}

.ramecek ul.error li {
  color: #ff0000;
  font-weight: bold;
  list-style: none outside none;
}

tr.bold td {
  font-weight: bold;
}

.eu-cookies {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  color: #ffffff;
  background-color: #000000;
  z-index: 1000;
  padding: 3px 0;
}

.eu-cookies a {
  color: #dddddd;
}

.eu-cookies button {
  background: #ffffff;
  color: #222222;
  padding: 2px 5px;
}

.flash {
  padding: 10px 15px;
  margin: 3px 0 10px 0;
  border: 1px solid transparent;
  border-radius: 4px;
}

.flash.warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.flash.danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.mr-form label {
  width: 200px;
  display: inline-block;
}

.mr-form input.text {
  float: none;
  width: 250px;
}

.select2-choices {
  width: 250px !important;
}

mark {
  background: orange !important;
  color: #172F4E;
}

.analyze-button {
  color: white !important;
  background: #579f57;
  padding: 2px 4px;
  border-radius: 5px;
}

.wrap-anywhere {
  overflow-wrap: anywhere;
}

.fix-header .header {
  position: fixed;
}
.fix-header .content-body {
  padding-top: 60px;
  min-height: calc(100vh - 60px) !important;
}

.fix-sidebar .nk-sidebar {
  position: fixed;
}
.fix-sidebar .nk-sidebar.mini-nav {
  position: absolute;
}

.header {
  width: 100%;
  height: 60px;
  z-index: 9999;
  position: relative;
  padding: 0px 15px;
}

.nav-header {
  height: 60px;
  width: 250px;
  display: inline-block;
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
}
.nav-header .brand-logo a {
  padding: 13px 30px;
  display: block;
}
.nav-header .brand-logo a i {
  font-size: 20px;
  font-size: 22px;
}
.nav-header .brand-logo a b img {
  max-width: 30px;
}
.nav-header .brand-logo a span {
  font-size: 18px;
  margin-left: 7px;
}
.nav-header .brand-title img {
  max-width: 110px;
  margin-top: 2px;
}

.nav-control {
  cursor: pointer;
  position: relative;
  right: 20px;
  top: -5px;
  z-index: 99999;
}

.edit-view {
  position: relative;
  display: inline-block;
  font-size: 20px !important;
  color: #172F4E;
}
.edit-view #view-settings {
  text-align: left;
  color: #172F4E;
  cursor: pointer;
}

.drop-down {
  top: 55px;
  border-radius: 0px;
}

.dropdown-profile li a i {
  margin-left: 7px;
  font-size: 16px;
  position: relative;
  top: 2px;
}

#dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: #f9f9f9; /* Light grey background */
  min-width: 160px; /* Set a minimum width */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Add some shadow for depth */
  z-index: 1; /* Ensure it sits above other content */
  padding: 12px 16px; /* Some padding for content */
  flex-direction: column;
  margin-left: -65px;
  border-radius: 0px;
  margin-top: -5px;
}

#dropdown-content p,
#dropdown-content button {
  color: black; /* Text color */
  padding: 0px 10px; /* Padding */
  text-decoration: none; /* Remove underlines from links */
  display: block; /* Display block for full-width clickable areas */
  border: none; /* No border for buttons */
  background: none; /* Transparent background for buttons */
  text-align: left; /* Align text to the left */
  cursor: pointer; /* Change mouse cursor to pointer */
}
#dropdown-content p span,
#dropdown-content button span {
  color: grey;
  cursor: pointer;
}
#dropdown-content p span:hover,
#dropdown-content button span:hover {
  color: #172F4E;
}

.header-content {
  margin-left: 250px;
}

.footer {
  position: relative;
  margin-top: 100px;
  left: 0px;
  right: 0;
}
.footer .copyright {
  padding: 15px;
}
.footer .copyright p {
  margin: 0px;
}

.header-left {
  float: left;
  line-height: 60px;
  margin-left: 0px;
  display: flex;
}
.header-left .icons {
  display: inline-block;
  margin: 0;
  padding: 0 5px;
  position: relative;
}
.header-left .icons > a {
  padding: 0 5px;
}
.header-left .drop-down {
  left: 0;
  top: 7px;
}

.header-search {
  min-width: 250px;
  box-shadow: 0px 0px 5px rgba(120, 130, 140, 0.13);
}
.header-search .input-group {
  margin-bottom: 0px !important;
}
.header-search .input-group .form-control:hover, .header-search .input-group .form-control:focus, .header-search .input-group .form-control.active {
  box-shadow: 0px;
}
.header-search .input-group .input-group-text {
  border-radius: 0px;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  background: transparent;
}

.header-right {
  float: right;
  line-height: 60px;
  display: flex;
  flex-direction: row;
}
.header-right ul,
.header-right ol {
  line-height: 60px;
}
.header-right .icons {
  display: inline-block;
  /* list-style: outside none none; */
  margin: 0;
  padding: 0 5px;
  position: relative;
  display: flex;
  align-items: center;
}
.header-right .icons > a {
  padding: 0 5px;
  font-size: 15px;
}

.nav-user {
  text-align: center;
  margin-bottom: 10px;
  padding: 20px 15px 15px;
}
.nav-user img {
  width: 50px;
  height: 50px;
}
.nav-user h5 {
  margin-top: 10px;
  margin-bottom: 3px;
}
.nav-user p {
  margin-bottom: 8px;
}
.nav-user .nav-user-option {
  position: relative;
}
.nav-user .nav-user-option .dropdown-menu {
  left: 30px !important;
  top: 22px !important;
  padding: 10px 0px;
}
.nav-user .nav-user-option .dropdown-menu a {
  line-height: 27px;
}
.nav-user .nav-user-option .setting-option {
  display: inline-block;
  cursor: pointer;
}
.nav-user .nav-user-option .setting-option i {
  font-size: 16px;
  padding: 0px 5px;
}
.nav-user .nav-user-option .notification-option {
  display: inline-block;
  cursor: pointer;
}
.nav-user .nav-user-option .notification-option i {
  font-size: 16px;
  padding: 0px 5px;
}

.nav-label {
  padding: 13px 20px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 17px;
  letter-spacing: 0px;
  margin-top: 14px;
  color: #00ABFF !important;
}

.nav-badge {
  position: absolute;
  right: 7px;
  top: 16px;
  padding: 0.6em 0.65em 0.45em 0.65em !important;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 5px !important;
  margin-top: -5px;
}

.badge-success {
  background-color: #f4f4f4 !important;
  color: #00ABFF !important;
}

.content-body {
  margin-left: 250px;
  z-index: 0;
  padding-bottom: 0px;
}

.content-body-login {
  margin-left: 0px;
  z-index: 0;
}
.content-body-login .message.info {
  margin: auto;
  margin-bottom: -140px;
  margin-top: 60px;
}
.content-body-login .warning {
  z-index: 99999;
  position: relative;
  margin-bottom: -120px;
  margin-top: 60px;
}

.nk-sidebar {
  width: 250px;
  height: 100%;
  position: absolute;
  top: 40px;
  z-index: 1001;
  padding: 25px 0px 0px 0px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.nk-sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  background: none !important;
}
.nk-sidebar .metismenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.nk-sidebar .metismenu > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}
.nk-sidebar .metismenu > li a > i, .nk-sidebar .metismenu > li a > img,
.nk-sidebar .metismenu > li a .menu-img {
  width: 32px;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 7px;
}
.nk-sidebar .metismenu a {
  position: relative;
  display: block;
  padding: 13px 15px;
  outline-width: 0;
  transition: all 0.3s ease-out;
}
.nk-sidebar .metismenu ul a {
  padding: 10px 15px 10px 45px;
}
.nk-sidebar .metismenu ul a:hover {
  border-left: 3px solid #00ABFF;
}
.nk-sidebar .metismenu ul ul a {
  padding: 10px 15px 10px 60px;
}
.nk-sidebar .metismenu a {
  transition: all 0.4s ease-in-out;
}
.nk-sidebar .metismenu a:hover, .nk-sidebar .metismenu a:focus, .nk-sidebar .metismenu a:active {
  text-decoration: none;
}
.nk-sidebar .metismenu .has-arrow:after {
  transform: rotate(135deg) translateY(-50%);
}

.metismenu .active > .has-arrow:after, .metismenu .has-arrow[aria-expanded=true]:after {
  transform: rotate(-135deg) translateY(-50%) !important;
}

.menu-img {
  width: 32px !important;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 7px;
}

.nk-sidebar .metismenu > li.active > a {
  background: #fafafa !important;
  border-right: 4px solid #00ABFF;
  color: black !important;
}
.nk-sidebar .metismenu > li.active > a i {
  color: #00ABFF !important;
}

.nk-sidebar .metismenu > li:hover > a {
  background: #fafafa !important;
  border-right: 4px solid #00ABFF;
  color: black;
}
.nk-sidebar .metismenu > li:hover > a i {
  color: #00ABFF !important;
}

@media (min-width: 768px) {
  .mini-nav .nav-header {
    width: 60px;
  }
  .mini-nav .nav-header .brand-logo b img {
    margin-top: 3px;
  }
  .mini-nav .nav-header .brand-title {
    display: none;
  }
  .mini-nav .header-content {
    margin-left: 60px;
  }
  .mini-nav .footer {
    margin-left: 0px;
  }
  .mini-nav .nav-user {
    padding: 20px 15px 15px;
  }
  .mini-nav .nav-user img {
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
  }
  .mini-nav .nav-user h5,
  .mini-nav .nav-user p {
    display: none;
  }
  .mini-nav .nav-user i {
    margin-top: 15px;
    display: block;
  }
  .mini-nav .nav-user .dropdown-menu {
    left: 45px !important;
    top: 22px !important;
  }
  .mini-nav .content-body {
    margin-left: 60px;
  }
  .mini-nav .nk-sidebar {
    width: 60px;
    overflow: visible;
    position: absolute;
  }
  .mini-nav .nk-sidebar .nav-text {
    display: none;
  }
  .mini-nav .nk-sidebar .slimScrollDiv,
  .mini-nav .nk-sidebar .nk-nav-scroll {
    overflow: visible !important;
  }
  .mini-nav .nk-sidebar .metismenu li {
    position: relative;
  }
  .mini-nav .nk-sidebar .metismenu li > ul {
    position: absolute;
    left: 50px;
    top: 40px;
    width: 190px;
    z-index: 1001;
    display: none;
    padding-left: 1px;
    background: white !important;
  }
  .mini-nav .nk-sidebar .metismenu li > ul li:hover {
    text-decoration: underline;
  }
  .mini-nav .nk-sidebar .metismenu > li {
    transition: all 0.4s ease-in-out;
  }
  .mini-nav .nk-sidebar .metismenu > li:hover > a {
    width: 250px;
    background: #343a40;
  }
  .mini-nav .nk-sidebar .metismenu > li:hover > a .nav-text {
    display: inline-block;
    padding-left: 27px;
  }
  .mini-nav .nk-sidebar .metismenu > li:hover > ul {
    display: block;
    height: auto !important;
    overflow: auto;
  }
  .mini-nav .nk-sidebar .metismenu > li:hover > ul a {
    padding: 10px 15px 10px 15px;
    margin-left: -1px;
  }
  .mini-nav .nk-sidebar .metismenu > li:hover > ul ul a {
    padding: 10px 15px 10px 30px;
    margin-left: -1px;
  }
  .mini-nav .nk-sidebar .metismenu .has-arrow:after {
    display: none;
  }
  .mini-nav .nk-sidebar .metismenu .nav-label,
  .mini-nav .nk-sidebar .metismenu .nav-badge {
    display: none;
  }
}
.login-mobile-logo {
  display: none;
}

@media (max-width: 767px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .content-body-login {
    margin-left: 0px;
    z-index: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .login-left {
    position: relative;
    height: auto;
    width: 80% !important;
    padding: 50px 20px;
    margin: 0 auto;
    display: block;
  }
  .login-left h2 {
    width: 100%;
  }
  .login-left h1 {
    line-height: 34px;
  }
  .login-left svg {
    width: 300px !important;
  }
  .login-right {
    position: relative;
    height: auto !important;
    padding: 60px 20px 20px 20px;
    margin: 0 auto;
    display: block;
  }
  .login-right form.login_form {
    width: 100% !important;
  }
  .header-right {
    float: right;
    line-height: 60px;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
  }
  .header {
    position: fixed;
    width: 100vw;
  }
  .widget-small, .widget-big {
    max-width: 92vw !important;
  }
  .nav-header {
    width: 60px;
  }
  .nav-header .brand-title {
    display: none;
  }
  .header-content {
    margin-left: 60px;
  }
  .footer {
    margin-left: 0px;
  }
  .nk-sidebar {
    transition: all 0.5s ease-in-out;
    position: absolute;
    left: 0;
  }
  .mini-nav .nk-sidebar {
    left: -100%;
  }
  .content-body {
    margin-left: 0px;
    padding-top: 60px;
  }
}
.compact-nav .nav-header {
  width: 150px;
}
.compact-nav .nk-sidebar {
  width: 150px;
}
.compact-nav .metismenu li {
  text-align: center;
}
.compact-nav .metismenu li a {
  padding: 10px 15px 10px 15px;
}
.compact-nav .nav-text {
  display: block;
  margin-top: 5px;
}
.compact-nav .nav-badge {
  display: none;
}
.compact-nav .has-arrow:after {
  display: none;
}
.compact-nav .header-content {
  margin-left: 150px;
}
.compact-nav .footer {
  margin-left: 150px;
}
.compact-nav .content-body {
  margin-left: 150px;
}

.compact-nav.mini-nav .nav-header,
.compact-nav.mini-nav .nk-sidebar {
  width: 60px;
}
.compact-nav.mini-nav .header-content {
  margin-left: 60px;
}
.compact-nav.mini-nav .footer {
  margin-left: 60px;
}
.compact-nav.mini-nav .metismenu li {
  text-align: left;
}
.compact-nav.mini-nav .content-body {
  margin-left: 60px;
}

@media (max-width: 767px) {
  .compact-nav .nav-header {
    width: 60px;
  }
  .compact-nav .content-body {
    margin-left: 0px;
  }
  .compact-nav.mini-nav .content-body {
    margin-left: 0px;
  }
}
.mega-list-title {
  display: none !important;
}

@media (min-width: 992px) {
  .horizontal-nav #main-wrapper {
    max-width: 1140px;
    margin: 0 auto;
  }
  .horizontal-nav .nk-sidebar {
    width: 100%;
    position: relative;
    height: auto;
    padding-bottom: 0;
    top: 0;
  }
  .horizontal-nav .nk-sidebar .slimScrollDiv {
    overflow: visible !important;
  }
  .horizontal-nav .nk-sidebar .slimScrollDiv .nk-nav-scroll {
    overflow: visible !important;
  }
  .horizontal-nav .nk-sidebar .nav-header {
    border-bottom: 0px !important;
  }
  .horizontal-nav .nk-sidebar .nav-user,
  .horizontal-nav .nk-sidebar .nav-label {
    display: none;
  }
  .horizontal-nav .nk-sidebar .metismenu {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .horizontal-nav .nk-sidebar .metismenu li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
  }
  .horizontal-nav .nk-sidebar .metismenu li > ul {
    position: absolute;
    height: auto !important;
    top: 50px;
    width: 100%;
    min-width: 12rem;
    z-index: 999;
    left: 0;
    right: 0;
  }
  .horizontal-nav .nk-sidebar .metismenu li > ul a {
    padding: 10px 15px 1px 15px;
    margin-left: -0.1rem;
  }
  .horizontal-nav .nk-sidebar .metismenu li > ul ul a {
    padding: 10px 15px 1px 15px;
    margin-left: -1px;
  }
  .horizontal-nav .nk-sidebar .metismenu > li {
    flex: 0 0 auto;
  }
  .horizontal-nav .nk-sidebar .metismenu > li > a .nav-badge {
    display: none;
  }
  .horizontal-nav .nk-sidebar .metismenu > li > a:after {
    display: none;
  }
  .horizontal-nav .nk-sidebar .metismenu > li:hover > ul {
    display: block !important;
  }
  .horizontal-nav .nk-sidebar .metismenu > li.mega-menu {
    position: static;
  }
  .horizontal-nav .nk-sidebar .metismenu > li.mega-menu .mega-list-title {
    display: block !important;
    color: #172F4E;
    font-weight: 600;
  }
  .horizontal-nav .nk-sidebar .metismenu > li > ul > li:hover ul.collapse {
    display: block !important;
    position: absolute;
    left: auto !important;
    right: -100% !important;
    top: 0 !important;
  }
  .horizontal-nav .nk-sidebar .metismenu > li:last-child > ul > li:hover ul.collapse {
    right: auto !important;
    left: -100% !important;
  }
  .horizontal-nav .nk-sidebar .metismenu .collapse.in {
    display: none;
  }
  .horizontal-nav .nav-control {
    display: none;
  }
  .horizontal-nav .content-body {
    margin-left: 0;
  }
  .horizontal-nav .content-body .container {
    height: auto;
    padding: 15px 0px 0px;
  }
  .horizontal-nav .page-titles {
    margin-left: 0rem;
    margin-right: 0rem;
    margin-top: 0rem;
  }
  .horizontal-nav .footer {
    margin-left: 0;
    max-width: 1140px;
    margin: 0 auto;
  }
}
.hamburger {
  display: inline-block;
  left: 0px;
  position: relative;
  top: 5px;
  transition: all 0.3s ease-in-out 0s;
  width: 37px;
  z-index: 99999;
  color: black;
}

.ine {
  display: block;
  height: 2px;
  margin: 5px auto;
  width: 22px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover {
  cursor: pointer;
}

/*
  .hamburger.is-active {
    left: 60px;
  }
  */
.hamburger.is-active .line:nth-child(1),
.hamburger.is-active .line:nth-child(3) {
  width: 10px;
  height: 2px;
}

.hamburger.is-active .line:nth-child(2) {
  -webkit-transform: translateX(-6px);
  transform: translateX(-6px);
  width: 16px;
  height: 2px;
}

.hamburger.is-active .line:nth-child(1) {
  -webkit-transform: translateY(4px) rotate(45deg);
  transform: translateY(4px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-4px) rotate(-45deg);
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 990px) and (orientation: portrait) {
  .nk-sidebar .metismenu > li a > i {
    font-size: 18px !important;
  }
  .mini-nav .nk-sidebar .metismenu a {
    position: relative;
    display: block;
    padding: 10px 1px;
    outline-width: 0;
    transition: all 0.3s ease-out;
  }
  .mini-nav .helpdesk {
    display: none;
  }
  .mini-nav .nav-header .brand-logo a {
    padding: 13px 17px;
    display: block;
  }
  .mini-nav body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    color: #172F4E !important;
    background: rgb(248, 249, 250);
    width: 100%;
    min-width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  .mini-nav {
    /* Webkit based browsers */
  }
  .mini-nav meter[value="1"]::-webkit-meter-optimum-value {
    background: red;
  }
  .mini-nav meter[value="2"]::-webkit-meter-optimum-value {
    background: yellow;
  }
  .mini-nav meter[value="3"]::-webkit-meter-optimum-value {
    background: yellow;
  }
  .mini-nav meter[value="4"]::-webkit-meter-optimum-value {
    background: orange;
  }
  .mini-nav meter[value="5"]::-webkit-meter-optimum-value {
    background: orange;
  }
  .mini-nav meter[value="6"]::-webkit-meter-optimum-value {
    background: green;
  }
  .mini-nav {
    /* Gecko based browsers */
  }
  .mini-nav meter[value="1"]::-moz-meter-bar {
    background: red;
  }
  .mini-nav meter[value="2"]::-moz-meter-bar {
    background: yellow;
  }
  .mini-nav meter[value="3"]::-moz-meter-bar {
    background: yellow;
  }
  .mini-nav meter[value="4"]::-moz-meter-bar {
    background: orange;
  }
  .mini-nav meter[value="5"]::-moz-meter-bar {
    background: orange;
  }
  .mini-nav meter[value="6"]::-moz-meter-bar {
    background: green;
  }
  .mini-nav .pw-meter {
    margin-left: 200px;
    margin-top: -20px;
    margin-bottom: 15px;
  }
  .mini-nav .pw-meter1 {
    margin-top: -15px;
  }
  .mini-nav #colorToggleButton {
    text-align: left;
    background: none;
    margin-left: 0;
    cursor: pointer;
    color: #172F4E;
  }
  .mini-nav .credit-header a {
    background: #f3f3f3 !important;
    padding: 6px 8px;
    border-radius: 4px;
    margin-right: 10px;
    transition: all 0.6s;
    font-weight: 600;
  }
  .mini-nav .credit-header a:hover {
    background: #172F4E !important;
    color: white;
    transition: all 0.6s;
  }
  .mini-nav .credit-header a:hover span {
    color: white;
    transition: all 0.6s;
  }
  .mini-nav .credit-header a span {
    color: #00ABFF;
    transition: all 0.6s;
  }
  .mini-nav .edit-view span {
    background: #f3f3f3 !important;
    padding: 2px 4px;
    border-radius: 4px;
    margin-right: 5px;
    transition: all 0.6s;
  }
  .mini-nav .edit-view span:hover {
    background: #172F4E !important;
    color: white !important;
    padding: 2px 4px;
    border-radius: 4px;
    margin-right: 5px;
    transition: all 0.6s;
  }
  .mini-nav .info-box {
    border-radius: 5px;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .mini-nav .info-box .content {
    padding: 40px;
    position: relative;
    z-index: 99;
  }
  .mini-nav .info-box .content1 {
    width: 200%;
    display: inline-flex;
    transition: all 1s ease-in;
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
  .mini-nav .info-box .content1 .blue {
    padding: 15px;
    background: #00ABFF;
    display: inline-flex;
    align-items: center;
    width: 100%;
    border-radius: 2px;
  }
  .mini-nav .info-box .content1 .blue .pay {
    width: 20px !important;
    margin-right: 12px;
    padding: 20px;
    transition: 0.5s;
    filter: none;
    cursor: pointer;
    transform: rotate(180deg);
  }
  .mini-nav .info-box .content1 .blue span {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 40px;
    letter-spacing: -0.019em;
    color: white;
    padding-top: 9px;
    text-decoration: none !important;
  }
  .mini-nav .info-box .content1 .blue p {
    color: white;
    font-size: 14px;
    font-weight: 400;
    max-width: 600px;
    padding-top: 9px;
  }
  .mini-nav .info-box .content1 .blue button {
    width: 150px;
    float: right;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: #172F4E;
    height: 40px;
    border-radius: 2px;
    cursor: pointer;
    z-index: 50;
  }
  .mini-nav .info-box .content1 .blue button:hover {
    width: 150px;
    float: right;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: #3d5427;
    color: white;
    height: 40px;
    border-radius: 2px;
    cursor: pointer;
  }
  .mini-nav .info-box .content1 .blue .clicked {
    color: #0f0;
  }
  .mini-nav .info-box .content1 .white {
    padding: 15px;
    display: inline-flex;
    align-items: center;
    width: 100%;
    z-index: 100;
    background: white;
    cursor: pointer;
  }
  .mini-nav .info-box .flipped {
    transform: translateX(-50%);
    transition: all 1s ease-in;
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
  .mini-nav .info-box .flipped .arrow-img {
    visibility: hidden;
  }
  .mini-nav .info-box img {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  .mini-nav .info-box2 {
    display: inline-flex;
    border: 1px solid #eff2f7;
    border-radius: 2px;
    width: 96%;
    padding: 15px;
    position: relative;
    align-items: center;
  }
  .mini-nav .info-box2 img {
    width: 50px;
    height: 25px;
    margin-right: 12px;
  }
  .mini-nav .box-blue {
    background: #00ABFF;
    color: white !important;
    margin: 0;
  }
  .mini-nav .box-blue p,
  .mini-nav .box-blue h1 {
    color: white !important;
  }
  .mini-nav .box-blue .btn-white {
    color: #172F4E !important;
    background: white !important;
  }
  .mini-nav .box-blue .btn-white:hover {
    color: #172F4E !important;
    background: rgb(229, 245, 255) !important;
  }
  .mini-nav .info-news {
    padding: 40px;
    width: 92%;
  }
  .mini-nav #widgetSluzby .feature-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 400px;
    border-radius: 5px;
  }
  .mini-nav #widgetSluzby .feature {
    position: absolute;
    padding: 20px;
    width: 100%;
    top: 0;
    left: 100%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }
  .mini-nav #widgetSluzby .feature span {
    color: #00ABFF;
  }
  .mini-nav #widgetSluzby .feature p.first {
    color: #172F4E;
    margin-top: 15px;
    font-size: 15px;
    font-family: "Poppins";
    line-height: 22px;
    font-weight: 600;
  }
  .mini-nav #widgetSluzby .feature p.quote {
    border-left: 2px solid #00ECBC;
    padding-left: 10px;
    font-weight: 400;
    font-style: italic;
    line-height: 22px;
  }
  .mini-nav #widgetSluzby .feature p.second {
    color: #172F4E;
    margin-top: 15px;
    line-height: 22px;
  }
  .mini-nav {
    /* Active feature */
  }
  .mini-nav #widgetSluzby .feature.active {
    left: 0;
    opacity: 1;
  }
  .mini-nav {
    /* Exiting to the left */
  }
  .mini-nav #widgetSluzby .feature.exit-left {
    left: -100%;
    opacity: 0;
  }
  .mini-nav {
    /* Exiting to the right */
  }
  .mini-nav #widgetSluzby .feature.exit-right {
    left: 100%;
    opacity: 0;
  }
  .mini-nav {
    /* Hide the .hide class content */
  }
  .mini-nav .hide {
    display: none;
  }
  .mini-nav {
    /* Style for links inside features */
  }
  .mini-nav #widgetSluzby .feature a, .mini-nav #widgetSluzby .feature button {
    padding: 9px 13px;
    color: #172F4E;
    background-color: #00ECBC;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500 !important;
    font-family: "Poppins", sans-serif;
    text-decoration: none;
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translateX(-50%);
  }
  .mini-nav #widgetSluzby .feature a:hover, .mini-nav #widgetSluzby .feature button:hover {
    background-color: #172F4E;
    color: white;
    cursor: pointer;
  }
  .mini-nav {
    /* Style the carousel controls */
  }
  .mini-nav #widgetSluzby .carousel-controls {
    display: flex;
    gap: 10px;
  }
  .mini-nav #widgetSluzby .carousel-controls .prev,
  .mini-nav #widgetSluzby .carousel-controls .next {
    cursor: pointer;
    color: #172F4E;
    font-size: 13px;
    margin-top: -9px;
    font-weight: 400;
  }
  .mini-nav #widgetSluzby .carousel-controls .prev:hover,
  .mini-nav #widgetSluzby .carousel-controls .next:hover {
    text-decoration: underline;
  }
  .mini-nav .info-box table tr:nth-child(2n) {
    background: #f8f8f8 !important;
  }
  .mini-nav .info-box .ad-but {
    margin: 0 2px;
  }
  .mini-nav .csv-table tr:nth-child(2n) {
    background: #f8f8f8 !important;
  }
  .mini-nav .box-white {
    color: rgba(0, 0, 0, 0.87);
    overflow-wrap: break-word;
    background-color: rgb(255, 255, 255);
    background-clip: border-box;
    box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border-width: 0px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.125);
    border-image: initial;
    border-radius: 5px;
    overflow: visible;
  }
  .mini-nav .box-white .pay {
    width: 30px !important;
    max-height: 37px;
    margin-right: 12px;
    padding: 20px;
    transition: 0.5s;
    filter: none;
  }
  .mini-nav .box-white span {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: -0.019em;
    color: #172F4E;
    padding-bottom: 9px;
    text-decoration: none !important;
    font-family: "Poppins", sans-serif;
  }
  .mini-nav .box-white span.delivery-status {
    font-size: 14px;
  }
  .mini-nav .box-white span.delivery-status span {
    font-size: 14px;
    font-weight: 400;
  }
  .mini-nav .box-white p {
    color: #172F4E;
    font-size: 14px;
    font-weight: 400;
  }
  .mini-nav .box-white a {
    text-decoration: none !important;
  }
  .mini-nav .box-white a.show-page, .mini-nav .box-white input.show-page, .mini-nav .box-white button.show-page {
    padding: 9px 13px !important;
    color: white;
    background-color: #00ABFF !important;
    float: right;
    border-radius: 5px !important;
    font-size: 14px;
    font-weight: 500 !important;
    cursor: pointer;
    height: 37px;
    font-family: "Poppins", sans-serif;
  }
  .mini-nav .box-white a.abs {
    position: absolute;
    right: 40px;
    top: 40px;
  }
  .mini-nav .box-white a.show-page:after {
    display: inline-block;
    -webkit-transform: scale(0.5, 1); /* Safari and Chrome */
    -moz-transform: scale(0.5, 1); /* Firefox */
    -ms-transform: scale(0.5, 1); /* IE 9 */
    -o-transform: scale(0.5, 1); /* Opera */
    transform: scale(0.5, 1); /* W3C */
    content: ">";
    position: relative;
    margin-left: 4px;
  }
  .mini-nav .box-white .info-data select {
    border: none !important;
    border-radius: 5px;
    padding: 7px;
    margin-right: 10px;
    background: none;
    font-weight: 700;
  }
  .mini-nav .box-white .arrow-img {
    width: 7px;
    float: right;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.8s ease-in;
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
}
.hover-effect:hover {
  color: #0d6efd;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
  padding-left: 0.25rem;
  transition: all 0.2s ease-in-out;
}

.fancy-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 8px;
  transition: background 0.4s ease;
  text-decoration: none;
}

.fancy-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.fancy-link i {
  font-size: 1.5em;
  animation: pulse-icon 2s infinite ease-in-out;
}

.fancy-gradient-text {
  font-weight: bold;
  background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15, #f43f5e);
  background-size: 1000% 1000%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 8s ease infinite;
}

/* Text gradient animation */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Icon pulse animation */
@keyframes pulse-icon {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}
.icons a {
  position: relative;
}

.icons.active .drop-down {
  display: block;
}

.drop-down {
  display: none;
  z-index: 9999;
  width: 275px;
  position: absolute;
  right: 0;
  top: 38px;
  transform: translateY(50px);
  transition: all 0.4s ease-in-out;
  border-top: 0;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
}

.dropdown-content-heading {
  padding: 15px 15px;
  line-height: 1.25;
}
.dropdown-content-heading span {
  font-size: 16px;
}

.dropdown-content-body ul > li {
  float: none;
  padding: 10px 15px;
  line-height: 1.25;
  padding: 10px 15px;
}
.dropdown-content-body ul > li:last-child {
  padding: 10px 15px;
  line-height: 1.25;
}

.notification-heading {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.avatar-img {
  border-radius: 100px;
  width: 40px;
  position: relative;
  top: -3px;
}

.user-avatar {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 700;
}

.notification-text {
  font-size: 14px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 3px;
  line-height: 1.25;
  font-weight: 400;
}

.notification-timestamp {
  font-size: 12px;
}

.notification-percentage {
  font-size: 12px;
  position: relative;
  top: 12px;
}

.more-link {
  display: inline-block;
}

.dropdown-profile {
  width: 180px;
}
.dropdown-profile li {
  padding: 7px 15px;
}
.dropdown-profile li a {
  display: block;
}
.dropdown-profile li a i {
  margin-right: 5px;
  font-size: 16px;
  position: relative;
  top: 2px;
}
.dropdown-profile li:last-child {
  padding: 7px 15px;
}

.dropdown-task .progress {
  box-shadow: none;
  height: 5px;
  margin-bottom: 5px;
  margin-top: 10px;
}
.dropdown-task .progress-bar {
  box-shadow: none;
}

/* pulse in SVG */
svg.pulse-svg {
  overflow: visible;
}
svg.pulse-svg .first-circle, svg.pulse-svg .third-circle, svg.pulse-svg .second-circle {
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation: pulse-me 3s linear infinite;
  animation: pulse-me 3s linear infinite;
}
svg.pulse-svg .second-circle {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
svg.pulse-svg .third-circle {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

/* pulse in CSS */
.pulse-css {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border-radius: 25px;
  height: 5px;
  position: absolute;
  right: 0px;
  top: -4px;
  width: 5px;
}
.pulse-css:after, .pulse-css:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -2px;
  margin: auto;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation: pulse-me 3s linear infinite;
  animation: pulse-me 3s linear infinite;
}

@-webkit-keyframes pulse-me {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  70% {
    opacity: 0.09;
  }
  100% {
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0;
  }
}
@keyframes pulse-me {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  70% {
    opacity: 0.09;
  }
  100% {
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0;
  }
}
.nav-header .brand-title img {
  max-width: 135px !important;
  margin-top: 2px;
}