.atala-document-container {
    border: 1px solid #DDDDDD;
}

.atala-document-toolbar {
    border: 1px solid #DDDDDD;
    background-color: #DDDDDD;
}

.atala-ui {
    font-size: 0.8em;
}

.atala-ui-button {
    font-size: 0.8em;
    margin-left: 1px;
}

.atala-ui-icon {
    width: 16px;
    height: 16px;
    background-image: url('images/atala-ui-icons-16.png') !important;
}

.ui-state-default .atala-ui-icon {
    background-image: url('images/atala-ui-icons-16.png') !important;
}

.atala-ui-icon-page-prev {
    background-position: 0 0;
}

.atala-ui-icon-page-next {
    background-position: -16px 0;
}

.atala-ui-icon-zoom-out {
    background-position: -32px 0;
}

.atala-ui-icon-zoom-in {
    background-position: -48px 0;
}

.atala-ui-icon-zoom-full {
    background-position: -64px 0;
}

.atala-ui-icon-fit-best {
    background-position: -80px 0;
}

.atala-ui-icon-fit-width {
    background-position: -96px 0;
}

.atala-ui-icon-save {
    background-position: -112px 0;
}

.atala-ui-icon-ellipse {
    background-position: -128px 0;
}

.atala-ui-icon-highlight {
    background-position: -144px 0;
}

.atala-ui-icon-line {
    background-position: -160px 0;
}

.atala-ui-icon-lines {
    background-position: -176px 0;
}

.atala-ui-icon-freehand {
    background-position: -192px 0;
}

.atala-ui-icon-polygon {
    background-position: -208px 0;
}

.atala-ui-icon-rectangle {
    background-position: -224px 0;
}

.atala-ui-icon-fillrect {
    background-position: -240px 0;
}

.atala-ui-icon-stamp {
    background-position: -256px 0;
}

.atala-ui-icon-image {
    background-position: -256px 0;
}

.atala-ui-icon-note {
    background-position: -272px 0;
}

.atala-ui-icon-text {
    background-position: -288px 0;
}

.atala-ui-icon-comment {
    background-position: -304px 0;
}

.atala-ui-icon-rotate-left {
    background-position: -320px 0;
}

.atala-ui-icon-rotate-right {
    background-position: -336px 0;
}

.atala-ui-icon-selection {
    background-position: -352px 0;
}

.atala-ui-icon-zoom-area {
    background-position: -368px 0;
}

.atala-ui-icon-text-tool {
    background-position: -384px 0;
}

.atala-ui-icon-pan-tool {
    background-position: -400px 0;
}

.atala-ui-icon-search-next {
    background-position: -416px 0;
}

.atala-ui-icon-search-prev {
    background-position: -432px 0;
}

.atala-ui-form-highlight {
    background-color: rgb(204, 215, 255) !important;
    background-color: rgba(204, 215, 255, .7) !important
}

.atala-ui-form-required {
    border: 3px solid red !important
}

/* set box sizing to default for internal divs since changing to 'border-box' could affect internal sizing calculations */
.atala_main_container div {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.atala_page_div, .atala_dom_edge_first, .atala_dom_edge_last {
    vertical-align: top;
}

.atala_search_container {
    float: right;
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    min-width: 120px;
}

    .atala_search_container > span {
        display: table-cell;
        vertical-align: middle;
    }

.atala_search_next, .atala_search_prev {
    margin: 0;
}

.atala_search_input {
    border: 1px solid #dedede;
    border-right: 0;
    box-sizing: border-box;
    max-width: 100%;
    background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
    padding: 3px 18px 3px 4px;
    transition: background 0.4s;
    width: 100%;
}

    .atala_search_input.atala_search_input_clearable {
        background-position: right 5px center;
    }

    .atala_search_input.atala_search_input_clear_hover {
        cursor: pointer;
    }

    .atala_search_input::-ms-clear {
        display: none;
        width: 0;
        height: 0;
    }

    .atala_search_input.atala_search_input_empty {
        border: 1px solid red;
    }

    .atala_search_input.atala_search_input_loading {
        background: url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) right 5px center no-repeat, url('images/atala-ui-spinner.gif') right 15px center no-repeat !important;
        padding-right: 35px;
        background-size: auto, 15px;
        background-color: #fff;
        transition: background 0
    }

.atala_page_loading {
    background: url('images/atala-ui-spinner.gif') center no-repeat !important;
}

.atala_thumb_caption, .atala_page_number {
    font-size: medium
}

.atala_drag_placeholder {
    /* override placeholder width/height using !important modifier if needed */
    border: 1px solid #BBBBBB;
    vertical-align: middle;
}