/**
 * (c) 2013 Jexcel Plugin | Bossanova UI
 * http://www.github.com/paulhodel/jexcel
 *
 * @author: Paul Hodel <paul.hodel@gmail.com>
 * @description: Web spreadsheet
 */

.jexcel {
    display: inline-block;
}

    .jexcel > div.jexcel-toolbar {
        display: flex;
        background-color: #f3f3f3;
        border: 1px solid #ccc;
        padding: 4px;
        margin-bottom: 4px;
        margin-right: 3px;
    }

    .jexcel > div.jexcel-header {
        padding-right: 2px;
        display: block;
    }

    .jexcel > div.jexcel-content {
        padding-right: 2px;
        padding-bottom: 2px;
        display: inline-block;
        padding-top: 2px;
    }

    .jexcel > div.jexcel-toolbar i.jexcel-toolbar-item {
        width: 24px;
        height: 24px;
        padding: 4px;
        cursor: pointer;
        display: inline-block;
    }

        .jexcel > div.jexcel-toolbar i.jexcel-toolbar-item:hover {
            background-color: #ddd;
        }

    .jexcel > div.jexcel-toolbar select.jexcel-toolbar-item {
        margin-left: 2px;
        margin-right: 2px;
        display: inline-block;
    }

    .jexcel > div > table {
        border-collapse: separate;
        table-layout: fixed;
        white-space: nowrap;
        empty-cells: show;
        border-top: 0px solid transparent;
        border-left: 1px solid #ccc;
        border-right: 1px solid transparent;
        border-bottom: 0px solid transparent;
        background-color: #fff;
        width: 0;
    }

        .jexcel > div > table > thead > tr > td {
            border-left: 1px solid transparent;
            border-right: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid transparent;
            background-color: #f3f3f3;
            padding: 4px;
            cursor: pointer;
            overflow: hidden;
            box-sizing: border-box;
        }

        .jexcel > div > table > thead > tr.jexcel_filter > td {
            padding: 0px;
            background-color: #fff;
        }

            .jexcel > div > table > thead > tr.jexcel_filter > td:first-child {
                background-color: #f3f3f3;
            }

            .jexcel > div > table > thead > tr.jexcel_filter > td > input {
                border: 0px;
                width: 100%;
                outline: none;
            }

        .jexcel > div > table > thead > tr > td.selected {
            background-color: #dcdcdc;
        }

        .jexcel > div > table > tbody {
            padding-right: 3px;
            padding-bottom: 1px;
        }

            .jexcel > div > table > tbody > tr > td.edition {
                padding: 0px;
            }

            .jexcel > div > table > tbody > tr > td:first-child {
                background-color: #f3f3f3;
                width: 0px; /* Korn : hide first column*/
                text-align: center;
            }

            .jexcel > div > table > tbody > tr > td {
                border-left: 1px solid transparent;
                border-right: 1px solid #ccc;
                border-top: 1px solid transparent;
                border-bottom: 1px solid #ccc;
                /*padding: 4px;*/
                height: 20px;
                overflow: hidden;
                white-space: nowrap;
                box-sizing: border-box;
                font-size: 12px;
                font-family: 'Kanit-Regular';
                text-align:right;
                padding-right:3px;
            }

            .jexcel > div > table > tbody > tr:first-child > td {
                border-top: 1px solid #ccc;
            }

            .jexcel > div > table > tbody > tr > td > img {
                display: block;
            }

            .jexcel > div > table > tbody > tr > td.readonly {
                /*color: rgba(0,0,0,0.3)*/
                color: #000;
                background-color: #b3b3b3;
            }

            .jexcel > div > table > tbody > tr.selected > td:first-child {
                background-color: #dcdcdc;
            }

            .jexcel > div > table > tbody > tr > td > select,
            .jexcel > div > table > tbody > tr > td > input,
            .jexcel > div > table > tbody > tr > td > textarea {
                border: 0px;
                border-radius: 0px;
                outline: 0px;
                width: 100%;
                margin: 0px;
                padding: 0px;
                background-color: transparent;
                box-sizing: border-box;
            }

            .jexcel > div > table > tbody > tr > td > textarea {
                resize: none;
                padding-top: 6px !important;
            }

            .jexcel > div > table > tbody > tr > td > input[type=checkbox] {
                width: 12px;
                margin-top: 2px;
            }

            .jexcel > div > table > tbody > tr > td > input[type=radio] {
                width: 12px;
                margin-top: 2px;
            }

            .jexcel > div > table > tbody > tr > td > select {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background-repeat: no-repeat;
                background-position-x: 100%;
                background-position-y: 40%;
                background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
            }

    .jexcel .highlight {
        background-color: rgba(0,0,0,0.05);
    }

    .jexcel .highlight-top {
        border-top: 1px solid #000 !important;
    }

    .jexcel .highlight-left {
        border-left: 1px solid #000;
    }

    .jexcel .highlight-right {
        border-right: 1px solid #000;
        box-shadow: 1px 0px #ccc;
        -webkit-box-shadow: 1px 0px #ccc;
        -moz-box-shadow: 1px 0px #ccc;
    }

    .jexcel .highlight-bottom {
        border-bottom: 1px solid #000;
        box-shadow: 0px 1px #ccc;
        -webkit-box-shadow: 0px 1px #ccc;
        -moz-box-shadow: 0px 1px #ccc;
    }

        .jexcel .highlight-bottom.highlight-right {
            border-bottom: 1px solid #000;
            box-shadow: 1px 1px #ccc;
            -webkit-box-shadow: 1px 1px #ccc;
            -moz-box-shadow: 1px 1px #ccc;
        }

    .jexcel .selection {
        background-color: rgba(0,0,0,0.05);
    }

    .jexcel .selection-left {
        border-left: 1px solid #000;
    }

    .jexcel .selection-right {
        border-right: 1px solid #000;
    }

    .jexcel .selection-top {
        border-top: 1px solid #000 !important;
    }

    .jexcel .selection-bottom {
        border-bottom: 1px solid #000;
    }

.jexcel_corner {
    position: absolute;
    background-color: rgb(0, 0, 0);
    height: 5px;
    width: 5px;
    border: 1px solid rgb(255, 255, 255);
    top: -200px;
    left: -200px;
    cursor: crosshair;
    box-sizing: initial;
    z-index: 1;
}

.jexcel .editor {
    outline: 0px solid transparent;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    padding: 0px;
    padding-left: 4px;
}

.jexcel, .jexcel td, .jexcel_corner {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.jexcel_textarea {
    position: absolute;
    top: -999px;
    left: -999px;
    width: 1px;
    height: 1px;
}

.jexcel .results {
    position: absolute;
    min-height: 200px;
    max-height: 300px;
    width: 220px;
    background-color: #fff;
    overflow-y: scroll;
    z-index: 99;
    text-align: left;
    border: 1px solid #ccc;
    margin-top: 8px;
    margin-left: -5px;
}

    .jexcel .results li {
        list-style: none;
        padding: 6px;
        cursor: pointer;
    }

        .jexcel .results li:hover, .jexcel .results li.selected {
            background-color: #1e90ff;
            color: #ffffff;
        }

.jexcel .dragline {
    position: absolute;
}

    .jexcel .dragline div {
        position: relative;
        top: -6px;
        height: 5px;
        width: 22px;
    }

        .jexcel .dragline div:hover {
            cursor: move;
        }

.jexcel .onDrag {
    background-color: rgba(0,0,0,0.6);
}

.jexcel .error {
    border: 1px solid red;
}

.jexcel .arrow-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #444;
    position: absolute;
    margin-left: 4px;
    margin-top: 8px;
}

.jexcel .arrow-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #444;
    position: absolute;
    margin-left: 4px;
    margin-top: 8px;
}

.jexcel .resizing {
    border-right-style: dotted !important;
    border-right-color: black !important;
}

.jexcel_contextmenu {
    display: none;
    position: absolute;
    z-index: 100;
    background: #fff;
    color: #555;
    font-family: sans-serif;
    font-size: 11px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    padding: 0px;
    border: 1px solid #C6C6C6;
    padding-top: 5px;
}

    .jexcel_contextmenu a {
        display: block;
        color: #555;
        text-decoration: none;
        padding: 6px 8px 6px 30px;
        width: 250px;
        position: relative;
        cursor: default;
    }

        .jexcel_contextmenu a span {
            color: #a1a192;
            float: right;
            margin-right: 10px;
        }

        .jexcel_contextmenu a:hover {
            background: #ebebeb;
        }

    .jexcel_contextmenu hr {
        border: 1px solid #e9e9e9;
        border-bottom: 0;
    }

.jexcel .jexcel_arrow {
    float: right;
    position: relative;
    top: 8px;
    left: -13px;
}

.jexcel #jexcel_arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #bbb;
    position: absolute;
    cursor: pointer;
}

.jexcel .jdropdown-header {
    border: 0px !important;
    outline: none !important;
    width: 100% !important;
    height: 100% !important;
    padding-left: 4px !important;
}

.jexcel .jdropdown-container-header {
    padding: 0px;
    margin: 0px;
    height: inherit;
}

.jexcel .jdropdown-picker {
    border: 0px !important;
    padding: 0px !important;
    width: inherit;
    height: inherit;
}

.jexcel .jexcel_comments {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: top right;
}

.jexcel .sp-replacer {
    margin: 2px;
    border: 0px;
}
/*
.jexcel::-webkit-scrollbar, .jexcel > div::-webkit-scrollbar
{
    margin-left:6px;
    width:6px;
    height:6px;
}
.jexcel::-webkit-scrollbar-track, .jexcel > div::-webkit-scrollbar-track
{
    background: #f3f3f3;
}
.jexcel::-webkit-scrollbar-thumb, .jexcel > div::-webkit-scrollbar-thumb
{
    background: #888;
}
.jexcel::-webkit-scrollbar-thumb:hover, .jexcel > div::-webkit-scrollbar-thumb:hover
{
    background: #555; 
}*/