@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    /*//font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    /*font-size: 12em;*/
    font-size: 12px;
    line-height: 1.2 !important;
    color: #080808 !important;
    height:100%;
    width:100%;
    position: absolute
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

.main .top-row {
    /*background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;*/
}

.main .top-row > a, .main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.table {
  /* width: 100%; */
  color: #080808 !important;
}

  .table td, .table th {
    padding: .25rem !important;
  }

.sidebar {
  /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
}

.sidebar .top-row {
    background-color: rgba(0,0,0,0.4);
}

.sidebar .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

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

.sidebar .nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.sidebar .nav-item a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.sidebar .nav-item a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.content {
  padding-top: 1.1rem;
}

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.owncontainer {
  width: 100%;
  height: 100%;
}

.box {
  /*width: 60%;*/
  background-color: #fff;
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
}

.box1 {
  /*width: 360px;*/
  background-color: #fff;
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
}

.handler {
  width: 15px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}

.handler::before {
    content: '';
    display: block;
    width: 4px;
    height: 100%;
    background: #17a2b8;
    margin: 0 auto;
}

.table-scrollable {
  height: 98%;
  overflow-y: scroll;
}

td img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767.98px) {
  .main .top-row:not(.auth) {
    display: block !important;
  }

  .main .top-row.auth {
    justify-content: space-between;
  }

  .main .top-row a, .main .top-row .btn-link {
    margin-left: 0;
  }
}

@media (min-width: 100.98px) {
  .main .top-row:not(.auth) {
    display: block !important;
  }
}


@media (max-width: 680.98px){
  .main .top-row:not(.auth) {
    display: block !important;
  }

  /*.main .top-row.auth {
    justify-content: space-between;
  }

  .main .top-row a, .main .top-row .btn-link {
    margin-left: 0;
  }*/
}

@media (min-width: 768px) {
  app {
    flex-direction: row;
  }

  .sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
  }

  .main .top-row {
    position: sticky;
    top: 0;
  }

  .main > div {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }

  .navbar-toggler {
    display: none;
  }

  .sidebar .collapse {
    /* Never collapse the sidebar for wide screens */
    /*Commented below line to collapse the menu */
    /*display: block;*/ 
    /*display: compact;*/ 
  }
}

.mp_vinkblue {
  width: 33px;
  height: 20px;
  background-color: #1367ac;
  fill: rgba(0, 0, 0, 0.2);
  mask: url(/Resources/VinkButton.svg) no-repeat center / contain;
  -webkit-mask: url(/Resources/VinkButton.svg) no-repeat center/ contain;
  cursor: pointer;
}
/*.mp_vinkblue:disabled {
  background-color: #71a4cd;
  cursor: none;
  pointer-events: none;
}*/
.mp_cancelbutton {
  width: 33px;
  height: 20px;
  background-color: #1367ac;
  mask: url(/Resources/CancelButton.svg) no-repeat center / contain;
  -webkit-mask: url(/Resources/CancelButton.svg) no-repeat center/ contain;
  cursor: pointer;
 /* //pointer-events: none;*/
}

  
.mp_Addblue {
  width: 15px;
  height: 16px;
  background-color: #1367ac;
  mask: url(/Resources/AddButtonBlue.svg) no-repeat center / contain;
  -webkit-mask: url(/Resources/AddButtonBlue.svg) no-repeat center/ contain;
  cursor: pointer;
}

.mp_Trashbutton {
  width: 15px;
  height: 16px;
  background-color: #1367ac;
  mask: url(/Resources/BlackTrashButton.svg) no-repeat center / contain;
  -webkit-mask: url(/Resources/BlackTrashButton.svg) no-repeat center/ contain;
  cursor: pointer;
  /*//pointer-events: none;*/
}

.mp_remove {
  width: 33px;
  height: 20px;
  background-color: #948f8f;
  fill: rgba(0, 0, 0, 0.2);
  mask: url(/Resources/Remove.svg) no-repeat center / contain;
  -webkit-mask: url(/Resources/Remove.svg) no-repeat center/ contain;
  cursor: pointer;
}

.mp_card {
  width: 33px;
  height: 20px;
  background-color: #948f8f;
  fill: rgba(0, 0, 0, 0.2);
  mask: url(/Resources/Cards.svg) no-repeat center / contain;
  -webkit-mask: url(/Resources/Cards.svg) no-repeat center/ contain;
  cursor: pointer;
}

.mp_Addblue:disabled, mp_remove:disabled, .mp_Trashbutton:disabled, .mp_cancelbutton:disabled, .mp_vinkblue:disabled {
  background-color: rgb(222,223,225);
  cursor: none;
  pointer-events: none;
}
 
.headerimage{
    height:20px;
    width:20px;
    cursor: pointer;
}

.orderDescending::after {
  mask: url(/Resources/sort_descending.png);
  content: url(/Resources/sort_descending.png);
  list-style-image: url(/Resources/sort_descending.png);
}

.orderAscesending::after {
  mask: url(/Resources/sort_descending.png);
  content: url(/Resources/sort_descending.png);
  list-style-image: url(/Resources/sort_ascending.png);
}

.orderAscesending {
  list-style-image: url(/Resources/sort_ascending_hover.png) !important;
}

orderDescending:hover {
  list-style-image: url(/Resources/sort_descending_hover.png) !important;
}

.header {
  color: #5f9ea0 !important;
}

#containernew {
/*  width: 100%;
  height: 100%;*/
}

#left_panel {
    /*position: absolute;*/
    background-color:white;
    left: 10px;
    top: 0;
    bottom: 0;
    right: 335px;
    /*margin-right: 4%;*/
    /* background: grey;*/
    min-width: 50px;
    resize: horizontal;
    overflow-x: auto;
    height:100%;
    width:50%;
}

#right_panel {
    /*position: absolute;*/
    /*position: relative;*/
    background-color:white;
    right: 0;
    top: 0;
    bottom: 0;
    width: 350px;
    /*color: #fff;*/
    /*background: black;*/
    min-width: 50px;
    /*background-color: white;*/
    resize: horizontal;
    overflow-x: auto;
    height:100%;
}

#card_middle_panel {
  position: absolute;
  /*position: relative;*/
  right: 0;
  top: 0;
  bottom: 0;
  left:370px;
  width: 450px !important;
  /*color: #fff;*/
  /*background: black;*/
  min-width: 50px;
  background-color: white;
  height: 89%
}

#card_right_panel {
  position: absolute;
  /*position: relative;*/
  right: 32px;
  top: 0;
  bottom: 0;
  width: 420px !important;
  /*color: #fff;*/
  /*background: black;*/
  min-width: 50px;
  background-color: white;
  height: 89%
}

#drag {
/*  position: absolute;*/
  /*left: 5px;*/
  /*right:28.3%;*/
  top: 0;
  bottom: -2px;
  width: 10px;
  cursor: w-resize;
  background-color: rgb(230,230,235);
}

#drag_middle {
  /*position: absolute;*/
  /*left: 5px;*/
  /*right:28.3%;*/
  top: 0;
  bottom: -2px;
  width: 10px;
  cursor: w-resize;
  background-color: rgb(230,230,235);
}

#drag_right {
  /*position: absolute;*/
  /*left: 5px;*/
  /*right:28.3%;*/
  top: 0;
  bottom: -2px;
  width: 10px;
  cursor: w-resize;
  background-color: rgb(230,230,235);
}
.rtsReleased {
  /*font-style: italic;*/
  color: green;
  font-weight: bold;
}

.rtsPaused, .rtsStarted {
  color: green;
  font-style: italic;
}

.rtsDefault {
  color: red;
  font-weight: bold;
}

.multipleUpdate {
  background-color: #d9e1ec;
}

.customHr {
  height: 1px;
  border-width: 0;
  color: gray;
  background-color: #2d3742;
}

.selectedRow {
  background-color: rgb(204,228,248) !important;
}

.has-search .form-control {
  padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.model-body {
  left: 15px;
}

table.table-bordered {
  border: 1px solid white !important;
  margin-top: 20px;

}

table.table-bordered > thead > tr > th {
border: 1px solid white !important;
}

table.table-bordered > tbody > tr > td {
border: 1px solid white !important;
}

.btn-secondary {
  background-color: RGB(225,225,225) !important;
  color: black !important;
}

.navbar-light .navbar-toggler {
  color: rgba(0,0,0,.5);
  border: none !important;
  border-color: rgb(249 247 247 / 10%);
}

.top-row[b-dkjvi2nkj2] {
   background-color: white !important;
   border-bottom: none !important;
 }

.overlay {
  position: fixed;
  /*display: none;*/
  width: 250px;
  height: 100%;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1072;
  cursor: pointer;
  transition: .5s ease;
  outline: 9999px solid rgba(0,0,0,0.5);
}


.overlayshow {
  display: block !important;
}

.overlayhide {
  display: none !important;
}

.overlay label{
  color : black;
}

.overlay::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
}

ul > :last-child {
  margin-top: auto;
}

.table-hover tbody tr:hover {
    color: #212529 !important;
    background-color: rgb(229,241,251) !important;
    cursor: pointer;
}

.vl {
  border-left: 6px solid green;
  height: 100%;
  /*position: absolute;*/
  /*//left: 50%;*/
  margin-left: -3px;
  top: 0;
}

    
div.vertical-line {
  width: 4px; /* Line width */
  /*background-color: black;*/ /* Line color */
  height: 2.5em; /* Override in-line if you want specific height. */
  float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
  margin-right:5px;
  border-radius: 8px !important;
}

.vertical-line {
    display: inline-block;
    align-self: stretch;
    width: 4px;
    min-height: 2.5em;
    background-color: currentcolor;
    opacity: 100;
}

.modalTest {
  /* arbitrary styling */
  background-color: white;
  /*border-radius: 5px;*/
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  height: 100%;
  width: 300px;
  /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
  position: fixed;
  /*top: 50%;
  left: 50%;*/
  margin-left: -5px;
  margin-top: 0px;
  left: 0;
  right: 0;
  bottom: 0 !important;
  background-color: #fff;
  z-index: 1072;
  cursor: pointer;
  transition: .15s ease;
  border: none;
}

  .modalTest::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0 !important;
    background-color: rgba(0,0,0,0.5);
    /*display: block !important;*/
  }

  .modalTest label {
    color: black;
  }

.customeRow {
  height: 30px;
  align-items: center;
  border-left: solid 2px blue;
  background-color: rgb(240,240,243);
}

.customeCol {
  /* border-right: solid 2px white; */
  /*height: 30px;*/
  min-height:30px;
/*  background-color: rgb(240,240,243);*/
  align-items: center;
  /* padding-right: 27px; */
  margin-right: 2px;
  /* top: 50%; */
  /* position: absolute; */
  /* justify-content: center; */
  display: flex;
  /*border-left: solid 1px rgb(111,162,234);*/
  padding-left: 5px;
}

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  /*width: 10em;*/
  overflow: auto;
  height: 2em;
}

  .invisible-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
  .mostly-customized-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #aaa; /* or add it to the track */
    margin-bottom:10px;
    margin-top:10px;
  }

  /* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000;
  }

hr.dashed {
  border-top: 1px dashed rgb(227,227,227);
  margin: 5px;
}

.cardborder {
  border: 1px solid rgb(227,227,227);
  border-left: 20px solid;
  border-left-color: rgb(227,227,227);
  border-top-left-radius: 1px;
  height:75px;
  margin-right:2px;
  /*margin-top: 5px;
  margin-bottom: 5px;*/
  
}
.cardborder:hover {
  background-color: azure;
}

.cardcontainer {
  margin-left: 10px;
  margin-right: 5px;
  height: 720px
}

/*.card {
    background-color: rgba(245, 245, 245, 1);
}*/

.card-header, .card .card-footer {
    opacity: 1
}

.draggable {
    width: 25%;
    min-height: 6.5em;
    margin: 1rem 0 0 1rem;
/*    background-color: #29e;
    color: white;*/
    border-radius: 0.75em;
    padding: 4%;
    touch-action: none;
    user-select: none;
}

#scrollableContent {
    overflow-y: auto;
    height: calc(93vh - 97px);
}