html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

html, body { height: 100%; margin: 0; display: flex; flex-direction: column; }

.container { flex: 1;}

footer { position: relative; bottom: 0; width: 100%; text-align: center; padding: 10px; background-color: #f8f9fa; color: #6c757d; border-top: 1px solid #e7e7e7; }

input[type=text], textarea { width:100%; }

table.table { border: 1px solid silver; border-collapse: collapse; width: 100%; }
    table.table td { border: 1px solid silver !important; padding: 5px 10px; }
    table.table th { background-color: #f2f2f2; color: #333; padding: 3px 10px; text-align: center; border: 1px solid silver !important; }
    table.table tr:nth-child(even) { background-color: #f9f9f9; }
    table.table tr:nth-child(odd) { background-color: #ffffff; }
    table.table tr:hover { background-color: #e0e0e0; }

table.dataType-2 { border: 0px; }

table.devicelist { border: 1px solid silver; border-collapse: collapse; width: 100%; }
    table.devicelist td { border: 1px solid silver; padding: 3px 10px; }
    table.devicelist th { background-color: #f2f2f2; color: #333; padding: 3px 10px; text-align: center; border: 1px solid silver; }
table.devicelist tr:nth-child(even) { background-color: #f9f9f9;  }
table.devicelist tr:nth-child(odd) { background-color: #ffffff;  }
table.devicelist tr:hover { background-color: #e0e0e0; }

body div.container { max-width: 100% !important; }

.device-box { background: #f9f9f9; border: 1px solid #dfdede; border-radius: 2px; margin-bottom: 10px; }
.device-box > div { padding: 5px; font-size: 12px; }
.device-box > div:nth-child(even) { background-color: #ffffff; }
.device-box .device-title { background: #f2f2f2; font-weight: bold; font-size: 13px; }
.device-box .device-operations { border-top: 1px solid #dfdede; background: #f9f6f6; }

/* Skryje obsah na mobilních zařízeních (šířka menší než 768px) */
/*.hide-mobile { display: block; }*/

@media (max-width: 768px) {
    .hide-mobile { display: none; }
}

/* Zobrazí obsah pouze na mobilních zařízeních (šířka menší než 768px) */
.show-mobile { display: none; }

@media (max-width: 768px) {
    .show-mobile { display: block; }
}

.path { list-style: none; padding: 0px; margin: 0px; display: inline-block; margin-top: 5px; }
    .path li { display: inline-block; padding: 7px 15px; cursor: pointer; position: relative; }
        .path li:not(:first-child):before { content: ">"; position: absolute; left: -5px; top: 5px; font-size: 18px; color: #ababab; font-weight: bold; }
        .path li:hover { text-decoration: underline; }

.custom-helper-table-file { background: #cfcfcf; padding: 10px; width: 100px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 45px !important; box-shadow: 0px 0px 5px #7c7c7c; }

.trigger-visual { margin: 10px 0px; padding: 10px 10px; background: #f7f7f7; border-radius: 3px; }
.age-range { display: flex; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; overflow: hidden; }
    .age-range > input { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
    .age-range > span { padding: 6px 15px; background: #f1f1f1; color: silver; }

.display-flex { display: flex; }
    .display-flex > input:not(:last-child), .display-flex > select:not(:last-child) { margin-right: 5px; }

.trigger-url-row { margin-top: 5px; }
.trigger-url-remove { padding: 7px 10px; display: block; }
.trigger-visual .t-url { padding-right: 35px; }

.trigger-drag { position: absolute; left: -41px; top: -10px; background: silver; display: inline-block; width: 38px; height: 38px; padding: 7px 10px; border-radius: 3px; }

.input-validation-error { border-color: red; }
.field-validation-error { color: red; }

.dataType-2 {}
    .dataType-2 .file { float: left; display: inline-block; width: 150px; height: 150px; background: #fdfdfd; border: 1px solid #f1f1f1; margin: 10px; position: relative; }
        .dataType-2 .file .file-icon { font-size: 30px; text-align: center; color: #5e5e5e; margin-bottom: -10px; }
        .dataType-2 .file .file-info { font-size: 12px; white-space: nowrap; overflow: hidden; }
        .dataType-2 .file .file-action { position: absolute; bottom: 0px; background: #f1f1f1; width: 100%; }
        .dataType-2 .file a { word-break: break-all; }

.file-list ul { list-style: none; margin: 0px; padding: 0px; }
    .file-list ul > li { margin-bottom: 5px; }
    .file-list ul > li > a { display: flex; padding: 5px; background: #f9f9f9; border-radius: 2px; text-decoration: none; }
    .file-list ul > li > a > * {  }
        .file-list ul > li > a > .name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        .file-list ul > li > a > .icon > img { max-height: 17px; max-width: 17px; }
        .file-list ul > li:hover > a { background: #e9e9e9; }
    .file-list ul > li > a .icon { margin: 0px 7px; }
        .file-list ul > li > ul { margin-left: 30px; margin-top: 5px; }

#path-list li {cursor:pointer;}
#path-list li:hover { text-decoration: underline; }

.visual-editor-trigger-rows .trigger-def-visual { margin: 10px 0px; padding: 10px 10px; background: #f7f7f7; border-radius: 3px; }

.pull-left {float:left;}
.pull-right { float: right; }
.table-paging { margin: 5px 0px; }
.table-paging > * { padding: 5px; display: inline-block; background: #efefef; min-width: 34px; text-align: center; border-radius: 5px; text-decoration: none; margin-right: 10px; }

.text-right {text-align:right;}

.list-check { border: 1px solid #ededed; border-radius: 5px; padding: 7px 6px; max-height: 133px; overflow: auto; }
    .list-check label { display: block; padding: 2px 7px; border-radius: 4px; cursor: pointer; }
        .list-check label:hover { background: #f3f3f3; }

.list-box { border: 1px solid #ededed; border-radius: 5px; margin-bottom: 10px; }
    .list-box > div { padding: 10px 15px; }
    .list-box > div:not(:last-child) { border-bottom: 1px solid #ededed; }
        .list-box > div .actions { float: right; display: flex; }
            .list-box > div .actions > select { position: relative; top: -3px; margin-right: 14px; width: 100px; }

.help { background: #fbfbfb; padding: 5px; border: 1px dashed #e3e3e3; border-radius: 4px; margin-top: 5px; font-size: 12px; color: #959595; }