@import "widgets.css";
@import "colors.css";
@import "backgrounds.css";
@import "https://cdn.jsdelivr.net/gh/hermanya/react-color-table/example/public/bootstrap-with-variables.css";
@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,500&display=swap";
@import "variables.css";
@font-face {
 font-family:material icons;
 font-style:normal;
 font-weight:400;
 src:url(https://fonts.gstatic.com/s/materialicons/v67/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format("woff2")
}
.material-icons {
 font-family:material icons!important;
 font-weight:400;
 font-style:normal;
 letter-spacing:normal;
 text-transform:none;
 display:inline-block;
 white-space:nowrap;
 word-wrap:normal;
 direction:ltr;
 -webkit-font-smoothing:antialiased
}
*,
body {
 font-family:poppins,sans-serif
}
body::-webkit-scrollbar {
 display:none
}
@media only screen and (max-width:800px) {
 *::-webkit-scrollbar {
  display:none!important
 }
}
main {
 padding:1em
}
.fr-container {
 max-width:800px;
 background:#fff;
 margin:auto
}
.toolbar-icon-btn {
 height:41px;
 width:41px;
 border-radius:50px;
 line-height:41px;
 text-align:center
}
.toolbar-icon-btn:hover,
.toolbar-icon-btn:active {
 background:rgba(0,0,0,.175)
}
.navbar-toggler[aria-expanded=false] {
 outline:0!important
}
.navbar-toggler[aria-expanded=true] {
 outline:0!important
}
.navbar-toggler::before {
 content:"menu";
 color:#fff;
 font-size:30px;
 font-family:material icons!important
}
.navbar-toggler[aria-expanded=true]::before {
 content:"close"
}
.nav-link[data-icon]::before,
.dropdown-item[data-icon]::before {
 margin-right:10px;
 content:attr(data-icon);
 position:relative;
 top:5px;
 font-size:20px;
 line-height:normal!important;
 font-family:material icons!important
}
.btn i {
 vertical-align:middle;
 font-size:22px;
 padding-right:6px;
 font-style:normal!important;
 line-height:normal!important;
 font-family:material icons!important
}
h1 i,
h2 i,
h3 i,
h4 i,
h5 i,
h6 i,
label i {
 vertical-align:middle;
 font-size:22px;
 padding-right:6px;
 font-style:normal!important;
 line-height:normal!important;
 font-family:material icons!important
}
.fr-container {
 max-width:800px;
 background:#fff;
 color:#020202;
 margin:auto;
 padding:1em;
 border:1px solid #dee2e6!important;
 border-top-width:3px!important;
 border-top-color:rgba(var(--primary_500),1)!important
}
.fr-xs {
 max-width:320px!important
}
.fr-sm {
 max-width:420px!important
}
.fr-md {
 max-width:800px!important
}
.fr-lg {
 max-width:1000px!important
}
.fr-xl {
 max-width:1200px!important
}
.table-fr-wrapper>.table-wrapper {
 max-height:70vh;
 overflow:hidden
}
.table-wrapper {
 max-height:80vh;
 overflow:auto!important
}
.table-wrapper::-webkit-scrollbar {
 width:10px
}
.table-wrapper::-webkit-scrollbar-track {
 background:#f8f8f8;
}
.table-wrapper::-webkit-scrollbar-thumb {
 background:rgba(0,0,0,.1)
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
 background:rgba(0,0,0,.3)
}
.table-divo {
 white-space:nowrap!important;
 border-bottom:1px solid #dee2e6!important;
 margin-bottom:0!important
}
.table-divo thead {
 color:#fff;
 background:rgba(var(--primary_500),1);
 text-align:center
}
.table-divo thead th {
 position:sticky;
 position:-webkit-sticky;
 top:0;
 z-index:999;
 background-color:#9C27B0;
 color:#fff
}
.table-divo>tbody>tr {
 text-align:center;
 position:relative
}
.table-divo>tbody>tr>td {
 position:relative
}  
.table-divo>tbody>tr>td .material-icons {
 color:#fff
}
.table-divo>tbody>tr:nth-child(even) {
 background:#f8f8f8
}
.table-divo>tbody>tr:hover {
 background:#ff9
}
.table-divo>tbody>tr:hover>td:first-child::before {
 content:"";
 width:4px;
 height:50%;
 border-radius:0 3px 3px 0;
 background:#007bff;
 background:rgba(var(--primary_500),1);
 position:absolute;
 top:50%;
 left:0;
 transform:translate(0,-50%)
}
.table-divo>tbody>tr>td {
 border:none!important;
 vertical-align:middle
}
.table-divo thead>tr>th {
 font-weight:400;
 border-bottom:none;
 height:55px;
 vertical-align:middle
}
.table-divo>tbody>tr>td>.btn {
 width:40px;
 height:40px;
 padding:2px;
 border-radius:50px
}
.table-divo>tbody>tr>td>.btn>.material-icons {
 font-size:20px
}
.table-divo>tbody>tr>td>a.btn>.material-icons {
 padding-top:3px
}
.notice-text-target {
 display:none
}
.modal.fade .modal-dialog.modal-dialog-zoom {
 -webkit-transform:translate(0,0) scale(.5);
 transform:translate(0,0) scale(.5)
}
.modal.show .modal-dialog.modal-dialog-zoom {
 -webkit-transform:translate(0,0) scale(1);
 transform:translate(0,0) scale(1)
}
a.rounded-circle:hover {
 text-decoration:none
}
a.rounded-circle>i {
 transition:all .1s ease
}
a.rounded-circle:hover>i {
 transform:scale(1.1)
}