/* @keyframes growDown {
    0% {
        transform: scaleX(0)
    }
    80% {
        transform: scaleX(0.5)
    }
    100% {
        transform: scaleX(1)
    }
} */
@keyframes growDown {
    0% {
        opacity: 0;
        width: 0;
    }
    50% {
        opacity: 0.5;
        width: 50%;
    }
    100% {
        opacity: 1;
        /* width: 100%; */
    }
}
.dragBox {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    font-weight: bold;
    /* line-height: 95px; */
    color: #6E6E6E;
    /* background-color: #B7B7B4; */
    background: rgba(183, 183, 180, 20%);
    display: inline-block;
    transition: transform 0.3s;
    .inputfile{
      position: absolute;
      height: 100%;
      width: 100%;
      opacity: 0;
      top: 0;
      left: 0;
    }
    #preview , #preview img{
        position: absolute;
        width: 100px;
        height: 100px;
        margin: 0;
        padding: 0;
    }
  }
.rm-active{
    color: #242F5C;
    border-bottom: 5px solid #242F5C;
}
.c-text-primary-blue{
    color: #242F5C;
}
.c-status-progress{
    color: #61B1EB
}
.c-status-end{
    color: #EBB461
}
.c-status-notstarted{
    color: #7F7F74;
}
.c-red{
    color: red;
}
.c-status-active{
    color: #C07F00;
}
.c-status-closed{
    color: #A78295;
}
.c-status-followup{
    color: rgba(167, 130, 149);
}
.c-status-completed{
    color: #5DC574;
}
.c-sortby{
    color: #242F5C;
}
.c-status-approval{
    color: #2B2730;
}
.bg-opa-status-approval{
    background-color: rgba(43, 39, 48, 0.2);
}
.bg-opa-status-completed{
    background-color: rgba(93, 198, 116, 0.2);
}
.bg-opa-status-followup{
    background-color: rgba(167, 130, 149,0.2);
}
.bg-opa-status-active{
    background: rgba(192,127,0,0.2);
}
.bg-opa-status-closed{
    background: rgba(167,130,149,0.2);
}
.bg-blue-primary{
    background: #242F5C;
}
.bg-cancel-primary{
    background: #C81E1E;
}
.bg-opa-status-progress{
    background: rgba(97,177,235,0.2);
}
.bg-opa-status-end{
    background: rgba(235,180,97,0.2);
}
.bg-opa-status-notstarted{
    background: rgba(127,127,116,0.2);
}
.bg-status-progress{
    background-color: #61B1EB
}
.bg-status-end{
    background-color: #EBB461
}
.bg-status-notstarted{
    background-color: #7F7F74
}
.bg-table-text-field{
    background-color: #B7B7B4;
}
.bg-sortBy{
    background-color: rgba(193, 199, 216);
}
.hover\:bg-sortBy:hover{
    background-color: rgba(193, 199, 216);
}

.invert-blue{
    filter: sepia(100%) hue-rotate(190deg) saturate(900%);
}
.sub-invert-blue{
    filter: sepia(100%) hue-rotate(190deg) saturate(60);
}
.border-spacing-15-px{
    border-spacing: 15px 15px
}
.dot{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
}
.btn-status{
    border-width: 1px;
    border-radius: 0.5rem;
}
.collapseSidebar:focus{
    outline: none;
}
.small-icon-sidebar{
    max-width: 32px;
    max-height: 32px;
}
.sb-bg-color{
    background-color: #242F5C;
    /* background-color: rgb(255, 255, 255); */
}

.sb-sub-bg-color{
    background-color: #A3AEDB;
    /* background-color: rgb(255, 255, 255); */

}
.sidebar-dropdown-content{
    /* animation: growDown 300ms forwards */
}

.b {
    display: block;
  }
.bi.bi-dot{
    line-height: 0;
}
.toggle {
position: relative;
width: 100%;
height: 50%;
border-radius: 100px;
background-color: #ddd;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0,0,0,.05);
}

.check {
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}

.check:checked ~ .track {
    box-shadow: inset 0 0 0 20px red;
}

.check:checked ~ .switch {
    right: 2px;
    left: calc(100% - 1.5rem);
    transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
    transition-property: left, right;
    transition-delay: .05s, 0s;
}

.switch {
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
right: 22px;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-property: left, right;
transition-delay: 0s, .05s;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.track {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
border-radius: 40px;
}
.sidebar , .navsidebar{
    transition: width 0.3s;
}
.ts-ml{
    transition: margin-left 0.3s;
}
table#listmodule > thead > tr > th{
    text-align: center;
}
table#listmodule > tbody > tr > td > [type='checkbox']{
    color: #242F5C !important;
}
table#listmodule > tbody > tr > td > [type='checkbox']:checked{
    --tw-ring-color: #242F5C !important;
}