/**
 *
 * '||''|.                            '||
 *  ||   ||    ....  .... ...   ....   ||    ...   ... ...  ... ..
 *  ||    || .|...||  '|.  |  .|...||  ||  .|  '|.  ||'  ||  ||' ''
 *  ||    || ||        '|.|   ||       ||  ||   ||  ||    |  ||
 * .||...|'   '|...'    '|     '|...' .||.  '|..|'  ||...'  .||.
 *                                                  ||
 * --------------- By Display:inline ------------- '''' -----------
 *
 * Modal windows styles
 */

/* Root element */
#modals {
    position: absolute;
    position: fixed;
    z-index: 999300;
    top: 0;
    left: 0;
    right: 0;
}

    #modals.with-blocker {
        bottom: 0;
    }

/* Background blocker */
.modal-blocker {
    position: absolute;
    z-index: 89;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 300ms;
    -moz-transition: background-color 300ms;
    -ms-transition: background-color 300ms;
    -o-transition: background-color 300ms;
    transition: background-color 300ms;
}

    .modal-blocker.visible {
        background: url('../../img/old-browsers/black45.png');
        background: rgba(0, 0, 0, 0.45);
    }

/* Modal window */
.modal {
    position: absolute;
    z-index: 89;
    left: 0;
    top: 0;
    padding: 20px;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    -webkit-box-shadow: inset -0 1px 0 rgba(255, 255, 255, 0.25), inset -0 0 3px rgba(255, 255, 255, 0.25), -0 3px 9px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset -0 1px 0 rgba(255, 255, 255, 0.25), inset -0 0 3px rgba(255, 255, 255, 0.25), -0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: inset -0 1px 0 rgba(255, 255, 255, 0.25), inset -0 0 3px rgba(255, 255, 255, 0.25), -0 3px 9px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.modal-bg {
    background: white;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: -15px;
    padding: 25px;
    color: #666666;
}

.modal-content {
    overflow: hidden;
    overflow-y:auto;
}

.modal-scroll {
    overflow-y: scroll !important;
}

    .modal-scroll::-webkit-scrollbar {
        width: 4px;
    }

    /*.modal-scroll::-webkit-scrollbar-track {

        border-radius: 10px;
    }

    .modal-scroll::-webkit-scrollbar-thumb {
        background: lightgray;
        border-radius: 4px;
    }

        .modal-scroll::-webkit-scrollbar-thumb:hover {
            background: black;
        }*/

.modal-bar {
    height: 38px;
    line-height: 38px;
    cursor: move;
    margin: -20px -20px 20px -20px;
    padding: 0 12px;
    -webkit-background-clip: padding-box;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: inset -0 -1px 0 rgba(0, 0, 0, 0.25), -0 1px 0 rgba(255, 255, 255, 0.15);
    -moz-box-shadow: inset -0 -1px 0 rgba(0, 0, 0, 0.25), -0 1px 0 rgba(255, 255, 255, 0.15);
    box-shadow: inset -0 -1px 0 rgba(0, 0, 0, 0.25), -0 1px 0 rgba(255, 255, 255, 0.15);
}

    .modal-bar > h3 {
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 16px;
        font-weight: bold;
        margin: 0;
        padding: 10px 0 12px;
        -webkit-text-shadow: -0 -1px 0 black;
        -moz-text-shadow: -0 -1px 0 black;
        text-shadow: -0 -1px 0 black;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.modal-actions {
    float: right;
    height: 34px;
    margin: 2px;
    list-style-type: none;
}

.modal > .modal-actions {
    float: none;
    position: absolute;
    z-index: 88;
    right: 8px;
    top: -4px;
}

.modal-actions + .modal-bg,
.modal-actions + .modal-content {
    margin-top: 10px;
}

.modal-actions > li {
    display: block;
    float: right;
    width: 34px;
    height: 34px;
    background: url(../../img/standard/sprites.png) no-repeat 0 -94px;
    margin-right: -12px;
    position: relative;
    z-index: 88;
}

    .modal-actions > li:hover {
        z-index: 90;
    }

    .modal-actions > li > a {
        display: block;
        width: 34px;
        height: 34px;
        background: url(../../img/standard/sprites.png) no-repeat -34px -94px;
        overflow: hidden;
        text-indent: -5000px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        -webkit-transition: opacity 800ms;
        -moz-transition: opacity 800ms;
        -ms-transition: opacity 800ms;
        -o-transition: opacity 800ms;
        transition: opacity 800ms;
    }

    .modal-actions > li.green-hover > a,
    .modal-actions > li.green-light > a {
        background-position: -68px -94px;
    }

    .modal-actions > li.orange-hover > a,
    .modal-actions > li.orange-light > a {
        background-position: -102px -94px;
    }

    .modal-actions > li.red-hover > a,
    .modal-actions > li.red-light > a {
        background-position: -136px -94px;
    }

    .modal-actions > li.blue-hover > a,
    .modal-actions > li.blue-light > a {
        background-position: -170px -94px;
    }

    .modal-bar:hover li > a,
    .modal-actions > li.white-light > a,
    .modal-actions > li.green-light > a,
    .modal-actions > li.orange-light > a,
    .modal-actions > li.red-light > a,
    .modal-actions > li.blue-light > a {
        opacity: 0.65;
    }

    .modal-actions > li > a:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -khtml-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        -webkit-transition: opacity 200ms;
        -moz-transition: opacity 200ms;
        -ms-transition: opacity 200ms;
        -o-transition: opacity 200ms;
        transition: opacity 200ms;
    }

.modal-buttons {
    margin: 10px -20px -20px -20px;
    padding: 10px 20px 20px;
    -webkit-background-clip: padding-box;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

    .modal-buttons.low-padding {
        padding: 10px;
    }

/* Resizing zones */
.modal-resize-nw,
.modal-resize-n,
.modal-resize-ne,
.modal-resize-e,
.modal-resize-se,
.modal-resize-s,
.modal-resize-sw,
.modal-resize-w {
    background: white;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    position: absolute;
    z-index: 89;
}

.modal-resize-nw {
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    cursor: nw-resize;
}

.modal-resize-n {
    top: 0;
    right: 10px;
    left: 10px;
    height: 10px;
    cursor: n-resize;
}

.modal-resize-ne {
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    cursor: ne-resize;
}

.modal-resize-e {
    top: 10px;
    right: 0;
    width: 10px;
    bottom: 10px;
    cursor: e-resize;
}

.modal-resize-se {
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    cursor: se-resize;
}

.modal-resize-s {
    bottom: 0;
    right: 10px;
    left: 10px;
    height: 10px;
    cursor: s-resize;
}

.modal-resize-sw {
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    cursor: sw-resize;
}

.modal-resize-w {
    top: 10px;
    left: 0;
    width: 10px;
    bottom: 10px;
    cursor: w-resize;
}