*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

body {
  height: 100%;
  width: 100%;

  padding: 0px;
  margin: 0px;
  margin-bottom: 0px;
  font-family: var(--font);
  font-size: 18px;
  color: var(--font-color-body);

  background-color: var(--body-background);
  background: -webkit-linear-gradient(-45deg, #8363a1 0%, #74a8c3 100%);
  background: linear-gradient(135deg, #8363a1 0%, #74a8c3 100%); 
  background: linear-gradient(135deg,#74a8c3 40%, #8363a1 80%); 
  

 /* background: rgb(63,158,168);*/
/*background: linear-gradient(135deg, rgba(63,158,168,1) 0%, rgba(0,225,255,1) 21%, rgba(36,140,210,1) 51%, rgba(69,63,168,0.8391391957173494) 70%, rgba(145,145,218,1) 88%);
*/
  /*background: linear-gradient(135deg, #74a8c3 0%, rgb(107, 104, 104) 50%, #74a8c3 100%); */
 /* background: radial-gradient(50% 100% at 50% 100%, #395673 0%, #001926 100%);*/
 /* overflow-y: scroll;*/
 /* background-image:  url("../img/background.png");*/
}

body.friendly {
  background: -webkit-linear-gradient(-45deg, #8363a1 0%, #74a8c3 100%);
  background: linear-gradient(135deg, #8363a1 0%, #74a8c3 100%); 
}


:root {
 /* --body-background:rgb(255,255,255);/*#545d738f;/*rgba(153, 153, 153);/*#efeef7;/*rgb(255, 255, 255)rgb(219, 214, 239);*/
 /* ;*/
 --body-background:rgb(109, 109, 109);/*rgba(153, 153, 153);/* rgb(109, 109, 109);*/
 /*--body-background:rgba(26, 28, 33, 0.697);*/
  --body-background1:  rgba(61, 51, 90, 0.535);
  --body-background2:rgb(249,247,250);
  --font-color-body: rgb(40, 40, 40);
  --shadow-border-color: rgb(229, 226, 226);
  --datatable-lila: #b8b4f7;
  --hotel-name: #4caf50;
  --datatable-lila2: #948ef1;
  --datatable-lila-dark: #6b66c8;
  --shadow-mobil: rgb(147, 215, 251);
  --background-hover: rgb(0, 162, 232);
  --background-hover-border: rgb(156, 212, 242);
  --inputText-hover: rgb(95, 214, 232);
  --inputtext-border: #999;
  --dropdown-background: rgb(239, 242, 246);
  --font: Open Sans, Segoe UI, Tahoma, sans-serif;

  --grid-font-color: rgb(39, 38, 38);
  --grid-border-color: #b4b0b0; /* #b8b4f7;*/
  --grid-thead-color: rgb(204, 203, 230);
  --grid-row-hower-background: #fbeb85;
  --user:rgb(183, 240, 130);
  --btnpage:rgb(222, 222, 222);/*rgb(245, 245, 245);*/

  --btnpage-border: #b4b0b0;

  --btnpage-border-hover: rgb(255, 214, 48);
  --modal-ramka: rgb(0, 162, 232);
}

[v-cloak] {
  display: none;
}

#app,
.app {
  
  z-index: 1;
  /*background-color: */
 /* padding-bottom: 20px;*/
  padding-top: 54px;
 /* overflow-y: scroll;*/

 display: block;
 height: 100%;
 width: 100%;
 overflow: auto;
 align-items: center;
 
 /*justify-content: center;*/
}

.shadow2 {
  display: inline-block;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.shadow3 {
  display: inline-block;
  box-shadow: rgba(37, 14, 17, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.shadow4 {
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11),
    0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11),
    0 8px 16px rgba(0, 0, 0, 0.11);
}

.shadow5 {
  display: inline-block;
  box-shadow: 0px 9px 20px rgba(13, 38, 76, 0.19);
}

.shadow6 {
  /*display: inline-block;*/
  
 /* -webkit-box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,  rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,  rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;*/

   /* border: 2px solid var(--shadow-border-color) !important;*/
   /* -webkit-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.38); 
    -moz-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.38);
    box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.30);*/
   /* box-shadow: 1px 2px 2px #fff inset,0px 0px 10px 3px rgba(5, 5, 5, 0.30);/* rgb(57 73 76 / 35%) 0px 1px 6px 0px;*/
    box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.30);/* rgb(57 73 76 / 35%) 0px 1px 6px 0px;*/
   
   /* box-shadow: 0 .125rem .25rem rgba(0,0,0,.3),
  /*  box-shadow: 0 .125rem .25rem rgba(198, 198, 198, 0.44)*/
}

.shadow7 {
  display: inline-block;
  -webkit-box-shadow: 0px 2px 8px 0px rgba(106, 106, 106, 0.4);
  box-shadow: 0px 2px 8px 0px rgba(106, 106, 106, 0.4);
}

.shadow1 {
  display: inline-block;
  margin: 12px;
  border: 2px solid var(--shadow-border-color);
  -webkit-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
  -moz-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
  box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
}

.shadow8{
  box-shadow: 0 4px 12px #23232329;
}

.shadow9{
  box-shadow: 1px 2px 2px rgb(252, 251, 251) inset;
 /* box-shadow: 2px 3px .155rem rgba(0,0,0,.2);*/
 /* box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25);*/
}

.shadow {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 2px solid rgb(0, 162, 232);
  border-radius: 12px;

  background-color: white;
  -webkit-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
  -moz-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
  box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
}

.formTitlePanel {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #6b66c8;
  font-size: 24px;
  color: white;
  padding-left: 8px;
  padding-bottom: 8px;
  border-radius: 10px 10px 0 0;
}

.pageTitleText {
  color: var(--background-hover);
  font-family: var(--font);
  font-size: 22px !important;
  /*text-shadow: 0 -1px 0 rgba(36, 182, 250, 0.765);*/
  font-weight: normal;
  padding-left: 5px;
  white-space: nowrap;
}

.pageTitleTextId {
  font-family: var(--font);
  font-size: 16px;
  font-weight: normal;
  float: right;
  margin-right: 8px;
  margin-top: 4px;
  color: #6b66c8;
}

.pageTitleDiv {
  display: flex;
  color: var(--background-hover);
  align-items: center;
  margin-left: 7px;
  margin-right: 5px;

  /* border-bottom: 1px dotted var(--background-hover);*/
  /*padding-bottom: 2px;
  border-bottom: 2px solid var(--background-hover);*/
  /* text-shadow: 1px 1px 2px black, 0 0 20px rgb(214, 214, 250), 0 0 5px rgb(0, 132, 255);*/
}

.formButtonPanel {
  display: inline-block;
  width: 100%;
  background-color: white;
  border-radius: 0 0 10px 10px;
  font-size: 24px;
  color: white;
}

.formButtons {
  float: right;
  padding-top: 5px;
  margin-right: 10px;
}

.divEditForm {
  border: 0;
  margin: 0;
  padding: 0px;
  background-color: white;
 /* border-radius: 12px;*/
}

.divEditForm input[type="text"],
.divEditForm input[type="password"],
.divEditForm textarea,
.divEditForm select {
  width: 350px;
  padding-left: 10px;
  margin: 4px;
  margin-top: 2px;
  height: 42px;
  background-color: white;
  font-family: var(--font);
  color: #333333;
  font-size: 18px;
  border: 1px solid var(--inputtext-border);
  outline: 1px solid white;
  border-radius: 4px;
}

.divEditForm input[type="text"]:focus,
.divEditForm input[type="password"]:focus,
.divEditForm textarea:focus,
.divEditForm select:focus {
  border: 1px solid var(--btnpage-border-hover) !important;
  outline: 1px solid var(--btnpage-border-hover) !important;
}

textarea{
  margin-bottom: 0 !important;
  min-width: 350px;
  max-height: 250px;
  min-height: 84px;
}

.inputtextUser {
  box-sizing: border-box;
  background-image: url("../img/searchicon.gif") !important;
  background-position: 9px 10px !important;
  background-repeat: no-repeat !important;
  padding-left: 38px !important;
}

.input-wrapper {
  position: relative;
}

.input-wrapper input {
  padding-left: 35px !important;
  width: 350px !important;
}

.input-wrapper textarea {
  padding-left: 35px !important;
  width: 325px !important;
}

.input-icon {
  display: block;
  position: absolute;
  left: 14px;
  margin-top: 8px;
  top: 29px;

/*  top: calc(
    50% - 0.4em
  ); *//* Keep icon in center of input, regardless of the input height */

  font-size: 20px;
  color: rgb(173, 167, 167);
}

.imgPrinter {
  width: 34px !important;
  height: 36px !important;

  margin-left: 12px;
  margin-top: 5px;
  margin-bottom: 7px;
  cursor: pointer;
}

.commenttext{
  color: green; 
  font-size: 16px;
}

.filterInput {
  color: #333333;
  /* font-family: Arial, Helvetica, sans-serif;*/
  font-size: 14pt;

  margin-top: 2px;
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 4px;

  height: 41px;
  background: white;

  border-radius: 4px;
  padding: 8px;
  border: 1px solid var(--grid-border-color) !important;
  outline: 1px solid var(--btnpage) !important;
  /*border-bottom: 2px solid #d0d0d4; */
  margin: 0px;
  width: 100%;
}

.filterInput:focus {
  border: 1px solid rgb(255, 214, 48) !important;
  outline: 1px solid rgb(255, 214, 48) !important;
  /* border-radius: 5px !important;*/
  /*background-color: #fdf2a9;*/
}

.formatString {
  font-family: var(--font);
  font-size: 17px;
  color: gray;
  padding-right: 4px;
  text-decoration: none;
}

.formatString:hover {
  color: var(--background-hover-border);
}

.formLabel {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font);
  padding-left: 10px;
  color: var(--datatable-lila-dark);
  font-size: 17px;
  /* font-weight: 500;*/
}

.formButton {
  display: inline-block;
  min-width: 70px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: 1px 0 2px #222;
  font-size: 18px;
  cursor: pointer;

  margin: 4px 2px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btnNew {
  background-color: var(--background-hover); /*var(--datatable-lila2);*/
  border: 2px solid var(--background-hover); /*var(--datatable-lila2);/*var(--background-hover); */
  color: white; /* var(--background-hover); */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
  width: 91px;
  padding: 0;
  height: 44px;
  padding-left: 0px;
  margin: 0;
  padding-top: 3px;
  margin-left: 3px;
  margin-top: 3px;
}

.btnNew:hover {
  color: white;
  border: 2px solid var(--background-hover-border);
  background-color: var(--background-hover);
}

.btnOK {
  background-color: var(
    --background-hover
  ) !important; /*rgb(76, 175, 80); /* Green */
  border: 2px solid var(--background-hover);
  color: white;
}

.btnOK:hover {
  border: 2px solid rgb(156, 212, 242); /*#000000; */
}

.btnLogin{
  font-size: 22px;
  background-color: rgb(253, 181, 48) !important; 
  border: 3px solid  rgb(243, 164, 17);
  color: white;
}

.btnLogin:hover{
  border: 3px solid rgb(250, 182, 54) !important; ; /*#000000; */
  color: white;
}

.btnCancel {
  background-color: #e02b2b;
  border: 2px solid #e02b2b;
  color: white;
}

.btnCancel:hover {
  border: 2px solid #e57272; /*#000000; */
}

.btnSubmit {
  background-color: var(
    --background-hover
  ) !important; /*rgb(76, 175, 80); /* Green */
  border: 2px solid var(--background-hover);
  color: white;
  width: 80px !important;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  margin: 4px 2px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.btnSubmit:hover {
  color: white;
  border: 2px solid rgb(156, 212, 242); /*#000000; */
}

.btnSubmit2 {
  background-color: rgb(72, 184, 245); /*rgb(76, 175, 80); /* Green */
  color: white;
  border: 2px solid white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  padding: 10px;
  width: 80px !important;
}

.btnSubmit2:hover {
  border: 2px solid rgb(156, 212, 242); /*#000000; */
}

.btnRefresh,
.btnClear {
  color: white;
  border: 2px solid #f13f3f;
  background-color: #f13f3f;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
  height: 40px;
  width: 40px;
  margin-left: 4px;
}

.btnRefresh {
  color: white;
  border: 2px solid #4caf50;
  background-color: #4caf50;
}

.btnRefresh:hover {
  color: #4caf50;
  border: 2px solid #4caf50;
  background-color: white;
}

.btnClear:hover {
  color: #f13f3f;
  border: 2px solid #f13f3f;
  background-color: white;
}

/************* pagination*******************/
.btnPage,.btnPageTxt {
  color: #333333;
  /* font-family: Arial, Helvetica, sans-serif;*/
  font-size: 14pt;
 /* border: 1px solid rgb(232, 232, 232);/*#908c8c; /* var(--datatable-lila);*/
  border: 1px solid var(--btnpage-border);
  padding: 6px;
  padding-top: 9px !important;

  margin-right: 4px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: var(--btnpage);
  /*outline: 1px solid white;*/
}

.btnPageTxt {
  border: 0;
  color: white;
  background: transparent;
  
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.btnPage:hover {
  /*   border: 2px solid var(--background-hover-border) !important;  */
  border: 1px solid rgb(255, 214, 48) !important;
  outline: 1px solid rgb(255, 214, 48) !important;
  /*  background-color: rgb(255, 230, 132) !important;*/
  /* border-radius: 5px !important; */
}

.btnPageIcon {
  color: var(--datatable-lila-dark) !important;
  font-size: 22px;
}

.btnCalendar {
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-size: 12pt;
  font-weight: normal;
  /*border:2px solid var(--datatable-lila);*/
  border: 2px solid #d0d0d0;

  /*margin-left: 2px;*/
  margin-right: 0px;
  height: 34px;
  width: 34px;

  border-radius: 4px;
  background-color: #ffffff;
  color: #c0c0c0;
}

.btnCalendar {
  margin-left: 0px;
  margin-right: 2px;
  height: 30px;
  width: 20px;
}

/******************* drop down *************/
.dropdown {
  position: relative;
  display: inline-block;
  transition: 0.5s;
  padding-top:0px;
 /* display: none;*/
}

.dropdown i{
  padding-right: 8px;
}

.dropdownShow {
  display: block;
}

.dropbtn {
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-size: 12pt;
  font-weight: normal;
  /*border:2px solid var(--datatable-lila);*/
  border: 1px solid var(--btnpage-border);

  margin-left: 1px;
  margin-right: 4px;
  height: 34px;
  width: 34px;

  border-radius: 6px;
 
  background-color: rgb(245, 245, 245); /*#faf5f5;*/
  
 /* background-color: var(--btnpage); /*#faf5f5;*/
  /*color: #c0c0c0;*/
}

.dropbtn:hover {
  cursor: pointer;
  border: 2px solid var(--btnpage-border-hover); 
}

.dropdown-content,
.dropdown-content-left,
.dropdown-content-right {
  border: 1px solid var(--background-hover);
  display: none;
  position: absolute;
  background-color: var(--dropdown-background);
  border-radius: 6px;
  z-index: 11;
  /* za pozirzia top-right */
 /* top: 0 !important;
  left: 39px !important;*/
  margin-top: 1px;
 
  box-shadow: 1px 1px 2px #fff inset, rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.dropdown-content a,
.dropdown-content-left a,
.dropdown-content-right a {
  color: rgb(72, 75, 78);
  padding: 10px 10px;
  text-decoration: none;
  display: block;
  margin: 2px;
  white-space: nowrap;
  border: 2px solid var(--dropdown-background);
  border-radius: 6px;
}

.dropdown-content a:hover {
  background-color: var(--background-hover);
  border: 2px solid var(--background-hover);
  color: white;
}

.dropdown-content i,
.dropdown-content-left i,
.dropdown-content-right i{
  font-size: 22px;
}


.dropdown-content-left {
  border-radius: 0;
  top: auto !important;
  left: 0px !important;
}

.dropdown-content-right {
  border-radius: 0;
  right: -4px;
  top: auto !important;
  left: auto !important;
}

/*
.dropdown:hover .dropdown-content,
.dropdown:hover .dropdown-content-left,
.dropdown:hover .dropdown-content-right {
  display: block;
}*/

.dropdown:hover .dropbtn {
  border: 2px solid var(--btnpage-border-hover);
}
/********************* end drop down *************/

/* The Modal (background) */
.modalm {
  display: grid; /* Hidden by default */
  position: fixed; /* Stay in place */

  align-items: center;
  justify-content: center;

  z-index: 55; /* Sit on top */
  left: 0px;
  top: 0px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/*
.z51{
  z-index: 51;
}

.z55{
  z-index: 70;
}*/

.abonatFormWarning {
  display: flex;
  width: auto;
  color: red;
  padding: 2px;
  font-size: 12pt;
}

.blur{
  filter: blur(3px);
  -webkit-filter: blur(3px);
}

.bodynosroll{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.modalWait {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  align-items: center;
  justify-content: center;
  /*margin-top: 50px;*/
  left: 0px;
  top: 0px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  /* overflow: hidden; /* Enable scroll if needed */
  z-index: 2000 !important;
  filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}

.modalWait-content {
  margin-bottom: 120px;
  display: inline-block;
  background: white;
  border: 0px solid rgb(157, 150, 150) !important;
  border-radius: 18px;
  /*  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
  /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  z-index: 2056 !important;
}

.modalWaitTxt {
  word-wrap: break-word;
}

.nobr {
  white-space: nowrap;
}

.tableRowLink a {
  display: block;
  text-decoration: none;
  color: black;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-left: 0px;
  white-space: nowrap;
}

.tableRowLink a:hover {
  background: #6b66c8; /* #96969b;  EEE1A8 background main*/
  color: white;
}

.tableRowLinkSelected a {
  display: block;
  text-decoration: none;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: #e6d355;
  margin-left: 0px;
  white-space: nowrap;
}

.tableRowLinkSelected a:hover {
  color: white;
  background-color: #6b66c8;
  /*background-color: #0065A8*/
}

.backgroundLinear{
   padding: 4px !important;
   background: linear-gradient(to bottom, #f2f2f2 0%,#EEEEEE 50%, var(--btnpage) 100%) !important;
}

.backgroundLinearlogin{
  background: linear-gradient(to bottom, rgb(235, 235, 235) 0%,#EEEEEE 10%,#ffffff 60%) !important;
}

.pageDataHeader {
  background-color:var(--btnpage); /* var(--grid-thead-color) !important; /* background: rgb(245, 245, 245); */
  border: /*1px solid var(--btnpage-border);*/
  2px solid  rgb(232, 232, 232);
  width: 100%;
  border-radius: 10px;

  padding-top: 1px;
  padding-bottom:1px;
  padding-right: 4px;
  padding-left: 3px;
  /*  border-top-left-radius: 12px; 
  border-top-right-radius: 12px; */
 /* outline: 2px solid rgb(239, 237, 237);/*var(--grid-border-color);/*var(--btnpage-border);*/
 /* border: 1px solid  rgb(232, 232, 232);/*var(--btnpage-border);*/
 /* overflow-x:auto;*/
}

/*============= DATATABLE =============*/
.tableInternal{
  width: 100% !important;
  display: block;
  background-color: white;
  border-radius: 0px;
}

.selected{
  background-color: #d2cffb;
}

.newrecord{
 /* background-color: rgb(255, 249, 191);*/
 /* background-color: var(--datatable-lila);*/
  background-color: rgb(255, 244, 126);
/*  color: white;*/
}

.dataTable2 {
  display: block;
 /* background-color: var(--btnpage);/*white;*/
 /* border-radius: 0px;
  /* border: 2px solid rgb(195, 192, 192); */
  border: 1px solid #d9d9d9;/* var(--btnpage-border);/*var(--grid-border-color);*/
  /*border-top-left-radius: 6px;
  border-top-right-radius: 6px;*/
  font-family: var(--font);
  font-size: 18px;
  color: var(--grid-font-color);

  margin: 3px;  
  margin-top: 9px;  
  background-color: white;
}

.dataTable2 thead{

 background-color: #eae9e9;
  font-weight: 450;
  color: var(--datatable-lila-dark); 
  /*border-bottom: 1px solid #d9d9d9;/*var(--grid-border-color);*/
}


.dataTable2 tr {
  height: 38px;
}

.dataTable2 tbody tr:hover {
  cursor: pointer;
  background-color: var(--grid-row-hower-background) !important; /*fdf2a9*/
}

.dataTable2 td:not(:last-child) {
  border-right: 1px solid #d9d9d9;/*var(--grid-border-color);*/
}

.dataTable2  td:first-child {
  color: gray;
  padding-right: 5px;
  background-color: #eae9e9;
}

.dataTable2 td {
  padding-right: 5px;
}

.dataTable2 th {
  font-weight: normal;
  color: var(--grid-font-color);
  /* font-weight: bold;*/
}

/*
.dataTable2 tbody tr:hover {
  background-color: var(--grid-row-hower-background) !important; 
  cursor: pointer;
}*/

.dataTable {
  display: block;
  background-color: var(--btnpage);/*white;*/
  border-radius: 0px;
  /* border: 2px solid rgb(195, 192, 192); */
  border: 0px solid var(--grid-border-color); /* var(--btnpage-border);/*var(--grid-border-color);*/
  /*border-top-left-radius: 6px;
  border-top-right-radius: 6px;*/
  font-family: var(--font);
  font-size: 18px;
  color: var(--grid-font-color);
  margin-bottom: 4px;
}

/*.dataTable tr:nth-child(even) {background-color: #f2f2f2;}*/

.dataTable th {
  font-weight: normal;
  color: var(--grid-font-color);
  /* font-weight: bold;*/
}

.dataTable th > a {
  text-decoration: none;
  color: var(--grid-font-color);
}

.sortTitle{
  color:var(--datatable-lila-dark) !important;
  cursor: pointer;
}

.sortTitle:hover {
  color: red !important;
 /* background-color: var(--datatable-lila);*/
}

.filterLink {
  display: block;
  text-decoration: none;
  padding: 4px;
}

.dataTable tr{
  vertical-align: top;
  height: 40px;
}

.dataTable thead tr{
  vertical-align: middle;
}

.dataTable tbody td {
  padding-top:7px;
  border-right: 1px solid #d9d9d9;/*var(--grid-border-color);*/
  white-space: nowrap;
}

.dataTable tbody td:first-child {
  /*border-left: 1px solid var(--grid-border-color);*/
  padding-top:4px;
  border-top: 0;
  border-bottom: 0;
  background-color: var(--btnpage);
 
  padding-left: 1px;
  padding-right: 1px;
  border-right: 1px solid var(--grid-border-color);
}

/*
.dataTable tbody td:first-child  + td{
  color: rgb(125, 125, 125);
}*/


.dataTable tbody tr:last-child  td{ 
  border-bottom: 1px solid var(--grid-border-color);
}



.dataTable tbody tr:last-child td:first-child{ 
  border-bottom: 0;
}

.dataTable tbody {
  background-color: white;
}

.dataTable tbody tr:hover {
  /* color: var(--background-hover);*/
  background-color: var(--grid-row-hower-background) !important; /*fdf2a9*/

  cursor: pointer;
}

/*
.dataTable tbody tr:hover .dropdown {
  display: block;
}

.dataTable tbody tr:hover td:first-child {
  padding-top:2px;
}*/

/*
.dataTable tbody tr:hover .broyac{
  display: none;
}*/


.dataTable thead {
  text-align: left;
  background-color: var(--btnpage ); /*var(--grid-thead-color); /*var(--btnpage);*/
}

.dataTable thead tr th {
  border-bottom: 1px solid var(--grid-border-color);
  white-space: nowrap;
}

.dataTable thead tr th:first-child {
  border-bottom: 0;
  white-space: nowrap;
  min-width: 41px;
}
.dataTable thead tr th:first-child +th {
  
  min-width: 36px;
}
/*
.dataTable tr:first-child th:first-child  + th{
  min-width: 30px;
}*/

.dataTable tbody tr td:last-child {
  border-right: 1px solid var(--grid-border-color);
}

.tdBorderLeft {
  border-left: 1px solid var(--grid-border-color);
}
.tdNoBorderRight {
  border-right: 0px !important;
}

.tdNoBorderLeft {
  border-left: 0px !important;
}

.tdBorderBottom {
  border-bottom: 1px solid var(--grid-border-color);
}

.tdBorderTop {
  border-top: 1px solid var(--grid-border-color);
}

.dataTable td {
  padding-left: 6px;
  padding-right: 6px;
}

.dataTable th {
  padding-left: 6px;
  padding-right: 6px;
}

/*============== END DATATABLE ===============*/
/*
@media screen and (max-width: 420px) {
  .shadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 2px solid var(--shadow-mobil);
    margin: 0;
    padding: 0;
  }
}*/

.divEditForm {
  display: flex;
  align-items: flex-start;
 /* border-radius: 12px;*/
}

.editBody {
  display: flex;
  padding-left: 5px;
  padding-right: 5px;
}

.overFlowCenter{
  align-items: center !important;
 }

.overflowDiv {
  display: flex;
  justify-content: center;
 /* align-items: center;*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

.ramka {
  /*background-color: white;*/
  border-radius: 12px;
  margin: 15px;
  background-color: white;
  border: 2px solid var(--background-hover); /* #13252f */
  -webkit-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.5);
  -moz-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.5);
  box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.5);
}


@media screen and (max-width: 758px) {
  .divEditForm,
  .editBody {
    display: block;
  }

  .overFlowCenter{
    align-items: start !important;
   }
   
  .overflowDiv {
    display: flex;
    justify-content: center;
    position: fixed;
    align-items: start;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }
}

/* ===================== vgrajdane na buton vuv input text ==============*/
.buttonIn {
  /* width: 300px;*/
  position: relative;
}


.buttonInStyle {
  position: absolute;
  border: 2px solid white;
  border-radius: 5px;
  right: 8px;
  z-index: 2;
  top:0;
  margin-top: 4px;
  height: 38px;
  width: 38px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  background-color: var(--datatable-lila); /* #1e90ff; */
  transform: translateX(2px);
}

.buttonInStyle:hover {
  background-color: rgb(204, 228, 244) !important;
}

.buttonInStyle2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size:24px !important; 
  color: gray !important;
  font-weight: normal !important;
  background-color: white !important; /* #1e90ff; */
}

/*===================== tooltip za greshkite v poleto  ============*/
.tooltipinput {
  position: relative;
  display: inline-block;
}

.tooltipinput .tooltiptext {
  display: none;
  text-align: left;
  padding: 5px;
  position: absolute;
  z-index: 3;
  bottom: 100%;
  left: 0px;
  margin-left: 5px;
}

.tooltiptext {
  font-size: 16px;
  color: white !important;
  max-width: 358px;
  /* border: 1px solid red;*/
  border-radius: 6px;
  background-color: rgb(255, 0, 0); /* Fallback color */
  background-color: rgba(255, 0, 0, 0.9); /* Black w/ opacity */

  -webkit-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
  -moz-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
  box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);

  cursor: pointer;
}

.tooltipinput .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 25px;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

/************** autocomplete *******************/
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  /*border: 1px solid #d4d4d4;*/
  border: 2px solid var(--background-hover-border);
  /*border-bottom: none;
  border-top: none;*/
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:
  top: 100%;*/
  margin-bottom: 25px;
  margin-left: 4px;
  min-width: 352px;
  border-radius: 6px;
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-size: 18px;
  max-height: 250px;
  overflow-y: auto;
}

.autocomplete-items div {
  padding: 8px;
  cursor: pointer;
  background-color: var(--dropdown-background);
  /* border-bottom: 1px solid #d4d4d4;*/
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: var(--background-hover-border); /* #e9e9e9;*/
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/************************/
input.largerCheckbox {
  transform: scale(1.5);
  margin-left: 15px;
  margin-right: 10px;
}

.cboxlabel{
  display: inline-block;
  width: 87% ;
}

.cboxlabel:hover{
 /* color: DodgerBlue;*/
  cursor: pointer;
}

/************slider cbox*******************/
.switch {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 30px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color:var(--datatable-lila-dark);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--datatable-lila-dark);
}

input:checked + .slider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(28px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/************************/

.bell{
  display:block;
 
  margin:20px auto 0;
  font-size: 60px; 

  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}


.rotate {
  display: inline-block;
  margin:20px auto 0;
  font-size: 60px; 
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.blink {
  animation: 1s infinite blink;
  display: inline-block;
}

@keyframes blink {
  0%, 15% {
      opacity: 0;
  }
  16%, 100% {
      opacity: 1;
  }
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.floater{

  animation: float 4s ease-in-out infinite;
}

@keyframes float {
	0% {
	/*	box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
		transform: translatey(10px);
  /*  border-radius: 50%;*/
	}
	50% {
	/*	box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);*/
		transform: translatey(-10px);
  /*  border-radius: 20%;*/
	}
	100% {
	/*	box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
		transform: translatey(10px);
    /*border-radius: 50%;*/
	}
}



.bounceIn{

  animation: bounceIn 4s ease-in-out infinite;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}