/* styles specific to Echo360 Forms */

/* layout */
.grid_16 {
    clear: left;
}

.entityBox {
    display: inline-block;
    width: 98%;
    border: 1px solid #ccc;
    padding: 5px;
    margin: 10px 0;
    box-shadow: 3px 3px 5px #999;
    border-radius: 10px;
    font-size: 1.2em;
    background-color: white;
}

.grid_16 h1 {
    margin-top: 0.5em;
}

h2 {
    clear: both;
}

.floatRight {
    float: right;
}

.wideText {
    width: 30em;
}

.nowrap {
    white-space: nowrap;
    display: inline-block;
}

    .nowrap.block {
        display: block;
        clear: left;
    }

/* tables */
th {
    text-align: left;
    vertical-align: bottom;
}

td {
    vertical-align: top;
}

.xmlTable th, .xmlTable td {
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-width: 1px;
    text-align: left;
}

    .xmlTable td.nowrap {
        display: table-cell;
    }

.rolesTable {
    float: right;
}

.object {
    font-weight: bold;
    display: block;
}

.objectTable {
    background-color: white;
}

    .objectTable th {
        padding: 5px;
        background-color: #ccc;
    }

    .objectTable td {
        padding: 5px;
        border: 1px solid #ccc;
    }


/* DataTables */
#pageContent .dataTables_wrapper .dataTables_filter,
#pageContent .dataTables_wrapper .dataTables_filter input,
#pageContent .dataTables_wrapper .dataTables_filter label {
    float: none;
    text-align: left;
    width: auto;
}

/* form fields */
#belowHeading input, #belowHeading select, #belowHeading textarea, #belowHeading table {
    width: auto;
    height: auto;
    max-width: 100%;
}

#belowHeading label, #belowHeading input, #belowHeading select {
    display: inline;
}

    #belowHeading select[disabled] {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
        border: 0;
        background: transparent;
    }

#authenticate_form_div {
    font-size: 1.3em;
}

#adminOptions {
    margin-left: 9.5em;
    padding-top: 1em;
    clear: both;
    list-style: none none;
}

#belowHeading input[type="submit"] {
    padding: 0.5rem;
}

#belowHeading input, #belowHeading select, #belowHeading textarea {
    float: left;
    margin-right: 1rem;
}

#belowHeading label, #belowHeading input, #belowHeading select, #belowHeading option {
    font-size: 1.2rem;
}

#belowHeading label {
    width: 10em;
    text-align: right;
    padding-right: 1em;
    display: inline-block;
    float: left;
    clear: left;
}

    #belowHeading label.checkAll {
        width: auto;
        float: none;
        clear: none;
        display: inline;
        white-space: nowrap;
        font-size: 0.9em;
        font-weight: normal;
    }

.requireInstructions,
#txtInstructions.required {
    border: 2px solid #a00;
}

#lblInstructions.required:after {
    content: ' * ';
    margin-left: 5px;
    color: #a00;
    font-weight: bold;
}

.unlisted {
    display: block;
}

.gray {
    color: #888;
}

.alert {
    color: #900;
}

#btnRequest {
    margin-left: 9.5em;
    margin-right: 3em;
}

.fieldInfo {
    padding-right: 5px;
}

#lblDebug, #instructions {
    display: none;
}

ol#instructions > li {
    font-size: 1.4em;
}

    ol#instructions > li > ul {
        margin-bottom: 0;
    }

label#lblInstructions {
    width: 9.4em;
    text-align: left;
}

#linkInstructions, #linkDebug {
    padding-left: 20px;
    background: url(../images/open.png) center left no-repeat;
}

    #linkInstructions.open, #linkDebug.open {
        background: url(../images/close.png) center left no-repeat;
    }

#openforgoteidlink_div {
    padding-top: 2.5em;
}

    #openforgoteidlink_div a {
        margin-left: 1em;
    }

#authenticate_form_submit_div {
    clear: both;
    margin-left: 11.5em;
}

#loginDelay {
    clear: both;
    padding-top: 2em;
    font-size: 1.4em;
}

/* terms */
.oldTerm {
    color: #a00;
}

.permTerm {
    color: #999;
}

/* media queries for mobile-friendly layout */
@media only screen and (max-width: 959px) {
    .container_12, .container_16, .grid_16, .container_12, .grid_5, .container_12, .grid_7 {
        width: auto;
        max-width: 99%;
        margin: 0;
    }

    .entityBox {
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        border: 0;
    }
}

@media only screen and (max-width: 780px) {
    #logo {
        float: none;
        height: 50px;
    }

    #header {
        background-position: 0 -120px;
    }

    #tblSections, textarea {
        max-width: 95%;
    }
}

@media only screen and (max-width: 400px) {
    #logo, #logo h1 a:link, #logo h1 a:visited, #sitelogo, #sitelogo h1 a:link, #sitelogo h1 a:visited {
        width: 100%;
    }
}