@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;}
body{font-family:"Exo",sans-serif;background-color: #fafafa; font-size: 13px;}
button{font-family:"Exo",sans-serif;}
.fontawesome{font-family:"Exo",FontAwesome;}

/*HEADER CONTENT*/
.header{display:flex;background-color:#313131;height:70px;}
.header-content {display: flex;width: 98%;height: 100%;margin: auto;}
.branding {cursor: pointer;display: flex;align-items: center;}
.branding h1 {color: white;letter-spacing: 5px;text-transform: uppercase;font-weight: 600;font-size: 20px;}
.logo {width: 35px;margin-right: 15px;}

/*HEADER NAV*/
.header-nav {width: 100%;display: flex;}
.header-nav nav {width: 100%;display: flex;align-items: center;}
.header-nav ul {width: 100%;display: flex;justify-content: flex-end;align-items: center;}
.header-nav li {padding: 0 20px 0 20px;color: white;font-size: 15px;cursor:pointer}
.header-nav li a {color: white;font-size: 15px;}
.header-nav li:hover {color: rgb(182, 182, 182);}
.header-nav li a:hover {color: rgb(182, 182, 182);}
.header-nav li div {color: white;font-size: 15px;cursor: pointer;}
.header-nav li div:hover {color: rgb(182, 182, 182);}
.header-nav i {padding-right: 10px;}
.vyber_firma {position: relative;}
.vyber_firma ul li ul {z-index: 500;border-radius: 3px;border: 1px solid rgb(187, 187, 187);margin-top: 12px;display: block;flex-direction: column;position: absolute;background-color: white;right: 27px;visibility: hidden;}
.vyber_firma ul li ul li {border-bottom: 1px solid rgb(223, 223, 223);padding: 0 0 0 0;}
.vyber_firma ul li ul li:hover {background: rgb(235, 235, 235);}
.vyber_firma ul li ul li a {width: 100%;padding: 10px;display: flex;color: black;}
.vyber_firma ul li ul li a:hover {color: black;}
.caret_down {margin-left: 20px;}
.only_mobil {display: none;}
.odhlasit-btn {cursor: pointer;outline: none;margin-left: 20px;background-color: transparent;font-size: 15px;border-radius: 4px;border: 1px solid white;padding: 5px 10px;color: white;}
.odhlasit-btn:hover {background-color: white;border: 1px solid white;color: black;}
.odhlasit-btn i {padding: 0 0 0 0;}

.sort-highlight {border: 1px solid blue;font-weight: bold;font-size: 45px;background-color: #333333;height: 40px;}
.stock li{/*border: 1px solid black;*/cursor: pointer;}
.stock ul{/*border: 1px solid red;*/padding: 3px; /*min-height: 30px;*/}

/*tabs*/
.tab {overflow: hidden;border: 1px solid #ccc;background-color: #f1f1f1;}
.tab .tablinks {background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;}
.tab .tablinks:hover {background-color: #ddd;}
.tab .tablinks.active {background-color: #ccc;}
.tabcontent {display: none;padding: 6px 12px;border: 1px solid #ccc;border-top: none;}
.tabcontent {animation: fadeEffect 1s;}
.defaulttab {display:block;}
@keyframes fadeEffect {from {opacity: 0;}to {opacity: 1;}}

#sidebar {z-index: 5000;height: 100%;position: fixed;bottom: 0;left: 0;top: 70px;background-color: #414141;width: 60px;border-top: 10px solid #313131;transition: width 200ms;}
.sidebar {margin-top: 45px;height: 100%;display: flex;flex-direction: column;}
.sidebar ul {display: flex;flex-direction: column;height: 80%;align-items: center;}
.sidebar li {align-items: center;height: 100%;width: 100%;display: flex;}
.sidebar li:hover {background-color: rgb(47, 47, 47);}
.sidebar a {color: rgb(146, 146, 146);}
.sidebar a:hover {color: white;}
.sidebar i {font-size: 27px;}
.sidebar-text {line-height: 30px;left: -100px;opacity: 0;position: absolute;font-size: 16px;transition: 100ms;transition-delay: 50ms;}
.toggle-btn {cursor: pointer;position: absolute;left: 0;top: 0;padding: 10px 15px;}
.toggle-btn span {display: block;width: 30px;height: 3px;background-color: white;margin: 4px 0;}
#sidebar.active {width: 180px;}
#sidebar.active .sidebar-text {opacity: 1;left: 60px;}
.ikonka {display: inline-block;width: 60px;text-align: center;}
.modal-content{border:none; background-color: transparent;}

.error-input{border: 2px solid red !important;}


/*NAVBAR CONTENT*/
.navbar-sys {display: flex;margin-left: 60px;height: 57px;border-bottom: 1px solid rgb(211, 211, 211);}
.navbar-sys ul {display: flex;width: 100%;background-color: white;align-items: center;margin-bottom: 0px;}
.navbar-sys ul li {display: flex;width: 100%;height: 100%;justify-content: space-around;align-items: center;border-right: 1px solid rgb(211, 211, 211);}
.navbar-sys ul li:hover {background-color: rgb(241, 241, 241);text-decoration: none;}
.navbar-sys li a {color: black;width: 100%;height: 100%;text-align: center;line-height: 57px;}
.navbar-sys li a :hover{text-decoration: none;}
.navbar-sys i {margin-right: 5px;}

/* MAIN CONTENT */
.uvod-box {background-color: white;width: 500px;height: 500px;position: absolute;top: 500px;left: 50%;transform: translate(-50%, -50%);border-radius: 4px;text-align: center;}
.uvod-content {margin: 30px auto;width: 80%;}
.uvod-content button {cursor: pointer;width: 60%;height: 40px;border: 1px solid transparent;border-radius: 4px;background-color: #313131;color: white;font-size: 15px;text-transform: uppercase;letter-spacing: 4px;margin-top: 30px;}
.uvod-content button:hover {border: 1px solid #313131;background-color: white;color: black;}
.uvod-logo h1 {text-transform: uppercase;font-weight: 400;font-size: 35px;letter-spacing: 7px;}
.uvod-content p {margin-top: 50px;font-size: 16px;}
.uvod-content a {font-size: 16px;font-weight: 600;}

/*LOGIN*/
.main-content {z-index: 0;width: 100%;height: 100vh;padding-left:70px;}
.login-box {background-color: white;width: 500px;height: 550px;position: absolute;top: 383px;left: 50%;transform: translate(-50%, -50%);border-radius: 4px;overflow: hidden;}
.user-icon {text-align: center;margin: 20px 0 20px 0;}
.user-icon i {color: #313131;font-size: 100px;}
.login-nadpis {width: 50%;margin: auto;height: 35px;background-color: #313131;position: relative;top: 0px;}
.login-nadpis h1 {line-height: 35px;text-align: center;color: white;font-size: 18px;text-transform: uppercase;font-weight: 400;letter-spacing: 5px;	padding:0px;}
.login-form {width: 95%;margin: auto;text-align: center;}
.login-form p {color: black;font-size: 14px;margin-bottom: 15px;}
.login-form input {outline: none;width: 60% !important;background-color: #e2e2e2;margin-bottom: 15px;padding: 15px 10px 15px 10px;border: none;border-radius: 3px;}
.lost-password {width: 60%;margin: -10px auto;}
.lost-password p,.lost-password a {color: black;text-align: end;font-size: 13px;}
.lost-passowrd p:hover,.lost-passowrd a:hover {text-decoration: underline;}
.login-form button {cursor: pointer;width: 60%;height: 40px;border: 1px solid transparent;border-radius: 4px;background-color: #313131;color: white;font-size: 15px;text-transform: uppercase;letter-spacing: 4px;margin-top: 0px;}
.login-form button:hover {border: 1px solid #313131;background-color: white;color: black;}
.login_here {border-top: 1px solid rgb(221, 221, 221);padding: 20px 0;width: 60%;margin: 25px auto;}
.login_here p {font-size: 14;}
.login_here a {color: black;font-size: 14px;font-weight: 600;}

/*tabulka*/
.container-table {width: 100%;height: 70vh;margin: auto;margin-top: 20px;border-radius: 7px; max-width:1350px;}
.container-table-wrap {width: 100%;height: 100%;border-radius: 7px;}
.table-header {width: 100%;height: 37px;border-top-left-radius: 7px;border-top-right-radius: 7px;background-color: #313131;display: flex;/*justify-content: space-between;*/align-items: center;	position: relative}
.header-btn{position: absolute; right:0px;}
.table-header-name {display: flex;align-items: center;padding-left: 15px;}
.table-header-name span {color: white;font-weight: 400;font-size: 14px;}
.table-header-name img {margin-right: 5px;width: 20px;}
.table-header-btn {padding-right: 15px;float: left;}
.table-header-btn button {outline: none;cursor: pointer;padding: 3px 15px !important;border-radius: 7px;font-weight: 500;font-size: 13px;border: 1px solid transparent;transition: 350ms;background-color: #FFFFFF !important;	text-shadow: none !important;opacity: 1;line-height: 25px;}
.table-header-btn button:hover {background-color: #3f3f3f !important;border: 1px solid white !important;color: white !important;}
.table-content {background-color: white;width: 100%;height: auto;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px;padding:10px;}
table,td {text-align: center;border-collapse: collapse;font-family: "Exo", sans-serif;}
th,td {padding: 5px;}
td {border: 1px solid #f0f0f0;}
th {background-color: #414141;border: #414141;color: white;font-size: 15px;font-weight: 400;}
.fotka_tovar {width: 10%;}
.fotka_tovar img {height: 70px;}
.nazov_tovar {width: 15%;font-weight: 600;}
.popis_tovar {width: 40%;}
.cena_tovar {width: 10%;}
.cena2_tovar {width: 10%;}
.sklad_tovar {width: 5%;}
.delete_tovar {font-size: 20px;border-right: none;}
.edit_tovar {font-size: 20px;border-left: none;}
.delete_tovar a,.edit_tovar a {color: #414141;}
.delete_tovar a:hover,.edit_tovar a:hover {color: black;}

/*LOST PASSWORD*/
/*FIRMY*/
section {margin: auto;width: 90%;height: 70vh;}
.box {margin-top: 80px;width: 100%;height: 100%;}
.firmy-wrap {margin: auto;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: 70%;height: 100%;}
.firma-box-content {position: relative;height: 210px;display: flex;justify-content: center;padding: 15px;}
.firma-box {display: flex;justify-content: center;align-items: center;border-radius: 150px;width: 170px;height: 170px;background-color: white;transition: all 400ms ease;}
.firma-box:hover {background-color: #313131;}
.firma-icon {display: flex;}
.firma-icon i {font-size: 50px;color: #313131;transition: all 400ms ease;}
.firma-box:hover .firma-icon i {color: white;}
.firma-nazov {position: absolute;display: flex;bottom: 0;}
.firma-nazov h1 {color: #313131;font-weight: 600;font-size: 18px;padding: 0;}

/*pridat tovar formular*/
.wrap {padding: 20px;}
.tovar_text {margin-bottom: 30px;}
.tovar_text p {font-size: 16px;font-weight: 500;}
.form input,.form textarea, .form select {background-color: #ececec;outline: none;border: none;border-radius: 5px;resize: none;padding-left: 10px;}
.form label {font-size: 15px;}
.form textarea {padding-top: 10px;}
.form input:not([type='checkbox']):not([type='radio']) , .form select{height: 35px; width:100%}
.nazov_tovar_input {display: flex;flex-direction: column;margin-bottom: 10px;margin-top: 10px;}
.popis_tovar_input {display: flex;flex-direction: column;}
.cenadph_tovar_input {width: 100%;display: flex;flex-direction: column;margin-bottom: 10px;margin-top: 10px;margin-right: 10px;}
.cenabezdph_tovar_input {width: 100%;display: flex;flex-direction: column;margin-bottom: 10px;margin-top: 10px;margin-right: 10px;}
.sklad_tovar_input {width: 100%;display: flex;flex-direction: column;margin-bottom: 10px;margin-top: 10px;}
.cenadph_tovar_input input,.cenabezdph_tovar_input input,.sklad_tovar_input input {width: 100%;display: flex;}
.tovar_row {width: 100%;display: flex;flex-direction: row;}
.pridat_tovar_upload {border-radius: 5px;margin-top: 20px;background-color: #fcfcfc;border: 1px solid #f5f5f5;width: 100%;min-height: 202px;align-items: center;justify-content: center;flex-direction: column; overflow: auto;}
.pridat_tovar_upload i {font-size: 16px;color: #ddd;}
.pridat_tovar_upload button {display: block; cursor: pointer;background-color: #3f3f3f;border: none;outline: none;color: white; padding: 6px 15px;border-radius: 5px;margin-top: 10px;border: 1px solid transparent;}
.pridat_tovar_upload button:hover {border: 1px solid #3f3f3f;background-color: white;color: black;}
.pridat_tovar_upload span {margin-top: 5px;font-size: 14px;color: black;display: block;max-width: 130px;overflow: hidden;white-space: nowrap;}
#pridat_tovar_upload div{padding: 12px; border: 1px dashed #cecece; margin: 6px;}
#pridat_tovar_upload div:first-child{padding: 12px; border: 1px dashed #FF0004; margin: 6px;}

.btn-dark-flex {display: flex;justify-content: flex-end;}
.btndark {font-size: 15px;cursor: pointer;background-color: #3f3f3f;border: none;outline: none;color: white;padding: 7px 25px;border-radius: 5px;margin-top: 15px;border: 1px solid transparent;}
.btndark:hover {border: 1px solid #3f3f3f;background-color: white;color: black;}
.overflow-auto{overflow:auto}
.error-toltip{position: absolute;height: 22px;display: none;border: 1px solid red;z-index: 100000;top: 8px;background-color: #424242;left: 110px;color: white;border-radius: 3px;line-height: 11px;padding: 4px;font-size:12px;}
.hl_nad{Background-color: #313131;color: white;text-align: center;padding:5px;}

/*add invoice*/
.inv-row{padding: 5px;}
.inv-col{margin-right:5px;}
.col-code{width:160px;}
.col-name{width:480px;}
.col-unit{width:100px}
.col-quantity{width:100px;}
.col-price{width:100px;}
.col-count{width:100px;}
.col-tax{width:75px;}
.invoice .hl_nad{font-size: 14px;}

/*FORM*/
input:not([type='checkbox']):not([type='radio']){height: 35px; width:100%}
.minus-form{padding: 5px 7px; margin:0;}
.minus-bank{padding: 5px 7px; margin:23px 0 0 0;width: 20px;}
.sort-form{cursor:pointer;line-height:34px;}
.input-group input{width: auto !important;}
.input-group-text{border: none; background-color: #d7d7d7; color: #000; cursor:pointer}
.input-group-text:hover{background-color: #BCBCBC; }
.select-client, .select-item{cursor:pointer; padding: 10px;}
.select-client:hover, .select-item:hover{cursor:pointer; color: red;background-color: #e3e3e3}
.nasepkaj{position: absolute; z-index: 1000; width:100%; background-color: #fff; max-height: 250px; overflow-y: auto; overflow-x: hidden; border:1px solid #e3e3e3; visibility: hidden;top:35px;box-sizing: border-box;}
.nasepkaj_r{position: absolute; z-index: 1000; width:400px; background-color: #fff; max-height: 250px; overflow-y: auto; overflow-x: hidden; border:1px solid #e3e3e3; visibility: hidden;top:40px;left:20px;box-sizing: border-box;}
.doc-client-opt{position: absolute;right: 0px;}
.custom-edit-client{position:absolute; right:30px;cursor:pointer}
.custom-edit-client:hover{position:absolute; right:30px; color:blue;}
.custom-remove-client{cursor:pointer}
.custom-remove-client:hover{color:red;}

.dd-list {display: block;position: relative;margin: 0;padding: 0;list-style: none;}
.dd-item, .dd-empty, .dd-placeholder {display: block;position: relative;margin: 0;padding: 0;min-height: 20px;font-size: 13px;line-height: 20px;}
.dd-handle {position: absolute;margin: 0px !important;display: block;margin: 5px 0;padding: 5px 10px;color: #333;text-decoration: none;border: 1px solid #e7eaec;background: #f5f5f5;-webkit-border-radius: 3px;border-radius: 3px;box-sizing: border-box;-moz-box-sizing: border-box;}
.dd2-item {cursor: default;padding: 5px 40px;margin: 5px 0px;display: block;color: #333;text-decoration: none;border: 1px solid #e7eaec;background: #f5f5f5;-webkit-border-radius: 3px;border-radius: 3px;box-sizing: border-box;-moz-box-sizing: border-box;}


/*RESPONSIVE*/
@media only screen and (max-width: 550px) 
{
	.branding h1 {display: none !important;;}
	.navbar-text{display: none !important;}
	.header-nav li {padding: 0 5px 0 5px;}
	.responsive-hidden{display: none !important;;}
	.modal-form {padding: 50px 10px !important;}
}
@media only screen and (max-width: 820px) {
	.navbar-sys {z-index: 50;position: relative;margin-left: 0;}
	.main-content{padding-left:0px;}
	.container-table{margin-top:40px;}
	.navbar-sys-text {display: none;}
	.navbar-sys i {font-size: 22px;margin-right: 0px;}
	.header-nav i {font-size: 25px;}
	#sidebar {width: 0px;}
	#sidebar.active {width: 60px;}
	#sidebar.active .sidebar-text {display: none;}
	#sidebar.active .ikonka {position: absolute;left: 0px;}
	.sidebar-text {display: none;}
	.ikonka {position: absolute;left: -50px;transition: 200ms;}
	.toggle-btn {cursor: pointer;position: relative;left: 0;top: 50px;padding: 10px 15px;transition: 200ms;}
	.toggle-btn span {display: block;width: 30px;height: 3px;background-color: black;margin: 4px 0;}
	#sidebar.active .toggle-btn {cursor: pointer;position: absolute;left: 60px;top: 50px;padding: 10px 15px;}
	.login-box {top: 430px;width: 90%;}
	.login-form {width: 99%;}
	.login-form input {width: 90%;height: 50px;margin-bottom: 10px;}
	.login-nadpis {width: 80%;margin: auto;}
	.lost-password {width: 90%;margin-top: 0;}
	.lost-password a, .lost-password p {font-size: 16px;}
	.login-form button {width: 90%;margin-top: 30px;}
	.login_here {width: 90%;margin: 25px auto;}
	.login_here p {font-size: 17px;}
	.login_here a {font-size: 17px;font-weight: 600;}
	.uvod-box {top: 430px;width: 90%;}
	.uvod-box button {width: 90%;}
	.uvod-logo img {width: 30%;}
	.uvod-logo h1 {letter-spacing: 3px;font-size: 30px;}
	.vyber_firma ul li ul {width: 100%;}
	.only_mobil {display: block;}
}

@media only screen and (max-width: 1070px) {
	.col-code{width:175px;}
	.col-name{width:375px;}
	.col-unit{width:50px}
	.col-quantity{width:50px;}
	.col-price{width:75px;}
	.col-tax{width:25px;}
	.inv-row{padding: 5px; width:950px}
	.inv-col{margin-right:5px;}
	.inv-col input{padding: 2px; height: 30px; font-size: 13px;}
	.invoice .hl_nad{font-size: 12px; width:950px}
}

@media only screen and (max-width: 1500px) {
	.col-name{width:430px;}
	.col-unit{width:90px}
	.col-quantity{width:90px;}
	.col-price{width:90px;}
	.col-tax{width:60px;}
}

@media only screen and (max-width: 1350px) {
	.col-name{width:400px;}
	.col-unit{width:80px}
	.col-quantity{width:80px;}
	.col-price{width:80px;}
	.col-tax{width:60px;}
}

@media only screen and (max-width: 1300px) {
	.col-code{width:175px;}
	.col-name{width:450px;}
	.col-unit{width:50px}
	.col-quantity{width:50px;}
	.col-price{width:75px;}
	.col-tax{width:40px;}
	.inv-row{padding: 5px; width:1050px}
	.inv-col{margin-right:5px;}
	.inv-col input{padding: 2px; height: 30px; font-size: 13px;}
	.invoice .hl_nad{font-size: 12px; width:1050px}
}

@media only screen and (max-width: 630px) {
    .firmy-wrap {width: 90%;justify-content: center;}
    .firma-box-content {margin-top: 50px;}
}

@media (min-width: 576px){
    .modal-dialog{max-width:1350px;}
}