@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

/* CSS Document */

:root {
  --font-family: 'Figtree',sans-serif;
  --font-family-2: 'Space Grotesk', sans-serif;
  --color-black: #000;
  --color-white: #fff;
  --color-dark: #262626;
  --color-darker: #6F6F6F;
  --color-light: #F5F5F7;
  --color-dark-text: #000;
  --color-light-text: #fff;
  --color-one: #0184f6;
  --color-one-hover: #2DBA4C;	
  --color-two: #E5EEFF;
  --color-three: #FFE600;
  --text-velikost-1: 30px;
  --text-velikost-2: 25px;
  --text-velikost-3: 18px;
  --text-velikost-4: 14px;
  --text-velikost-5: 11.8px;
  --text-velikost-6: 10px;	
  --text-velikost-7: 21px;
  --text-velikost-8: 16px;
  --text-sirka-1: 200;
  --text-sirka-2: 300;
  --text-sirka-3: 500;	
  --text-sirka-4: 600;
  --text-sirka-5: 700;	
  --global-padding-1: 15px;
  --global-padding-2: 7.5px;
  --global-padding-3: 17px 15px;	
  --global-padding-4: 30px;	
  --global-padding-5: 30px 40px;		
  --container-1: 1440px;
  --container-3: 1700px;
  --container-2: 100%;	
  --border-radius: 60px;
  --size-1: 100%;
  --size-2: 66.6%;		
  --size-3: 50%;
  --size-4: 33.3%;
  --size-5: 25%;
  --size-6: 20%;
  --size-7: 16.66666666666667%;	
  --size-8: 14.28571428571429%;
  --size-9: 12.5%;			
}


*, *::before, *::after { box-sizing: border-box;line-height: 1 }
html {height: 100%; font-family: var(--font-family);-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;line-height: 1;font-size:  var(--text-velikost-1);letter-spacing: -.4px;max-width: 100%;}
body {height: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-tap-highlight-color: transparent;text-rendering: optimizelegibility;text-size-adjust: 100%;background:white;color: rgb(0, 0, 0);cursor: auto;font-size: 15px;font-style: normal;font-weight: 400;margin: 0px;padding: 0px;position: relative;overflow-wrap: break-word;max-width: 100%;}
img {width: 100%;height: auto;}
a {text-decoration: none;color: var(--color-one);cursor: pointer;}
a:hover {text-decoration: underline;color: #333333;}
strikethrough {text-decoration: line-through}
.w-100 {width: var(--size-1);}
.container {width: var(--size-1);margin: 0 auto;max-width: var(--container-1);padding: var(--global-padding-1);}
.container.sirsi {width: var(--size-1);margin: 0 auto;max-width: var(--container-3);padding: var(--global-padding-1);}
.containercely {width: var(--size-1);margin: 0 auto;max-width: var(--container-2);padding: var(--global-padding-1);}
.containercely.hero {padding: 0;padding-bottom: 0px}
.containercely.pc {max-width: 97%}
.containercely.refkylat {padding: 0 1rem}
.justify-start {justify-content:flex-start!important;}
.align-items-stretch {align-items: stretch!important;}
.align-items-start {align-items: start!important;}
.align-items-end {align-items: end!important;}
.black {background: black;color: white; text-align: center;overflow-y: hidden}
.radek {display: flex;justify-content: space-between;align-items: center;width: 100%;flex-wrap: wrap;}
.radek.sgapem {flex-wrap: nowrap;gap: 40px;}
.text-center {text-align:center;}
.cely {display: flex;width: var(--size-1);justify-content: center;align-items: center;flex-wrap: wrap;}
.polovina {display: flex;width: var(--size-3);justify-content: center;align-items: center;flex-wrap: wrap;}
.tretina {display: flex;width: var(--size-4);justify-content: center;align-items: center;flex-wrap: wrap;}
.ctvrtina {display: flex;width: var(--size-5);justify-content: center;align-items: center;flex-wrap: wrap;}
.petina {display: flex;width: var(--size-6);justify-content: center;align-items: center;flex-wrap: wrap;}
.sestina {display: flex;width: var(--size-7);justify-content: center;align-items: center;flex-wrap: wrap;}
.sedmina {display: flex;width: var(--size-8);justify-content: center;align-items: center;flex-wrap: wrap;}
.osmina {display: flex;width: var(--size-9);justify-content: center;align-items: center;flex-wrap: wrap;}
.dvetretiny {display: flex;width: var(--size-2);justify-content: center;align-items: center;flex-wrap: wrap;}
.grid {display: grid;}
.grid-1 {display: grid;grid-template-columns: repeat(1, minmax(250px, 1fr));}
.grid-2 {display: grid;grid-template-columns: repeat(2, minmax(250px, 1fr));}
.grid-3 {display: grid;grid-template-columns: repeat(3, minmax(250px, 1fr));}
.grid-4 {display: grid;grid-template-columns: repeat(4, minmax(250px, 1fr));}
.grid-5 {display: grid;grid-template-columns: repeat(5, minmax(250px, 1fr));}
.grid-6 {display: grid;grid-template-columns: repeat(6, minmax(250px, 1fr));}
.grid-7 {display: grid;grid-template-columns: repeat(7, minmax(250px, 1fr));}
.grid-8 {display: grid;grid-template-columns: repeat(8, minmax(250px, 1fr));}
.grid-9 {display: grid;grid-template-columns: repeat(9, minmax(250px, 1fr));}
.grid-container { overflow: hidden;}
.gap-0 {gap:0px}
.gap-10 {gap:10px}
.gap-20 {gap:20px}
.gap-40 {gap:40px}
input, select { width: -webkit-fill-available; padding: 10px 12px; border-radius: 6px; border: 1px solid #E1E3EA;transition: .4s all;font-size: 14px }
input:hover,input:focus{border: 1px solid #a3d4ff}
.input { display: grid; grid-template-columns: 1fr; padding: 10px 12px; border-radius: 10px; justify-content: flex-start; text-align: left; border: 1px solid #E1E3EA;margin-bottom: 15px; }
.input input {padding: 0; border-radius: 0px; border: 0;transition: .4s all;padding: 10px 0 0;margin-bottom: 0;font-size: 18px;font-weight: 600}
.input label {font-size: 13px}
.input input:hover, .input input:focus,.input input:focus-within,.input input:focus-visible,.input input:active,.input input:-internal-autofill-selected, .input input:-webkit-autofill {outline-offset: 0px;border: 0;background-color: white !important;outline: none}
.input input::placeholder { color: transparent; }
.mb-0 { margin-bottom: 0px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
.mb-45 { margin-bottom: 45px; }
.mb-50 { margin-bottom: 50px; }
.mb-55 { margin-bottom: 55px; }
.mb-60 { margin-bottom: 60px; }
.mb-65 { margin-bottom: 65px; }
.mb-70 { margin-bottom: 70px; }
.mb-75 { margin-bottom: 75px; }
.mb-80 { margin-bottom: 80px; }
.mb-85 { margin-bottom: 85px; }
.mb-90 { margin-bottom: 90px; }
.mb-95 { margin-bottom: 95px; }
.mb-100 { margin-bottom: 100px; }
.mt-0 { margin-top: 0px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-45 { margin-top: 45px; }
.mt-50 { margin-top: 50px; }
.mt-55 { margin-top: 55px; }
.mt-60 { margin-top: 60px; }
.mt-65 { margin-top: 65px; }
.mt-70 { margin-top: 70px; }
.mt-75 { margin-top: 75px; }
.mt-80 { margin-top: 80px; }
.mt-85 { margin-top: 85px; }
.mt-90 { margin-top: 90px; }
.mt-95 { margin-top: 95px; }
.mt-100 { margin-top: 100px; }
.ml-0 { margin-left: 0px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-25 { margin-left: 25px; }
.ml-30 { margin-left: 30px; }
.ml-35 { margin-left: 35px; }
.ml-40 { margin-left: 40px; }
.ml-45 { margin-left: 45px; }
.ml-50 { margin-left: 50px; }
.ml-55 { margin-left: 55px; }
.ml-60 { margin-left: 60px; }
.ml-65 { margin-left: 65px; }
.ml-70 { margin-left: 70px; }
.ml-75 { margin-left: 75px; }
.ml-80 { margin-left: 80px; }
.ml-85 { margin-left: 85px; }
.ml-90 { margin-left: 90px; }
.ml-95 { margin-left: 95px; }
.ml-100 { margin-left: 100px; }
.mr-0 { margin-right: 0px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }
.mr-30 { margin-right: 30px; }
.mr-35 { margin-right: 35px; }
.mr-40 { margin-right: 40px; }
.mr-45 { margin-right: 45px; }
.mr-50 { margin-right: 50px; }
.mr-55 { margin-right: 55px; }
.mr-60 { margin-right: 60px; }
.mr-65 { margin-right: 65px; }
.mr-70 { margin-right: 70px; }
.mr-75 { margin-right: 75px; }
.mr-80 { margin-right: 80px; }
.mr-85 { margin-right: 85px; }
.mr-90 { margin-right: 90px; }
.mr-95 { margin-right: 95px; }
.mr-100 { margin-right: 100px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-50 { padding-top: 50px; }
.pt-55 { padding-top: 55px; }
.pt-60 { padding-top: 60px; }
.pt-65 { padding-top: 65px; }
.pt-70 { padding-top: 70px; }
.pt-75 { padding-top: 75px; }
.pt-80 { padding-top: 80px; }
.pt-85 { padding-top: 85px; }
.pt-90 { padding-top: 90px; }
.pt-95 { padding-top: 95px; }
.pt-100 { padding-top: 100px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
.pb-45 { padding-bottom: 45px; }
.pb-50 { padding-bottom: 50px; }
.pb-55 { padding-bottom: 55px; }
.pb-60 { padding-bottom: 60px; }
.pb-65 { padding-bottom: 65px; }
.pb-70 { padding-bottom: 70px; }
.pb-75 { padding-bottom: 75px; }
.pb-80 { padding-bottom: 80px; }
.pb-85 { padding-bottom: 85px; }
.pb-90 { padding-bottom: 90px; }
.pb-95 { padding-bottom: 95px; }
.pb-100 { padding-bottom: 100px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-25 { padding-left: 25px; }
.pl-30 { padding-left: 30px; }
.pl-35 { padding-left: 35px; }
.pl-40 { padding-left: 40px; }
.pl-45 { padding-left: 45px; }
.pl-50 { padding-left: 50px; }
.pl-55 { padding-left: 55px; }
.pl-60 { padding-left: 60px; }
.pl-65 { padding-left: 65px; }
.pl-70 { padding-left: 70px; }
.pl-75 { padding-left: 75px; }
.pl-80 { padding-left: 80px; }
.pl-85 { padding-left: 85px; }
.pl-90 { padding-left: 90px; }
.pl-95 { padding-left: 95px; }
.pl-100 { padding-left: 100px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 25px; }
.pr-30 { padding-right: 30px; }
.pr-35 { padding-right: 35px; }
.pr-40 { padding-right: 40px; }
.pr-45 { padding-right: 45px; }
.pr-50 { padding-right: 50px; }
.pr-55 { padding-right: 55px; }
.pr-60 { padding-right: 60px; }
.pr-65 { padding-right: 65px; }
.pr-70 { padding-right: 70px; }
.pr-75 { padding-right: 75px; }
.pr-80 { padding-right: 80px; }
.pr-85 { padding-right: 85px; }
.pr-90 { padding-right: 90px; }
.pr-95 { padding-right: 95px; }
.pr-100 { padding-right: 100px; }
.mw-400px {max-width:400px}
h1 {font-family: var(--font-family-2);font-size: 18px;line-height: 1.1}


/* buttons */
.button { background: linear-gradient(45deg, #0184f6, rgb(35, 173, 255)); color: white; border: 3px solid #a1d3ff; cursor: pointer;  transition: .4s all; width: fit-content; padding: 10px 20px; border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; gap: 5px; font-weight: 600; } 
.button:hover { padding:10px 30px; border: 3px solid #a1d3ff; transition: .4s all }


/* prihlaseni */
.prihlaseni { max-height: 100vh; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 100vh; color: black; }
.prihlaseni .levacast { width: 30%; height: 100%; position: relative; background: linear-gradient(45deg, black, #022a4d); }
.prihlaseni .pravacast { padding: 10%; width: 70%; height: 100%; position: relative; display: flex; justify-content: start; align-items: center; text-align: center; font-size: 16px; background: white; }
.prihlaseni .logincontent { max-width: 350px; width: 100%; display: grid; justify-content: start; grid-template-columns: 1fr; align-items: center; gap: 20px; }
.prihlaseni .logincontent .holderloga { margin: 0 auto; max-width: 250px;display: none }
.prihlaseni .logincontent .holderloga img { height: 58px; width: auto; }
.prihlaseni .logincontent .titulek { font-size: 24px; margin: 30px 0; }
.prihlaseni .obrazek { position: relative; height: 100%; width: 100%; z-index: 1; display: flex; justify-content: center; }
.prihlaseni .obrazek img, .prihlaseni .obrazek video { position: relative; width: 100px; height: 100%; }
.prihlaseni .gradient { position: absolute; z-index: 2; left: 0; bottom: 0; height: 40vh; width: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.00) 100%); }
.prihlaseni .obsah { position: absolute; bottom: 0; left: 0; width: 100%; height: fit-content; z-index: 3;padding: 0; }
.prihlaseni .podtext { font-size: 10px; color: #757575; line-height: 1.6;text-align: left; }
.prihlaseni .podtext.vetsi { font-size: 16px; }
.prihlaseni .titulvloginu {text-align: left;font-size: 32px;font-weight: 600;font-family: var(--font-family-2);}
.prihlaseni .hold { padding: 80px; color: white; font-size: 14px; line-height: 1.3;    text-align: center; }
.prihlaseni .res { text-align: left; margin-bottom: -10px; }
.mensititulek { font-size: 22px; }
.button.login { margin: 20px 0; min-width: 150px; }
.button.login:hover {  min-width: 200px; }
#error-messages  {margin-bottom: 10px; text-align: left; font-size: 14px; line-height: 20px; background: #ff5959; padding: 10px; border-radius: 5px; color: white;}
#error-messages.gut { background: green; }
input[type="submit"]:disabled {opacity: 0.4;cursor: not-allowed; }

/* header */
.header { position: fixed; left: 0px; top: 0px; z-index: 10; width: 80px; height: 100vh; background: white; padding: 20px 0;    border-right: 1px solid rgba(33, 35, 39, .07); }
.header .holder {display: grid;justify-content: center;align-items: flex-start}
.header .logo { position: relative; z-index: 2; display: flex; justify-content: center; }
.header .logo img {height:45px;width:100%}
.header .polozka-holder {padding: 5px 0 15px;display: flex; justify-content: center; text-align: center; color: black; gap: 5px; font-size: 10px;    flex-wrap: wrap;border-radius: 15px 0 0 15px;
    position: relative; } 
.header .polozka-holder.active, .header .polozka-holder:hover {background: #f5f8fa;padding: 5px 0 15px}
.header .polozka-holder.active a, .header .polozka-holder:hover a {color: black}
.header .polozka-holder.active::after, .header .polozka-holder:hover::after { content: ''; background: none; height: 2em; width: 2em; position: absolute; bottom: -2em; right: -2px; border-radius: 0 15px 0 0; box-shadow: 0 -16px 0 0 #f5f8fa; }
.header .polozka-holder.active::before, .header .polozka-holder:hover::before { content: ''; background: none; height: 2em; width: 2em; position: absolute; top: -2em; right: -2px; border-radius: 0 0 15px 0; box-shadow: 0 16px 0 0 #f5f8fa; }

.header .polozka-holder .ikona {width: 50px; height: 40px; display: flex; justify-content: center; align-items: center; }
.header .polozka-holder a { line-height: 1.2;color: black;width: 100%}
.menu { display: grid; gap: 5px; margin-top: 10px; }
.polozka-holder.active .fialka,.polozka-holder:hover .fialka {filter: hue-rotate(45deg)!important;}
.polozka-holder.active .zelenka,.polozka-holder:hover .zelenka  {filter: hue-rotate(307deg)!important;}
.polozka-holder.active .oranzovka,.polozka-holder:hover .oranzovka  {filter: hue-rotate(182deg) brightness(1.5)!important;}
.polozka-holder.active .cervenka, .polozka-holder:hover .cervenka  {filter: hue-rotate(157deg)!important;}
.polozka-holder.active .sedivka,.polozka-holder:hover .sedivka{filter: grayscale(1) brightness(1.5)!important;}
.polozka-holder.active .zelena,.polozka-holder:hover .zelena  {filter: hue-rotate(291deg)!important;}
.polozka-holder .ikona img { filter: grayscale(1) brightness(1.3) contrast(0.5); opacity: .5; }
.polozka-holder.active .ikona img, .polozka-holder:hover .ikona img{filter: unset;opacity: 1}
/* obsah */
.obsah { padding: 0px 0 0 80px; position: absolute; top: 0; width: 100%; }
.obsah .vrch h1 {margin:0}
.obsah .vrch {     border-bottom: 1px solid rgba(33, 35, 39, .07);display: flex; gap: 15px; align-items: center; position: relative; background: white; width: 100%; padding: 10px 20px; left: 0; top: 0; }
.searchfield {background:#f4f5f6; width: -webkit-fill-available; padding: 3px 12px; border-radius: 6px; border: 1px solid rgba(33, 35, 39, .07); transition: .4s all; font-size: 14px; display: flex; gap: 5px; justify-content: flex-start; align-items: center; }
.searchfield input {padding:5px 0;border:0;background: unset}
.searchfield:hover {border: 1px solid #97bce8;}
.searchfield input:hover, .searchfield input:focus,.searchfield input:focus-within,.searchfield input:focus-visible,.searchfield input:active,.searchfield input:-internal-autofill-selected, .searchfield input:-webkit-autofill {outline-offset: 0px;border: 0;;outline: none}
.table { display: grid; grid-template-columns: 1fr; }
.table .tableitem {display: flex; padding: 20px 10px; border-bottom: 1px solid rgba(33, 35, 39, .07); background: white; }
.table .tableitem .nazev {font-weight: 600}
.content { margin: 30px 0; width: 100%; padding: 0 20px; }
.table .nazev {display: grid;gap:5px}
.table .klient { font-size: 11px; font-weight: 600; color: #a9b8c2; }

.network .container { display: flex; height: 100%; width: 100%; }
.network .content { display: flex; overflow: visible; flex-flow: column; height: 100%; width: 100%; padding: 0; gap: 16px; }
.network .wrapper { overflow: auto; width: 100%; height: 100%; }

.table-container { height: 100%; overflow: scroll; position: relative; }
.network-table { border-collapse: collapse; border-spacing: 0; font-size: 14px; min-width: 100%; text-align: left; }

.table-head { font-weight: bold; font-size: 14px; color: #212327; user-select: none; }
.table-row { cursor: pointer; transition: background 0.2s; border-bottom: 1px solid rgba(33, 35, 39, .07)}
.table-row:hover { background: rgba(33, 35, 39, 0.02); }

.table-cell { padding: 4px; position: relative; }
.sticky { position: sticky !important; background: #fff; z-index: 1; }
.sticky-last { background: linear-gradient(90deg, rgba(0,0,0,.06), transparent); }

.sortable-cell { display: flex; align-items: center; cursor: pointer; }
.cell-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.status-ball { border-radius: 50%; flex: none; text-align: start; }
.success { background-color: #38cc65; }
.small { height: 6px; width: 6px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }