/*
    Svijetlo siva: #eaebeb
    Tamno siva: #cdcfd0
    Svijetlo crvena: #e30046
    Tamno crvena: #b10e35
    Tamno crvena 2: #bd0a39

    Text tamno siva: #96999d
    Text tamno crvena: #b00e35
    Text tamno plava: #002f3b
*/

:root {
    --light-gray:#eaebeb;
    --dark-gray:#cdcfd0;
    --dark-gray-2:#636462;
    --light-red:#e30046;
    --dark-red-1:#b10e35;
    --dark-red-2:#bd0a39;
    --dark-gray-text:#96999d;
    --dark-red-text:#b00e35;
    --dark-blue-text:#002f3b;
}

.b-0{
	border: 0 !important;
}

.p-0{
	padding: 0 !important;
}

.m-0{
	margin: 0 !important;
}

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    color: black;
    background: #ffffff;
	height: 100%;
	width: 100%;
}

#logo-image{
    height: 60px;
}

.navbar {
    margin: 4px 0 4px 0;
}

.navbar-knaput {
    background-color: var(--light-gray);
    border-color: var(--dark-gray);
}

.navbar-knaput a  {
    color: black;
}

.navbar-knaput a:hover {
    color: var(--dark-gray-text);
}

.navbar-knaput .active>a:hover {
    background-color: var(--dark-gray);
    color: black;
}

.navbar-knaput .active {
    background-color: var(--dark-gray);
}

.navbar-knaput .dropdown-menu>li>a {
    padding: 10px 20px 10px 15px;
}

.navbar-knaput .dropdown-menu>.active>a {
    background-color: var(--dark-gray);
    color: black;
}

.navbar-knaput .dropdown-menu>li>a:hover {
    color: black;
}

.navbar-knaput .nav .open > a {
    background-color: var(--dark-gray);
    border: 0;
}

.navbar-btn {
    margin: 8px 0 8px 0 !important;
}

@media (max-width: 768px){
    .navbar{
        margin: 10px 0 5px 0;
    }
    .navbar-text{
        padding: 0 15px 0 15px;
    }
    .navbar-btn {
        margin: 0 15px 0 15px !important;
    }
}

.page-header {
    padding: 10px 0 10px 0;
    margin: 0 0 14px 0 !important;
}

.panel-knaput {
    border-color: var(--dark-gray);
}

.panel-knaput > .panel-heading {
    color: black;
    background-color: var(--light-gray);
    border-color: var(--dark-gray);
}

.panel-knaput .form-control {
    padding: 10px 12px;
    border-color: var(--dark-gray-2);
    color:black;
}

.panel-knaput .form-control:focus {
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 3px rgb(227 0 70 / 60%);
}

.panel-knaput .form-control:disabled {
    background-color: var(--dark-gray);
}

.panel-knaput .input-group-addon {
    color: black;
    border-color: var(--dark-gray-2);
    background-color: var(--light-gray);
}

.panel-body form {
    margin: 0;
}

.panel-body .btn {
    margin: 0;
}

#main{
	min-height: 100vh;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

tr .vertical-line {
    border-right: 5px solid #fff;
}

tbody.selectable tr:hover{
	background-color: #e6e7e8;
	color: #414042;
}

.form-group:last-child{
	margin: 0;
}

.main, .header-container {
	width: 100%;
	min-height: 64px;
	display: flex;
    align-items: center;
    justify-content: space-around;
}

.header-container select {
	color: #606266;
	padding: 5px;
}
@media (min-width:1000px){
	.header-container select {
		margin-left: auto;
	}
}

.login-form {
    width: 25%;
	min-width: 300px;
    text-align: center;
    border: 2px solid #e6e7e8;
	margin: 0 auto;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	border-radius: 4px;
}
@media (min-width:2000px){
    .login-form {
        width: 20%;
    }
}

.login-form h2 {
	margin: 0;
}
@media (min-width:1000px){
    .login-form h2 {
        margin: 0 auto;
        line-height: 70px;
    }
}
@media (min-width:1420px){
	.login-form h2 {
		margin: 0 auto;
        line-height: 138px;
	}
}

.login-form form {
    color: #7a7a7a;
    border-radius: 0 0 3px 3px;
    background: var(--dark-gray);
    padding: 30px;
    margin: 0;
}

.login-form .btn {
    font-size: 16px;
    font-weight: bold;
    outline: none !important;
}

.login-form a {
    color: #fff;
    text-decoration: underline;
}

.login-form a:hover {
    text-decoration: none;
}

.login-form form a {
    color: #7a7a7a;
    text-decoration: none;
}

.login-form form a:hover {
    text-decoration: underline;
}

.login-form img {
    width: 130px;
    padding: 5px 0 5px 0;
}

.login-form .form-control {
    background-color: white;
}

.login-form .form-control {
    height: 30px;
    min-height: 41px;
    background: #f2f2f2;
    box-shadow: none !important;
    border: transparent;
}

#submit {
    margin: 0 auto;
}

.form-header {
    width: 100%;
    background: white;
    margin: 0;
    color: #171b18;
	border-radius: 2px 2px 0 0;
    border-bottom: 5px solid #e50046;
}

.btn {
    background-color: var(--light-red);
    border: 1px solid var(--light-red);
    color: white;
    border-radius: 3px;
    margin: 5px 0;
}

.btn:hover {
	background-color: var(--dark-red-2);
	border: 1px solid var(--light-red);
    color: white;
}

.btn[disabled]:hover, .btn[disabled]:active, .btn[disabled]:focus {
    background-color: var(--light-red);
    border: 1px solid var(--light-red);
    color: white;
}

.btn:focus, .btn:active {
    color:black;
    border-color: var(--dark-gray-2);
    background-color: var(--light-gray);
}

.table .btn {
    margin: 3px 3px 3px 3px;
    width: calc(100% - 5px);
}

.table .btn.download {
    min-width: 22px;
    width: 19%;
    min-height: 22px;
}

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

.table>thead>tr>th, .table>tbody>tr>th {
    background-color: var(--dark-gray);
    color: black;
}

.table>tfoot>tr>th {
    background-color: var(--light-red);
    color: white;
}

.inputRightAlignText {
    direction: rtl;
}

.displayNone {
    display: none;
}

.help-block.files {
    font-weight: bold;
}

.bigtable {
    margin: 0 !important;
}

.table .error {
    color: white;
    font-weight: bold;
    background-color: var(--light-red);
}

.table .warning {
    color: var(--light-red);
    font-weight: bold;
    background-color: white !important;
}

.table .manual {
    font-weight: bold;
}

.table tr:hover {
    background-color: var(--light-gray);
}

.vertical-middle {
    vertical-align: middle !important;
}

.ui-autocomplete {
    font-size: 12px;
}