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

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

.formSection input {
  width: 60%;
}
/* field name */
label {
    width: 20%;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
  /*line-height: 22px;*/
    font-weight: normal;
}
/* text fields with a blue border */
input[type="text"] {
    color: #000000;
    border: 1px solid #A9A9A9;
    /*width: 60% !important;*/
    padding-top: 3px;
    padding-bottom: 3px;
}

input[readonly] {
    background-color: #f8f8f8;
    border: 0;
}

.hint input {
    color: #808080;
}

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

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

.orange {
    color: #F89728;
}

pre {
    white-space: pre-line;
}

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

.field_instruction_red {
    margin-left: 21%;
    width: auto;
    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;
  padding: 3px 6px;
}

#proceedButton, #cancelButton {
  padding: 3px 6px;
}

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

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

.inline-login-form p {
    margin: 0 0 15px 0;
}

.inline-login-form label {
    width: 20%;
    color: #636363;
    font-size: 12px;
}

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

.inline-login-form .submit input {
    margin-left: 0.5em;
    padding: 3px 6px;
}

.captcha-wrap label + div {
    display: inline-block
}

.inline-login-form .ck-kaptcha input {
    margin-top:15px;
    margin-bottom: 0;
    margin-left: 80px;
}

div.forgotPassword a {
    margin-right: 20px;
}

label.rtl {
    margin-right: 0;
}

span.rtl {
    font-size: 90%;
}

input.text_align_right {
    text-align: right;
}

input.text_align_left {
    text-align: left;
}

h3 {
    border-top: solid 5px #e5e5e5;
  font-weight: bold;
}

h3.nexttologinform {
    width: 53%;
}

div.nav_button_panel {
    margin-bottom: 15px;
    border-bottom: 1px solid #d8d8d8;
}

div.nav_button_panel .link_button{
    padding: 0;
}

div.nav_button_panel .link_button a {
    width: 100%;
    border: 1px solid #d8d8d8;
    border-bottom: none;
    font: bold 84% arial;
    padding: 3px 1em 3px 1em;
    text-decoration: none;
    color: #595959;
    background-color: #d8d8d8;
}

div.nav_button_panel .link_button_active a {
    width: 100%;
    border: 1px solid #d8d8d8;
    border-bottom: none;
    font: bold 84% arial;
    padding: 3px 1em 3px 1em;
    text-decoration: none;
    color: #595959;
    background-color: #ffffff;
}

div.nav_button_panel .link_button a:hover {
    background-color: #d8d8d8;
}

.message {
    padding: 0 10px;
}

/* Style the HTML exported from TAS/Appian */
.appian h4 {
	font-size: 14px;
}
.appian h3 {
	font-size: 15px;
}
.appian h2 {
	font-size: 16px;
}
.appian h1 {
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0;
}
.appian blockquote {
	margin-left: 2em;
	margin-right: 2em;
}

#user-actions {
    float: right;
    max-width: 50%;
}
#user-actions ul {
    margin: 0;
}

#user-actions li {
    display: inline;
    list-style-image: none;
    list-style: none;
    margin-left: 10px;
    padding-left: 18px;
}
#user-actions li {
    background-color: white;
    padding: 4px 8px 4px 18px;
}

#user-actions li a {
    color: #00759A;
    font-size: 0.9em;
}

#user-actions li.ua-alerts {
    background: url("/assets/meta/dcd52dbd/images/icon-alerts.png") no-repeat left;
}

#user-actions li.ua-acct {
    background: url("/assets/meta/f7b85897/images/icon-account.png") no-repeat left;
    margin-right: 10px;
}

#user-actions li.ua-signout {
    background: url("/assets/meta/7a62315f/images/icon-signout.png") no-repeat left;
    margin-right: 80px;
}

/* To have the Kaptcha input field displayed right under the img */
.ck-kaptcha img {
    display: block;
}
.ck-kaptcha input {
    margin-top:15px;
    margin-bottom: 0;
    margin-left: 198px;
}

table tr td .ck-kaptcha input {
    margin-left: 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;
}

/* TABS */
div.tabs {
    border-bottom: solid 5px #e5e5e5;
    margin-top: 30px;
    padding-bottom: 6px;
}

div.tabs.short {
  width: 53%;
}

div.tabs a {
    color: #8c8c8c;
    background: #f7f7f7;
    padding: 8px;
    margin-right:3px;
}

div.tabs a.active {
    background: #e5e5e5;
    cursor: default;
}

DIV.comment_text_ltr {
    /*width:744px;*/
    padding-right:10px;
    direction: ltr;
    text-align: left;
  margin-right: 5px;
  margin-left: 20%;
    /*float: right;*/
}

DIV.comment_text_rtl {
    /*width:744px;*/
    padding-right:10px;
    direction: rtl;
    text-align: right;
  /*float: right;*/
  margin-right: 5px;
  margin-left: 20%;

}

DIV.comment_text_ltr p {
    margin-top: 0;
}

DIV.comment_text_rtl p {
    margin-top: 0;
}

DIV.comment_label {
    float:left;
    width:20%;
    margin-right:0.5em;
}

DIV.comment_label label{
    width:100%;
}

#log_menu a{
    color: #273791;
    background:transparent;
    padding: 7px 15px;
}
#log_menu .login{
    background: url("/assets/meta/760a85dc/images/user.gif") no-repeat 0 9px;
}
#log_menu .login.deactive {
    color: #7e7e7e;
    pointer-events: none;
    cursor: default;
}
#log_menu .logout{
    background: url("/assets/meta/6fe386c9/images/logout.gif") no-repeat 0 9px;
}
#log_menu{
  right: 10%;
    position: absolute;
    top: 41px;
}

.login-align {
  top: 41px !important;
}

table {
    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;
    font-family: Arial, sans-serif;
}

TABLE THEAD TR {
    color: #595959;
    background-color: #f8f8f8;
    word-wrap: normal;
}

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

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

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


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

ul.pagination {
    display: flex;
    list-style-type: none;
    padding: 0px;
    font-size: large;
    margin: 1em 0;
}
ul.pagination a {
    color: #636363;
}
ul.pagination li {
    padding: 2px 5px;
    margin-right: 5px;
}

DIV.t-data-grid ul A, DIV.ul li.active {
    text-decoration: none;
    color: #595959;;
    padding: 2px 5px;
    font-size: small;
    border: none;
    /*DIV.t-data-grid ul li,*/
    /*margin-right: 5px;*/
}

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

DIV.t-data-grid ul li.active A {
    color: white;
    background-color: #2d76d0;
    border: none;
}

TABLE TR TH A {
    color: #595959;
}

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

/* Specific for the view status table to have a horizontal scroll bar */
.view_status DIV.t-data-grid {
    font-family: Arial, sans-serif;
    font-size: 70%;
    overflow-x:scroll;
    overflow-y:visible;
}

/* Specific for the batch number column to have the number centered*/
TABLE TBODY TR .batchNumber {
    text-align: center;
}

/* Override the auto-completion style in default.css from tapestry core */
.tt-dropdown-menu {
    font-size: 70% !important;
    font-family: Arial, sans-serif !important;
  width: 75% !important;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
    background-color: #212B5F !important;
    color: white !important;
    font-weight: bold !important;
}

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:  #212B5F;
    font-weight: bold;
}

.scrollable-x {
    overflow-x: auto;
}

/* Specific for displaying the search value text field or select component*/
.search-filter .display_none {
    display: none;
    width: 100%;
}

.search-filter .display_block {
    display: inline-block;
    width: 100%;
}

@media print, screen and (min-width: 40em) {
    .search-filter .display_none {
        display: none;
        width: 300px;
    }

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

.search-filter .form-field-group {
    padding-right: 5px;
}

.search-filter .form-field-group .form-control,
.search-filter .form-field-group .searchValueZoneAutocomplete{
    width: 100%;
}


/*
Customize the stylesheet for t:errors
*/
.alert-dismissable.alert.alert-danger {
    background-color: #ffffff;
    border: 1px solid red;
    padding: 0px;
    margin: 4px 0px;
}
.alert-dismissable.alert.alert-danger button.close {
    display: none;
}
.alert-dismissable.alert.alert-danger h4 {
    padding: 2px;
    display: block;
    margin: 0px;
    background-color: red;
    color: white;
    font-weight: bold;
}
.alert-dismissable.alert.alert-danger ul {
    list-style-type:circle;
    margin: 0 0 0 20px;
    padding:0 0 0 20px;
    background-color: #ffffff;
    background-position: 50px;
    color: red;
}

.alert-dismissable.alert.alert-danger li {
    margin-left: -20px
}
.has-error LABEL {
    color: red;
}
.has-error INPUT {
    border-color: red;
    font-style: italic;
}
.help-block {
    display: none;
}
IMG.t-error-icon {
    margin-left: 4px;
    width: 16px;
    height: 16px;
}
th[data-grid-column-sort] a {
    white-space: pre-line;
}

/* We only want the Subject and Comment Tag columns to wrap the text as necessary */
TABLE TBODY TR TD[data-grid-property="subject"] {
    white-space: normal; /*Sequences of whitespace will collapse into a single whitespace*/
}
TABLE TBODY TR TD[data-grid-property="commentTagName"] {
    white-space: normal; /*Sequences of whitespace will collapse into a single whitespace*/
}
TABLE TBODY TR TD[data-grid-property="commenterName"] {
    white-space: normal; /*Sequences of whitespace will collapse into a single whitespace*/
}
TABLE TBODY TR TD[data-grid-property="applicationApplicant"] {
    white-space: normal; /*Sequences of whitespace will collapse into a single whitespace*/
}


/********** Fixing email wrapping issue **********/

.wrapped_email {
    margin: 1.5em 0;
    overflow-y: auto;
}

.wrapped_email_value {
    width: 79%;
  /*float: right;*/
    margin: 0;
    text-align: left;
}


/********** 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 .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;
}
.searchValueZoneAutocomplete {
    display: inline-block;
}
.searchValueZoneAutocomplete .tt-dropdown-menu {
    width: 100% !important;
}

.recaptcha {
    margin-bottom: 20px;
    float: left;
  width: 60% !important;
}

.twitter-typeahead {
  display: block !important;
}

.twitter-typeahead input {
  width: 75%;
}

#goButton {
  display: inline;
}

#goButton input {
    padding: 6px;
}

#applicantSelectId {
  min-width: 160px;
}
/* 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;
}