html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    position: relative;
}

body { /*border-top: solid 10px #000;*/
    color: #555;
    font-size: .8em;
    font-family: "Open Sans", Sans-Serif, Verdana, Helvetica;
    margin: 0;
    padding: 0;
}

a {
    color: #555;
    outline: none; /*padding-left: 3px;
    padding-right: 3px;*/
    text-decoration: underline;
}

    /*a:link, a:visited,
    a:active, a:hover {
    }*/
    /*color: #555;*/

    a:hover {
        background-color: #c7d1d6;
    }

body.wait *, body.wait {
    cursor: progress !important;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.textRight {
    text-align: right;
}

.noDisplay {
    display: none;
}

.noDisplayImportant {
    display: none !important;
}

.bold {
    font-weight: bold;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

.m5 {
    margin: 5px;
}

.m-lr5 {
    margin: 0px 5px 0px 5px;
}

.w100px {
    width: 100px;
}

.mw100px {
    min-width: 100px;
}

.w240px {
    width: 240px;
}

.w100pr {
    width: 100%;
}

.h100pr {
    height: 100%;
}

.strike {
    text-decoration: line-through;
}

.divLink {
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

.redBorder {
    border: 2px solid red;
}

.editButton {
    background-image: url('images/pencil24.png');
    width: 24px;
    height: 24px;
}

.actionButton {
    background-image: url('images/thunder24.png');
    width: 24px;
    height: 24px;
}

.settingsButton {
    background-image: url('images/spanner24.png');
    width: 24px;
    height: 24px;
}


.center250300 {
    width: 250px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}

.notAuthenticated { /*min-height:100%;*/
    background-color: #0050b5;
}


/* common */
/* buttons */

.langItem {
    padding: 2px 4px 2px 4px;
    font-weight: bold;
}

    .langItem.selected {
        text-decoration: underline;
    }

.white {
    color: #ffffff;
}

.red {
    color: #ff0000;
}

.mainColor {
    color: #0050b5;
}

.topmenuBtn {
    height: 100%;
}

.colorNegative {
    color: #c9302c;
}

.colorPositive {
    color: #5cb85c;
}



.redButton {
    background-color: #E5E5E5;
    border: none;
    border-left: 4px solid #E02222;
    padding: 5px 5px 5px 5px;
    min-width: 60px;
}

    .redButton:hover {
        border: 1px solid #E02222;
        border-left: 4px solid #E02222;
        padding: 4px 4px 4px 5px;
    }

.greenButton {
    background-color: #E5E5E5;
    border: none;
    border-left: 4px solid #35AA47;
    padding: 5px 5px 5px 5px;
    min-width: 60px;
}

    .greenButton:hover {
        border: 1px solid #35AA47;
        border-left: 4px solid #35AA47;
        padding: 4px 4px 4px 5px;
    }

.blueButton {
    background-color: #E5E5E5;
    border: none;
    border-left: 4px solid #4B8DF8;
    padding: 5px 5px 5px 5px;
    min-width: 60px;
}

    .blueButton:hover {
        border: 1px solid #4B8DF8;
        border-left: 4px solid #4B8DF8;
        padding: 4px 4px 4px 5px;
    }


.orangeButton {
    background-color: #E5E5E5;
    border: none;
    border-left: 4px solid #FFB848;
    padding: 5px 5px 5px 5px;
    min-width: 60px;
}

    .orangeButton:hover {
        border: 1px solid #FFB848;
        border-left: 4px solid #FFB848;
        padding: 4px 4px 4px 5px;
    }

.violetButton {
    background-color: #E5E5E5;
    border: none;
    border-left: 4px solid #852B99;
    padding: 5px 5px 5px 5px;
    min-width: 60px;
}

    .violetButton:hover {
        border: 1px solid #852B99;
        border-left: 4px solid #852B99;
        padding: 4px 4px 4px 5px;
    }

/* main layout
----------------------------------------------------------*/
#header {
    min-height: 37px;
    background-color: #0071C2;
    text-align: center;
    color: #ffffff;
    position: relative;
}

    #header > table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0px;
        border-width: 0px;
        vertical-align: middle;
        border-bottom: 1px solid #c8c8c8;
    }

        #header > table .leftColumn {
            text-align: left;
        }

            #header > table .leftColumn .title {
                margin: 2px;
            }

        #header > table .rightColumn {
            text-align: right;
        }

.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 2px;
}

    .site-title a, .site-title a:hover, .site-title a:active {
        background: none;
        color: #c8c8c8;
        outline: none;
        text-decoration: none;
    }


#header span[onclick] {
    cursor: pointer;
    margin: 2px 2px 2px 2px;
}

.itemMainPhotoContainer {
    max-width: 120px;
    display: block; /*max-height: 120px;*/
}

.itemMainPhoto {
    max-width: 120px;
    display: block; /*max-height: 120px;*/
}

.itemMainPhotoOver {
    width: 420px; /*max-height: 420px;*/
}

    .itemMainPhoto img,
    .itemMainPhotoOver img {
        width: 100%; /*max-height: 100%;display:block;  max-width: 100%; width: auto;*/
    }

/*#body {
}*/
/*height:100%;
    padding-bottom: 35px;*/

.right-side {
    min-height: inherit !important;
}

table#mainContent {
    table-layout: fixed;
    width: 100%;
    min-height: inherit !important;
    border-width: 0px;
    border-spacing: 0px;
}

    table#mainContent #mainContentRow {
        vertical-align: top;
    }

        table#mainContent #mainContentRow #leftContent {
            background-color: #F0F0F0;
            width: 250px;
        }

        table#mainContent #mainContentRow #centerContent {
            padding: 20px 20px 0px 22px;
            width: 100%; /*background-color:#c8c8c8;*/
        }

        table#mainContent #mainContentRow #rightContent {
            display: none; /*background-color: #FFFFFF;
            border-left: 1px solid #F0F0F0;*/
            width: 240px;
            padding: 20px 5px 0px 10px;
        }

            table#mainContent #mainContentRow #rightContent > div { /*background-color: #ffffff;*/
                z-index: 99;
            }



#footer {
    position: fixed;
    bottom: 0px;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 35px;
    width: 100%;
}

/* top menu*/

.liSeparator {
    width: 20px;
    height: 50px;
    float: left;
    display: block;
}

/* left menu 
----------------------------------------------------------*/
/*#leftMenu { }*/

#leftMenu .leftMenuItem {
    padding: 5px 3px 5px 3px;
    cursor: pointer;
}

    #leftMenu .leftMenuItem:hover {
        background-color: #C4C4C4;
    }


#leftMenu .leftMenuItemContainer {
    padding: 5px 3px 5px 3px;
}

    #leftMenu .leftMenuItemContainer .leftMenuSubItem {
        padding: 5px 3px 5px 3px;
        cursor: pointer;
    }

        #leftMenu .leftMenuItemContainer .leftMenuSubItem:hover {
            background-color: #C4C4C4;
        }

#leftMenu .leftMenuItemSpace {
    padding: 5px 3px 5px 3px;
    height: 29px;
}


/* page elements
----------------------------------------------------------*/
/* login page */
/*#loginForm { }*/

#loginForm button[type="submit"] {
    border: 1px solid #ffffff;
}

#loginFormLogo img {
    margin-left: -10px;
    margin-bottom: 15px;
}

#loginForm .loginField {
    margin-bottom: 15px;
}

    #loginForm .loginField label {
        font-size: 16px;
        margin-left: 3px;
        color: #ffffff;
    }

    #loginForm .loginField select {
        width: 100%;
    }

    #loginForm .loginField .fieldTextBoxValidation,
    #loginForm .loginField .fieldPaswordValidation {
        display: none;
    }

#loginForm .noLabel label {
    display: none;
    visibility: hidden;
}

#loginForm .validation-error {
    display: block;
    margin-left: 15px;
}

#loginForm .validation-summary-errors ul {
    margin: 0;
    padding: 0;
}

#loginForm .validation-summary-errors li {
    display: inline;
    list-style: none;
}
/*#loginForm .validation-summary-errors li { display: inline; list-style: none; margin: 0; }*/

#loginForm input {
    width: 250px;
}

    #loginForm input[type="checkbox"],
    #loginForm input[type="submit"],
    #loginForm input[type="button"],
    #loginForm button {
        width: auto;
    }


/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms 
-------------------------------------------------------*/
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

label {
    display: block;
    font-size: 1em; /*font-weight: 600;*/
}

    label.checkbox {
        display: inline;
    }

input,
textarea,
select {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333 !important;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 220px;
}

    input[type='radio'], input[type='checkbox'] {
        width: 40px;
    }

textarea {
    font-family: inherit;
    width: 500px;
}

    input[readonly],
    textarea[readonly],
    select[readonly] {
        background: #E5E5E5;
    }

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

input[type="checkbox"] {
    background: transparent;
    border: inherit;
    width: auto;
}

input[type="submit"],
input[type="button"],
button {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
}

td input[type="submit"],
td input[type="button"],
td button {
    font-size: 1em;
    padding: 4px;
    margin-right: 4px;
}

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

/*select.input-validation-error,
input.input-validation-error {}*/

textarea.input-validation-error {
    border: 1px solid #e80c4d;
}

textarea.obligatory-field {
    border: 1px solid #e80c4d !important;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/*   fields 
---------------------------------------------------------*/

.fieldDisplayLabel,
.fieldTextBoxLabel,
.fieldTextAreaLabel,
.fieldEditorLabel,
.fieldPaswordLabel,
.fieldCheckBoxLabel,
.fieldDropDownLabel,
.multiSelectChooseLabel {
    float: left;
    width: 200px;
    margin: 5px 0px 5px 0px;
    word-wrap: break-word;
    word-break: break-all;
}


.fieldDisplayDisplay,
.fieldTextBoxTextBox,
.fieldTextAreaTextArea,
.fieldEditorEditor,
.fieldPaswordPassword,
.fieldCheckBoxCheckBox,
.fieldDropDownEditor,
.multiSelectChooseEditor {
    float: left;
    margin: 5px 0px 5px 0px;
}

    .fieldDropDownEditor select[disabled] {
        color: #A0B0B2 !important;
    }

.fieldDisplayDisplay {
    width: 300px;
    min-height: 32px;
    padding: 5px 5px 5px 5px;
    border: 1px dashed #c8c8c8;
}


.fieldTextBoxTextBox input,
.fieldTextAreaTextArea textarea,
.fieldEditorEditor input,
.fieldPaswordPassword input,
.fieldDropDownEditor select,
.multiSelectChooseEditor {
    width: 300px;
    border-color: #c8c8c8 !important;
}

.fieldTextBoxValidation,
.fieldTextAreaValidation,
.fieldEditorValidation,
.fieldPaswordValidation,
.fieldCheckBoxValidation,
.fieldDropDownValidation,
.multiSelectChooseValidation {
    float: left;
    width: 300px;
    margin: 5px 0px 5px 0px;
    padding: 0px 0px 0px 10px;
}


.fieldDisplayEnd,
.fieldTextBoxEnd,
.fieldTextAreaEnd,
.fieldEditorEnd,
.fieldPaswordEnd,
.fieldCheckBoxEnd,
.fieldDropDownEnd,
.multiSelectChooseEnd {
    clear: both;
}

.fieldHelpDescription {
    width: 300px;
    margin: 0px 0px 0px 150px;
    color: #c8c8c8;
    word-wrap: normal;
}

.helpDescription {
    color: #808080;
    word-wrap: normal;
}
/* table
---------------------------------------------------------*/

table td {
    word-wrap: break-word; /* All browsers since IE 5.5+ */
    overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}

.dataTable {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

    .dataTable tr th,
    .dataTable thead tr td {
        padding: 4px 4px 4px 4px;
        word-wrap: break-word;
        text-align: left;
        font-weight: bold;
        border: 1px solid #DDD;
        border-bottom: 2px solid #DDD; /*border-right:1px solid #749cde;
        color: #ffffff;
        background-color: #3c8dbc;
        border-right:1px solid #c8c8c8;*/
    }


        .dataTable tr th.actionColumn,
        .dataTable tr td.actionColumn {
            width: 100px; /*background-color:#c8c8c8;*/
        }

        .dataTable tr th.actionColumnSmall,
        .dataTable tr td.actionColumnSmall {
            width: 30px; /*background-color:#c8c8c8;*/
        }

    .dataTable tr.highlight {
        background-color: #b8e5ff;
    }

    .dataTable tbody tr td { /*border-right:1px solid #edecec;*/
        border: 1px solid #DDD;
    }

    /*.dataTable thead tr td { }*/

    .dataTable tr td {
        padding: 4px 4px 4px 4px;
        word-wrap: break-word;
    }

        .dataTable tr td.deletedItem {
            text-decoration: line-through !important;
        }

    /*.dataTable tbody tr:nth-child(3n+3)
    {
        background-color: #F2F2F2;
    }*/


    .dataTable .sortable {
        cursor: pointer; /*padding-left: 0px;*/
        background-repeat: no-repeat;
        background-position: left center;
    }

.sortIco {
    font-size: 13px;
}

.sortAsc { /*background-image: url('images/arr_up.png');*/
    background-repeat: no-repeat;
    background-position: left center;
}

.sortDesc { /*background-image: url('images/arr_down.png');*/
    background-repeat: no-repeat;
    background-position: left center;
}

/* paging 
------------------------------------------------------- */

#pageSizeList,
#totalPages {
    margin: 20px 0px 20px 10px;
}



#paging {
    margin: 5px 5px 5px 5px;
}


    #paging .pageNumber {
        background-color: #EEEEEE;
        min-width: 14px;
        height: 14px;
        font-size: 12px;
        text-align: center;
        padding: 1px 2px 1px 2px;
        margin: 1px;
        cursor: pointer;
    }

        #paging .pageNumber.selectedPageNumber {
            background-color: #19ADED;
            color: #fff;
        }

        #paging .pageNumber:hover {
            border: 1px solid #19ADED;
            padding: 0px 1px 0px 1px;
        }

    #paging #pagingSelect {
        border: 1px solid #e2e2e2;
        background: #fff;
        color: #333;
        font-size: 1em;
        margin: 0px;
        padding: 0px;
        width: 45px;
    }

/* popup
--------------------------------------------------- */
.popupContainer {
    position: relative;
}

    .popupContainer .popupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    .popupContainer .popupShow,
    .popupContainer .popupHide {
        cursor: pointer;
    }

    .popupContainer .popupContent {
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        position: absolute;
        z-index: 9999;
    }

        .popupContainer .popupContent.popupContentToLeft {
            margin-left: -100%;
        }

/* filter
------------------------------------------------- */

#filtersPopup { /*position: relative;*/
    overflow: auto;
}

    #filtersPopup #filtersPopupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    #filtersPopup #filtersPopupContent {
        position: fixed;
        top: 10%;
        left: 15%;
        width: 70%;
        height: 80%;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        z-index: 999;
        overflow: auto;
    }

#deficiencyFiltersPopup { /*position: relative;*/
    overflow: auto;
}

    #deficiencyFiltersPopup #filtersPopupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    #deficiencyFiltersPopup #filtersPopupContent {
        position: fixed;
        top: 10%;
        left: 15%;
        width: 70%;
        height: 80%;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        z-index: 999;
        overflow: auto;
    }


#filterItemContainer {
    margin-top: 5px;
    position: relative;
    max-height: 100%;
}

    /*#filterItemContainer .filterItem { }*/

    #filterItemContainer .filterItem .filterField {
        padding: 3px;
        margin: 3px 0px 3px 0px;
        background-color: #eee;
        border: 1px solid #0050b5;
        border-radius: 3px;
    }

        #filterItemContainer .filterItem .filterField input,
        #filterItemContainer .filterItem .filterField select {
            max-width: 100%;
        }

.filterTitle {
    padding: 0px 5px 0px 5px;
}

.filterBody {
    padding: 5px;
}

.filterFieldType {
    width: auto;
}

.filterFieldListContainer {
    width: 49%;
    border: 1px solid #c8c8c8;
    padding: 3px;
}

.filterFieldChooseContainer {
    width: 49%;
    border: 1px solid #c8c8c8;
    padding: 3px;
}

/*.filterFieldChoose {}*/
/*min-width: 150px;
    margin-right: 100%;*/

.filterExtraMenu {
    margin: 5px 0px 5px 0px;
    padding: 5px 5px 5px 5px;
    border-left: 5px solid #eee;
}

.fastFilter {
    cursor: pointer;
}

#savedFiltersContainer {
    position: absolute;
    bottom: 10px;
    left: 25px;
    margin-bottom: 10px;
    width: 500px;
}


#savedFilters {
    padding: 5px 5px 5px 5px;
}



#newFilterName {
    width: 100%;
}

/*#newFilterPrivate { }*/

/* table config
----------------------------------------------------*/

#tableConfigsPopup { /*position: relative;*/
    overflow: auto;
}

    #tableConfigsPopup #tableConfigsPopupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    #tableConfigsPopup #tableConfigsPopupContent {
        position: fixed;
        top: 10%;
        left: 15%;
        width: 70%;
        height: 80%;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        z-index: 999; /*overflow: auto;*/
    }

#tableConfigsPopupExposed { /*position: relative;*/
    overflow: auto;
}

    #tableConfigsPopupExposed #tableConfigsPopupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    #tableConfigsPopupExposed #tableConfigsPopupContent {
        position: fixed;
        top: 10%;
        left: 15%;
        width: 70%;
        height: 80%;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        z-index: 999; /*overflow: auto;*/
    }

#typesPopup { /*position: relative;*/
    overflow: auto;
}

    #typesPopup #filtersPopupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    #typesPopup #filtersPopupContent {
        position: fixed;
        top: 10%;
        left: 15%;
        width: 70%;
        height: 80%;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        z-index: 999;
        overflow: auto;
    }

/* dialog 
----------------------------------------------------*/
.ui-widget-overlay {
    opacity: 0.5 !important;
}

.ui-dialog {
    z-index: 1000 !important;
}

.ui-dialog {
    max-width: 600px;
}

    .ui-dialog .ui-dialog-titlebar {
        border: none;
        background: none;
    }

        /*.ui-dialog .ui-dialog-titlebar .ui-dialog-title { }*/

        .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
            display: none;
        }

    .ui-dialog .ui-dialog-content {
        word-wrap: break-word;
    }

/*.ui-dialog .ui-dialog-buttonpane { }*/

/*.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { }*/


/* tableConfig 
---------------------------------------------------*/
#tableConfig {
    width: 100%;
}

    #tableConfig td {
        border-bottom: 1px solid #DDD;
    }

        #tableConfig td.isVisibleColumn,
        #tableConfig td.up,
        #tableConfig td.down {
            width: 20px;
        }


/* exino report
--------------------------------------------------- */
.amsReport .frtoolbar {
    background-color: transparent !important;
}

.amsReport #frbody {
    border: 1px solid #c8c8c8;
}


/* exino home */




/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

            #login a:hover {
                color: #333;
            }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

    /* features */
    section.feature {
        float: none;
        padding: 10px;
        width: auto;
    }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}

.quickSearchContainer {
    position: relative;
    margin-left: 20px;
    width: 20%;
    height: 100%;
}

    .quickSearchContainer .quickSearchInput {
        width: 2000px;
        position: absolute; /*it can be fixed too*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-height: 80%;
        overflow: auto;
    }

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 242, 242, 242, .8 ) url('../img/ajax-loader.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

/* filses
------------------------------------------------- */
#filesPopup { /*position: relative;*/
    overflow: auto;
}

    #filesPopup #filesPopupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    #filesPopup #filesPopupContent {
        position: fixed;
        top: 10%;
        left: 15%;
        width: 70%;
        height: 80%;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        z-index: 999;
        overflow: auto;
    }

#itemFilesPopup { /*position: relative;*/
    overflow: auto;
}

    #itemFilesPopup #itemFilesPopupOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0,0,0,0.5); /*dim the background*/
    }

    #itemFilesPopup #itemFilesPopupContent {
        position: fixed;
        top: 10%;
        left: 15%;
        width: 70%;
        height: 80%;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #c8c8c8;
        margin-right: 1px;
        z-index: 999;
        overflow: auto;
    }