:root {
    --color-primary: #264796;
    --color-primary-transparent: #26479610;
    --color-primary-dark: #213d82;
    --color-primary-light: #305abf;
    --color-red: #e60000;
    --color-green: #00A36C;
    --color-icon-blue: #0D4295;
}

html {
    font-size: 14px;
    position: relative;
    height: 100%;
    min-height: 100%;
}

body {
    font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #383838;
    height: 100%;
}

a {
    text-decoration: none;
}

h2 > small {
	font-weight: normal !important;
	font-size: 14px !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* PB: odstraní šipky pro increment čísla v inputu */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.color-red {
    color: var(--color-red);
}

.color-green {
    color: var(--color-green);
}

#app-side-nav-outer-toolbar {
    flex-direction: column;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.layout-header {
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    z-index: 1501;
}

    .layout-header .main-toolbar {
        background-color: var(--color-icon-blue);
        height: 70px;
    }

    .layout-header .header-title {
        color: white;
        height: 70px;
        width: 200px;
        font-family: Montserrat;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .layout-header .header-label {
        color: white;
        font-size: 12pt !important;
        height: 70px;
    }

        .layout-header .header-label img {
            height: 60px;
            object-fit: cover;
            padding-left: 30px;
            padding-right: 10px;
            padding-top: 10px;
        }

        .layout-header .header-label a {
            color: white;
            padding-right: 20px;
        }

.layout-body {
    background-color: #f2f2f2;
    flex: 1;
    height: 100%;
    min-height: 0;
}

    .layout-body .menu-container {
        height: calc(100vh - 180px);
        width: 210px;
    }

    .layout-body .content {
        flex-grow: 1;
        line-height: 1.5;
        padding: 10px;
        overflow: auto;
        height: 100%;
        max-height: calc(100vh - 70px);
    }

.menu-container .dx-widget {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
}

.menu-container .dx-treeview {
    white-space: nowrap;
}

    .menu-container .dx-treeview .dx-treeview-item {
        padding-left: 0;
        padding-right: 0;
    }

        .menu-container .dx-treeview .dx-treeview-item a {
            color: white;
        }

        .menu-container .dx-treeview .dx-treeview-item .dx-icon {
            vertical-align: middle;
            padding-right: 25px;
        }

    .menu-container .dx-treeview .dx-treeview-node[aria-level="1"] {
        font-weight: bold;
        border-bottom: 1px solid #515159;
    }

    .menu-container .dx-treeview .dx-treeview-node[aria-level="2"] .dx-treeview-item-content {
        font-weight: normal;
        padding: 0 0 0 30px;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
        background: transparent;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected > .dx-treeview-item * {
        color: #D7BF28;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
        background-color: #264796;
        color: white;
    }

.menu-footer {
    padding: 35px 0 0 25px;
    color: white;
}

    .menu-footer strong {
        font-weight: 600;
    }

    .menu-footer a {
        color: white;
    }

        .menu-footer a:hover,
        .menu-footer a:focus,
        .menu-footer a:visited {
            color: #a7b1c2;
        }

.dx-drawer-panel-content {
    background-color: #1E3877
}

.dx-treeview-toggle-item-visibility {
    color: white;
}

.center-container {
    display: flex;
    align-items: center;
    flex-flow: column;
    padding: 0 8px 0 8px;
}

    .center-container .logo {
        padding-top: 40px;
    }

@media (min-width: 768px) {
    .center-container {
        padding: 0;
    }

        .center-container .logo {
            padding-top: 60px;
        }
}

.center-container .logo img {
    width: 450px;    
}

.center-container .img-title img {
    width: 350px;
}

@media (min-width: 768px) {
    .center-container .img-title img {
        width: 450px;
    }
}

    .rozcestnik .options {
        padding-top: 50px;
        width: 100%;
    }

    .rozcestnik .option {
        border-radius: 12px;
        padding: 16px;
        background-color: #80808020;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        letter-spacing: 1px;
    }

        .rozcestnik .option > div {
            font-size: 20px;
        }

        .rozcestnik .option > a {
            display: flex;
            flex-flow: column;
            justify-content: flex-end;
            text-decoration: none;
        }

        .rozcestnik .option img {
            width: 100%;
            object-fit: cover;
            border-radius: 12px;
        }

        .rozcestnik .option .text {
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .rozcestnik .option button {
            width: 100%;
            height: 50px;
            text-transform: uppercase;
            background-color: var(--color-primary);
            color: white;
            border: 0;
            border-radius: 12px;
            font-size: 20px;
            letter-spacing: 1px;
        }

            .rozcestnik .option button:hover {
                background-color: var(--color-primary-dark);
            }

    @media (min-width: 1056px) {
        .rozcestnik .option .button-short {
            display: none;
        }
    }

    @media (min-width: 768px) and (max-width: 1055px) {
        .rozcestnik .option .button-long {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .rozcestnik .option .button-short {
            display: none;
        }
    }

    .registrace .title {
        font-size: 28px;
        font-weight: 500;
        min-width: 400px;
    }

    .registrace .error-message {
        width: 350px;
        font-size: 18px;
    }

    .registrace form {
        padding-top: 16px;
    }

        .registrace form .portal-input {
            margin-bottom: 8px;
        }

    .registrace .continue-row {
        padding-top: 16px;
        display: flex;
        gap: 8px;
    }

    @media (max-width: 767px) {
        .registrace .continue-row {
            flex-flow: column;
        }

            .registrace .continue-row .portal-btn.primary {
                text-align: center;
            }

            .registrace .continue-row .portal-btn.default {
                text-align: center;
            }
    }

    .registrace .continue-row .second {
        width: 100%;
    }

    .registrace .continue-row .portal-btn {
        width: 100%;
        text-align: start;
    }

    .portal-btn {
        padding: 12px 18px 12px 18px;
        border: 1px solid;
        border-radius: 12px;
        color: #383838;
        letter-spacing: 1px;
        font-weight: 500;
    }

        .portal-btn.primary {
            background-color: var(--color-primary);
            color: white;
        }

            .portal-btn.primary:focus {
                outline-color: transparent;
                background-color: var(--color-primary-light);
            }

            .portal-btn.primary:hover {
                background-color: var(--color-primary-dark);
            }

        .portal-btn.default {
            background-color: white;
            border-color: var(--color-primary);
        }

            .portal-btn.default:focus {
                outline-color: var(--color-primary);
            }

            .portal-btn.default:hover {
                background-color: var(--color-primary-transparent);
            }

    .portal-input {
        position: relative;
    }

        .portal-input .error {
            display: none;
        }

            .portal-input.error .error {
                display: unset;
            }

        .portal-input > label {
            position: absolute;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 1px;
            top: 6px;
            left: 22px;
            pointer-events: none;
        }

        .portal-input input,
        .portal-input .input {
            width: 100%;
            border: 1px solid #26479680;
            border-radius: 12px;
            padding: 22px 9px 6px 9px;
        }

            .portal-input .input input {
                width: 16px;
            }

        .portal-input .input {
            overflow: auto;
        }

            .portal-input .input label {
                padding-left: 4px;
            }

            .portal-input .input > div:first-child {
                padding-top: 4px;
            }

            .portal-input input:focus,
            .portal-input .input:focus {
                outline-color: var(--color-primary);
            }

        .portal-input input[type=password] {
            letter-spacing: 4px;
        }

    .btn-primary {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #fff !important;
        &:hover {
		filter: brightness(110%);
	}
}

.toolbar-button-primary {
    div {
        color: white;
        background-color: var(--color-primary);
        border-color: #2e6da4;

        &:hover {
            background-color: #004874;
            border-color: #004874;
        }

        > * {
            color: white !important;
        }
    }
}

.zapomenute-heslo {
    color: black;
}

.selectbox-firmy {
    width: 300px;
    padding-bottom: 16px;
}

.selectbox-firmy label {
    font-size: 18px;
    padding-bottom: 4px;
}

.schvalit-registraci {
    max-width: 420px;
}

.schvalit-registraci .row {
    padding-bottom: 8px;
}

.schvalit-registraci .button-row {
    display: flex;
    justify-content: flex-end;
}

    .schvalit-registraci .text-row {
        padding: 4px;
    }

.na-zkousku-chip {
    color: white;
    background-color: var(--color-primary-light);
    padding: 0 8px 0 8px;
    border-radius: 4px;
    font-size: 12px;
}

.zkouseli-jste-chip {
    color: white;
    background-color: #FFA500;
    padding: 0 8px 0 8px;
    border-radius: 4px;
    font-size: 12px;
}

.control-label {
    display: flex;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    justify-content: end;
    align-items: center;
}

.custom-checkbox .dx-checkbox-text {
    padding-left: 20px; 
}

.grid-holding-matka {
	font-weight: 700;
}

.grid-vyrazeny-uzivatel {
	color: darkgray;
}

.header-label-logout {
	font-weight: 700;
}