/**
 ** HTML, BODY
 **/
 * {
    margin: 0;
    padding: 0;
    border: 0;
}
html, body {
    font-family: Segoe UI;
    font-size: 10pt;
    color: hsl(0, 0%, 0%);
    height: 100%;
    width: 100%;
    min-width: 1250px;
    background-color: hsl(0, 0%, 93%);
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background-color: hsl(0, 0%, 95%);
}
::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 53%);
}
::-webkit-scrollbar-thumb:hover {
    background-color: hsl(0, 0%, 33%);
}

/**
 ** LAYOUT WEBU
 **/
header {
    height: 50px;
    color: hsl(0, 0%, 100%);
    background-color: hsl(209, 99%, 29%);
}
nav {
    position: unset;
}
section {
    float: right;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: auto;
}
#content {
    min-height: calc(100% - 60px);
    margin: 0 10px;
}
.fix-table-overflow {
    width: 100%;
    display: table;
}
footer {
    clear: both;
    height: 50px;
    text-align: center;
    font-size: 8pt;
}
.loader {
    margin: auto;
    width: 128px;
    position: fixed; top: 20%; left: 47%;
    animation-name: loader;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: alternate;
}
@keyframes loader {
    0%      {opacity:0;}
    30%     {opacity:0;}
    50%     {opacity:0.5;}
    100%    {opacity:1;}
}

#login-layout, .page-layout, .content-box {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

#login-layout, .page-layout {
    box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
    -moz-box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
    -webkit-box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
}

#login-layout {
    position: fixed;
    margin-left: calc(100% / 2 - 230px);
    margin-top: 70px;
    padding-bottom: 10px;
    width: 400px;
    min-height: 75px;
    background: hsl(0, 0%, 100%);
}

.page-layout {
    padding: 5px;
    margin: 5px;
    background: hsl(0, 0%, 100%);
    border-top: 5px solid hsl(209, 99%, 29%);
}

.content-box {
    float: left;
    width: calc(100% - 2px);
    background-color: hsl(0, 0%, 85%);
}

.content-box .overflow {
    overflow: auto;
    max-height: 306px; /* Úmyslně takto, aby sedělo na řádkování */
    margin: 1px;
}

img.language {
    cursor: pointer;
    display: inline-block;
    margin: 20px;
    width: 130px;
}

/**
 ** NASTAVENÍ HLAVIČKY
 **/
a.header, form.header {
    float: left;
}
div.header {
    border-left: 1px solid hsl(0, 0%, 50%);
    height: 50px;
}
img.header {
    float: left;
    padding: 12px 7px 0 10px;
}
span.header {
    float: right;
    padding: 15px 15px 0 0;
}
div.header:hover {
    color: hsl(0, 0%, 100%);
    background-color: hsl(240, 2%, 19%);
}

/**
 ** NASTAVENÍ INFO MSG, STATUS MSG A BANNERU
 **/
.green, .info-green, .status-green, .banner-green {
    border: 1px solid hsl(120, 100%, 25%);
    border-top: 5px solid hsl(120, 100%, 25%);
    background-color: hsl(120, 18%, 86%);
}
.orange, .info-orange, .status-orange, .banner-orange {
    border: 1px solid hsl(39, 100%, 50%);
    border-top: 5px solid hsl(39, 100%, 50%);
    background-color: hsl(39, 45%, 89%);
}
.red, .info-red, .status-red, .banner-red {
    border: 1px solid hsl(0, 100%, 50%);
    border-top: 5px solid hsl(0, 100%, 50%);
    background-color: hsl(0, 45%, 89%);
}
.blue, .info-blue, .status-blue, .banner-blue {
    border: 1px solid hsl(240, 100%, 50%);
    border-top: 5px solid hsl(240, 100%, 50%);
    background-color: hsl(240, 45%, 89%);
}
.purple {
    border: 1px solid hsl(300, 100%, 25%);
    border-top: 5px solid hsl(300, 100%, 25%);
    background-color: hsl(300, 32%, 79%);
}
.info-green, .info-orange, .info-red, .info-blue, .status-green, .status-orange, .status-red, .status-blue, .banner-green, .banner-orange, .banner-red, .banner-blue {
    padding: 10px 5px;
    margin: 5px 5px 10px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
    -moz-box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
    -webkit-box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
}

/* info panel */
#info_messages {
    position: fixed;
    bottom: 5px;
    right: 10px;
    max-width: 550px;
    opacity: 0;
    z-index: -1;
    animation-name: info;
    animation-duration: 12s;
    /* animation-timing-function: linear; */
    animation-delay: 0s;
    animation-direction: alternate;
}
@keyframes info {
    0% 	{ opacity: 0; transform: translateY(0); z-index: 1;}
    5% { opacity: 1; transform: translateY(0); z-index: 1;}
	95% { opacity: 1; transform: translateY(0); z-index: 1;}
    100% { opacity: 0; transform: translateY(0); z-index: 1;}
}

/* status panel */
#status_messages {
    position: fixed;
    bottom: 5px;
    right: 10px;
    width: 400px;
    opacity: 0;
    z-index: -1;
    animation-name: status;
    animation-duration: 6s;
    /* animation-timing-function: linear; */
    animation-delay: 0s;
    animation-direction: alternate;
}
@keyframes status {
    0% 	{ opacity: 0; transform: translateY(0); z-index: 1;}
    10% { opacity: 1; transform: translateY(0); z-index: 1;}
	90% { opacity: 1; transform: translateY(0); z-index: 1;}
    100% { opacity: 0; transform: translateY(0); z-index: 1;}
}

/* banner panel */
#banner_messages {
    position: absolute;
    top: 12px;
    right: 10px;
    width: calc(100% - 70px);
    opacity: 0;
    transform: translateY(-100%);
    animation-name: banner;
    animation-duration: 12s;
    /* animation-timing-function: linear; */
    animation-delay: 0s;
    animation-direction: alternate;
}
@keyframes banner {
    0% 	{ opacity: 0; transform: translateY(0);}
    5% { opacity: 1; transform: translateY(65px);}
	95% { opacity: 1; transform: translateY(65px);}
    100% { opacity: 0; transform: translateY(0);}
}

/**
 ** NASTAVENÍ TABULEK
 **/
table.set {
    width: 100%;
    border-collapse: collapse;
}
table.input {
    width: 100%;
    /* margin-bottom: 10px; */
    border: 1px solid hsl(0, 0%, 85%);
}

tr.set:nth-child(2n) {
    background-color: hsl(0, 0%, 100%);
}
tr.set:nth-child(2n+1) {
    background-color: hsl(0, 0%, 98%);
}
tr.hover:hover, tr.set:hover, tr.set:focus, tr:focus, div.hover:hover {
    background-color: hsl(65, 100%, 87%);
}
tr.filter, th.border, td.filter, td.border, td.input {
    border: 1px solid hsl(0, 0%, 85%);
}

tr.filter_bottom, th.border_bottom, td.filter_bottom, td.border_bottom, td.input_bottom {
    border-bottom: 1px solid hsl(0, 0%, 85%);
}

th.set, td.set, th.border, td.border, td.input, td.inputX, td.border_top, th.border_bottom, td.border_bottom {
    padding: 5px;
}
th.set, th.border, th.border_bottom {
    font-size: 9pt;
    text-align: left;
    background-color: hsl(0, 0%, 95%);
}
td.border_top {
    border-top: 1px solid hsl(0, 0%, 85%);
}
td.input {
    background-color: hsl(0, 0%, 95%);
    width: 200px;
}
td.inputX {
    border: 1px solid hsl(0, 0%, 85%);
    background-color: hsl(0, 0%, 95%);
}
td.wrap {
    word-break: break-all;
}
tr.disabled, tr.deleted {
    color: hsl(39, 100%, 50%);
}

/* OLD */
.ActionStatusSmall {
    width: 400px;
    padding: 10px;
    color: hsl(0, 0%, 0%);
    opacity:0;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    position: fixed; bottom: 20px; right: 20px;
    animation-name: ActionStatusSmall;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: alternate;
}
.ActionStatusBig {
    width: 400px;
    padding: 10px;
    color: hsl(0, 0%, 0%);
    opacity:0;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    position: fixed; bottom: 20px; right: 20px;
    animation-name: ActionStatusBig;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-direction: alternate;
}
@keyframes ActionStatusSmall {
    0%		{opacity:0;}
    10%		{opacity:1;}
    90%		{opacity:1;}
    100%	{opacity:0;}
}
@keyframes ActionStatusBig {
    0%		{opacity:0;}
    3%		{opacity:1;}
    97%		{opacity:1;}
    100%	{opacity:0;}
}

/**
 ** NASTAVUJE ZAROVNÁNÍ TEXTU
 **/
.left {
    text-align: left;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}

/**
 ** NASTAVENÍ PÍSMA
 **/
p {
    padding: 2px 10px;
}
p.sidebar {
    padding: 0 20px;
    font-weight: bold;
}
p.fieldset {
    line-height: 200%;
}
p.fieldset:hover {
    background-color: hsl(0, 0%, 93%);
    cursor: pointer;
}
h1 {
    font-size: 10pt;
    padding: 5px 10px;
}
h2 {
    background-color: hsl(209, 99%, 29%);
    color: hsl(0, 0%, 100%);
    font-size: 10pt;
    padding: 10px 15px;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
}
h3 {
    font-size: 9pt;
    padding: 2px 10px;
}
ol, ul {
    padding-left: 0.9em;
}
ol li, ul li {
    list-style-position: inside;
    margin: 0.3em 0 0.3em 0.9em;
}
hr { 
    display: block;
    margin: 0 auto;
    margin-top: 1.5em;
    width: 98%;
    border-style: solid;
    border-width: 1px;
    border-color: hsl(0, 0%, 93%);
}
fieldset.border, legend {
    padding: 5px 10px;
    text-align: left;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
legend {
    font-weight: bold;
}
#graf {
    width: 100px;
    text-align:center;
    font-size: none;
    vertical-align: bottom;
}
.graf {
    text-align: center;
    font-size: none;
    vertical-align: top;
}
.hover:hover {
    background-color: hsl(199, 64%, 91%);
}
/**
********************************************************************************************************************************************************* NASTAVENÍ ODKAZŮ */
a, button {
    color: hsl(199, 18%, 76%);
    text-decoration: none;
}
a:hover, button:hover {
    text-decoration: none;
    font-weight: none;
    color: hsl(0, 0%, 100%);
}
a img { 
    border: none;
}
/**
******************************************************************************************************************************************************* NASTAVENÍ TLAČÍTEK */
input[type=submit], .border_radius {
    border: none;
    text-decoration: none;
}
input[type=submit]:hover {
    background-color: hsl(120, 100%, 25%);
}
input.small, input.smallred {
    padding: 4px 5px;
    letter-spacing: 1px;
    font-size: 8pt;
}
input.red:hover, input.smallred:hover, .button_red:hover, .button_small_red:hover {
    background-color: hsl(0, 100%, 50%);
}
.button:hover, .button_small:hover, .UserGroupSelectFile:hover {
    background-color: hsl(120, 100%, 25%);
}
input[type=submit], .border_radius, .button, .button_red, .button_small, .button_small_red, .button_lock, .button_small_lock, .UserGroupSelectFile {
    background-color: hsl(209, 99%, 29%);
    color: hsl(0, 0%, 100%);
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.button_small, .button_small_red, .button_small_lock, .UserGroupSelectFile {
    padding: 4px 5px;
    letter-spacing: 1px;
    font-size: 8pt;
}
.button, .button_red, .button_lock {
    margin-right: 5px; /* az bude hotove menu, nebude potreba */
    margin-bottom: 8px; /* az bude hotove menu, nebude potreba */
    /* margin-top: 5px; az bude hotove menu, bude potreba */
}
.button_lock, .button_small_lock {
    background-color: hsl(0, 0%, 75%);
}
button.active {
    background-color: hsl(300, 100%, 25%);
}
select.border_radious {
    border-radius: 4px;
    padding: 6px;
}
.menu_top {
    margin-left: 5px;
    margin-bottom: -5px; /* az bude hotove menu, nebude potreba */
}
.menu_action {
    margin-top: 5px; /* az bude hotove menu, nebude potreba */
    margin-bottom: -5px; /* az bude hotove menu, nebude potreba */
}
.button_img {
    height: 20px;
    cursor: pointer;
}

.button_filter_img {
    height: 25px;
    cursor: pointer;
    padding-top: 3px;
}

/* tmave menu - docasne reseni, nez bude hotove menu */
.menu_top .button {
    margin-right: 0;
    /* background-color: hsl(240, 2%, 19%); */
}
/* .menu_top button.active {
    background-color: hsl(300, 100%, 25%);
}
.menu_top .button_red:hover {
    background-color: hsl(0, 100%, 50%);
}
.menu_top .button:hover {
    background-color: hsl(120, 100%, 25%);
} */
/**
********************************************************************************************************************************************* NASTAVENÍ FORMULÁŘOVÝCH POLÍ */
input[type=text], input[type=number], input[type=password], input[type=url], input[type=email], input[type=file], input[type=datetime-local], textarea, select, input[type=list], .FilesList {
    border-radius: 5px;
    border: 1px solid hsl(0, 0%, 85%);
    box-sizing: border-box;
    width: 100%;
}
input[type=text], input[type=list], input[type=password], input[type=url], input[type=email], input[type=number], textarea {
    padding: 8px;
    outline: none;
    background: transparent;
}
input[type=date], input[type=datetime-local] {
    padding: 5px;
    height: 33px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid hsl(0, 0%, 85%);
    outline: none;
}
input[type=file], input[type=datetime-local] {
    padding: 5px;
    outline: none;
}
input[type=text]:focus, input[type=list]:focus, input[type=password]:focus, input[type=url]:focus, input[type=email]:focus, input[type=number]:focus, input[type=file]:focus, input[type=search]:focus, input[type=date]:focus, select:focus, .filter:focus, textarea:focus, .strom:hover {
    background-color: hsl(65, 100%, 87%);
    border: 1px solid hsl(217, 95%, 66%);
}
select {
	padding: 7px 6px;
}
input[type=checkbox] {
    padding: 10px;
    margin: 8px 0;
}
input[type=search] {
    width: 130px;
    box-sizing: border-box;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 5px;
    background-image: url('../../images/searchicon.png');
    background-position: 8px 7px;
    background-repeat: no-repeat;
    padding: 7px;
    padding-left: 30px;
    -webkit-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}
input[type=search]:focus {
    width: 300px;
}
input[type=number] {
    text-align: right;
}
legend {
    background-color: hsl(0, 0%, 93%);
}
form.menu {
    float: left;
    padding: 0 5px 10px 0;
}
form.set {
    padding: 10px;
}
input.submit {
    margin-top: 10px;
}
.list_block {
    width: 100%;
    padding: 2px 0;
    border-bottom: 1px solid hsl(0, 0%, 80%);
}
.list_block_content {
    display:inline-block;
    padding: 5px;
}
.list_block_xmark {
    float: right;
    height: 13px;
    padding: 5px;
    margin-top: 2px;
}
textarea {
    resize: vertical;
}

/**
 ** NASTAVENÍ HLAIČKY
 **/
.HideUnhide {
    display: none;
}
/**
 ** TOOLTIP - ZOBRAZÍ BUBLINU S TEXTEM PO NAJETÍ MYŠÍ
 **/
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: hsl(0, 0%, 33%);
    color: hsl(0, 0%, 100%);
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip-bottom {
    top: 135%;
    left: 50%;  
    margin-left: -60px;
}
.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent hsl(0, 0%, 33%) transparent;
}
/**
 ** OSTATNÍ NASTAVENÍ
 **/
.OrgChart {
    padding: 5px;
    margin: 15px;
    width: 300px;
    height: 60px;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
    -moz-box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
    -webkit-box-shadow: 0px 0px 10px 0 hsl(237, 12%, 62%);
}
.HSEPlanTourTag {
    float: right;
    padding: 2px 5px 4px 5px;
    margin-top: -4px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.UserGroupList {
    float: left;
    padding: 3px 5px;
    margin: 1px;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.UserGroupCloseImg {
    float: right;
    height: 11px;
    margin: 4px 2px 4px 10px;
    cursor: pointer;
}
.UserGroupSelectFile {
    float: left;
    margin: 3px 1px 1px 1px;
}
.FilesList {
    padding: 3px;
}
.UserGroupSelect {
    padding: 4px;
    margin: 1px;
}

/**
 ** VLASTNÍ KALENDÁŘ
 **/
.calendar, .calendarHeader, .calendarActive {
    border: 1px solid hsl(0, 0%, 85%);
    margin: 1px;
}
.calendarHeader {
    text-align: center;
    background-color: hsl(0, 0%, 93%);
}
.calendarActive {
    float: left;
    width: 50px;
    text-align: right;
}
.calendarBlank {
    float: left;
    width: 50px;
    border: 1px solid hsl(0, 0%, 100%);
    text-align: center;
    margin: 1px;
}

/**
 ** NÁPOVĚDA
 **/
.help, .help_row {
    border-bottom: 1px solid hsl(0, 0%, 85%);
}
.help_row {
    cursor: pointer;
    padding: 10px;
    color: hsl(0, 0%, 0%);
}

/**
 ** GRAFICKÉ WORKFLOW
 **/
.GraphicalWorkflow_table, .GraphicalWorkflow_orange, .GraphicalWorkflow_green, .GraphicalWorkflow_gray, .GraphicalWorkflow_red, .GraphicalWorkflow_blue, .GraphicalWorkflow_purple {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.GraphicalWorkflow_table {
    border: none;
    width: 100%;
    padding-bottom: 2px;
    transform: skew(-10deg);
}
.GraphicalWorkflow_orange, .GraphicalWorkflow_green, .GraphicalWorkflow_gray, .GraphicalWorkflow_red, .GraphicalWorkflow_blue, .GraphicalWorkflow_purple {
    font-weight: bold;
    font-size: 8pt;
    text-align: center;
    padding: 2px 5px;
    margin: 5px 1px;
}
.GraphicalWorkflow_orange {
    border: 1px solid hsl(39, 100%, 50%);
    color: hsl(39, 100%, 50%);
    background-color: hsla(39, 100%, 50%, 0.1);
}
.GraphicalWorkflow_green {
    border: 1px solid hsl(120, 100%, 25%);
    color: hsl(120, 100%, 25%);
    background-color: hsla(120, 100%, 25%, 0.1);
}
.GraphicalWorkflow_gray {
    border: 1px solid hsl(0, 0%, 50%);
    color: hsl(0, 0%, 50%);
    background-color: hsla(0, 0%, 50%, 0.1);
}
.GraphicalWorkflow_red {
    border: 1px solid hsl(0, 100%, 50%);
    color: hsl(0, 100%, 50%);
    background-color: hsla(0, 100%, 50%, 0.1);
}
.GraphicalWorkflow_blue {
    border: 1px solid hsl(240, 100%, 50%);
    color: hsl(240, 100%, 50%);
    background-color: hsla(240, 100%, 50%, 0.1);
}
.GraphicalWorkflow_purple {
    border: 1px solid hsl(300, 100%, 25%);
    color: hsl(300, 100%, 25%);
    background-color: hsla(300, 100%, 25%, 0.1);
}

/**
 ** ČASOVÁ OSA
 **/
.TimelineWrapper {
    position: relative;
    overflow: auto;
    white-space: nowrap;
}

.TimelineStickyCol {
    position: sticky;
    position: -webkit-sticky;
    background-color: hsl(0, 0%, 100%);
}

.TimelineFirstCol {
    width: 100px;
    min-width: 100px;
    max-width: 600px;
    left: 0px;
}