/* ------ Below are styles for overall page layout for new gTLD Application Comments ------ */

.formSection {
    width: 100%;
    border: 1px solid #d8d8d8;
    background-color: #f8f8f8;
}

/* field name */
label {
    width: 20%;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
}

/* text fields with a blue border */
input {
    color: #000000;
    border: 1px solid #A9A9A9;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* text areas with a blue border */
textarea {
    color: #000000;
    border: 1px solid #212B5F;
    width: 60%;
    padding-top: 3px;
    padding-bottom: 3px;
    resize:none;
}

textarea[readonly] {
    width:75%;
    background-color: #f8f8f8;
    border: none;
    overflow:auto;
    color: #595959;
    font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
    padding: 1px;
    outline: none;
}

pre {
    white-space: pre-line;
}

.field_instruction {
    margin-left: 20%;
    width: 60%;
    padding: 0;
    font-size: 80%;
    color: #d8000c;
}

/* submit button in orange color */
.submit {
}

.submit input {
    color: #ffffff;
    background: #F89728;
    font: bold 115% arial;
    border: 0px;
    width: auto;
}

/* submit button when disabled */
.submit input[disabled] {
    margin-left: 0.5em;
    color: #ffffff;
    background: #cccccc;
    font: bold 84% arial;
    width: auto;
}

.footnotes {
    background-color:#f8f8f8;
    font-size:80%;
}

/* Specific for the login form */
.inline-login-form {
    border: 1px solid #d8d8d8;
    background-color: #f8f8f8;
	float: right;
	margin-left: 30px;
	margin-bottom: 30px;
	width: 40%;
}

.inline-login-form label {
    width: 20%;
}

.inline-login-form .submit {
    margin-left: 20%;
}

.inline-login-form .submit input {
    margin-left: 0.5em;
}

.inline-login-form .forgotPassword {
    margin-left: 10%;
}

.message {
    padding: 0 10px;
}

/* To align the Kaptcha input field */
.ck-kaptcha input {
    margin-left: 198px;
    margin-bottom: 0;
}

/* Override the t:zone in default.css from tapestry core*/
.t-zone {
    display: inline;
}

/* Override the Tapestry t:grid style in default.css from tapestry core  */

img.t-sort-icon	{
    margin: auto;
    vertical-align: bottom;
    display: block;
}

.auto_table {
    width: auto;
}

TABLE.t-data-grid {
    border: 1px solid #efefef;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: collapse;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Arial, sans-serif;
}

TABLE.t-data-grid THEAD TR {
    color: #595959;
    background-color: #f8f8f8;
}

TABLE.t-data-grid THEAD TR TH {
    white-space: pre;   /* wrap on line break*/
    border: 1px solid #d8d8d8;
    padding: .5em;
    text-align: center;
    vertical-align: bottom;
}

TABLE.t-data-grid TBODY TR TD {
    border: 1px solid #d8d8d8;
    padding: .5em;
    white-space: pre;
}

DIV.t-data-grid {
    font-size: 90% !important;
}

DIV.t-data-grid-pager {
    margin: 0px;
}

DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
    text-decoration: none;
    color: #595959;;
    padding: 2px 5px;
    font-size: medium;
    border: none;
    margin-right: 5px;
}

DIV.t-data-grid-pager A:hover {
    border: none;
}

DIV.t-data-grid-pager SPAN.current {
    color: white;
    background-color: #2d76d0;
    border: none;
}

TABLE.t-data-grid TR TH A {
    color: #595959;
}

TABLE.t-data-grid tbody tr.odd	{
    background-color: #f8f8f8;
}

/* Override the auto-completion style in default.css from tapestry core */
DIV.t-autocomplete-menu {
    display: inline;
    font-size: 70%;
    font-family: Arial, sans-serif;
}

DIV.t-autocomplete-menu UL {
    border: 1px solid #d8d8d8;;
    background-color: #ffffff;
    padding: 4px 6px;
    overflow: auto;
}

DIV.t-autocomplete-menu LI {
    color: #000000;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    border-bottom: none;
    cursor: pointer;
}

DIV.t-autocomplete-menu LI.selected {
    color: white;
    background:  #2d76d0;
    font-weight: bold;
}

/* Specific for displaying the search value text field or select component*/
.display_none {
    display: none;
    width: 300px;
}

.display_block {
    display: inline-block;
    width: 300px;
}

/* -----------Application Status Table/Grid----------- */

TABLE.t-data-grid THEAD TR TH.prioritizationNumberDisplayable {
    white-space: pre;
}

TABLE.t-data-grid THEAD TR TH.applicationTld {
    white-space: pre;
}

TABLE.t-data-grid THEAD TR TH.countryCode {
    white-space: pre;
}

/* ----------Application Change History Grid/Table--------- */

/* We want the summary,From,To columns to wrap the text as necessary and on line break */
TABLE.t-data-grid TBODY TR TD.dateCreated {
    white-space: nowrap;
}

TABLE.t-data-grid TBODY TR TD.summary {
    white-space: pre-line;
}

TABLE.t-data-grid TBODY TR TD.fromText {
    white-space: pre-line;
}

TABLE.t-data-grid TBODY TR TD.toText {
    white-space: pre-line;
}

/* -----------String Contention Set Table/Grid----------- */

TABLE.t-data-grid THEAD TR TH.name {
    white-space: pre;
}

TABLE.t-data-grid THEAD TR TH.setNumber {
    white-space: pre;
}

TABLE.t-data-grid THEAD TR TH.type {
    white-space: pre;
}

TABLE.t-data-grid THEAD TR TH.status {
    white-space: pre;
}

TABLE.t-data-grid THEAD TR TH.numApps {
    white-space: pre;
}

TABLE.t-data-grid TBODY TR TD.setNumber {
    text-align: center;
}

/********** BANNER CSS *********/
.cookie-notification {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px 0 18px;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
    background: #EFF6FB;
    border-top: 1px solid #e6e6e6;
    line-height: 1.6;
    font-weight: 400;
    max-height: 9999px;
    z-index: 9998;
    font-size: 16px;
}

.cookie-notification .wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.cookie-notification .ctitle {
    margin: 0 0 6px;
    font-size: 16px;
}

.cookie-notification p {
    margin: 0 0 8px;
    font-size: 15px;
}

.cookie-notification .cookie-link {
    color: #f79628;
}

.cookie-notification .js-close-cookie-notification a {
    background: #c6dff1;
    border-radius: 4px;
    padding: 3px 6px 3px;
    margin-left: 5px;
    border: 1px solid #75b1dc;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
    color: #000;
}

.cookie-notification .js-close-cookie-notification i {
    margin-right: 5px;
}

/* sorter */
table > thead > tr > th[data-grid-column-sort] a {
    padding-right: 20px;
    background: url("/assets/meta/6c036d9f/images/sortable.png") no-repeat right;
}

/*descending*/
table > thead > tr > th[data-grid-column-sort="descending"] a {
    padding-right: 20px;
    background: url("/assets/meta/96c183d6/images/sort-desc.png") no-repeat right;
}

/*ascending*/
table > thead > tr > th[data-grid-column-sort="ascending"] a {
    padding-right: 20px;
    background: url("/assets/meta/8eb584c4/images/sort-asc.png") no-repeat right;
}

.next-round-alert {
    margin-top: 0;
    border-bottom: 3px solid #E5E5E5;
    padding-bottom: 9px;
}

.next-round-alert a,
.next-round-alert a:hover {
    text-decoration: none;
    color: #f79628;
}