:root {
	--backcolor2: #303336;
  --backcolor: #3b3e41;
	--bordercolor2: #222528;
  --bordercolor: #585d62;
	--hovercolor: #43474a;
	--hovercolor2: #575b5e;
	--placeholdercolor: #90979d;
	--textcolor: #c2c2c2;
	--green:#4a8872;
	--green2:#2c8e6a;
	--green2: #04aa6d;
	--red: #af5c5c;
	--crimson: #DC143C;
	--blue: #557fa6;
	--gold: #a7964c;
	--nthcolor: #43474a;
	--orange: #be782a;
	--bluegreendark: #127d9d;
	--nthrowfirstpage: #303336;
	--backupcolor: #bb88ee;
}


.navbar-nav .nav-item:hover .nav-link {

		background-color: var(--backcolor2);
}
.navbar-brand:hover  {

		background-color: var(--backcolor2);
}


.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:rgba(255,255,255,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}#carousel{display:none;flex-direction:column;height:320px}@media (min-width:768px){#carousel{display:block;height:320px}#carousel::after{content:'flickity';display:none}}#carousel-mobile{display:block}@media (min-width:768px){#carousel-mobile{display:none}}.carousel-item{position:relative;display:flex;align-items:center;background-size:cover;justify-content:center;min-height:calc(80px + (100vw*.1))}@media (min-width:768px){.carousel-item{align-items:flex-start;height:320px;width:240px}}.carousel-item::before{background-color:rgba(0,0,0,0);content:'';position:absolute;bottom:0;left:0;right:0;top:0;transition:.5s background-color}.carousel-logo{transform:translateY(0);transition:.5s transform}@media (min-width:768px){.carousel-logo{transform:translateY(25px)}}.carousel-title{font-size:24px}@media (min-width:1200px){.carousel-title{line-height:24px}}


.modal-default{
	background-color: blue!important;
}


.avatar {
border-radius: 50% !important;

}

button.link { background:none; border:none; }
.popover {
    white-space: pre-wrap;    
}

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

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
	width: 90%;

  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
	top: 100%;
  left: 5%;
  right: 0;
}
.autocomplete-items div {
  padding: 4px;
  cursor: pointer;
  background-color: var(--backcolor2);
  border-bottom: 1px solid #d4d4d4;


}

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

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



.scrollable-container {
	max-height: 70vh; 
	overflow: auto; 
	display: inline-block; 
	

}
.scrollable-table-wrapper {

	padding-right: 23px; 
	position: relative;
	
    
}


.scrollable-table {
	width: 1%;
	border: 0;
	white-space: nowrap;
	border-collapse: collapse;
}



thead.goldfix {
	position: sticky; /* Make the table header sticky */
	top: 0; /* Position the header at the top */
	background-color: var(--gold) !important; /* Apply the provided background color */
	color: black !important; /* Apply the provided text color */
	font-weight: bold !important; /* Apply the provided font weight */
	z-index: 1; /* Ensure the header appears above the scrollable content */
}


.scroll-arrows {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -30px;
	z-index: 2;
}

.scroll-arrow-up,
.scroll-arrow-down {
	width: 40px;
	height: 40px;
	background-color: var(--gold);
	color: white;
	text-align: center;
	line-height: 40px;
	font-size: 24px;
	border-radius: 50%;
	cursor: pointer;
}

.scroll-arrow-up {
	margin-bottom: 10px;
}





/* 4b4f53 */
p {
	font-size: 16px;
	line-height: 24px;
	font-family: Arial, sans-serif;
}
body {background-color: var(--backcolor) !important;}
div.jumbotron {background-color: var(--backcolor) !important;}
body {color: var(--textcolor) !important;}

form.form-control {background-color: var(--hovercolor)}

input[type=text],input[type=number],input[type=date], input[type=time], input[type=textarea] {
  background-color: var(--hovercolor);
	color:white!important;
}
select{background-color: var(--hovercolor)!important;color:white!important;}
textarea{background-color: var(--hovercolor)!important;color:white!important;}

h1 {
	font-size: 32px;
	line-height: 64px;
	color:white;
}
h2 {
	font-size: 25px;
	line-height: 44px;
	color: var(--textcolor)
}

.navbar-dark{
	background-color:#303336 !important;
}
input.raidinput {color:black !important;}
input:focus, input:read-only  {background-color:  var(--hovercolor) !important;}
tr.canceled{background-color: var(--red) !important;color: black !important;}
tr.backup{background-color: var(--backupcolor) !important;color: black !important;}
tr.green{background-color: var(--green) !important;color: black !important;}
tr.blue{background-color: var(--blue) !important;color: black !important;}

thead.finished{background-color: var(--green) !important;color: black !important;}
thead.canceled{background-color: var(--red) !important;color: black !important;}
thead.gold{background-color: var(--gold) !important;color: black !important; font-weight: bold !important;}



button.btn-info{background-color: var(--blue) !important}
a.btn-info{background-color: var(--blue) !important}


button.btn-secondary2{background-color: var(--blue) !important}
button.btn-danger{background-color: var(--red) !important}

th.green{background-color: var(--green) !important;color: black !important;}
th.blue{background-color: var(--blue) !important;color: black !important;}
th.orange{background-color: var(--orange) !important;color: black !important;}

td.orange{background-color: var(--orange) !important;color: black !important;}
td.green{background-color: var(--green) !important;color: black !important;}
a.white{color:white !important;}

b.green1{color: var(--green2) !important;}
th.greentxt{color: var(--green2) !important;}
th.redtxt{color:  var(--crimson) !important;}

th.gap{background-color: var(--backcolor)!important; border:none;}

.rowwhite {
	background-color: white;
}
.avatars32 {width: 32px;height: 32px;
}
table{
    border:5px  !important;

  }
a:hover {
	text-decoration: underline;
	background-color: gray;
}

.blue {
	color: blue;
}
.contsemi {
       max-width:90%;
}

.green {
	background-color: lime;
}
#navfront2{
	background-color:var(--nthrowfirstpage);
}
.display-4 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
}


.btn-group-xs > .btn, .btn-xs {
  padding: .33rem .4rem;
  font-size: .875rem;
  line-height: .75;
  border-radius: 0.1rem;
	border-width: 2px;
}

.btn-xl{
	padding: 0.4rem 3rem;
  font-size: 23px;
  line-height: 1.75;
	font-weight: 600;
	color: white;

}


.thumbnail {
  position: relative;
  width: 330px;
  height: 200px;
  overflow: hidden;
}


.slider-txt {
	font-size: 20px;
	line-height: 20px;
	font-weight: 700;
	text-align: center;

	font-family: Helvetica,sans-serif,Arial !important;
}
.title1 {
	font-size: 160px;
	line-height: 180px;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.02em;
	font-family: Helvetica,sans-serif,Arial !important;
}
.subtitle1 {
	font-size: 27px;
	line-height: 64px;
	color: var(--textcolor);
	text-align: center;
	font-family: Helvetica,Arial,sans-serif !important;
}
.tile1 {
	font-size: 27px;
	line-height: 50px;
	color: var(--textcolor);
	text-align: left;
	font-family: Helvetica,Arial,sans-serif !important;
}
.tile2 {
	font-size: 18px;
	line-height: 18px;
	color: var(--textcolor);
	text-align: left;
	font-family: Helvetica,Arial,sans-serif !important;
}
.tile3 {
	font-size: 14px;
	line-height: 17px;
	color: var(--textcolor);
	text-align: left;
	font-family: Helvetica,Arial,sans-serif !important;
}
@media (max-width: 1000px) {
  .title1 {
    font-size: 16vw;
		line-height: 16vw;
  }
	.subtitle1 {
		font-size: 20px;
	}
}
.title12 {
	font-size: 8vw;
	line-height: 8vw;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.02em;
	font-family: Helvetica,Arial,sans-serif !important;
}

.p1 {
	font-size: 18px;
	line-height: 18px;
	color: var(--textcolor);
	text-align: center;
	font-family: Helvetica,Arial,sans-serif !important;
}
.p2 {
	font-size: 14px;
	line-height: 14px;
	color: var(--textcolor);
	text-align: center;
	font-family: Helvetica,Arial,sans-serif !important;
}

.title2 {
	font-size: 18px;
	color: green;
	line-height: 24px;
}
.txtpor {
	font-size: 16px;
	line-height: 24px;
	font-family: Georgia, serif;
}

.naslov0 {
	font-size: 36px;
	color: green;
	line-height: 44px;
}
table {
  border-collapse: collapse;
  width: 100%;
	min-width: 0px;
	border: 1px;



}

::placeholder {color: var(--placeholdercolor)!important;}

td {

	margin: auto;
	max-width: 25%;
	min-width: 10%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;



}
th {

text align: right;
margin: auto;
min-width: 50px;
font-weight: normal;
 border: 1px solid var(--bordercolor);



}

th.headerbold{
	font-weight: bold;
}
th.headerboldhover{
	font-weight: bold;
	max-width: 395px;
	min-width: 15%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
 border: 1px solid var(--bordercolor);
}
td.noborder {
 background-color: var(---backcolor);

}
.jumbotron{

/*background-color:#222 !important;*/
}
td.slim {
	max-width: 195px;
	min-width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;
	 border: 1px solid var(--bordercolor);
}
td.slim3 {

	max-width: 40%;
	min-width: 40%;



}
td.slim2 {

	max-width: 15%;
	min-width: 15%;



}
td.hover {
	max-width: 0;
	min-width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;
 border: 1px solid var(--bordercolor);

}
td.hover2 {
	max-width: 295px;
	min-width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;
 border: 1px solid var(--bordercolor);
}
td.hover3 {
	max-width: 195px;
	min-width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;
 border: 1px solid var(--bordercolor);

}
td.hover4 {
	max-width: 195px;
	min-width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;
 border: 1px solid var(--bordercolor);

}
td.hover5 {
	max-width: 70px;
	min-width: 8%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;


 border: 1px solid var(--bordercolor);

}
td.hover6 {
	max-width: 395px;
	min-width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	font-weight: normal;
 border: 1px solid var(--bordercolor);

}
 table.test{
	 width:1%;
    white-space:nowrap;
		margin-left: auto;
margin-right: auto;



 }

 table.test4{
	width:1%;
   white-space:nowrap;




}
 table.test3{
	max-width:1%;
		white-space:nowrap;
	 margin-left: auto;
margin-right: auto;


 }
 table.test2{
	width:1%;
		white-space:nowrap;
	 margin-left: auto;
margin-right: auto;
font-weight: bold;
 }

 thead.boldorange{
	 background-color: orange;
	 font-weight: bold;

 }

.button-container form,
.button-container form div {
    display: inline;

}

.button-container button {
    display: inline;
    vertical-align: middle;
}

tr.greenbg {
	background-color: lightgreen;
}

tr:nth-child(even) {background-color: var(--nthcolor);}
tr:hover {background-color:var(--hovercolor);;}

td.green {
		background-color: lightgreen
}