﻿/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    /*padding: 12px 8px;*/
    border: 1px solid #888;
    width: 40%;
}
/* by khawla 05 01 2022 */
.modalcontentmeet {
    background-color: #fefefe;
    margin: auto;
    /*padding: 12px 8px;*/
    border: 1px solid #888;
    width: 40%;
}

.modal-reduced {
    position: fixed !important;
    bottom: 0;
    right: 0;
}

.modal-content-body {
    padding: 12px 8px;
}

.modal-content-reduced {
    width: 100% !important;
    border: 1px solid #888;
}
/* by khawla 05 01 2022 */
.modalcontentmeet-body {
    padding: 12px 8px;
}
.modalcontentmeet-reduced {
    width: 100% !important;
    border: 1px solid #888;
}

.modal-call-content {
    width: 30%;
}

.modal-content .title {
    font-size: large;
    margin: 0px 0px 10px 18px;
    padding-top: 2px;
}

.modal-content label {
    margin: 0 10px;
}
/* by khawla 05 01 2022 */
.modalcontentmeet .title {
    font-size: large;
    margin: 0px 0px 10px 18px;
    padding-top: 2px;
}

.modalcontentmeet label {
    margin: 0 10px;
}
.senderLabelReduced {
    margin: 0px 10px 10px 10px !important;
}



.modal-content .footer {
    margin-right: 8px;
}
/* by khawla 05 01 2022 */
.modalcontentmeet .footer {
    margin-right: 8px;
}

.btn-modal {
    width: auto;
    float: right;
    margin: 0px 4px;
    cursor: pointer;
}

/* The Close Button */
.close, .reduce {
    /*color: #aaaaaa;*/
    float: right;
    text-align: right;
    font-size: 28px;
    font-weight: bold;
}

.reduce {
    margin-right: 6px;
}

.modalHeader {
    background: #f2f2f2;
    padding: 8px 8px 0 0;
    box-shadow: 0px 0.5px #ddd;
}

.hidden {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.eventContainer {
    margin: 4px 0 4px 0;
}

.close:hover, .reduce:hover,
.close:focus, .reduce:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.btn-modal:hover {
    opacity: 1;
    transform: translateX(1px);
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.eventContainer {
    display: none;
}

.eventContainerVisible {
    display: inline-block !important;
}

.modalContentDropped {
    position: absolute !important;
    bottom: 0;
    right: 0;
}

@media (max-width: 480px) {
    .modal-content {
        width: 96%;
    }
    /* by khawla 05 01 2022 */
    .modalcontentmeet  {
        width: 96%;
    }
    .btn-modal {
        margin: 4px;
        float: none;
    }

    .codehim-selectusers-input-tags {
        margin: 0;
    }

    .users-tags {
        padding-top: 13px 0;
    }

        .users-tags li {
            margin: 4px;
            width: 96%;
        }

        .users-tags span {
            float: right;
            margin-right: 4px;
        }
}


/* by khawla 08 04 2023 */
.modal-reduced-arbr {
    position: fixed !important;
    bottom: 0;
}

.modaldragablle {
    cursor: move;
}