/* ------------------------------------------------------------------------------
*
*  # Form Validation
*
*
* ---------------------------------------------------------------------------- */
.error {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: block;
    color: #F44336;
    position: relative;
}

    .error:before {
        font-family: "icomoon";
        font-size: 1rem;
        position: absolute;
        top: 0.12502rem;
        left: 0;
        display: inline-block;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.field-validation-error {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: block;
    color: #F44336;
    position: relative;
}

    .field-validation-error:before {
        font-family: "icomoon";
        font-size: 1rem;
        position: absolute;
        top: 0.12502rem;
        left: 0;
        display: inline-block;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.field-validation-valid {
    display: none;
}

.popover {
    pointer-events: none;
}

/* ------------------------------------------------------------------------------

    /*------------Flashing Menu---------------------*/

.button-flash {
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
    0% {
        background-color: darkred;
        -webkit-box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: darkred;
        -webkit-box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: darkred;
        -webkit-box-shadow: 0 0 3px #B20000;
    }
}

@-moz-keyframes glowing {
    0% {
        background-color: darkred;
        -moz-box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: darkred;
        -moz-box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: darkred;
        -moz-box-shadow: 0 0 3px #B20000;
    }
}

@-o-keyframes glowing {
    0% {
        background-color: darkred;
        box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: darkred;
        box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: darkred;
        box-shadow: 0 0 3px #B20000;
    }
}

@keyframes glowing {
    0% {
        background-color: darkred;
        box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: darkred;
        box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: darkred;
        box-shadow: 0 0 3px #B20000;
    }
}

/* Ripple effect */
.ripple {
    background-position: center;
    transition: background 0.8s;
}

    .ripple:hover {
        background: grey radial-gradient(circle, transparent 1%, grey 1%) center/15000%;
    }

    .ripple:active {
        background-color: #6eb9f7;
        background-size: 100%;
        transition: background 0s;
    }

/* Ripple effect added to span inside table and increasing size of badges */

tbody .badge {
    font-size: 100%;
    background-position: center;
    transition: background 0.8s;
}

    tbody .badge:hover {
        background: grey radial-gradient(circle, transparent 1%, grey 1%) center/15000%;
    }

    tbody .badge:active {
        background-color: #6eb9f7;
        background-size: 100%;
        transition: background 0s;
    }

.ripple2 {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0 auto;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

    .ripple2:before {
        content: '';
        background-color: black;
        border-radius: 20%;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transform: scale(0.001, 0.001);
        transform: scale(0.001, 0.001);
    }

    .ripple2:focus {
        outline: 0;
        color: #FF0000;
    }

        .ripple2:focus:before {
            -webkit-animation: effect_dylan 0.8s ease-out;
            animation: effect_dylan 0.8s ease-out;
        }

@-webkit-keyframes effect_dylan {
    50% {
        -webkit-transform: scale(1.5, 1.5);
        transform: scale(1.5, 1.5);
        opacity: 0;
    }

    99% {
        -webkit-transform: scale(0.001, 0.001);
        transform: scale(0.001, 0.001);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0.001, 0.001);
        transform: scale(0.001, 0.001);
        opacity: 1;
    }
}

@keyframes effect_dylan {
    50% {
        -webkit-transform: scale(1.5, 1.5);
        transform: scale(1.5, 1.5);
        opacity: 0;
    }

    99% {
        -webkit-transform: scale(0.001, 0.001);
        transform: scale(0.001, 0.001);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0.001, 0.001);
        transform: scale(0.001, 0.001);
        opacity: 1;
    }
}

/* Ripple effect End*/

/* ---------------------------------------------------------------------------------------------------*/

/*------------data table overiding responsive cell not working don't know why commenting in component.min..Forcing control here---------------------*/

/*.dtr-inline.collapsed tbody tr td:first-child,
.dtr-inline.collapsed tbody tr th:first-child {
    position: relative;
}*/

/* ---------------------------------------------------------------------------------------------------*/
legend {
    border-bottom: none !important;
    width: auto !important;
    padding: 7px !important;
}
.col > span {
    word-break: break-all;
}

.col > p {
    word-break: break-all;
}

.fa-lg {
    font-size: 2em;
    line-height: .75em;
    vertical-align: -15%;
}

/* Pulse effect start*/

@media (max-width: 575.98px) {
    .navbar-expand-sm .navbar-nav-link .pulse:not(.position-static) {
        position: static;
    }
}

@media (min-width: 700px) {
    .navbar-nav-link .pulse {
        position: absolute;
        top: 0;
        right: 0;
    }

    .pulse {
        padding-right: .4375rem;
        padding-left: .4375rem;
        border-radius: 10rem;
        height: 5em;
        width: 5em;
        z-index: 10;
        border: 5px solid red;
        display: inline-block;
        padding: .3125rem .375rem;
        font-size: 75%;
        font-weight: 500;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        animation: pulse 1.5s ease-out infinite;
    }

    @keyframes pulse {
        0% {
            -webkit-transform: scale(0);
            opacity: 0.0;
        }

        25% {
            -webkit-transform: scale(0.1);
            opacity: 0.1;
        }

        50% {
            -webkit-transform: scale(0.5);
            opacity: 0.3;
        }

        75% {
            -webkit-transform: scale(0.8);
            opacity: 0.5;
        }

        100% {
            -webkit-transform: scale(1);
            opacity: 0.0;
        }
    }
}

.bell {
    animation: pop 1.5s ease-out infinite;
}

@keyframes pop {
    0% {
        color: #F44336;
        transform: scale(1);
    }
}

/* Pulse effect Ends*/

.ribbon2 {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.6667;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.3125rem 0;
    left: -0.6875rem;
    top: 1.563rem;
    width: 9.375rem;
    z-index: 10;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/*documents stats on hover increase icon size*/

.docstats {
    transition: all 1s ease-in-out;
}

    .docstats:hover .btn {
        transform: scale(1.3);
    }

.img-ft {
    width: 100%;
    height: 8vh;
}
.img-head {
    width: 100%;
}

.head-eximg {
    position: absolute;
    top: 4%;
    color: #fff;
    left: 5%;
}
.bg-blue-30 {
    background-color: #2d3a90 !important;
}

/*.tabl1e td, .tabl1e th {
    padding: 0.4rem 0.25rem !important;
}*/

.brtopd {
    padding: 1.25rem !important;
}

.number-iconpg {
    font-size: 0;
    border-color: #00bcd4 !important;
    background-color: #fff !important;
    color: #00bcd4 !important;
}



.number-iconpg {
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -1.1875rem;
    border: 2px solid #eee;
    font-size: .875rem;
    z-index: 10;
    line-height: 2.125rem;
    text-align: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
}



    .number-iconpg:after {
        content: "";
        font-family: icomoon;
        display: inline-block;
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: all ease-in-out .15s;
    }



.prevetopdis {
    text-align: center !important;
    margin-top: 6% !important;
}
.spdl {
    display: inline-table;
    padding: 5px !important;
    border: 1px solid #ddd;
    border-radius: 0.1875rem;
    width: 100%;
    height: calc(1.5385em + 0.875rem + 2px);
    padding: 0.4375rem 0.875rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5385;
    color: #333;
    background-color: #fafafa;
    background-clip: padding-box;
    border: 1px solid #ddd;
    border-radius: 0.1875rem;
    box-shadow: 0 0 0 0 transparent;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-collapse: initial;
}
.bgsetbg {
    background-color: #e5eafe !important;
    color: #000 !important;
    background-color: #e3f3fd !important;
}


.color-option {
    height: 25px;
    width: 25px;
    list-style: none;
    border-radius: 4px;
    margin: 9px;
    transition: .2s;
    cursor: pointer;
    &:hover;

{
    box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}

&.is-selected {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}

}

.color-option-height {
    height: 25px;
    width: 25px;
    border-radius: 15px;
}

/*.group {
    background: white;
    padding: 20px;
    border-radius: 9px;
    box-shadow: 0 0 0 5px rgba(black, .1);
}*/


.dropdown-menuu.show {
    display: flex;
    left: -110px;
}

.change-box-color {
    display: block;
    box-shadow: 1px 2px #70747a;
    float: left;
    height: 50px;
    border-radius: 8px;
}

.switchh {
    position: absolute !important;
    display: inline-block !important;
    width: 60px !important;
    height: 34px !important;
    top: 50px !important;
    right: 150px !important;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 14px;
        bottom: 5px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #324148;
}

input:focus + .slider {
    box-shadow: 0 0 1px #324148;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.switcherlight {
    position: absolute;
    right: -39px;
    font-size: 1rem;
    font-weight: 600;
}

.switcherdark {
    position: absolute;
    right: 77px;
    font-size: 1rem;
    font-weight: 600;
}

.change-color {
    background-color:#000!important;
    color: white;
}


.dropdown-menuu {
    height: 55px !important;
    border-radius: 10px !important;
}


.sidebar-dark .nav-sidebar .nav-link:not(.disabled):hover, .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar .nav-link:not(.disabled):hover {
    color: #fff;
    background-color: #f5f5f540 !important;
}

.sidebar-dark .nav-sidebar .nav-item-open > .nav-link:not(.disabled), .sidebar-dark .nav-sidebar > .nav-item-expanded:not(.nav-item-open) > .nav-link, .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar .nav-item-open > .nav-link:not(.disabled), .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar > .nav-item-expanded:not(.nav-item-open) > .nav-link {
    background-color: #ffffff !important;
    color: #000;
}

.sidebar-dark .nav-sidebar .nav-item > .nav-link.active, .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar .nav-item > .nav-link.active {
    background-color: #f5f5f5b8 !important;
    color: #000;
}
.page-title {
    margin-top: 45px !important;
}

.navbar-dark {
 position: fixed !important;
 z-index: 999 !important;
 width: 100% !important;
}
.b-insrt-e {
    background-color: #ddd;
    padding: 7px 60px 0px 60px;
    white-space:nowrap;
}
.pd-newbr{
    padding:0rem 6rem 0rem 6rem!important;
}
.obserredpotd {
    padding: 0px 0px 0px 0px!important;
}