:root {
  --body-background: #e9e9e9 !important;
  --bg-color: #ffffff;
  --text-color: #212121;
  --modal-color: #ffffff !important;
  --pixel-shadow: 0px;
  --menu-item-hover: #037dc9  !important;
  --dialog-blur: #2b014c5c !important;
  --gray-text: #212121;
  --green-text: #212121;
  --tableTr: linear-gradient(45deg, #b9e7e457, transparent);
  --selectedSidebar: linear-gradient(45deg, #34c3b857, transparent);
  --tablefooter: transparent ;

}
[data-theme="dark"] {
  --body-background: #1d1d1d00 !important;
  --bg-color: #1d1d1dfb;
  --text-color: #e0e0e0 !important;
  --modal-color: #0c0d0d !important;
  --pixel-shadow: 63px;
  --menu-item-hover: #adcec9 !important;
  --dialog-blur: #2b014c !important;
  --gray-text: #cccccca3;
  --green-text: #57ffbea3;
  --tableTr: linear-gradient(45deg,#3d38426e, transparent);
  --selectedSidebar: linear-gradient(45deg,#7f00ff6e, transparent);
  --tablefooter: transparent ;
}

html, body {height: 100%; margin: 0; padding: 0;}

* html #outer {/* ie6 and under only*/
    height:100%;
}

body {
    color: var(--text-color);
    background:  var(--body-background);
    backdrop-filter: blur(33px) !important;
    -webkit-backdrop-filter: blur(33px) !important;
    height: 100%;
    background-size:     cover;                      
    background-position: center center;  
    overflow-x: hidden !important;
    overflow-y: auto;
  }

  .text-home{
      color:#0b40f0;
  }
  .text-hand{
    color: #e67373;
  }
  .text-nested{
    color: #ee801a;
  }
  .text-station{
    color: #cb1aee;
  }
  .text-green{
    color: #38c556;
  }
  .text-red{
    color: #dd425c;
  }
  .text-red-map{
    color: #c26473;
  }

  .hideOverFlow{
    overflow: hidden !important;
  }

  .sideBarSelected{
    background: var(--selectedSidebar);
    font-weight: 700;
  }

  .link{
    cursor:  pointer !important;
    color:#0b40f0 !important;
  }

  .link:hover{
    cursor:  pointer !important;
    color:#4e68c0 !important;
    text-decoration: underline !important;
  }

  .companyLink{
    font-size: small;
    color: #6d6d6d !important;
  }

  .companyLink:hover{
    cursor:  pointer !important;
    color:#4e68c0 !important;
    text-decoration: underline !important;
  }

h1,h2,h3,h4,h5,a, .nav-link, .el-collapse-item__header{
    font-family: 'Montserrat', sans-serif !important;
}

.ticketLink{
  color: #075cff !important;
  font-weight: 600 !important;
  text-decoration: underline !important;

}

.btn-dark {
    color: #fff;
    background: linear-gradient(45deg, #626262, #000000);
    border-color: #424242 !important;
}

.btn-success {
    color: #fff;
    background: linear-gradient(45deg, #52bf50, #78dbf1);
    border-color: #45ff91 !important;
}
.btn-danger {
    color: #fff;
    background: linear-gradient(45deg, #e82060, #8b1355);
    border-color: #a91759 !important;
}
.btn-info {
    color: #fff;
    background: linear-gradient(45deg, #5b3cc4, #c43cb3);
    border-color: #a573e6 !important;
}

.vs-popup--content {
    overflow-x: hidden !important;
}

.btn-orange {
    color: #fff;
    background-color: #e67373 !important;
    border-color: #e67373 !important;
}

.btn-primary2 {
  background-color: unset !important;
  font-weight: 600;
  color: #568383 !important;
  border-color: #aecdcd !important;
  border-radius: unset !important;
  border-width: 1px !important;
  font-size: x-small !important;
}

.contactTitle{
  font-size: large;
}

.card {
    border-style: none;
    border-radius: 1rem !important;
    background: var(--bg-color);
    box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    -webkit-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    -moz-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
  }
  .card-header{
    background-color: #332d2db0;
    border-bottom: unset !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
  }
  
  .card-custom {
    border-style: none !important;
    box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445 !important;
    -webkit-box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445 !important;
    -moz-box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445 !important;
    -webkit-box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445!important;
    /* box-shadow: 7px 6px 4px #5b3cc4, -2px -1px 4px #621f71 !important;
    -webkit-box-shadow: 7px 6px 4px #5b3cc4, -2px -1px 4px #621f71 !important;
    -moz-box-shadow: 7px 6px 4px #5b3cc4, -2px -1px 4px #621f71 !important; */
  }

.card-click{
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border-bottom-width: .1rem;
  border-bottom-color: #d7d7d7;
  border-radius: 2rem !important;
  box-shadow: 0px 0px 10px #d7d7d7;
  -webkit-box-shadow: 0px 0px 10px #d7d7d7;
  -moz-box-shadow: 0px 0px 10px #d7d7d7;
  text-shadow: 7px 3px 10px #1d1d1d00, 0px 0px 1px #7731e7 !important;
}
.card-click:hover{
  transform: rotate(355deg);
  cursor:pointer;
  text-shadow: 7px 3px 10px #1d1d1d00, 0px 0px 1px #7731e7 !important;
  /* box-shadow: 7px 6px 0px #5b3cc4, -2px -1px 4px #621f71 !important; */

  box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445 !important;
  -webkit-box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445 !important;
  -moz-box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445 !important;
  -webkit-box-shadow: 7px 6px 0px #621f7129, -3px -3px 0px #5b3cc445!important;
}

.card-address{
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border-bottom-width: .1rem;
  border-bottom-color: #d7d7d7;
  border-radius: 2rem !important;
  box-shadow: 0px 0px 10px #d7d7d7;
  -webkit-box-shadow: 0px 0px 10px #d7d7d7;
  -moz-box-shadow: 0px 0px 10px #d7d7d7;
  /* text-shadow: 7px 3px 10px #1d1d1d00, 0px 0px 1px #7731e7 !important;
  box-shadow: 7px 6px 0px #5b3cc4, -2px -1px 4px #621f71 !important; */
}
.card-address:hover{
  text-shadow: 7px 3px 10px #1d1d1d00, 0px 0px 1px #7731e7 !important;
  box-shadow: 7px 6px 0px #5b3cc4, -2px -1px 4px #621f71 !important;
}

.card-footer {
  border-top: unset !important;
}

#sidebar-container {
    min-height: 100vh;
    background: var(--bg-color);
    box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    -webkit-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    -moz-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    width: 20rem;
    border-radius: 1rem;
    font-size: small;
  }
 
  #sidebar-container .logo {
    padding: 0.1rem 1.25rem;
  }

  #sidebar-container2 {
    min-height: 100vh;
    background: var(--bg-color);
    box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    -webkit-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    -moz-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px var(--pixel-shadow) #2b014c !important;
    width: 20rem;
    border-radius: 1rem;
    font-size: small;
  }
 
  #sidebar-container2 .logo {
    padding: 0.1rem 1.25rem;
  }

  #mobileNav{
    display: none;
  }

  .mobileMenu {
    position: fixed;
    top: 0;
    z-index: 1020;
    background: var(--bg-color);
    width: 100%;
    height: 100%;
}

.form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-append>.btn, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-prepend>.input-group-text {
    /* border-radius: 0.3rem !important;
    background-color: #1d1d1d00 !important;
    background-clip: padding-box !important;
    border: 1px solid #3e4d6a8f  !important; */

    border-radius: 0.6rem !important;
    background-color: #87878724 !important;
    background-clip: padding-box !important;
    border: 1px solid transparent !important;
}

.multiselect__input{
  background-color: #1d1d1d00 !important;
    background-clip: padding-box !important;
    color: var(--text-color) !important;
}

.multiselect__tags{
  background-color: #1d1d1d00 !important;
  background-clip: padding-box !important;
  color: var(--text-color) !important;
  border-radius: 0.9rem !important;
  border: 1px solid #3e4d6a8f  !important;
  
}

.multiselect__content{
  overflow: hidden;
}

.btn{
    border-radius: 0.6rem !important;
}

.tpLink{
  color: #3d57d3 !important;
  cursor: pointer !important;
}
.tpLink:hover{
  color: #3d57d3 !important;
  text-decoration: underline !important;
}

.click{
  cursor: pointer !important;
}

.navbar{
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.bg-dark {
    background-color: #6b6b6b! important;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: #6c757d !important;
}

.el-drawer{
    border-bottom-right-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    box-shadow: 0 0 82px 0 #3e4d6a8f !important;
    background: linear-gradient(180deg, rgba(226,255,253,1) 0%, rgb(255 221 223/ 86%) 85%) !important;    
}
.el-menu{
    background-color:#fff0 !important;
}
.menu-items{
    color: var(--text-color);
}
.menu-items:hover{
    color: var(--menu-item-hover) !important;
    font-weight: 600;
}


.vs-con-textarea .vs-textarea{
    height: 100px;
}

.vs-con-table {
    background: #fbfbfb00 !important; 
}
.vs-table--tbody-table tr{
    background: #fff0 !important;
}

.vs-pagination--ul {
    background: #1d1d1d00  !important;

}

.vs-pagination--li {
    font-weight: 500 !important;
    color: #a1a1a1fc !important;
    font-size: smaller !important;

}

.vs-table.striped .vs-table__tr:nth-child(2n){
  background: var(--tableTr) !important;
}

.vs-table__footer{
  background: var(--tablefooter) !important;
  border-radius: 1rem !important;
}



.alert-danger {
    color: var(--text-color);
    font-weight: 600 !important;
    background-color: #1d1d1d00 !important;
    border-color: #f54052 !important;
    padding: .3rem !important;
    border-style: solid;
    border-width: 1px;
  }
  .alert-success {
    color: var(--text-color);
    font-weight: 600 !important;
    background-color: #1d1d1d00 !important;
    border-color: #04ff46 !important;
    padding: .3rem !important;
    border-style: solid;
    border-width: 1px;
  }
  .alert-info {
    color: var(--text-color);
    font-weight: 600 !important;
    background-color: #1d1d1d00 !important;
    border-color: #8741f7 !important;
    padding: .3rem !important;
    border-style: solid;
    border-width: 1px;
  }

  .vs-dialog-content {
     background: unset !important;
     overflow-x: hidden !important;
     max-height: 300vh !important;
  }
  
  .vs-dialog {
    background: var(--modal-color) !important;
    color: var(--text-color) !important;
    box-shadow: 4px 2px 4px 1px #1a8bd566, 0px 0px 63px var(--dialog-blur) !important;
    -webkit-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px 63px var(--dialog-blur) !important;
    -moz-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px 63px var(--dialog-blur) !important;
  }

  .modal-header{
    border:unset !important;
  }
  .modal-footer{
    border:unset !important;
  }

  .modal-content{
    border-radius: 1.33rem;
    background: var(--modal-color) !important;
    color: var(--text-color) !important;
    box-shadow: 4px 2px 4px 1px #1a8bd566, 0px 0px 63px var(--dialog-blur) !important;
    -webkit-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px 63px var(--dialog-blur) !important;
    -moz-box-shadow: 0px 0px 24px -7px #1a8bd566, 0px 0px 63px var(--dialog-blur) !important;
  }

  hr{
    border-top: 1px solid #3e4d6a8f !important;
  }

.table td, .table th {
    border-top: 1px solid #3e4d6a8f !important;
}

.vs-table__thead .vs-table__th {
    background: transparent !important;
}

.vs-table__tr:hover .vs-table__td {
    background: #5f9ea021 !important;
}
.vs-table__tr:hover, .vs-table__td:hover {
    background: #5f9ea021 !important;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
  }


.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }



.el-collapse-item__header{
  background-color: #fff0 !important;
  border: 1px solid #616161 !important;
  padding: 1rem !important;
  border-radius: 1rem !important;
  color: var(--text-color) !important;
  font-weight: 600 !important;

}


.el-collapse {
  border-top: 1px solid #ebeef500 !important;
  border-bottom: 1px solid #ebeef500 !important;
}

.card-companies{
  border: 1px solid #616161 !important;    
  box-shadow: 0px 4px 0px 0px #000000, 0px 0px var(--pixel-shadow) #2b014c !important;
  -webkit-box-shadow: 0px 4px 0px 0px #000000, 0px 0px var(--pixel-shadow) #2b014c !important;
}

.el-collapse-item__wrap {
  color: var(--text-color) !important;
  background-color: #fff0 !important;
}
.el-collapse-item__content {
  color: var(--text-color) !important;
}

.vs-table__tr .vs-table__td {
  color: var(--text-color) !important;
}

.el-collapse-item__wrap {
  border-top: 1px solid #ebeef500 !important;
  border-bottom: 1px solid #ebeef500 !important;
}

.list-group-item {
  background: #66339917 !important;
  padding: 0.33rem 1rem !important;
  border: unset !important;
}

.vs-switch {
  background: rgb(233, 233, 233)  !important;
  box-shadow: 1px 2px 6px #a4a4a4;
}
.green{
  color: var(--green-text);
}
.red{
  color: #e82060;
}
.purple{
  color: #c157fffa;
}
.gray{
  color: var(--gray-text);
}

.vdatetime-popup{
  position: absolute !important;
}

.vdatetime-overlay{
  background: unset !important;
}

.pagination-link{
  font-size: medium;
  font-family: 'Montserrat';
  background: var(--secondary);
  color: var(--white);
  border-width: thick;
  border-style: unset;
  border-color: var(--secondary);
  margin-right: 0.1rem;
  padding: 0.1rem 1rem 0.1em 1rem;
}

.pagination-link--active{
  color: var(--white);
  border-style: solid;
  font-weight: 800;
  background: var(--primary) !important;
  border-style: unset;
  transform: scale(1.1);
}

.pagination-link:hover{
  transform: rotate(3deg);
}

.text-l{
  /* text-shadow: 7px 3px 10px black, 0px 0px 1px #7731e7 !important; */
  text-decoration: unset;
}

.vs-input{
  border-radius: 0.9rem !important;
  background-color: #1d1d1d00 !important;
  background-clip: padding-box !important;
  border: 1px solid #3e4d6a8f  !important;
  width: 100% !important;
}

.qrcode-stream-wrapper{
  display: table-row;
}





@media only screen and  (max-width : 480px) {
   
  .el-drawer{
      width: 60% !important; 
  }

  #sidebar-container{
    display: none;
  }
  #mainNav{
    display: none;
  }
  #mobileNav{
    display: flex;
  }
  .tableInfo{
    display: none;
  }
  .vs-table__th{
    width: 50% !important;
  }
}
@media only screen and  (max-width : 600px) {
 
  .el-drawer{
      width: 50% !important;
  }
  #sidebar-container{
    display: none;
  }
  #mainNav{
    display: none;
  }
  #mobileNav{
    display: flex;
  }
  .tableInfo{
    display: none;
  }
  .vs-table__th{
    width: 50% !important;
  }
}

@media only screen and  (max-width : 769px) {
 
  .el-drawer{
      width: 50% !important;
  }
  #sidebar-container{
    display: none;
  }
  #mainNav{
    display: none;
  }
  #mobileNav{
    display: flex;
  }
  .tableInfo{
    display: none;
  }
  .vs-table__th{
    width: 50% !important;
  }
}

.vs-input-parent--border .vs-input-content .vs-input__affects__1{
  border: unset !important;
}

.vs-table__header{
  background: none !important;
}