﻿.modal-header {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.close {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    height: 16px;
    text-decoration: none;
    width: 16px;
}

    .close svg {
        width: 16px;
    }

.modal-wrapper {
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

#modal-facilitymanagement {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    visibility: hidden;
}

    #modal-facilitymanagement:target {
        opacity: 1;
        visibility: visible;
    }

        #modal-facilitymanagement:target .modal-body {
            opacity: 1;
            transform: translateY(1);
        }

    #modal-facilitymanagement .modal-body {
        max-width: 90%;
        opacity: 0;
        transform: translateY(-100px);
        transition: opacity 0.25s ease-in-out;
        width: 90%;
        z-index: 9999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height:auto;
        overflow-y:auto;
        height:650px;
    }


#modal-catering {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    visibility: hidden;
}

    #modal-catering:target {
        opacity: 1;
        visibility: visible;
    }

        #modal-catering:target .modal-body {
            opacity: 1;
            transform: translateY(1);
        }

    #modal-catering .modal-body {
        max-width: 90%;
        opacity: 0;
        transform: translateY(-100px);
        transition: opacity 0.25s ease-in-out;
        width: 90%;
        z-index: 9999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        overflow-y: auto;
        height: 650px;
    }

#modal-housekeeping {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    visibility: hidden;
}

    #modal-housekeeping:target {
        opacity: 1;
        visibility: visible;
    }

        #modal-housekeeping:target .modal-body {
            opacity: 1;
            transform: translateY(1);
        }

    #modal-housekeeping .modal-body {
        max-width: 90%;
        opacity: 0;
        transform: translateY(-100px);
        transition: opacity 0.25s ease-in-out;
        width: 90%;
        z-index: 9999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        overflow-y: auto;
        height: 650px;
    }

#modal-manpowersupply {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    visibility: hidden;
}

    #modal-manpowersupply:target {
        opacity: 1;
        visibility: visible;
    }

        #modal-manpowersupply:target .modal-body {
            opacity: 1;
            transform: translateY(1);
        }

    #modal-manpowersupply .modal-body {
        max-width: 90%;
        opacity: 0;
        transform: translateY(-100px);
        transition: opacity 0.25s ease-in-out;
        width: 90%;
        z-index: 9999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        overflow-y: auto;
        height: 650px;
    }

#modal-constructioncivilwork {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    visibility: hidden;
}

    #modal-constructioncivilwork:target {
        opacity: 1;
        visibility: visible;
    }

        #modal-constructioncivilwork:target .modal-body {
            opacity: 1;
            transform: translateY(1);
        }

    #modal-constructioncivilwork .modal-body {
        max-width: 90%;
        opacity: 0;
        transform: translateY(-100px);
        transition: opacity 0.25s ease-in-out;
        width: 90%;
        z-index: 9999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        overflow-y: auto;
        height: 650px;
    }
