/* functional styles */

    .modal {
        position: absolute;
        display: none;
        z-index: 1000;
    }
    
        .modal-content {
            height: 100%;
            overflow: auto;
            padding: 0 30px 0 0;
            /* width: 100%; IE6/7 won't shrink wrap '.modal' if this is set to 100% */
        }
        
    .modal-overlay {
        display: none;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 500;
    }

    .modal-isopen select {
        _visibility: hidden;
    }

    .modal-isopen .modal select {
        _visibility: visible;
    }
        
    /* aesthetic styles */
    
    .modal {
        background: #fff;
        /* border: 10px solid gray; */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        margin: 25px;
        padding: 15px 5px 50px 20px;
        -webkit-border-radius: 10px;
		border-radius: 10px;
    }

    .modal > .qt-daryavaria-ui {
        margin-bottom: 10px;
    }
    
        .modal-close {
            color: #444;
            cursor: pointer;
            font-size: 10px;
            font-weight: bold;
            position: absolute;
            right: 8px;
            text-decoration: none;
            text-transform: uppercase;
            top: 8px;
        }
    
    .modal-overlay {
        background: #000;
    }

    .modal.modal-isloading {
        border: none;
        padding: 0;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        width: 50px;
        height: 50px;
    }

        /* NOTE: #2 if using an _animated_ gif IE7 requires it to be set on .modal-content not .modal otherwise the scrollbars will flicker */
        .modal.modal-isloading .modal-content {
            background: #fff url(/_catalogs/masterpage/DaryaVaria/Image/loader.gif) center center no-repeat;
        }

        .modal.modal-isloading .modal-close {
            display: none;
        }