@font-face {
  font-family: 'nova-round';
  src:         url('fonts/nova-round-v10-latin-regular.ttf');
}

@font-face {
  font-family: 'azered-mono';
  src:         url('fonts/AzeretMono-VariableFont_wght.ttf');
}

* {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

body {
  background:  #fdfdfd;
  font-family: 'nova-round';
  font-weight: 300;
  font-size:   1rem;
}

main {
  max-width:  900px;
  margin:     auto;
  padding:    0.5rem;
  text-align: center;
}

nav {
  /* display:         flex; */
  justify-content: space-between;
  align-items:     center;
}

ul {
  list-style: none;
  display:    flex;
}

li {
  margin-right: 1rem;
}

h1 {
  color:         #e74c3c;
  margin-bottom: 0.5rem;
}

select, option {
  font-family:      'nova-round';
  -moz-font-family: 'nova-round';
}

input, textarea {
  border:        1px solid #bfbfbf;
  border-radius: 4px;
  padding:       4px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
}

.container {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap:              1rem;
  justify-content:       center;
  align-items:           center;
  margin:                auto;
  padding:               1rem 0;
}

.container-fluid {
  padding-top: 30px;
}

.card {
  display:        flex;
  align-items:    center;
  flex-direction: column;
  width:          15rem auto;
  height:         15rem;
  background:     #fff;
  box-shadow:     0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius:  10px;
  margin:         auto;
  overflow:       hidden;
}

.card--avatar {
  width:      100%;
  height:     10rem;
  object-fit: cover;
}

.card--title {
  color:          #222;
  font-weight:    700;
  text-transform: capitalize;
  font-size:      1.1rem;
  margin-top:     0.5rem;
}

.card--link {
  text-decoration: none;
  background:      #db4938;
  color:           #fff;
  padding:         0.3rem 1rem;
  border-radius:   20px;
}

.btn-std {
  --bs-btn-color:                 #000000;
  --bs-btn-bg:                    #b6bcc8;
  --bs-btn-border-color:          #b6bcc8;
  --bs-btn-hover-color:           #000000;
  --bs-btn-hover-bg:              #a8b0bb;
  --bs-btn-hover-border-color:    #a8b0bb;
  --bs-btn-focus-shadow-rgb:      60,153,110;
  --bs-btn-active-color:          #000000;
  --bs-btn-active-bg:             #a8b0bb;
  --bs-btn-active-border-color:   #a8b0bb;
  --bs-btn-active-shadow:         inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:        #000000;
  --bs-btn-disabled-bg:           #b6bcc8;
  --bs-btn-disabled-border-color: #b6bcc8;
}

.btn-upload {
  width:        200px;
  margin-left:  auto;
  margin-right: auto;
  text-align:   center;
}

.btnx {
  width:        auto;
  margin-left:  auto;
  margin-right: auto;
}

.row-std {
  margin-bottom: 10px;
}

.row-stdx {
  margin-bottom: 40px;
}

.row-stdc {
  margin-bottom: 20px;
}

#navHome,
#navMenu,
#navLogout {
  cursor: pointer;
}

.subContent {
  margin-bottom:    30px;
  margin-right:     2px;
  padding:          20px;
  background-color: #c0d9e1;
  border-radius:    4px;
}

.divBlogEntry,
.divNews {
  background-color: #a2c2cc;
  margin-bottom:    10px;
  padding:          8px;
  border-radius:    4px;
  text-align:       left;
}

.divBlogEntryDatetime {
  color: #416f6f;
}

.divBlogEntryTarget {
  color: #416f6f;
}

.divBlogEntryFrom {
  color: #416f6f;
}

.divBlogEntryBody {
}

.divBlogEntryImg {
  text-align:    center;
  border-radius: 4px;
}

.icoHBars,
.icoObsDelete {
  cursor: pointer;
}

.icoObsStatus {
  cursor: pointer;
  margin-right: 40px;
}

#txtNewBlogEntryText,
#txtChangedBlogEntryText {
  width:   100%;
  padding: 4px;
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border:  1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor:  pointer;
}

#divNewsCaption {
  margin-bottom: 20px;
}

.divObservedEntry,
.divObserverEntry {
  background-color: #a2c2cc;
  margin-bottom:    10px;
  padding:          8px;
  border-radius:    4px;
  text-align:       left;
}

.groupNameRow {
  background-color: #a2c2cc;
  padding:          4px;
}

.groupMemberRow:nth-child(odd) {
  background-color: #98a1a9;
}

.groupMemberRow:nth-child(even) {
  background-color: #a8b1b9;
}

.divFileCabinet {
  margin-bottom: 20px;
  margin-left:   auto;
  margin-right:  auto;
  position:      relative;
  width:         253px;
}

.divFile {
  width:            20px;
  height:           42px;
  background-color: cornsilk;
  color:            #000000;
  padding-top:      4px;
  cursor:           pointer;
}

.divFileName {
  transform:   rotate(90deg);
  font-size:   0.8em;
  font-family: 'azered-mono';
}

.cabMenu {
  cursor: pointer;
}

.divNewFile {
  width:            20px;
  height:           20px;
  background-color: cornsilk;
  color:            #000000;
  padding-top:      1px;
  cursor:           pointer;
}

.divNewFileName {
  transform:   rotate(90deg);
  font-size:   0.8em;
  font-family: 'azered-mono';
}

.divFileInfo {
}

.divFileInfoRow {
  text-align: left;
}

.divFileInfoRowX {
  text-align:    left;
  margin-bottom: 20px;
}

.divFileInfoRowB {
  text-align:    left;
  margin-bottom: 10px;
}

#txtUploadProtocol {
  font-family: 'azered-mono';
}

#newFileCabinetErrorMsg {
  color: rgb(231, 76, 60);
}

#newFileFolderErrorMsg {
  color: rgb(231, 76, 60);
}

#deleteFileFolderErrorMsg {
  color: rgb(231, 76, 60);
}

#renameFileFolderNameErrorMsg {
  color: rgb(231, 76, 60);
}

#divDeskCaption {
  margin-bottom: 20px;
}

.desktopElement,
.versionElement {
  border-radius:    4px;
  background-color: #ece2bb;
  text-align:       left;
  padding:          10px;
  margin-bottom:    10px;
  font-size:        0.9em;
}

.tab-content {
  min-height: 300px;
  text-align: left;
}

.desktopElementType {
  margin-bottom: 20px;
}

.desktopElementTypeLeft{
  display: inline-block;
}

.desktopElementTypeRight {
  float: right;
}

.desktopElementContent_details {
  min-height:  300px;
  max-height:  300px;
  height:      300px;
  overflow:    auto;
  font-size:   0.8em;
  font-family: 'azered-mono';
}

.registerCardContent {
  min-height:  300px;
  overflow:    auto;
  font-size:   0.8em;
}

.desktopElementContent_details table tr th {
  padding: 4px;
  border:  1px solid black;
}

.desktopElementContent_details table tr td {
  padding: 4px;
  border:  1px solid black;
}

.desktopElementContent_file_folder {

}

.imgIcon {
  cursor: pointer;
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: #000000;
  --bs-nav-tabs-border-color:      #000000;
}

.nav-link:not(.active) {
  color: gray;
}

.nav-link.active {
  --bs-nav-tabs-link-active-bg:           #f0ebd6;
  --bs-nav-tabs-link-active-border-color: #000000;
}

.focusedDesktopElement {
}

.focusedDesktopElement .nav-link.active {
  background-color: #f0ebd6;
  border-color:     #000000;
}

.focusedDesktopElement .nav-tabs {
  --bs-nav-tabs-border-color: #000000;
}

.documentLink {
  cursor:          pointer;
  margin-top:      10px;
  text-decoration: underline;
  font-size:       1.1em;
}

.versionLink {
  cursor:          pointer;
  margin-top:      10px;
  text-decoration: underline;
  font-size:       1.0em;
}

.lblDocVersion,
.lblVersionIndexed,
.lblIndexedAt,
.lblVersionSize {
  font-size: 1.2em;
}

.documentLink:hover {
}

.openDocument {
  display:          none;
  padding:          10px 0px;
  border-bottom:    1px solid #c4b9ac;
  border-left:      1px solid #c4b9ac;
  border-right:     1px solid #c4b9ac;
  background-color: cornsilk;
  overflow:         auto;
}

.btn-sm {
  background-color: #b6bcc8;
  padding:          2px;
}

.btn-sm:hover {
  background-color: #a8b0bb;
}

.tblOpenDocument {
  width:           100%;
  border-collapse: separate;
  border-spacing:  20px 0;
}

.tblOpenDocument button {
  height: 27px;
}

.tblOpenDocument select {
  padding:          4px;
  height:           27px;
  min-width:        182px;
  width:            100%;
  background-color: white;
  border:           1px solid #bfbfbf;
  border-radius:    4px;
}

.tblOpenDocument input {
  height:    27px;
  min-width: 182px;
  width:     100%;
}

.tblOpenDocument textarea {
  height:     100px;
  min-height: 100px;
  min-width:  182px;
  width:      100%;
}

.tblOpenDocumentTr:hover {
  background-color: #ece2bb;
}

.tblOpenDocumentTd {
  padding:        4px;
  vertical-align: top;
}

.divCurrentTabs {
}

#tblMyUserTabs {
  width:  80%;
  margin: auto;
}

.myUserTabsItem {
}

.myUserTabsItemName {
  text-align: left;
}

.myUserTabsItemCtrl {
  text-align: right;
}

.btn-tabs {
  margin-left: 5px;
  height:      33px;
}

.tblMyAccount {
  width: 100%;
}

.tblMyAccountRow {
}

.tblMyAccountTdLeft {
  padding:        4px;
  text-align:     left;
  vertical-align: top;
}

.tblMyAccountTdRight {
  padding:        4px;
  text-align:     left;
  vertical-align: top;
}

#objDocumentViewer {
  height:     100vh;
  object-fit: contain;
}

#tblSearchWords {
  width: 100%;
}

#divSearchWords {
  padding:          4px;
  background-color: #a8b0bb;
  border-radius:    4px;
  width:            80% !important;
  max-width:        80%;
  margin:           auto;
}

#txtSearchWords {
  height: 34px;
  float:  left;
  width:  100%;
}

#tdImgSearchWords {
  width: 34px;
}

#imgSearchWords {
  margin-left: 10px;
  cursor:      pointer;
  float:       right;
}

#divSearchResults {
  display: none;
}

#divSearchResultsOuter {
  padding-bottom: 20px;
}

#spanSearchResultsFor {
  white-space: nowrap;
  color:       #e74c3c;
}

#divBackupFiles {
  overflow:    auto;
  max-height:  300px;
  font-size:   0.9em;
  font-family: 'azered-mono';
}

.divBackupWarning {
  font-family:   'nova-round';
  margin-bottom: 10px;
  padding:       5px 20px 5px 20px;
}

.divBackupPwdButton {
  font-family:   'nova-round';
  margin-bottom: 4px;
}

#divBackupCopyResult {
  font-family:   'nova-round';
  margin-bottom: 20px;
}

.divBackupFile {
  margin-bottom:   6px;
  text-decoration: underline;
}

.divBackupFile:hover {
  cursor: pointer;
}

#tblCostsCalculator {
  width: 100%;
}

.trCostsCalculator{
}

.tdCostsCalculatorLeft {
  text-align: left;
  padding:    4px;
}

.tdCostsCalculatorRight {
  text-align: left;
  padding:    4px;
}

#tdCostsCalculatorResult {
  color:       #e74c3c;
  text-align:  center;
  padding-top: 20px;
}

#accountChangeHint {
  text-align: center;
  color:      #e74c3c;
}

.underlineGray {
  border-bottom: 1px solid #dee2e6;
}

#tblIndexTitleAndText {
  width: 100%;
}

.tblIndexTitleAndTextTdLeft {
  padding:        4px;
  text-align:     left;
  vertical-align: top;
}

.tblIndexTitleAndTextTdRight {
  padding:        4px;
  text-align:     left;
  vertical-align: top;
}

#copyrightAndContact {
}

#imgMessages {
  cursor: pointer;
}

#tblMyMessages{
  width: 100%;
}

.tblMyMessagesCreated{
  vertical-align: top;
  text-align:     center;
  padding:        4px;
}

.tblMyMessagesMsg{
  vertical-align: top;
  text-align:     left;
  padding:        4px;
}

.tblMyMessagesNew{
  vertical-align: top;
  text-align:     center;
  padding:        4px;
}

#modalDocumentViewerBody {
  overflow: auto;
}

#tblMoveDoc td {
  text-align:     left;
  vertical-align: top;
  padding:        4px;
}









.highlightBackgroundOnHover:hover {
  background-color: #a8b0bb;
}

.btnOnBottom {
  margin-top: 20px;
}

#newAppNameErrorMsg {
  color: rgb(231, 76, 60);
}

.shrattlActionLink {
  cursor: pointer;
  height: 1.6rem;
  margin-left: 20px;
}

.shrattlEditTargetParent {
  border: 1px solid #808080;
}

.shrattlEditTarget {
  border: 1px solid #808080;
  min-height:100px;
  text-align: left;
  padding: 0;
}

.shrattlCtrl {
  background-color: #e2e8e9;
  display: inline-grid;
  width: 100%;
  padding: 10px;
}
.shrattlCtrlInit {
  width: 120px;
  height: 80px;
}

.shrattlCtrlHeader {
  height: 24px;
  border-bottom: 1px solid;
  margin-bottom: 8px;
}

.shrattlCtrlBody {
  /* height: 54px; */
  overflow: hidden;
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */
}

.gridMode {
  cursor: pointer;
  margin-left: 10px;
}

.ctrlProps {
  cursor: pointer;
  margin-left: 10px;
}

.ctrlRemove {
  cursor: pointer;
  margin-left: 10px;
}

#tblGridModeSelection {
  border-collapse: separate;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

#tblGridModeSelection tr {
}

#tblGridModeSelection td {
  background-color: red;
  border-radius: 4px;
}

#tblGridModeSelection th {
  border-radius: 4px;
}

.addNewCtrlDetails {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.buttonGroup {

}

.shrattlDialogName {
  margin-bottom: 20px;
}

.shrattlDialogNav {
  margin-bottom: 20px;
}

.tblPropsInput {
  width: 80px;
}

#tblPropsMeta1 {
}

#tblPropsMeta2 {
}