/* Including one css file into other */
@import "custom/loader.css";
@import "custom/table.css";
@import "custom/validation.css";

body {
    padding-top: 0px !important;
}

.container {
    margin-top: 5px;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-flex {
    display: flex !important;
}

.w-100 {
    width: 100% !important;
}

.mt-0 {
    margin-top:0px;
}

.th-width {
    width: 1%;
    white-space: nowrap;
}

.btn-green {
    color: #333;
    background-color: #ccffcc;
    border-color: #abd8c1;
}

    .btn-green:hover {
        background-color: #99ffcc;
        border-color: #00cc66;
    }

    .btn-green.disabled:hover, .btn-green.disabled {
        background-color: #fff;
        border-color: #ccc;
    }

.btn-red {
    color: #333;
    background-color: #ffcccc;
    border-color: #abd8c1;
}

    .btn-red:hover {
        background-color: #ff9999;
        border-color: #ff0000;
    }

.btn-purple {
    color: #333;
    background-color: #f5e3e9;
    border-color: #d5c7d9;
}

    .btn-purple:hover {
        background-color: #f2bdff;
        border-color: #e061ff;
    }

.btn-blue {
    color: #333;
    background-color: #e3eeff;
    border-color: #d5c7d9;
}

    .btn-blue:hover {
        background-color: #b3d1ff;
        border-color: #4f82df;
    }

.btn-yellow {
    color: #333;
    background-color: #ffffca;
    border-color: #d5c7d9;
}

    .btn-yellow:hover {
        background-color: #ffff90;
        border-color: #ffef52;
    }

.panel-default > .panel-heading {
    background-color: #cfffc4 !important;
}

.p-help {
    white-space: pre-wrap;
    color: #737373;
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        width: 1140px;
    }
}

.bg-assigned {
    border-color: #92d050;
    color: white;
    background-color: #92d050;
}

.bg-cancelled {
    border-color: #808080;
    color: white;
    background-color: #808080;
}

.bg-closed {
    border-color: #7030a0;
    color: white;
    background-color: #7030a0;
}

.bg-open {
    border-color: #00b0f0;
    color: white;
    background-color: #00b0f0;
}

.bg-pending {
    border-color: #febf00;
    color: white;
    background-color: #febf00;
}

.bg-wip {
    border-color: #ff33cc;
    color: white;
    background-color: #ff33cc;
}

.bg-high {
    border-color: #ff0000;
    color: black;
    background-color: #ff0000;
}

.bg-medium {
    border-color: #00b0f0;
    color: black;
    background-color: #00b0f0;
}

.bg-low {
    border-color: #91ce4f;
    color: black;
    background-color: #91ce4f;
}

.bg-default {
    border-color: #48A145;
    color: white;
    background-color: #48A145;
}


/*Custom*/
.btn-save {
    color: #333;
    background-color: #ccffcc;
    border-color: #abd8c1;
}

    .btn-save:hover {
        background-color: #99ffcc;
        border-color: #00cc66;
    }

    .btn-save.disabled:hover, .btn-save.disabled {
        background-color: #fff;
        border-color: #ccc;
    }

.btn-cancel {
    color: #333;
    background-color: #ffcccc;
    border-color: #abd8c1;
}

    .btn-cancel:hover {
        background-color: #ff9999;
        border-color: #ff0000;
    }

.btn-new {
    color: #333;
    background-color: #f5e3e9;
    border-color: #d5c7d9;
    margin: 5px 5px;
}

    .btn-new:hover {
        background-color: #f2bdff;
        border-color: #e061ff;
    }

.btn-edit {
    color: #333;
    background-color: #e3eeff;
    border-color: #d5c7d9;
    margin: 5px 5px;
}

    .btn-edit:hover {
        background-color: #b3d1ff;
        border-color: #4f82df;
    }

.btn-upload {
    color: #333;
    background-color: #ffffca;
    border-color: #d5c7d9;
}

    .btn-upload:hover {
        background-color: #ffff90;
        border-color: #ffef52;
    }

.btn-primary {
    margin-top: 0px;
}

[data-tooltip] {
    --arrow-size: 5px;
    position: relative;
    z-index: 1;
    word-wrap: break-word;
}
    /* Positioning and visibility settings of the tooltip */
    [data-tooltip]:before,
    [data-tooltip]:after {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        left: 50%;
        bottom: calc(100% + var(--arrow-size));
        pointer-events: none;
        transition: 0.2s;
        will-change: transform;
    }

    /* The actual tooltip with a dynamic width */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        padding: 6px 12px;
        min-width: 50px;
        max-width: 180px;
        overflow-wrap: break-word; /* Allow long words to break and wrap */
        width: max-content;
        width: -moz-max-content;
        border-radius: 6px;
        font-size: 12px;
        background-color: rgba(59, 72, 80, 0.9);
        background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44));
        box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
        color: #fff;
        text-align: center;
        white-space: pre-wrap;
        transform: translate(-50%, calc(0px - var(--arrow-size))) scale(0.5);
    }

    /* Tooltip arrow */
    [data-tooltip]:after {
        content: '';
        border-style: solid;
        border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); /* CSS triangle */
        border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
        transition-duration: 0s; /* If the mouse leaves the element,
                                  the transition effects for the
                                  tooltip arrow are "turned off" */
        transform-origin: top; /* Orientation setting for the
                                  slide-down effect */
        transform: translateX(-50%) scaleY(0);
    }

    /* Tooltip becomes visible at hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        opacity: 1;
    }
    /* Scales from 0.5 to 1 -> grow effect */
    [data-tooltip]:hover:before {
        transition-delay: 0.3s;
        transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
    }
    /*
      Arrow slide down effect only on mouseenter (NOT on mouseleave)
    */
    [data-tooltip]:hover:after {
        transition-delay: 0.5s; /* Starting after the grow effect */
        transition-duration: 0.2s;
        transform: translateX(-50%) scaleY(1);
    }


/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
    top: calc(100% + var(--arrow-size));
    bottom: auto;
}

[data-tooltip-location="bottom"]:before {
    transform: translate(-50%, var(--arrow-size)) scale(0.5);
}

[data-tooltip-location="bottom"]:hover:before {
    transform: translate(-50%, var(--arrow-size)) scale(1);
}

[data-tooltip-location="bottom"]:after {
    border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size);
    border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
    transform-origin: bottom;
}