/* BlazorIRM specific */

.media {
   display: flex;
   align-items: flex-start;
}

.media-body {
   flex: 1;
}


/* app-sidebar */
.app-sidebar > .nav-pills > .nav-item:first-of-type {
   padding-top: 1rem;
}

.app-sidebar > .nav-pills > .nav-item:last-of-type {
   padding-bottom: 1rem;
}

.app-sidebar .nav-pills > .nav-item a {
   border-radius: 0px;
   display: flex;
   align-items: center;
}

.app-sidebar > .nav-pills > .nav-item > a {
   font-size: 1rem !important;
   font-weight: 600 !important;
   padding: .25rem 1rem .25rem .125rem;
}

   .app-sidebar > .nav-pills > .nav-item > a[aria-expanded] ~ ul {
      margin: 0;
   }

.app-sidebar .nav-pills > .nav-item a:not(.active) {
   color: inherit !important;
}

.app-sidebar .nav-pills .nav-item .nav-link {
   text-transform: none;
}

   .app-sidebar .nav-pills .nav-item .nav-link > span:not(.expand-btn):not(.image):not(.badge) {
      flex: 1;
   }

   .app-sidebar .nav-pills .nav-item .nav-link > span.expand-btn {
      margin-right: 4px;
   }

   .app-sidebar .nav-pills .nav-item .nav-link > span.badge {
      flex: 0;
      border-radius: 0.25rem !important;
      min-width: 2.7em;
   }

.dxbs-tree.app-sidebar > ul.nav ul.nav {
   margin: 0 !important;
}

   .dxbs-tree.app-sidebar > ul.nav ul.nav .nav-item {
      padding-bottom: 0;
   }

   .dxbs-tree.app-sidebar > ul.nav ul.nav .nav-link {
      font-size: 0.825rem;
      font-weight: 400;
      padding: 0 1rem;
   }

.dxbs-tree.app-sidebar .badge {
   margin: 0;
   border: 0 !important;
   padding: 3px 4px;
   color: #fff !important;
   background-color: #6c757d !important;
   font-size: 0.75rem;
   font-weight: 400;
}

.sidebar .nav-pills .nav-item {
   margin: 0;
}

.app-sidebar .nav-pills > .nav-item > a:not(.active) {
   background-image: none !important;
}

.app-sidebar .nav-pills > .nav-item > a {
   border: none !important;
}

.app-sidebar .nav-pills .nav-item.dx-badge-preview .nav-link > span.badge {
   min-width: inherit;
   font-weight: 700;
   color: #212529 !important;
   background-color: #ffc107 !important;
}



.demo-icon {
   display: inline-block;
   width: 26px;
   height: 26px;
   margin-right: 9px !important;
   margin-left: -3px !important;
   background-color: currentColor;
}

.demo-icon-expand,
.demo-icon-collapse {
   display: inline-block;
   width: 12px;
   height: 12px;
   background-color: currentColor;
}

.demo-icon-collapse {
   mask-image: url("../images/CollapseButton.svg");
   -webkit-mask-image: url("../images/CollapseButton.svg");
}

.demo-icon-expand {
   mask-image: url("../images/ExpandButton.svg");
   -webkit-mask-image: url("../images/ExpandButton.svg");
}


.demo-products .row > div {
   margin-bottom: 2rem;
}

.demo-products .demo-product {
   cursor: pointer;
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 1.5rem;
   padding-bottom: 1.5rem;
   height: 100%;
   margin: 0;
}

   .demo-products .demo-product:hover {
      transform: translate(0, -6px);
      transition: all .2s ease-out;
      box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.1) !important;
   }

   .demo-products .demo-product .demo-product-info {
      display: inline-block;
      font-size: 13px;
   }

.demo-product-icon {
   width: 40px;
   height: 40px;
}

.demo-product-icon-grid {
   mask-image: url("../images/landing/DataGrid.svg");
   -webkit-mask-image: url("../images/landing/DataGrid.svg");
}

.demo-product-icon-pivot {
   mask-image: url("../images/landing/PivotGrid.svg");
   -webkit-mask-image: url("../images/landing/PivotGrid.svg");
}

.demo-product-icon-charts {
   mask-image: url("../images/landing/Charts.svg");
   -webkit-mask-image: url("../images/landing/Charts.svg");
}

.filter-unika {
   filter: invert(46%) sepia(47%) saturate(5016%) hue-rotate(171deg) brightness(100%) contrast(104%);
}

.demo-product-icon-scheduler {
   mask-image: url("../images/landing/Scheduler.svg");
   -webkit-mask-image: url("../images/landing/Scheduler.svg");
}

.demo-product-icon-editors {
   mask-image: url("../images/landing/Editors.svg");
   -webkit-mask-image: url("../images/landing/Editors.svg");
}

.demo-product-icon-navigation {
   mask-image: url("../images/landing/Navigation.svg");
   -webkit-mask-image: url("../images/landing/Navigation.svg");
}

.demo-product-icon-reports {
   mask-image: url("../images/landing/Reports.svg");
   -webkit-mask-image: url("../images/landing/Reports.svg");
}

.demo-product-icon-upload {
   mask-image: url("../images/landing/Upload.svg");
   -webkit-mask-image: url("../images/landing/Upload.svg");
}


.demo-card,
.demo-card-wide,
.code-snippet,
.demo-description:not(.demo-products) {
   max-width: 1100px;
}


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


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

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

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


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


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   margin-bottom: 0.5rem;
   font-weight: 500;
   line-height: 1.2;
   color: #2FA4E7;
}

h3, .h3 {
   font-size: 1.75rem;
}



.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
   content: "*";
   color: red;
}

.iwdbottommessage {
   display: flex;
   justify-content: center;
   bottom: 10px;
   position: absolute;
   width: 100%;
}

.iwdfooter {
   position: absolute;
   background-color: lightgray;
   bottom: 0;
   left: 0;
   right: 0;
   border-top: solid 1px #AAA;
   padding: 0 12px 0 12px;
   max-width:250px;
   min-width:250px;
}

   .iwdfooter .version,
   .iwdfooter .copyright {
      font-size: 11px;
      color: black;
   }

.Backcolor {
   background-color: silver;
   border: solid 1px #222;
}

.SecondBackcolor {
   background-color:  moccasin;
   border: solid 1px #222;
}

.BackcolorDatagrid {
   background-color: chocolate;
}


.Linktextwhiteandright {
   color: white;
  
   text-align: right;
}

.Backcolornested .card {
   background-color: bisque;
}


   .Backcolornested .card > .dxbs-table > thead > tr:first-child > th,
   .Backcolornested .card > .dxbs-table > thead > tr:first-child > td {
      background-color: moccasin !important;
   }

.BackcolorEditnested .card > .dxbs-table > tbody > tr > td  {
   background-color: red;
   border: double;
}

.BackcolorEditnested .card > .dxbs-table > tbody > tr > td > dxbs-grid-edit-form {
   background-color: red;
   border: double;
}

.BackcolorEditnested .card {
   background-color: red;
   border: double;
}

/* Loading page */
.triangle-container {
   left: calc(-50vw + 50%);
   position: fixed;
   right: calc(-50vw + 50%);
   top: 0;
   bottom: 0;
   z-index: -1;
   background-color: rgba(0,158,224,1);
}

.triangles {
   background-image: url("../images/triangles.svg");
   background-size: cover;
   height: 100%;
   bottom: 0;
   left: 0;
   mix-blend-mode: hard-light;
   position: fixed;
   right: 0;
   top: 0;
   background-position: center center;
}

.loading-container {
   position: relative;
   text-align: center;
   background-color: #fff;
   margin: 10% auto 0 auto;
   padding: 20px;
}


/* Login page */
.login-body {
   position: relative;
   /*   padding: 10px 10px;*/
   /*   background-color: rgba(0,158,224,1);*/
}

.logo {
   text-align: center;
}

   .logo h4 {
      margin: 20px auto;
   }

.login-container, .loading-container, .mdc-card {
   border-radius: 0 !important;
   box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19) !important;
}

   .login-container .mdc-card {
      padding: 40px 30px;
      width: 500px;
   }

   .login-container .mat-accordion {
      width: 500px;
   }

.container-fluid .login-container {
   display: block;
   max-width: 500px;
}

.additional-info {
   color: #636c72;
   background-color: rgba(0,0,0,.04);
   padding: 10px 6px;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   font-size: .875rem;
}

.login-container {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   align-content: center;
   margin: 5% auto 0;
}

.login-body {
   background-image: url("../images/triangles.svg");
   background-size: cover;
   flex-direction: column;
   margin: 0 auto;
}

   .login-body .mat-accordion .mat-expansion-panel__header {
      flex-basis: 80%;
   }

   .login-body .mat-expansion-panel {
      background-color: #f4f4f4 !important;
   }




.demo-icon-error {
   width: 20px;
   height: 20px;
   mask-image: url("../images/error-24px.svg");
   -webkit-mask-image: url("../images/error-24px.svg");
}


.roller-container:first-of-type {
   display: none !important;
}

.dxbs-gridview > .card .dxbs-table > thead > tr:first-child > th, .dxbs-gridview > .card .dxbs-table > thead > tr:first-child > td {
   background-color: silver;
   border-top: 0;
}


element.style {
   border-top-style: hidden;
}
/*.dxbs-gridview > .card > .dxbs-table:first-child > thead > tr:first-child, .dxbs-gridview > .card > .dxbs-grid-vsd > .dxbs-table > tbody > tr:first-child, .dxbs-gridview > .card > .dxbs-grid-hsd > .dxbs-table > tbody > tr:first-child, .dxbs-gridview > .card > .dxbs-grid-header-container > .dxbs-table:first-child > thead > tr:first-child {
   border-top: hidden;
}*/

.dxgvHSDC > .dxbs-table.table-bordered {
   border-top-style: hidden;
}

.dxbs-gridview > .card > .dxbs-table:first-child > thead > tr:first-child, .dxbs-gridview > .card > .dxbs-grid-vsd > .dxbs-table > tbody > tr:first-child, .dxbs-gridview > .card > .dxbs-grid-hsd > .dxbs-table > tbody > tr:first-child, .dxbs-gridview > .card > .dxbs-grid-header-container > .dxbs-table:first-child > thead > tr:first-child {
   border-top-width: 1px;
   border-top-color: blue;
   border-bottom-style: hidden;
}

.firstgrid th {
   color: black;
   background-color: silver;
}

.firstgrid th span {
   color: black;
}

.secondgrid th {
   color: black;
   background-color: burlywood !important;
}

   .secondgrid th span {
      color: black;
   }


.ComboMitText {
   display: inline-block;
   /*border: solid 1px #222;*/
   padding: 1rem
}

.Backcolor {
   background-color: silver;
   border: solid 1px #222;
}


.app-sidebar > .nav-pills > .nav-item:first-of-type {
   padding-top: 0.1rem;
}



a.loginlink {
   display: flex;
   font-size: 1rem;
   font-weight: bold;
   text-decoration: underline;
   margin-right: 0.9rem;
   align-items: center;
}

.logo-container .logo-image {
   background-color: currentColor;
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   cursor: pointer;
   margin-left: 16px;
   width: 180px;
   height: 30px;
   mask-image: url("../images/Isocom.svg");
   -webkit-mask-image: url("../images/Isocom.svg");
}

@media (max-width: 359.98px) {
   .logo-container .logo-image {
      width: 28px;
      height: 28px;
      mask-image: url("../images/Isocom-xs.svg");
      -webkit-mask-image: url("../images/Isocom-xs.svg");
   }
}


.mini .drawer-profile {
   padding: 0 4px;
}

.drawer-profile {
   padding: 16px;
   border-bottom: solid 1px #777;
   background-image: url("../images/profile-bg.jpg");
   background-size: cover;
   color: #fff;
   font-size: 12px;
}

   .drawer-profile a,
   .drawer-profile .material-icons {
      color: #fff;
   }



.mini .after.mdc-sub-menu-icon,
.mini .miniHover {
   transform: translateX(200%);
   animation: slide-out 1s forwards;
   transition: .4s ease-in-out;
   visibility: hidden;
   opacity: 0;
   position: fixed;
}


.mini .mdc-drawer:hover .after.mdc-sub-menu-icon,
.mini .mdc-drawer:hover .miniHover {
   transform: translateX(0%);
   animation: slide-in 1s forwards;
   transition: width .4s ease-in-out;
   visibility: visible;
   opacity: 1;
   position: relative;
}

.account_circle {
   width: 45px;
   height: 45px;
   background-color: transparent;
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   background-image: url("../images/account_circle-36px.svg");
   margin: 0 0 0 0;
   /*mask-image: url("../images/account_circle-24px.svg");
   -webkit-mask-image: url("../images/account_circle-24px.svg");*/
}



/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

   .drawer-profile {
      padding: 0 4px;
   }

      .mdc-sub-menu-icon,
      .drawer-profile span,
      .miniHover,
      .brand {
         visibility: hidden;
         opacity: 0;
         position: fixed;
      }

   .full .drawer-profile span,
   .full .miniHover,
   .full .brand,
   .mdc-drawer:hover .drawer-profile span,
   .mdc-drawer:hover .miniHover,
   .mdc-drawer:hover .brand {
      visibility: visible;
      opacity: 1;
      position: relative;
   }
}

#pdf {
   background-color: Transparent;
   background-image: url(../Images/pdf-icon-13483.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   margin: auto;
   height: 25px;
   width: 25px;
   align-content: center;
   border: hidden;
}

.article-table {
   border-collapse: collapse;
   border-spacing: 0;
   display: inline-block;
   overflow-x: auto;
   margin: 8px 0 32px;
   max-width: 100%;
   border: 1px solid #eee;
   width: 100%
}

   .article-table.article-table-same th, .article-table.article-table-same td {
      width: 33%;
   }

   .article-table.article-table-same {
      display: table;
   }


   .article-table th {
      font-family: Roboto, sans-serif;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-size: 1rem;
      line-height: 1.75rem;
      font-weight: 400;
      letter-spacing: .04em;
      text-decoration: inherit;
      text-transform: inherit;
      background: whitesmoke;
      border-top: none;
      font-size: 1.143rem;
      color: #202124;
      text-align: left;
      border: 1px solid #eee;
      padding: 12px 12px 12px 24px;
   }

   .article-table td {
      border: 1px solid #eee;
      padding: 12px 12px 12px 24px;
   }

.article-image {
   max-width: 100%;
}

.article-table td:first-child {
   border-left: none;
}

.article-table td:last-child {
   border-right: none;
   width: 100%;
}


.sk-cube-grid {
   width: 40px;
   height: 40px;
   margin: 100px auto;
}

   .sk-cube-grid .sk-cube {
      width: 33%;
      height: 33%;
      background-color: #333;
      float: left;
      -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
      animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
   }

   .sk-cube-grid .sk-cube1 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
   }

   .sk-cube-grid .sk-cube2 {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
   }

   .sk-cube-grid .sk-cube3 {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
   }

   .sk-cube-grid .sk-cube4 {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
   }

   .sk-cube-grid .sk-cube5 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
   }

   .sk-cube-grid .sk-cube6 {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
   }

   .sk-cube-grid .sk-cube7 {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
   }

   .sk-cube-grid .sk-cube8 {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
   }

   .sk-cube-grid .sk-cube9 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
   }

.code {
   background-color: rgb(245, 245, 245);
}

@-webkit-keyframes sk-cubeGridScaleDelay {
   0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
      transform: scale3D(1, 1, 1);
   }

   35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
   }
}

@keyframes sk-cubeGridScaleDelay {
   0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
      transform: scale3D(1, 1, 1);
   }

   35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
   }
}

.blazor-fiddle {
   white-space: nowrap;
   overflow: auto;
}