#loading-bar-spinner.spinner {
    left: 50%;
    margin-left: -20px;
    top: 50%;
    z-index: 19 !important;
    animation: loading-bar-spinner 1000ms linear infinite;
    float: right;
}

#loading-bar-spinner.spinner .spinner-icon {
    width: 20px;
    height: 20px;
    border: solid 4px transparent;
    border-top-color: #00C8B1 !important;
    border-left-color: #00C8B1 !important;
    border-radius: 50%;
}

@keyframes loading-bar-spinner {
    0% {
        transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.BoxArea4 {
    padding: 19px;
    margin: 5px;
    border: 3px solid;
    border-color: rgb(214, 226, 232);
    border-radius: 5px;
    background-color: white;
}

.BoxArea5 {
    padding: 19px;
    margin: 5px;
    border: 3px solid;
    border-color: rgb(214, 226, 232);
    border-radius: 5px;
    background-color: #f9f9fb;
}

.skin-blue .main-header .logo .h1,
.h2,
.h3,
h1,
h2,
h3 {
    color: black
}

.btn-info {
    background-color: rhsl(212 64% 94% / 1);
    ;
    border-color: hsl(212 64% 94% / 1);
    ;
}


.box.box-solid.box-primary>.box-header {
    background-color: hsl(212 64% 94% / 1);
    ;


}


.box.box-solid.box-primary>.box-header .btn,
.box.box-solid.box-primary>.box-header a {
    color: black;
}



hr {
    border-top: 1px solid #bbb8b8;
}



.box.box-solid.box-primary {
    border: 1px solid lightgray;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    stroke-width: 6;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}




/* Fix indent icon on side bar*/
.sidebar-menu>li .badge,
.sidebar-menu>li .label {
    margin-right: 0;
}




.mybuttonclass {
    background-color: #CD0000;
}

.mybuttonclass {
    color: #fff;
}

.mybuttonclass {
    border-color: #9E0000;
}

.BoxArea2 {
    padding: 19px;
    margin: 5px;
    border: 3px solid;
    border-color: white;
    border-radius: 10px;
}


.BoxArea6 {
    padding: 19px;
    margin: 5px;
    border: 3px solid;
    border-color: white;
    border-radius: 10px;
}


.BoxArea {
    padding: 19px;
    margin: 5px;
    border: 3px solid;
    border-color: rgba(24, 188, 156, 1);
    border-radius: 10px;
    background-color: #fdfdfd;
    opacity: 0.90;
}

.clearBoth {
    clear: both;
}

a>.highlight {
    background-color: #fdfdfd;
}

body {
    font-size: 16px;
}

.modal-dialog {
    width: 50%;
}

body.modal-open {
    overflow: visible;
}



a[bubbletooltip]:link,
a[bubbletooltip]:visited {
    text-decoration: none;
    position: relative;
}

a[bubbletooltip]:before {
    content: "";
    position: absolute;
    border-top: 26px solid #292f45;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    visibility: hidden;
    top: -20px;
    left: -12px;
}

a[bubbletooltip]:after {
    position: absolute;
    content: attr(bubbletooltip);
    top: -35px;
    left: -26px;
    background: red;
    color: #FFFFFF;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    white-space: nowrap;
    visibility: hidden;
    z-index: 999;
}

a[bubbletooltip]:hover:before,
a[bubbletooltip]:hover:after {
    visibility: visible;
    -moz-transition: visibility 0s linear .3s;
}



.xmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: red;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.xmark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    stroke-width: 6;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px red;
    animation: fill1 .4s ease-in-out .4s forwards, scale1 .3s ease-in-out .9s both;
}

.xmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale1 {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill1 {
    100% {
        box-shadow: inset 0px 0px 0px 30px red;
    }
}


.skin-blue .left-side,
.skin-blue .main-sidebar,
.skin-blue .wrapper {
    background-color: white;
    color: black;
}


.main-header {
    color: black;

    border-top: .10rem gray;

    transform: translateY(-rem);
}


.skin-blue .main-header .logo {
    background-color: white;
    color: black;

}

/* logo when hovered */
.skin-blue .main-header .logo:hover {
    background-color: white;
}

/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
    background-color: white;
}

/* main sidebar */
.skin-blue .main-sidebar {
    background-color: white;
}

.main-sidebar {

    background-color: lightgray;
}

/* active selected tab in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a {
    background-color: hsl(212 64% 94% / 1);
    color: hsl(212deg 96.7% 31.58%);
    ;
}

/* other links in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu a {
    background-color: white;
    color: rgb(109 116 129);
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: black;
}

/* other links in the sidebarmenu when hovered */
.skin-blue .main-sidebar .sidebar .sidebar-menu a:hover {
    background-color: lightgray;
}

/* toggle button when hovered  */
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: lightgray;
    color: #000000;
}

/* body */
.content-wrapper,
.right-side {
    background-color: white;
    box-shadow: inset 0px 0px 0px 1px lightgray;
}