/* 
    Document   : screen.css
    Created on : Jan 25, 2012, 4:10:04 PM
    Author     : javiermunoz
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
#content {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
}
body{
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}


input{
    border: 1px solid gray;
}

.maintable{
    border-left: 1px solid black;
    border-right: 1px solid black;
    background: url("https://www.datatranswebedi.com/images/background.gif") repeat-x;
    background-color: white;
    width: 800px;
}

.searchheader{
    background: url("https://www.datatranswebedi.com/images/header-2.jpg") no-repeat;
    width: 335px;
    height: 111px;
}

.menu_background{
    background: url("https://www.datatranswebedi.com/images/menu-2.jpg") no-repeat;
    width: 539px;
}

.menu_style{
    background: #c21e1e;
    color: white;
    cursor: pointer;
    border: 1px solid #870b0b;
}

.menu_text td{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: white;
    cursor: pointer;
}

.menu_text a{
    color: white;
    text-decoration: none;
}

.menu_footer{
    font-size: 11px;
    color: white;
    background: #1c528d;
}

.menu_footer a{
    color: white;
    text-decoration: none;
}

.searchbox{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    border: 1px solid black;
    background: white;
}

.box_content{
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    background: white;
    font-size: 12px;
    padding: 3px;
}

#news a{
    text-decoration: none;
    color: blue;
}

div#steps-indicator{
    float: right;
}
.steps-circle {
    width: 36px;
    height: 35px;
    float: right;
    color: #fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    margin: 5px;
}
.steps-circle span {
    display:none;
}
div#step1-indicator.steps-circle {
    background: url('../images/steps-buttons.png') no-repeat;
    background-position: 0px -35px;
}
div#step2-indicator.steps-circle {
    background: url('../images/steps-buttons.png') no-repeat;
    background-position: -40px -35px;
}
div#step3-indicator.steps-circle {
    background: url('../images/steps-buttons.png') no-repeat;
    background-position: -80px -35px;

}
div#step1-indicator.steps-circle.active {
    background: url('../images/steps-buttons.png') no-repeat;
    background-position: 0px 0px;
}
div#step2-indicator.steps-circle.active {
    background: url('../images/steps-buttons.png') no-repeat;
    background-position: -40px 0px;
}
div#step3-indicator.steps-circle.active {
    background: url('../images/steps-buttons.png') no-repeat;
    background-position: -80px 0px;
}

.stacked{
    float:left;

}
.boxed {
    border: #bbbbbb solid 1px;
    background-color: #ff;
    border-radius: 4px;
    padding: 2px;
    margin: 10px;
}
.boxed h1,.boxed h2,.boxed h3,.boxed h4,.boxed h5,.boxed h6 {
    border: #bbbbbb solid 1px;
    background-image: url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png);
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-position-x: 50%;
    background-position-y: 50%;
    background-origin: initial;
    background-clip: initial;
    background-color: #CCC;
    border-radius: 4px;
    padding: 10px;
    margin: 1px;
    text-align: center;
}
.boxed h4{
    font-size: 12px;
}

a.Ntooltip {
    position: relative; /* es la posición normal */
    text-decoration: none !important; /* forzar sin subrayado */
    color:#666 !important; /* forzar color del texto */
    font-weight:bold !important; /* forzar negritas */
    border: solid 1px;
    border-color: #bbbbbb;
    border-radius: 16px;
    padding: 0 4px 0 4px; /* circle */
    font-size: 10px;
}

a.Ntooltip:hover {
    z-index:999; /* va a estar por encima de todo */
    background-color:#ccc; /* DEBE haber un color de fondo */
    color:#fff;
}

a.Ntooltip span {
    display: none; /* el elemento va a estar oculto */
}

a.Ntooltip:hover span {
    display: block; /* se fuerza a mostrar el bloque */
    position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
    top:2em; left:2em; /* donde va a estar */
    width:250px; /* el ancho por defecto que va a tener */
    padding:5px; /* la separación entre el contenido y los bordes */
    background-color: #F5F4F2; /* el color de fondo por defecto */
    color: black; /* el color de los textos por defecto */
    border: 1px solid #d0d0ce;
    border-radius: 4px;
}

div#step-bar {
    height: 71px;
    width: 880px; 
    background-repeat: no-repeat ;
    margin-left: auto;
    margin-right: auto;
    margin-top:15px; 
    margin-bottom: 15px;
    background: url('../images/steps-bar.png');
}
div#step-bar ul {
    list-style: none;
    padding: 0px;
    height: 71px;
}
div#step-bar ul li {
    padding-left: 70px;
    float: left;
    height: 71px;
    padding-top: 10px; 
    font-size: 16px;
    font-weight: bold;
    overflow: show;
    
}
div#step-bar ul li span{
    height: 71px;
    display: none;
}
div#step-bar ul li span * {
       vertical-align:  middle;
       display: table-cell;
}

.field th,.field label {
    text-align: right;
    font-weight: normal;
    width: 9em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
    min-height: 2em;
}

.field-required th,.field-required label {
    color: black;
}
.field input {
    height: 28px;
    border: 1px solid #c4c4bc;
    background-color: white;
    border-radius: 4px;
    margin-top: 8px;
}

.field input[type=radio] {
    height: 28px;
    border: 1px solid #c4c4bc;
    background-color: white;
    border-radius: 4px;
    margin-top: 0px;
    vertical-align: middle;
}

select {
    height: 32px;
    border: 1px solid #c4c4bc;
    background-color: white;
    border-radius: 4px;
    margin-top: 8px;
}

label[for*="formPartnerInfo"], label[for*="formYourInfo"], label[for*="formNotificationEmails"], label[for*=formEdiInformation] {
    margin-top: 15px;
}

label[for*=formEdi_use_edi]{
    padding-top: 10px;
}

label[for*=formEdiInformation_use_3_part_provider] {
    padding-top: 2px;
}

#edi3provider td {
    padding-left: 23px;;
}

.field input[required]:after{
    content: "*";
}

a.field-error {
    color:#c21e1e !important; /* forzar color del texto */
    border: solid 1px #c21e1e;
}

a.field-error:hover {
    z-index:999; /* va a estar por encima de todo */
    background-color: tomato ; /* DEBE haber un color de fondo */
    color:#fff !important;
}
div.popup {
    display: none;
}
#pricing {
    text-align: center;
    min-height: 40px;
}
#pricing tr th {
    text-align: right;
}

#fees {
    text-align: center;
}

#fees tr th,#fees tr td {
    border-bottom: solid 1px #000;
    margin:0 auto 0 auto; 
    width: 220px;
    height: 20px;
}
.dataTables_paginate {
    display: none;
}
.dataTables_filter{
    display: none;
}
.dataTables_length{
    display: none;
}

.printbtn {
    float:right;
    background: url('../images/print_icon.gif');
    width: 49px;
    height: 17px;
    margin-top: 10px;
    margin-right: 3px;
}
.printbtn span {
    display: none;
}

#startsubmit {
    background: url('../images/GotoStep1Button.png') no-repeat;
    width: 262px;
    height: 40px;
    border: none;
    margin: 3px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    text-align: center;
    padding-left: 106px;
    line-height: 35px;
}

#step1submit {
    width: 170px;
    font-size: 15px;
    height: 36px;
    border-radius: 3px;
    color: white;
    background-color: #d9710c;
    margin: 10px;
    margin-left: auto;
}
#step1submit:hover {
    background-color: #b15c0a;
}

.btn-group{
    display: flex;
    padding-right: 15px;
}

.btn-group-custom {
    display: flex;
}

#step2submit {
    width: 170px;
    font-size: 15px;
    height: 36px;
    border-radius: 3px;
    color: white;
    background-color: #d9710c;
    margin: 10px;
    margin-left: auto;
}

#step2submit:hover {
    background-color: #b15c0a;
}

#step3submit {
    width: 170px;
    font-size: 15px;
    height: 36px;
    border-radius: 3px;
    color: white;
    background-color: #d9710c;
    margin: 10px;
}
#step3submit:hover {
    background-color: #b15c0a;
}

#step3submit {
    margin-left: auto;
}

#cancelbutton {
    width: 170px;
    font-size: 15px;
    height: 36px;
    border-radius: 3px;
    color: white;
    background-color: #ededeb;
    margin: 10px;
    color: black;
}
#cancelbutton:hover {
    background-color: #d6d6d6;
}

#backbutton {
    width: 170px;
    font-size: 15px;
    height: 36px;
    border-radius: 3px;
    color: white;
    background-color: #ededeb;
    margin: 10px;
    color: black;
    background-image: url("../../ui/images/left-arrow.png");
    background-repeat: no-repeat;
    background-position: left 45px center;
}
#backbutton:hover {
    background-color: #d6d6d6;
}

#tabs-1 table th, #tabs-2 table th{
    font-size: 12px;
    text-align: right;
}
#tabs-1, #tabs-1 table td, 
#tabs-2, #tabs-2 table td {
    font-size: 12px;
}


.form1 label
{
    width: 200px;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block
}

.form1 input[type='submit']
{
margin-left: 4.5em;
} 
.form1 input
{
    color: #781351;
    background: #fff;
    border: 1px solid #781351
}
.form1 input[type='radio'], .form1 input[type='checkbox']{
    border: none;
}
.form1 input[type='submit']
{
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
} 
.form1 fieldset
{
    border: none;
    width: 400px;
    padding: 3px;
    margin: 0px 0px 0px 0px;
}

.form1 legend
{
    color: #fff;
    background: #ffa20c;
    border: 1px solid #781351;
    padding: 2px 6px;

}

.error input,.error textarea , .error select  {
    border: #c21e1e solid 2px;
    background-color: #FFBABA ;
    
}
.error input[type='radio']{
    outline:2px solid #c21e1e; /* Firefox, Opera, Chrome, IE8+ */
}

.error label{
    color: #c21e1e ;
}

#headerbar{
    width: 100%;
    height: 40px;
    margin-left: 10px;
} 


#headerbar h2{
     /* display: inline-block; */
     font-size: 24px;
     font-weight: bold;
     color: #000;
}

/*#headerbar h1,#headerbar h2, #headerbar strong{ display: none; }*/
#headerbar {
    width: 96%;
    height: 60px;
    margin-left: 10px;
    display: flex;          
    align-items: center;
    margin-top: 10px;  
}

.infobox, .successbox, .warningbox, .errorbox, .validationbox {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.infobox {
color: #00529B;
background-color: #BDE5F8;
background-image: url('ui/images/info.png');
}
.successbox {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('ui/images/success.png');
}
.warningbox {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('ui/images/warning.png');
}
.errorbox {
color: #D8000C;
background-color: #FFBABA;
background-image: url('ui/images/error.png');
}
.futurebillcard {
	text-align: left;
}
.futurebillcard label {
	width: 300px;
	margin-right: 0px;
}
.futurebillacc {
	text-align: left;
}
.futurebillacc label {
	width: 300px;
	margin-right:0px;
}
#ediinfo th {
    width: 36em;
}
#ediinfo td {
    width: 36em;
}
#ediinfo label {
    width: 36em;
}
.formCreditCardBill, .formInvoiceBill, .formEFTBill  {  
   min-height: 2em;
}

.input_required {
    color: #D8000C;
}

.title_required {
    color: #D8000C;
    width: 40%;
    text-align: right;
}
.descriptionpage {
    text-align: center;
    width: 250px;
    padding-top: 20px;
    color: #999999;
}
.note_edi a:link{
    text-decoration: none;
    color:#7CB9E8
}
.note_edi a:visited{
    text-decoration: none;
    color:#7CB9E8
}
.note_edi a:active{
    text-decoration: none;
    color:#7CB9E8
}
.note_edi a:hover{
    text-decoration: none;
    color:#7CB9E8
}