/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.spinner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: rgba(67, 89, 113, 0.5);
  z-index: 2000;
}

.spinner .loader {
  display: block;
  position: relative;
  font-size: 6px;
  height: 120px;
  width: 120px;
  margin: 0 auto;
}

.spinner .loader div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  height: 120px;
  width: 120px;
  border: 12px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.spinner .loader div:nth-child(1) {
  animation-delay: -0.45s;
}

.spinner .loader div:nth-child(2) {
  animation-delay: -0.3s;
}

.spinner .loader div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.container-fullpage-form{
  width: 475px;
  max-width: calc(100% - 30px);
}

.container-fullpage-form .form-check{
  text-align: left;
}
.container-fullpage-form #s_predvolba{border-radius: 0.375rem 0 0 0.375rem;}
.container-fullpage-form #s_phone{border-radius: 0 0.375rem 0.375rem 0;}
.fullpage-form-label-right{position: relative; bottom: 5px;}
.content-overflow-auto{overflow: auto; white-space: nowrap;}
h3.w-100::after{content: " "; display: block; clear: both;}
.row--small-padding{--bs-gutter-x: 1em;}
#transactionSumPayQr img{max-width: 100%;}
.nav-tabs .menu-item, .nav-tabs .nav-link{width: 100%; text-align: left; border-radius: 0;}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus, .nav-tabs .nav-link.active{border-color: rgba(67, 89, 113, 0.1)!important; }
.nav-tabs .nav-link .badge{
  float: right;
  margin: 2px -10px 0 5px;
}

#layout-navbar.navbar--fixed{
  position: fixed!important;
  top:0;
  right:0;
  left:0;
  flex-flow: row;
  justify-content: space-between;
  box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

.topmenu-navbar{
  height: 62px;
  display: none;
}
.topmenu-navbar .layout-menu-toggle{
  padding: 7px 20px!important;
}
@media (max-width: 1199.98px){
  .topmenu-navbar{
    display: block;
  }
}
.content-overflow-auto-wrap .w-100 .btn-sm{
  display: flex;
  gap: 5px;
  align-items: center;
}

.modal-fade-show{
  z-index: 1061 !important;
}
#mdRowInfo{
  z-index: 1092 !important;
}
.list-group-item.list-group-item-info.text-center.smp{
  padding:0.58rem 0.375rem;
}

.list-group-item.text-center.smp{
  padding:0.58rem 0.375rem;
}
.list-group-item.list-group-item-warning.text-center.smp{
  padding:0.58rem 0.375rem;
}

@media (max-width: 470px){
  .content-overflow-auto-wrap .w-100 .float-end.btn-sm.btn-danger{
    width: 30px;
    overflow: hidden;
    height: 28px;
    padding: 3px 7px;
    display: flex;
    justify-content: start;
    align-items: center;
    color: transparent;
    position: relative;
  }
  .content-overflow-auto-wrap .w-100 .float-end.btn-sm.btn-danger span{
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    justify-content: center;
    display: flex;
    align-items: center;
  }
}
.card{
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
  transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  cursor: pointer;
}

.card:hover{
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.row-sumarizeForm .col-button, .row-sumarizeForm .col-date{
  float: left;
  white-space: nowrap;
  width: auto;
  margin-bottom: 10px;
  padding-left: 0;
}
.row-sumarizeForm .col-button button{
  position: relative;
  top: -3px;
}

.row-sumarizeForm .row-form{
  width: auto;
  margin-left: auto;
  padding: 0;
}

.row-sumarizeForm .col-auto{
  width: auto;
}
.row-sumarizeForm .col-auto h6{
  margin: 5px 10px 15px 0;
}

.table input[type="text"], .table input[type="number"], .table input[type="date"]{width: 100%;}
.font-weight-bold{
  font-weight: bold;
}
.alert {
  width:40%;
}

.clickable.table-primary{
  --bs-table-bg:#03c3ec;
}

.table-success{
  --bs-table-bg:#71dd37;
}

.navbar-text-image{
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-tabs-om{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.nav-tabs-om .nav-item .nav-link{ 
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 2px solid #fff;
}

#addOmFile{
  display: inline;
}

.accordion-om .accordion-body{display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.accordion-om .accordion-body > div {width: 100%;}
.accordion-om .accordion-body .alert{ white-space: nowrap; padding: 8px; width: auto; margin: 0;}

#frmNewOm .input-group label{
  height: 39px;
  display: inline-flex;
  align-items: center;
}
#frmNewOm .input-group .checkbox-input input{
  margin-top: 13px;
}
#frmNewOm .form-check-om .form-check{
  display: flex;
  gap: 10px;
  align-items: center;
}

#frmNewOm .form-radio, #frmNewOm .form-checkbox{
  display: flex;
  gap: 5px;
  align-items: center;
}
#frmNewOm .form-radio input, #frmNewOm .form-checkbox input{
  margin: 0 !important;
}

.avatar-after{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.avatar-after-item{
  display: flex;
  gap: 5px;
}

.avatar-after-item .bx{ 
  margin-top: 2px;
}

@media only screen and (max-width: 1500px) {
  .card-body span, h3{
    font-size: calc(1.2875rem - 0.85vw);
  }
}

@media only screen and (max-width: 1024px) {
  #omChart0, #omChart1, #omChart2, #omChart3, #omChart4, #omChart5, #omChart6, #omChart7{
    height: 400px!important;
  }
  h3.w-100, .row-sumarizeForm {
    display: flex;
    flex-flow: column;
  }
  h3.w-100 .btn-sm.float-end,  .row-sumarizeForm .row-form{
    clear: both;
    margin: 10px auto 0 0;
    width: auto;
  }
  .row-sumarizeForm .row-form{
    margin: 0 auto 0 13px;
  }

  #frmNewOm .form-check-om{
    margin-bottom: 10px!important;
  }
  
  #frmNewOm .input-group div{
    width: auto;
    padding: 0;
    margin: 0;
    max-width: 100%;
  }  
  #frmNewOm .input-group .form-control{
    width: 310px;
    margin-bottom: 5px;
  }
  #frmNewOm .input-group .right-control-mobile{
    margin-left: auto!important;
  }

  #frmNewOm .input-group label{
    width: 150px;
  }
  #frmNewOm .input-group label.form-check-label{
    width: auto!important;
  }
  #frmNewOm .input-group label.label-mobile-fullwidth{
    width: 100%;
  }
  
  #frmNewOm section{
    margin: 0!important;
  }
  #frmNewOm .form-check-om div.form-check{
    width: 30%;
  }
  #frmNewOm .form-check-om div.form-check:first-child{
    width: 40%;
  }
  #frmNewOm .form-check-om div.avatar{
    width: 2.375rem;
  }
  #frmNewOm .form-check-om div.form-check input{
    margin: 0;
  }
  #frmNewOm .form-radio, #frmNewOm .form-checkbox{
    margin-right: 8px!important;
  }
  #frmNewOm .input-group .checkbox-input input{
    margin-top: 11px;
  }
}

@media only screen and (max-width: 767px) {
  #frmNewOm .input-group .form-control{
    width: 100%;
    margin-bottom: 5px;
    text-align: left!important;
  }
  #frmNewOm .input-group label, #frmNewOm .input-group div, #frmNewOm .form-check-om div.form-check, #frmNewOm .form-check-om div.form-check:first-child{
    width: 100%;
  }
  #frmNewOm .input-group .checkbox-label{
    width: 150px;
    height: 40px;
  } 
  #frmNewOm .input-group .checkbox-input{
    width: auto;
  }
  #frmNewOm .input-group .checkbox-input input{
    margin-top: 14px;
  }
}