@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

@media screen and (max-width: 860px) {
/*****************za main page predi login ***************************/
  #menutopsmall {
    display: block !important;
  }

  #menutop {
    display: none;
  }

  #leftbanner {
    display: inline-block;
    margin: 0px !important;
    margin-top: 25px !important;
   /* height: 549px !important;*/
  }


  #leftbanner img {
    height: 290px !important;
  }

  .loginbox {
    /*height: calc(100% - 90px);*/
    display: inline-block;
  }

  .containermain {
    display: block !important;
    /* flex-direction: column;*/
    text-align: center;
    align-items: center;
    margin-top: 120px !important;
  }
  /************************************************/

.pagerDivRamka{
  width:auto !important;
}
}

/************************ */

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

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


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

body {
  padding: 0px;
  margin: 0px;
  width : 100%;
   /* height: 100%;*/
  min-height: calc(100vh - var(--headerH));
  font-family: var(--font);
  font-size: 18px;
  color: var(--font-color-body);
  overflow: auto;  
}

.bodyafterlogin{
  background: var(--body-background);
 
  /*background: #86c8d6;*/
/*  background: linear-gradient(0deg, #86c8d6 00%, var(--body-background) 80%) no-repeat fixed center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}

.bodyafterlogin0{
  background: rgb(128 85 182);
}


.bodyWeb{
  /*background-image: linear-gradient(to bottom, #7e9cfe, #d5e6ff, rgb(250 242 148));*/
  background-image: linear-gradient(to bottom, #5073e6, #d4e3f9, rgb(250 242 148));
  background-attachment: fixed;
}

.bodylogin{ /*======== bez login ===========*/
	/*background: var(--body-background-main);*/
	background: var(--body-background-main) url(../img/back3b.jpg) no-repeat fixed center;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.PopupDiv{
 /* border: 1px solid red;*/
 margin: 0px;
}
/*  for firefox*/

  @supports (-moz-appearance:none){
  .bodylogin{
    background: var(--body-background-main) url(../img/back3b.jpg) no-repeat fixed center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

:root {
  /*=== za nachaloto.. bex da se e lognal ==========*/
  --body-background-main: #0f235b;
  --logininput-border-selected: rgb(0 131 189);
/*********** sled login ***************************/
  
  --body-background:rgb(155,169,223);/*rgb(164, 158, 227);*/
  /*--font: "Open Sans", "Segoe UI",Tahoma, sans-serif;*/
  --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-color-body: rgb(40, 40, 40);
  --shadow-border-color: rgb(229, 226, 226);
  --datatable-lila: #b8b4f7;
  --hotel-name: #519ef1;
  --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: #b3abab;/* #c2c0c0;*/
  --inputtext-border-selected:rgb(255, 214, 48);

  --dropdown-background: rgb(239, 242, 246);
  --dropdown-border:rgb(186 195 199);
  --dropdown-color: rgb(72, 75, 78);

  --menu-hover-color: #048bab;/*rgb(221, 221, 221);*/
  
  --grid-font-color: rgb(39, 38, 38);
  --grid-border-color: #c8c8c8; /* #b8b4f7;*/
  --grid-border-thead-bottom-color: #c8c8c8; /* #b8b4f7;*/
  
  --grid-thead-color: rgb(233, 233, 241);
  --grid-row-hower-background:#fbeb85;/*rgb(248, 238, 192);/* #fbeb85;*/
  --user:rgb(183, 240, 130);

  --btnpage:rgb(227, 227, 227);/*rgb(235, 235, 235);*/
  --btnpage-border: #b4b0b0;

  --titletextcolor: #1864b2;

  --btnpage-border-hover: rgb(255, 214, 48);
  --modal-ramka: rgb(0, 162, 232);
  --formTitlePanel_text_color: white;/*#544a4a;*/
  --formTitlePanel_icon_color: white;/*rgb(0, 162, 232);*/
  --formTitlePanel_background: #927ad9;
}

/************main page before login *************************/
#menutopsmall {
  display: none;
}

#divburger{
  display: inline-flex;  
		justify-content:center; 
		align-items: center; 
		width: 62px; 
		height: 60px;
		border-radius: 0px 0px 0px 18px;  
		background:rgba(255,0,0,0.78)
}

#divburger:hover {
  cursor: pointer;
}

#logindiv{
  align-content: center;
  display: block;
  position: relative;
  z-index: 2;
  height: 100%;
  height: calc(100% - 30px);
  /* background: black; */
}

#errdiv{
  margin:4px;
  min-width: 324px;
}

#capchaimg{
  margin-top:2px; 
  height: 49px; 
  border: 1px solid silver; 
  border-radius: 10px;
}

.containermain {
  display: flex;
  width: 100%;
  justify-content: center;
 text-align: center;
 /* position: absolute;*/
  top: 0px;
  margin-top: 60px;
  padding-bottom: 25px;
}

.cardsholder{
  display:block;
  justify-content: center;
  padding: 25px;
  border: 0px solid whitesmoke;
  gap:15px;
  text-align: center;

}

.cards{
  display:inline-block;
  padding: 10px;
  border: 2px solid whitesmoke;
  border-radius: 8px;
  background: white;
  min-width: 200px;
  margin: 10px;
  text-decoration: none;
}

.cards img{
  height: 60px;
}


/*******************menu header ****************************/

@media screen and (max-width: 880px) {

  .menuheader_hamburger{
    display:inline-block !important;
    
  }

  .mobilemenu{
    display:block !important;
  }

  .menuheaderRamka{
    display: none;
    position: absolute;
    top: var(--headerH);
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    left: 0;
    padding: 4px;
  }

  div.menuheader{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
  }

  /*div.menuheader :nth-child(1){ order: 2;}
  div.menuheader :nth-child(2){ order: 1;}
  div.menuheader :nth-child(3){ order: 3;}*/
}

.mobilemenu{
  display:none;
}

.menuheader_hamburger{
  display: none;
  padding: 6px 14px 7px 15px;
  border: 2px solid #b5b1b1;
  border-radius: 8px;
  color: #8459b5;
  /*float: right;*/
}

div.menuheader{
 display: inline-flex;
 flex-direction: row;
 white-space: nowrap;
}

/*
div.menuheader div{
  float: left;
  padding: 2px;
}*/


div.menuheader a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #e7e7e7;
  border-radius: 7px;
  font-size: 18px !important;
  padding: 16px;
  padding-top: 13px;
  padding-bottom: 13px;
  text-decoration: none !important;
  color: #67547e;
  white-space: nowrap;
  font-size: 18px;
  box-shadow: #3d3b5c8a 0px 1px 2px 0px;
  transition: all 0.3s ease;
  margin-left: 10px;
  margin-right: 10px;
  gap: 8px;
}

div.menuheader i {
  color: #b283e9;
}

div.menuheader a:hover {
  background: #ffed63;
  color:#4e4d4d;
 /* border: 2px solid #fcf3a1;*/
}

div.menuheader a:hover i {
  color:#b283e9;
 /* border: 2px solid #fcf3a1;*/
}

.menuheader_active{
 /* background: #2c76b7 !important;
  color: #ffffff !important;
  /* font-weight: 600 !important; */
  background: #b283e9 !important;
  color: white !important;
}

.menuheader_active i{
  color: white !important;
}
/**************************************************/
@media screen and (max-width: 650px) {

   /*.cardObyavi{
    
     background: rgb(246, 246, 247) !important;
     background: rgb(255, 255, 255) !important;
   }*/

  .cardObyaviData{
    flex-direction: column !important;
  }

  .cardObyaviDataImgDiv{
    width: auto !important; 
  }

  .obyavaDetTitle{
    width: auto !important;
  }
  
  .btnPageZapisi {
    display:none;
  }
}

.darenia-title{
  text-align: center;
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.darenia-subtitle{
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cardObyavi{
   
 /*   position: relative;
    background: rgb(255 255 255);
    /* background-image: linear-gradient(90deg, #ffffff 30%,rgb(200, 233, 255) 80%, rgb(180, 217, 241) 100%); */
 /*   border-radius: 8px;
    width: 100%;*/
}

.cardObyaviData{
  display: flex;
  flex-direction: row;
  padding: 4px;
}


.cardObyaviDataImgDiv{
   /* border: 1px solid #d2d2d2; */
    width: 200px;
    height: 200px;
    background: white;
    margin: 4px;
    padding: 4px;
    border-radius: 8px;
    min-width: 200px;
    min-height: 200px;
    align-content: center;
}

.cardObyaviDataImg{
  height: 190px;
  width: 190px;
  object-fit: cover;
}

.cardObyaviDiv{
  width:100%;
  padding: 4px;
}

.obyavaDetTitle{
  width: 100%;
  color: #000000;
  font-size: 1.188rem;
  font-weight: 600;
  letter-spacing: 0.7px;
  /* text-align: justify; */
  padding-top: 8px;
  /* border-bottom: 1px solid gray; */
}

.cardObyaviDivBottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-bottom: 4px; */
  font-size: 16px;
  color: #58595a;
  /* border: 1px solid red; */
}

.cardObyaviDataLyubimi{
  display: block;
  /* position: absolute; 
  top: 13px;
  right: 13px;*/
}

.cardObyaviA{
  display: block;
  background: white;
  border-radius: 8px;
  text-decoration: none;
  color: black;
  transition: all 0.2s ease;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: rgb(81 81 86 / 28%) 0px 0px 3px 2px;
  /* border: 2px solid transparent; */
}

.cardObyaviA:hover{
  /*background-image: linear-gradient(90deg, #ffffff 30%,rgb(200, 233, 255) 80%, rgb(180, 217, 241) 100%) !important;*/
/*background: rgb(251, 238, 170);*/
/*background: rgb(221, 227, 255);
background: white;*/
transform: translateY(-5px);
border-radius: 2px;
/*box-shadow: rgb(17 17 19 / 1) 1px 2px 7px 1px;
/*box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);*/
/*border: 2px solid rgb(6, 54, 98);
/*background: rgb(239, 214, 255);/
 }

 .cardObyaviA:hover .obyavaDetTitle{
 /* transform: scale(0.9);*/
 /* color:rgb(57, 42, 123);*/
 }

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

.infotooltip .infotooltiptext {
  visibility: hidden;
  display: inline-block;
  padding: 8px;
  padding-left: 15px;
  padding-right: 15px;

  background-color: rgb(49 87 203);
  color: #fff;
  text-align: center;
  border-radius: 14px;
 
  position: absolute;
  z-index: 1;
  bottom: 150%;
  right: -8px;
  
}

.infotooltip .infotooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 15px;

  border-width: 8px;
  border-style: solid;
  border-color: rgb(49 87 203) transparent transparent transparent;
}

.infotooltip:hover .infotooltiptext {
  visibility: visible;
}
/*************************************/
@media screen and (max-width: 480px){
  .uploadimageramka{
    display: block;
    width: 100%;
  }
}

.uploadimagecontainer {
  border: 1px solid #b3abab;
  padding-top: 4px;
  border-radius: 6px;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.uploadimageramka{
  display: flex;
  flex-direction: column;
  background: white;
  padding-top: 8px;
  border-radius: 8px;
  border: 1px solid #eeeeee;
  text-align: center;
  background: #EEEEEE;
  margin: 4px;
  align-items: center;
}

.filebtn{
  font-size: 40px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.filebtn:hover{
  cursor: pointer;
}

#leftbanner{
  display: inline-block;
  border: 1px solid rgb(49 161 218);
	border-radius: 12px;
	margin-left: 40px;
	background: rgba(0,0,0,0.25); 
	box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
/*	height:628px;*/
}

#leftbanner::after {
  content: '';
  clear: both;
  display: table;
}

.loginclass {
  display: inline-block;
  border: 2px solid white;
  background: #edf2f4;
  border-radius: 12px;
  box-shadow: rgb(0 0 0 / 0.2) 3px 3px 4px;
}

/*********************************************/
  .buttonNew,
  .buttonLogin,
	.buttonReg,
	.buttonReservations,
  .buttonLoginWhite {
    display: inline-flex;
    justify-content: center;
    align-items: center;
		text-align: center;

		background: #1864b2;
		border: 2px solid #1864b2;

		color: #fff;
		border-radius: 6px;
		font-size: 20px;
		font-family: Poppins, sans-serif;
		font-weight: bold;
		text-decoration: none;
		/*letter-spacing: -0.32px;*/
		transition: all 0.2s ease;
		cursor: pointer;
		outline: none;
		width: 300px;
    padding:12px;
    gap: 10px;
    font-family: var(--font);
	}

  .buttonLoginWhite{
    background: white;
    border: 2px solid #b2c2cf;
    color: #0f5092;
    font-weight: normal;

    gap: 10px;
    background: white;
    border: 2px solid #b2c2cf;
    color: #0f5092;
  }

  .buttonLoginWhite:hover{
    background: rgb(186, 224, 252);
  }

  .buttonFileAdd,.buttonFileDel{
    background: #ffffff;
    border: 1px solid #6776ae;
    display: flex;
    height: 48px;
    font-size: 26px;
    font-family: var(--font);
    font-weight: normal;
    width: 56px;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    cursor: pointer;
    border-radius: 6px;
    color: #6776ae;
  }

  .buttonFileDel{
    background: white;
    border: 1px solid #6776ae;
    margin-right: 0px;
    color: #6776ae;
  }

	.buttonReg {
		background: #36a420;
		border: 2px solid #36a420;
		/*width: 270px;*/
	}

	.buttonReservations {
		background: #ca3724;
		border: 2px solid #ca3724;
		width: 135px;
		height: 72px;
	}

	.buttonReservations:hover {
		border: 2px solid #ad3424;
		/*#c21936;*/
		background: #ad3424;
		/*#c21936;*/
	}

	.buttonLogin:hover {
		border: 2px solid #0f5092;
		/*#c21936;*/
		background: #0f5092;
		/*#c21936;*/
	}

	.buttonReg:hover {
		border: 2px solid #277b16;
		background: #277b16;
	}

  .buttonWhite{
    display:inline-flex;
    background: white;
    border: 2px solid #b2c2cf;
    border-radius: 6px;
    outline: none;

    color: #0f5092;
    text-align: center;
    justify-content: center;
    align-items: center;

    height: 48px;
    font-size: 18px;
    font-family: var(--font);
    font-weight: normal;
    text-decoration: none;
    width: 180px;

    cursor: pointer;
    transition: all 0.2s ease;
  }

  .buttonWhite:hover{
    background: white;
		border: 2px solid #b2c2cf;
    color:#0f5092;
  }

  .buttonNew{
    font-weight: normal;
    width: auto;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    background: #ffed63;
    color: #4f5256;
    border: 2px solid #ffed63;
    box-shadow: rgb(0 0 0 / 23%) 3px 3px 2px 0px;
  }

  .buttonNew:hover{
    background: #fff28b;
    border: 2px solid #fff28b;

  }

	.zabravenaparola {
		font-size: 18px;
		text-decoration: none;
		/*color: rgb(137 128 237);*/
		color: #365899;
	}

	.signUp:hover {
		color: #c21936;
	}

	.google {
		background: white !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		/*padding: 15px !important;*/
		height: 56px !important;
		border: 2px solid #b2c2cf !important;/*rgb(208 204 250)*/
		border-radius: 8px !important; 
    text-decoration: none;
    gap: 8px;
    color: black;
		/*border-radius: 15px 4px 15px 4px !important;*/
	}

	.google:hover {
		border: 2px solid var(--logininput-border-selected) !important;
		background: rgb(210, 227, 252) !important;
		cursor: pointer;
	}

	.loginError {
		display: flex;
		flex-direction: column;
		font-size: 18px;
		padding: 0px 0px 18px 0px;
		border-radius: 8px;

		/*color: #ff0c00;*/
		margin-bottom: 12px;
		background-color: white;
		min-height: 48px;
		justify-content: center;
		align-items: center;
		border: 2px solid #b2c2cf;
    max-width: 320px;
	}

  input.onfielderror{
    border: 1px solid red !important;
    outline: 1px solid red !important;
  }

  /*input.onfielderror input:focus{
    border: 1px solid red !important;
    outline: 1px solid red !important;
  }*/

  label.onfielderror {
    color: red !important;
  }

	.loginbox {
    display: flex;
    flex-direction: column;
    padding: 15px 8px 12px 8px !important;
	}

/*************************************/

.rowFitContentn{
  word-break: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
  max-width: 580px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 56px;

  padding-top: 6px;
  padding-bottom: 0px;
  /* padding-bottom: 0px; */
  /* color: black; */
}

.obyavaDetRowFit{
  display: block;
  word-break: break-word;
  word-wrap: break-word;
  white-space: pre-wrap; 
  text-overflow: ellipsis;
  overflow: hidden;
  /* border: 1px solid rgb(0, 0, 0); */
  padding: 10px;
  /* border-radius: 10px; */
  min-height: 85px;
  height: 100%;
}


.obyavaDetOpisanie{
  display: block;
  /* font-weight: bold; */
  /* font-size: 20px; */
  padding: 10px;
  
  padding-bottom: 2px;
}

.obyavaDetTitleIcon, .obyavaDetTitleIconOwn{
    /* display: inline-block; */
    font-size: 23px;
    color: #6c8bea;
    /* float: right; */
    /* align-self: end; */
    /* margin-right: auto; */
}

.obyavaDetTitleIconOwn{
  color: #5fc55c;
}


.obyavaDetTitleDet{
  border: 1px solid blue;
 display:block;
}

.obyavaDetTitleDet div{
  display:inline-block;
 }



 /**********for sliders ****************/
 .slideContainer{
  position:relative;
 }

 .slideThubnailContainer{
  display: flex;
  /* align-items: center; */
  justify-content: center;
 }

.slideSlides{
  padding: 10px;
 display:none;  
 text-align: center;
 /*border: 1px solid gray;*/
}

.slideSlides img{
    /* border: 1px solid gray; */
    width: 100%;
    max-width: 900px;
    max-height: 500px;
    object-fit: contain;
    border-radius: 12px;
    /* padding: 10px; */
 }

.slidePrev,
.slideNext {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: 40px;
  padding: 16px;
  padding-left: 10px;
  /* margin-top: -50px; */
  color: #000000;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 30px 30px 0;
  user-select: none;
  -webkit-user-select: none;
  
  background-color: white;
  border: 2px solid rgba(0,0,0,0.5);

}

/* Position the "next button" to the right */
.slideNext {
  /*right: 0;
  border-radius: 3px 0 0 3px;*/
  right: 0;
  border-radius: 30px 0 0 30px;
  padding-left: 20px;
}

/* On hover, add a black background color with a little bit see-through */
.slidePrev:hover,
.slideNext:hover {
  background-color: #ffffff;  
  color: rgb(99, 149, 236);
}

/* Number text (1/3 etc) */
.slideNumberText {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background: black;
  font-size: 16px;
  border-radius: 0px 0px 10px 0px;
}

/* Container for image text */
.slideCaption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.slideRow{
 display: flex;
}

.slideRow1:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.slideColumn {
    /* float: left; */
    /* flex: 1; */
    /* max-height: 55px; */
    width: 100%;
    height: 100%;
    margin-right: 5px;
    /* border-radius: 10px; */
    /* border: 1px solid red; */
}

/* Add a transparency effect for thumnbail images */
.slideDemo {
  border-radius: 4px;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  background: white;
}

.slideDemo:not(.slideActive):hover  {
  opacity: 1;
  cursor: pointer;
  border: 3px solid white;
}

.slideActive{
opacity: 1;
border: 2px solid gray;
}


/**************************************/

.shadow2 {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.shadow3 {
  box-shadow: rgba(37, 14, 17, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.shadow4 {
  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 {
  box-shadow: 0px 9px 20px rgba(13, 38, 76, 0.19);
}

.shadow66 {
  -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;
}

.shadow6{
      -webkit-box-shadow: rgb(22 62 77 / 48%) 0px 2px 4px 0px, rgb(14 30 37 / 4%) 0px 2px 16px 0px;
      box-shadow: rgb(22 62 77 / 48%) 0px 2px 4px 0px, rgb(14 30 37 / 4%) 0px 2px 16px 0px;
}
.shadow7 {
 /* box-shadow: 0px 2px 8px 0px rgba(106, 106, 106, 0.4);*/
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

.shadow1 {
  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;
}

.shadow10{
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

.shadow {
  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-left: 15px;
  padding-top: 6px;
  padding-bottom: 8px;
  background:linear-gradient(to bottom, #78abf2 5%, var(--formTitlePanel_background) 100%);
  font-size: 24px;
  color: var(--formTitlePanel_icon_color);
  border-radius: 5px 5px 0 0;
}

.pagerDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-top: 10px; */
}

.filterMenu{
  margin-top: 17px;
  left: 20px;
  position: absolute;
  /* width: 300px; */
  /* height: 100px; */
  border: 2px solid rgb(222 186 42);
  border-radius: 10px;
  background: rgb(71 71 71 / 66%);
  /* border-top: 2px solid #7ad0e2; */
}

.filterMenu::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 30px;
 /* margin-left: -5px;*/

  border-width: 16px;
  border-style: solid;
  border-color: transparent transparent rgb(222 186 42) transparent;
}

.filterMenuOK{
  height: 50px;
  /* padding: 10px; */
  font-size: 22px;
  margin: 15px;
  border-radius: 8px;
  margin-left: 0px;
  background: #20b81b;
  background-color: #4caf50;
  background: linear-gradient(to bottom, #13db1b 5%, #37a13c 100%);
  color: white;
  cursor: pointer;
  border: 1px solid #4caf50;
  box-shadow: 0px 1px 0px 0px #000000b0;
  text-shadow: 0px -1px 0px #5b6178;
}

.filterMenuOK:hover{
  border: 1px solid #4caf50;
  background:linear-gradient(to bottom, #37a13c 5%, #13db1b 100%);
}


.filterMenuCancel{
  height: 48px;
  /* padding: 10px; */
  /* padding-bottom: 8px; */
  width: 50px;
  font-size: 20px;
  margin: 15px;
  border-radius: 33px;
  background: linear-gradient(to bottom, #f26666 5%, #e02b2b 100%);
  background-color: #e02b2b;
  border: 1px solid #b40505;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0px 1px 0px 0px #000000b0;
  text-shadow: 0px -1px 0px #5b6178;
}

.filterMenuCancel:hover{
  background: linear-gradient(to top, #f26666 5%, #e02b2b 100%);
  background-color: #e02b2b;
  border: 1px solid #b40505;
}

.pagerDivRamka{
     /* align-items: center; */
     display: flex;
     text-align: center;
     justify-content: center;
    /* width: 100%;*/
     padding: 8px;
     border-radius: 8px;
   /*  background: linear-gradient(to bottom, #f9f9f9 0%,#EEEEEE 50%, var(--btnpage) 100%) !important;*/
}

.pagerDiv select{
  background: white !important;
}

.pagerDiv_icon{
  margin-top: 2px;
  font-size: 35px; 
  color: var(--datatable-lila-dark)
}

.pagerDiv_icon:hover{
  cursor: pointer;
}

.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;
  padding-top: 6px;
  white-space: nowrap;
}

.pageTitleTextModal {
  color: var(--formTitlePanel_text_color);
  font-family: var(--font);
  font-size: 20px !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: var(--formTitlePanel_background);
}

.pageTitleDiv {
  display: flex;
  color: var(--background-hover);
  align-items: center;
  margin-left: 10px;
  margin-right: 4px;
  padding-top: 2px;
  gap: 3px;
}

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

.formButtons {
  color: white;
  float: right;
  /* padding-top: 2px; */
  margin-right: 8px;
  padding-bottom: 2px;
  display: flex;
  gap: 4px;
}

.divConfirmContent{
 
  width : 334px;
 /* border: 2px solid #d6d4d4; */
 /*border-bottom: 2px dotted #b5b5b5;*/
  margin-top: 8px; 
  min-height: 80px; display:flex;
  align-items:center; 
  justify-content: center;
 /* border-radius: 6px;*/
  font-size: 20px;
}

.divPacketContent {
  background-color: white;
  border: 2px solid var(--datatable-lila);
  border-radius: 8px;
  margin-left: 6px;
  margin-top: 5px;
  margin-right: 1px;
  margin-bottom: 4px;
  padding: 4px;
  padding-right: 7px
}


.dataDiv{
 margin-top: 10px;
 display: block; 
 /*max-width:800px;
 min-width: 380px;*/
 width:100%;
 
 background: white;
 text-align: left;
 padding: 8px;
 border-radius: 10px;
 box-shadow: 3px 3px 4px 0px rgb(74 71 71 / 0.2);
 /*box-shadow: 0 6px 0 #064a90;
 border: 3px solid #1864b2;*/
}


.dataField{
     /* display: table-cell; */
    /* margin-right: 10px; */
    /* max-width: 500px; */
    /* min-width: 380px; */
    width: 100% !important;
    /* min-height: 0px; */
    /* min-height: 250px; */
    height: 80px !important;
    /* box-sizing: content-box; */
    resize: none !important;
    /* flex: 1 1 auto; */
    padding-left: 10px;
    /* margin-right: 14px !important; */
    margin-top: 2px;
    background-color: white;
    font-family: var(--font);
    color: #333333;
    font-size: 18px;
    border: 1px solid var(--inputtext-border);
    outline: 1px solid transparent;
    border-radius: 4px;
}

.divEditForm:focus
 {
  border: 1px solid var(--inputtext-border-selected);
  outline: 1px solid var(--inputtext-border-selected);
}


.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 transparent;/* #e4dada;*/
  border-radius: 4px;
}

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


.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-login { 
  padding-left: 42px !important;
  margin: 4px;
  margin-top: 2px;
  height: 50px;
  background-color: white;
  font-family: var(--font);
  color: #333333;
  font-size: 18px;
  border: 1px solid #edf2f4;
  outline: 1px solid #9ba2a3;
  border-radius: 6px;
}

.input-login:focus {
  border: 1px solid var(--logininput-border-selected) !important;
  outline: 1px solid var(--logininput-border-selected) !important;
}*/

.myprofile1{
  background:#5fc55c;
	display:flex; 
  text-decoration: none; 
  color: white; 
  white-space: nowrap; 		
  padding: 12px 11px 8px 11px; 
  margin-bottom: 1px; 
  /*border-radius: 20px;*/
  margin-right: 10px;
}


.myprofile{
  background: #5fc55c;
  border-radius: 7px;
  display: inline-flex;
  text-decoration: none;
  color: white;
  white-space: nowrap;
  font-size: 18px !important;
  box-shadow: #3d3b5c8a 0px 1px 2px 0px;
  transition: all 0.3s ease;
  padding: 13px;
  padding-top: 13px;
  padding-bottom: 12px;
  margin-right: 10px;
  gap: 10px;
  margin-left: 10px;
}
.myprofile:hover{
  background: #46a843;
}


.mybroyobyavi{
  background:#5fc55c;
	display:flex; 
  text-decoration: none; 
  color: white; 
  white-space: nowrap; 		
  padding: 12px 11px 8px 11px; 
  margin-bottom: 1px; 
  border-radius: 20px;
  margin-right: 10px;
}

.input-wrapper, 
.input-wrapper-login {
  position: relative;
}

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

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

/************ za login formata ***************/
.input-wrapper-login input[type="text"], 
.input-wrapper-login input[type="password"], 
.input-wrapper-login input[type="number"], 
.input-wrapper-login select {
  padding-left: 42px;
  margin: 4px;
  margin-top: 2px;
  height: 50px;
  width: 320px;

  background-color: white;
  font-family: var(--font);
  color: #333333;
  font-size: 18px;
  border: 1px solid #edf2f4;
  outline: 1px solid #9ba2a3;
  border-radius: 6px;
}

/************ za premahvane na spinera *************/
.input-wrapper-login input::-webkit-outer-spin-button,
.input-wrapper-login input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/************ za premahvane na spinera pri Firefox*************/
.input-wrapper-login input[type="number"]{
  -moz-appearance: textfield;
}

.input-wrapper-login input:focus, .input-wrapper-login select:focus {
  border: 1px solid var(--logininput-border-selected);
  outline: 1px solid var(--logininput-border-selected);
}

.input-wrapper-login select:hover{
  cursor: pointer;
}

.input-wrapper-login textarea {
  padding-left: 35px;
  width: 320px;
}

.input-icon {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(30%); 
  font-size: 20px;
  color: rgb(173, 167, 167);
}

.input-icon-login{
  position: absolute;
  top: 7px;
  color: #4b91cc;/* #76aad7 */
  align-items: center;
  display: flex;
  height: 42px;
  font-size: 22px;
  padding-left: 12px;
  padding-right: 8px;
  left: 5px;
  border-radius: 6px 0px 0px 6px;
 /* background: white;*/
  /* #4b91cc;/*rgb(137 128 237);*/
}

.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: 18px;
  padding: 8px;
  border: 1px solid #bfbfbf !important;
  outline: 1px solid #bfbfbf !important;
  /* border-bottom: 2px solid #d0d0d4; */
  margin: 0px;
  width: 100%;
  font-size: 20px;
  z-index: 9;
}

.filterInputBig{
  margin-left: 2px;
  padding-left: 45px;
  height: 50px;
  border-radius: 33px;
  border: 3px solid #5791cc !important;
}

.popupmodal{
 position:absolute;
  z-index:8; 
  top:0;
  left:0;
  width:100%;
  height:100vh;
 /* background:rgba(0,0,0,0);*/
}

.filtermodal{
  display:none;
  position:absolute;
  z-index:8; 
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background:rgba(0,0,0,0.44);
}

.filterInput:focus {
  border: 1px solid rgb(237, 201, 55) !important;
  outline: 2px solid rgb(237, 201, 55) !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: block;
  margin-top: 4px;
  margin-bottom: 3px;
  font-family: var(--font);
  padding-left: 10px;
  color: var(--datatable-lila-dark);
  font-size: 17px;
  /* font-weight: 500;*/
}

.formButton {
  display: flex;
  justify-content: center;
  min-width: 70px !important;
  text-align: center !important;
  text-decoration: none !important;
  /*text-shadow: 1px 0 2px #222;*/
  font-size: 18px;
  cursor: pointer;
  text-decoration:none;
  margin-top: 2px;
  margin-left: 4px;
 /* 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);
}

.btnOK,.btnNew {
  height: 46px;
  /*box-shadow: 0px 1px 0px 0px #f0f7fa;*/
  box-shadow: 0px 1px 0px 0px #000000b0;
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  background-color:#33bdef;
  border-radius:6px;
  border:1px solid #057fd0;
  color:#ffffff;
  text-shadow:0px -1px 0px #5b6178;
  font-size: 20px;
}

.btnNew{
  width: 89px !important;
 /* height: 44px !important;*/
  margin-top: 4px;
 }

.btnOK:hover,.btnNew:hover {
  background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
  border:1px solid #019ad2;
}

.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 {
  height: 46px;
  box-shadow: 0px 1px 0px 0px #000000b0;
  background: linear-gradient(to bottom, #f26666 5%, #e02b2b 100%);
  background-color: #e02b2b;
  border-radius: 6px;
  border: 1px solid #b40505;
  color: #ffffff;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
  text-shadow: 0px -1px 0px #5b6178;
}

.btnCancel:hover {
  background:linear-gradient(to bottom, #e02b2b 5%, #f26666 100%);
  border:1px solid #b40505;
}

.btnSubmit {
  background-color: var(--background-hover) !important; 
  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); 
}

.btnSubmit2 {
  background-color: rgb(72, 184, 245); 
  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); 
}


/*
.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;
  transition: 0.3s;
}

/*.btnNew{
  width: 91px !important;
  height: 44px !important;
  font-size: 20px !important;
 }

.btnNew {  
  height: 46px;
  box-shadow: 0px 1px 0px 0px #f0f7fa;
  background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
  background-color:#33bdef;
  border-radius:6px;
  border:1px solid #057fd0;
  color:#ffffff;
  text-shadow:0px -1px 0px #5b6178;
}
*/
.btnRefresh,
.btnClear {
  display: inline-flex;
  box-sizing:border-box;
  color: white;
  text-align: center;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
  height: 40px;
  width: 40px;
  margin-left: 4px;
  transition: 0.3s;
}

.btnClear {
  border:1px solid #b40505;
  background-color: #e02b2b;
  background:linear-gradient(to bottom, #f58787 5%, #e02b2b 100%);
}

.btnClear:hover {
  background:linear-gradient(to bottom, #e02b2b 5%, #f58787 100%);
  border:1px solid #b40505;
}

.btnRefresh {
  border: 1px solid #4caf50;
  background-color: #4caf50;
  background:linear-gradient(to bottom, #7ee482 5%, #4caf50 100%);
}

.btnRefresh:hover {
  border: 1px solid #4caf50;
  background:linear-gradient(to bottom, #4caf50 5%, #7ee482 100%);
}

.btnCloseModalX{
 /* margin-top: -2px;*/
  color: white;
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 7px 11px 5px 11px;
  margin-right: 4px;
  background:linear-gradient(to bottom, #92bbf4 5%, #8787e6 100%);
  border: 2px solid rgb(140, 181, 251);
  border-radius: 8px;
  float: right;
  font-family: sans-serif;
}

.btnCloseModalX:hover {
  background:linear-gradient(to bottom, #e02b2b 5%, #f58787 100%);
 /* border:2px solid #b40505;*/
}

/************* pagination*******************/
.btnPage,.btnPageTxt,.btnPageZapisi {
  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,.btnPageZapisi {
  border: 0;
  color: rgb(33, 33, 33);
  background: transparent;
  
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.btnPage:hover {
  border: 1px solid rgb(255, 214, 48) !important;
  outline: 1px solid rgb(255, 214, 48) !important;
}

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

.reserfield{
border: 0 !important;
outline: 0 !important;
text-align:center !important;
width: 145px !important;
margin: 0 !important;
padding: 0 !important;
}

.reserfield:focus{
  border: 0 !important;
outline: 0 !important;
}

.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;
}


.packets_usulgi_popup{
  border: 1px solid #a0a3a8;
  border-radius: 6px;
  padding: 8px;
  margin: 5px;

}
.divdropdown{
  display: inline-block;
  border: 1px solid var(--dropdown-border);/* #f8f8f4;*/
  border-radius: 8px;
  background: var(--dropdown-background);
  padding: 8px;
  margin-top: 2px;
  margin-bottom: 8px;
  /*box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.25);*/
  box-shadow: 1px 1px 2px #fff inset, rgba(0, 0, 0, 0.35) 0px 5px 15px;
  font-size: 18px;
}

.divdropdown a{
  display: flex;
  padding: 12px;
  /*background: #d1daec;*/
  text-decoration: none;
  color: var(--dropdown-color);
  border: 2px solid transparent;
  transition: 0.1s;
  gap: 10px;
  align-items: center;
  font-size: 18px;
  border-radius: 6px;
}

.divdropdown hr {
  color: white;
}

.divdropdown a i{
  font-size: 22px;
  color: #2e92b9;
  transition: 0.1s;
  /*transition: 0.3s;*/
  }
  
  .divdropdown a:hover i {
    color: white;
    }
    
  .divdropdown a:hover {
    background-color: #2e92b9;
    border: 2px solid #2e92b9;
    color: white;
  }

  .divdropdownheader{
    display: flex;
    padding: 12px;
    background: white;
    text-decoration: none;
    color: black;
    border: 2px solid white;
    gap: 15px;
    align-items: center;
    font-size: 22px;
    border-radius: 8px;
    justify-content: center;
    box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.25);
    margin-bottom: 18px;
  }
/******************************/
.modalcustom{
  background: #f8f8f8;
  box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.25);
  border-radius: 8px;
}

.modal1024{ /*....... pravi modala min 1024 i go namalaya spored prozoretza.......*/
  display: inline-block;
  width: min(800px, 100%);
  min-width: 330px;
}
/******************* drop down *************/
.dropdown {
  position: relative;
  display: inline-block;
  transition: 0.5s;
  padding-top:0px;
 /* display: none;*/
}

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

.dropdownShow {
  display: block;
}

.dropdown hr {
  color: white;
}

.dropbtn {
    /* font-family: Arial, Helvetica, sans-serif; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 12pt; */
     font-weight: 600; 
    color: gray;
    /*border: 2px solid var(--datatable-lila);*/
     border: 1px solid var(--btnpage-border); 
     outline: 1px solid var(--btnpage); 
    height: 34px;
    width: 34px;
    border-radius: 6px;
    background-color: rgb(245, 245, 245);
    text-decoration: none;
}

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

.dropdown-content,
.dropdown-content-left,
.dropdown-content-right {
  /*border: 1px solid var(--dropdown-border);*/
  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::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 30px;
 /* margin-left: -5px;*/

  border-width: 12px;
  border-style: solid;
  border-color: transparent transparent var(--dropdown-background) transparent;
}

.showdropdown {
  display: block !important;
  z-index: 5;
}

.dropbtnyear{
  width: auto;
  height: 50px;
  margin-left:4px ;
  padding-left: 10px;
  padding-right: 10px;
  background: white;
  border: 1px solid gray;
  font-size: 18px;
  border-radius: 8px;
}

.dropdown-content a,
.dropdown-content-left a,
.dropdown-content-right a {
  color: var(--dropdown-color);
  padding: 10px 10px;
  text-decoration: none;
  display: flex;
  margin: 2px;
  white-space: nowrap;
  border: 2px solid var(--dropdown-background);
  border-radius: 6px;
  /* transition:all 0.1s; */
  gap: 5px;
}

.dropdown-content a i{
color: #0082b5;
/*transition: 0.3s;*/
}

.dropdown-content a:hover i {
  color: white;
  }
  
.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 {
  cursor: pointer;
  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 */
}

.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-top: 10px !important;
  height: 50px;
  display: inline-block;
  background: white;
  border: 0px solid rgb(157, 150, 150) !important;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  z-index: 2056 !important;
}


.redText{
 color: red !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;
  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;
}

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

.backgroundLinear2{
  background-image: linear-gradient(to bottom, #fcfcfc 0%,#EEEEEE 50%, var(--btnpage) 100%) !important; 
}

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

.pageData{
  display: inline-block; 
  text-align:center; 
  margin: 6px; 
  margin-bottom: 0px; 
  border: 0px solid red;
}

.pageDataHeader {
  background-color:var(--btnpage);
  border: 2px solid rgb(239 239 239);
  width:100%;
  border-radius: 8px 8px 5px 5px;
  padding: 3px;
}

.pageDataContent{
  display: block;
  background-color:var(--btnpage);
  border: 2px solid rgb(239 239 239);
  width: 100%;
  border-radius: 5px;
  padding: 3px;
  margin-top: 10px;
}
/*============= DATATABLE =============*/

table{
  border: 0px solid gray;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 0px;
}

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

.selected{
  background-color: var(--datatable-lila-dark) !important;
  color: whitesmoke !important;
}

.selected:hover{
cursor: pointer;
} 

.newrecord{
  color:rgb(87 128 215); /* rgb(42, 139, 0);*/
}

.updatedrecord{
  color:rgb(38, 179, 38); /* rgb(42, 139, 0);*/
}


.dataTable2 {
  display: block;
  border: 1px solid #d9d9d9;
  font-family: var(--font);
  font-size: 18px;
  color: var(--grid-font-color);

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

.dataTable2 thead{
 background-color: white;/* #eae9e9;*/
 font-weight: 600;
  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: white; 
}

.tableWrap{
  max-height: calc(100vh - 290px);
  overflow-y: auto;
  padding-right: 4px;

 
  overflow-x:hidden;
/* margin-bottom: 6px;*/
 /*padding-right: 4px;
 margin-right: 0px;*/
}

/*
.tableWrap::after{
  min-width: 100%;
  overflow-x: visible;
}*/
/*.divTableCover{
display: block;
border: 1px solid red;
padding: 5px;
}

.divTableCover:after{
  content: '';
  clear: right;
  display: table;
}*/


.tableWrap .dataTable thead{
  position: sticky;
  top: 0;
  background-color: var(--btnpage);
  /*z-index: 10;*/
}


.dataTable {
  font-family: var(--font);
  font-size: 18px;
  color: var(--grid-font-color);
  text-align: left;
}


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


.dataTable tr{
  vertical-align: top;
}


/************** theader *************************/
.dataTable thead {
  text-align: left;
  white-space: nowrap;
}

.dataTable thead th {  
  font-weight: normal;
  color: var(--grid-font-color);
 /* border-bottom: 1px solid var(--grid-border-color);*/
}

.dataTable thead tr th:first-child {
  border-bottom: 0;
}

.dataTable thead tr th:first-child +th {
  min-width: 41px;
}

.dataTable th div{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px;
  height: 40px; 
 /* border-right: 1px solid var(--btnpage) !important;*/
  border-bottom: 1px solid var(--grid-border-thead-bottom-color);
  /*border-bottom: 2px solid var(--datatable-lila2);*/
}

.dataTable thead th > a {
  text-decoration: none;
  color: var(--grid-font-color);
}
/*
.dataTable tr:first-child th:first-child  + th{
  min-width: 30px;
}*/

 /********** tbody *********************/
.dataTable tbody {
  background-color: #ebebeb; 
}

.dataTable tbody tr {
  background-color: white;
}

.dataTable tbody tr td {
 padding: 6px;
}

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

.dataTable tbody td:first-child {
  padding-top: 2px;
  padding-left: 2px;
  border:0;
  border-right: 1px solid var(--grid-border-color);
  background-color: var(--btnpage);
  min-width: 41px;
  width: 41px;
  text-align: center;
}

/*.dataTable tbody td:not(:first-child) {
  background: white;/* var(--btnpage);
}*/
/**/

/*
.dataTable tbody td:first-child  + td{
  padding-top: 6px;
}*/


.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 tr:not(:first-child) td:last-child {
  border-right: 1px solid var(--grid-border-color);
}*/


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


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

.dataTableBottom{
  border-top: 1px solid var(--grid-border-color); 
  width: calc(100% - 50px);
  margin-left: 42px;
  padding: 1px;
} 

.hideTable{
display: none !important;
}

.divNoRecords{
 display: flex;
 justify-content: center;
 align-items: center;
}

.divNoRecords span{
  color: #313333;
  display: inline-block;
  border: 1px solid #b4b0b0;
  background: #ffffff;
  border-radius: 8px;
  padding-top: 12px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 16px;
  margin: 10px;
}

.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);
}

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

.sortTitle:hover {
  color: var(--background-hover)!important;
}

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

/*============== 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-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  min-height: 86px;
  min-width: 330px;
 /* border-bottom: 2px dotted #b5b5b5; */
 /* background: white;*/
}

.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;
}


@media screen and (max-width: 760px) {
  .divEditForm,
  .editBody {
   /* display: block;*/
   flex-direction: column;
  }

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

   overflow: 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; */
 background:linear-gradient(to bottom, #92bbf4 15%, #a6a6e9 100%);
/* border: 2px solid rgb(140, 181, 251);*/
  transform: translateX(2px);
}

.buttonInStyle:hover {
 /* background-color: rgb(204, 228, 244) !important;*/
 background:linear-gradient(to top, #92bbf4 15%, #a6a6e9 100%);

}

.iconInStyle {
  position: absolute;
 /* border: 2px solid white;
  border-radius: 5px;*/
  right: 12px;
  z-index: 2;
  top: 12px;;
  font-size: 20px;
  /*margin-top: 4px;
  padding-top: 6px;
  padding-left: 5px;
  /*height: 38px;
  /*width: 38px;*/
  cursor: pointer;
  color: rgb(158, 158, 158);
  font-weight: bold;
 /* background-color: white; /* #1e90ff; */
 /* transform: translateX(2px);*/
}

.iconInStyle:hover {
 /* background-color: rgb(204, 228, 244) !important;*/
 /*border: 2px solid rgb(204, 228, 244);*/
 color: rgb(252, 190, 32);
}

.buttonInStyle2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size:24px !important; 
  color: gray !important;
  font-weight: normal !important;
  background-color: white !important; /* #1e90ff; */
  height: 39px;
  width: 39px;
  top: calc(38%);
}

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

.tooltiptext {
  display: none;
  text-align: left;
  padding: 5px;
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 6px);
  left: 0px;
  margin-left: 5px;
  font-size: 18px;
  color: white !important;
  /* max-width: 358px; */
  white-space: nowrap;
  border-radius: 6px;
  background-color: rgb(255, 0, 0);
  background-color: rgba(255, 0, 0, 0.8);
  
  -moz-box-shadow: 0px 0px 10px 3px rgba(5, 5, 5, 0.58);
  box-shadow: 0px 0px 5px 1px rgb(5 5 5 / 47%);
  cursor: pointer;
  
}

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

.hr{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0,0, 0, 0), rgba(0, 0, 0, 0.55), rgba(0,0,0, 0));
}
/************* signup form*********************/
.registration{
  border: 2px solid #1f6dae;
  border-radius: 8px;
  padding: 12px;
  background: #1f6dae;
  color: #ffffff;
  margin-bottom: 8px;
  margin-left: 4px;
  margin-right: 4px;
  font-size: 20px;
  font-size:19px; 
  font-weight: 600; 
}

.regtitletext{
  font-size: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 15px;
  font-weight: 600;
  color: #1f6dae;
}

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

.autocomplete-items {
  position: absolute;
  /*border: 1px solid #d4d4d4;*/
  background-color:  #e4f1f5;/*var(--dropdown-background);*/
  border: 2px solid var(--inputtext-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: 3px;
  min-width: 352px;
  border-radius: 6px;
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-size: 18px;
  max-height: 241px;
  overflow-y: auto;
}

.autocomplete-items div {
  padding: 8px;
  cursor: pointer;
  
  /* 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.7);
  margin-left: 15px;
  margin-right: 10px;
}

.cboxlabel{
  display: inline-block;
 /* width: 100% ;*/
}

.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);
  }
}

/***********scrollbar************************/
		::-webkit-scrollbar {
			width: 8px;
		}

		::-webkit-scrollbar-track {
		/*	box-shadow: inset 0 0 2px rgb(135, 133, 150);*/
			border-radius: 8px;
		}

		::-webkit-scrollbar-thumb {
      background: rgb(203, 215, 237);
      box-shadow: inset 0 0 2px rgb(33, 32, 32);
			border-radius: 8px;
		}

		::-webkit-scrollbar-thumb:hover {

      cursor: pointer;		/*	background:  rgb(220, 216, 216);*/
		}


    /*  for firefox*/
    @-moz-document url-prefix() { 
      div{
        scrollbar-width: thin;
        scrollbar-color: #cbd7ed transparent; 
       /* scrollbar-gutter: stable both-edges;
        scrollbar-gutter: stable;*/
      }

      .dropbtn {
        font-weight: normal;
    }
  }

    /************************************** */
	.bounceInLeft {
		-webkit-animation-duration: 2s;
		animation-duration: 2s;

		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;

		-webkit-animation-name: bounceInLeft;
		animation-name: bounceInLeft;
	}

	@-webkit-keyframes bounceInLeft {
		0% {
			opacity: 0;
			-webkit-transform: translateX(-2000px);
		}

		60% {
			opacity: 1;
			-webkit-transform: translateX(30px);
		}

		80% {
			-webkit-transform: translateX(-10px);
		}

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

	@keyframes bounceInLeft {
		0% {
			opacity: 0;
			transform: translateX(-2000px);
		}

		60% {
			opacity: 1;
			transform: translateX(30px);
		}

		80% {
			transform: translateX(-10px);
		}

		100% {
			transform: translateX(0);
		}
	}

	.bounceInDown {
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: bounceInDown;
		animation-name: bounceInDown;
	}

	@-webkit-keyframes bounceInDown {
		0% {
			opacity: 0;
			-webkit-transform: translateY(-2000px);
		}

		60% {
			opacity: 1;
			-webkit-transform: translateY(30px);
		}

		80% {
			-webkit-transform: translateY(-10px);
		}

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

	@keyframes bounceInDown {
		0% {
			opacity: 0;
			transform: translateY(-2000px);
		}

		60% {
			opacity: 1;
			transform: translateY(30px);
		}

		80% {
			transform: translateY(-10px);
		}

		100% {
			transform: translateY(0);
		}
	}

  /************************/
  	/* Fade Animation For Image Slider - Magnific Popup */
    .fadeIn {
      /*-webkit-animation: fadeIn 0.6s;
    animation: fadeIn 0.6s;*/
      animation-name: fadeIn;
      animation-duration: 2.5s;
      animation-timing-function: linear;
      /*animation-timing-function: ease-in;*/
      animation-delay: 3.5s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: none;
    }
	@-webkit-keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}


/********** menuto v lyavo za usermode>0 *********************************************************/
ul.menul {
  padding: 0;
  margin: 0;
}

ul.menul li {
  color: white;
  list-style: none;
  padding-left: 6px;
  padding-right: 6px;
}

ul.menul li ul {
  /*	display:none;*/
  /*background-color: rgba(0,0,0,0.28);*/
  background-color: rgb(253 253 253);
  /*#d9e1ff;*/
  /*rgb(251 250 250);*/
  padding: 8px 0px 8px 0px;
  border: 1px solid #b4b0b0;
  margin-top: 4px;
  margin-bottom: 4px;
  border-radius: 8px;

  /*transition: all 2s;*/
}

ul.menul li a {
  display: block;
  font-size: 18px !important;
  /* align-items: center; */
  /* height: 48px !important; */
  padding: 8px;
  padding-top: 14px;
  padding-bottom: 14px;
  text-decoration: none !important;
  color: var(--dropdown-color);
  white-space: nowrap;
  /* border: 1px solid transparent; */
  border-radius: 4px;
}

ul.menul li a:hover {
  background: var(--menu-hover-color);
  color: white;
}

ul.menul li a:hover i {
  color: white;
}

ul.menul li a:hover .menuiconright {
  color: white;
}


ul.menul li a i {
  /*	border: 1px solid red;*/
  min-width: 35px;
  font-size: 22px;
  color: #2e92b9;
  /* #63abbe;*/
  text-align: center;
  padding-left: 0px;
}

ul.menul li a i.menuiconright {
  font-size: 18px;
  color: gray;
  rotate: 90deg;
}

ul.menul li a span {
  display: block;
  padding-left: 3px;
  padding-right: 5px;
  white-space: nowrap;
}


ul.headernavbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.headernavbar li {
  float: left;
}

/***************************************************/
.forus{
  display: block;
  /* width: 100%; */
  height: 100%;
  background: var(--body-background-main) url(../img/forus/image0.png) no-repeat fixed bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 90vh !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: contain;
}