/*
    ---------------------------------------------------------------------------------------
    Velan Default Style
    ---------------------------------------------------------------------------------------
*/
body {
    /*
        Website Centered in the Browser
        */
    font-family: Helvetica,Arial;
    margin: 0 auto;
    width: 95%;
}

.WebContainerFull {
    /*
    Web Container for Full Website
    */
    background-color: transparent;
    font-family: 'Times New Roman';
    font-style: normal;
    font-size: smaller;
    width: auto;
    height: auto;
}

.MainOuterTable {
    /*
    Main outer table
       */
    width: 100%;
    text-align: center;
    vertical-align: text-top;
}

.HeaderRow {
    /*
    Main outer table
       */
    width: 100%;
    height: 100px;
}

.HeaderRow-table {
    /*
    Main outer table
       */
    width: 100%;
}

.HeaderRow-td {
    /*
    Main outer table
       */
    width: 100%;
}

.HeaderRow-Logo {
    /*
    Header Row Title Logo
    */
    vertical-align: top;
    text-align: left;
    align-content: center;
}

.HeaderRow-Title {
    /*
    Header Row Title Logo
    */
    vertical-align: top;
    text-align: right;
    align-content: center;
    font-size: xx-large;
}

.before.BodyRow {
    height: 5px;
}

    .before.BodyRow.td {
        line-height: 1px;
    }

.BodyRow {
    /*
    Main outer table
       */
    width: 100%;
    border-bottom-style: solid;
    border-width: 1px;
}

/*.after.BodyRow {
}

    .after.BodyRow.td {
        line-height: 1px;
    }*/

.FooterRow {
    /*
    Main outer table
       */
    width: 100%;
}

.MenuRow {
    /*
    Menu Row
        */
    background-color: #1267a0;
    text-align: right;
}

/*
    ---------------------------------------------------------------------------------------
    Velan Default Style - Velcert
    ---------------------------------------------------------------------------------------
*/

div.velcert {
    width: 100%;
}

table.velcert {
    width: 100%;
    vertical-align: top;
}

tr.velcert.Menu {
    vertical-align: top;
}

td.velcert.Menu {
    vertical-align: top;
    width: 100px;
}

td.velcert.MenuContent {
    vertical-align: top;
}

/*
    ------------------------------------------------------------------------------------------
    Material Test Report
    ------------------------------------------------------------------------------------------    
*/

table.mtr {
    font-family: Verdana;
    vertical-align: top;
    text-align: left;
    width: 100%;
    border: 0.5px solid lightgray;
}

tr.mtr {
    width: 100%;
    text-align: left;
}

td.mtr {
    vertical-align: top;
    text-align: left;
    width: 100%;
    padding: 2px 2px;
}

table.ci {
    font-family: 'Times New Roman';
    vertical-align: top;
    text-align: left;
    padding: 2px 2px;
}

tr.ci {
    padding: 2px 2px;
}

td.ci {
    padding: 2px 2px;
}


    label {
        font-size: medium;
    }

table.hcm {
    font-family: 'Times New Roman';
    vertical-align: top;
    text-align: left;
}

table.others {
    font-family: 'Times New Roman';
    vertical-align: top;
    text-align: left;
}

/*
    ------------------------------------------------------------------------------------------
    Retrieve Certificate of Conformance
    ------------------------------------------------------------------------------------------    
*/

table.rcc {
    font-family: 'Times New Roman';
    vertical-align: top;
    width: 100%;
    border: 0.5px solid lightgray;
}

tr.rcc {
    width: 100%;
}

td.rcc {
    vertical-align: top;
    text-align: left;
    width: 100%;
    padding: 2px 2px;
}

table.cn {
    font-family: 'Times New Roman';
    vertical-align: top;
}

/*
    ------------------------------------------------------------------------------------------
    Fields
    ------------------------------------------------------------------------------------------    
*/

.txtCertficateNo {
    width: 200px;
}

.txtCustomerName {
    width: 400px;
}

.txtFigureNumber {
    width: 300px;
}

.txtSize {
    width: 200px;
}

.P_PRESSURE_CLASS {
    width: 200px;
}

.txtValveType {
    width: 200px;
}

.txtQuantity {
    width: 200px;
}

.P_SPEC_NUMBER1 {
    width: 300px;
}

.P_MEASURE_UNIT {
    width: 300px;
}

.P_SPEC_NUMBER2 {
    width: 300px;
}

.txtHeatCode {
    width: 200px;
}

.txttagnumbers {
    width: 750px;
    height: 100px;
}

.txtnotes {
    width: 750px;
    height: 200px;
    }

/*
    ------------------------------------------------------------------------------------------
    Accordion
    ------------------------------------------------------------------------------------------    
*/
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-family: 'Times New Roman';
    font-size: medium;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    button.accordion.active, button.accordion:hover {
        background-color: #ddd;
    }

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/*
    ------------------------------------------------------------------------------------------
    Vertical Tabs
    ------------------------------------------------------------------------------------------    
*/
/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons inside the tab */
    div.tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 11px 8px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        div.tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        div.tab button.active {
            background-color: #1267a0;
            color: white;
            font-style: italic;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 2px 2px;
    border-top: none;
    vertical-align: top;
    text-align: left;
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/*
    ------------------------------------------------------------------------------------------
    Hoverable Sidenav
    ------------------------------------------------------------------------------------------    
*/
/* Style the links inside the sidenav */
#hvSidenav a {
    position: absolute; /* Position them relative to the browser window */
    left: -20px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 10px; /* 15px padding */
    width: 400px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 20px; /* Increase font size */
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

    /* On mouse-over, make the elements appear as they should */
    /*#hvSidenav a:hover {
        left: 0; 
    }*/

/* The about link: 20px from the top with a green background */
#velcert {
    top: 55px;
    background-color: #1267a0;
}

/*
    ------------------------------------------------------------------------------------------
    Animated Buttons
    ------------------------------------------------------------------------------------------    
*/

.button {
    position: relative;
    background-color: #1267a0;
    border: none;
    font-size: 18px;
    color: #FFFFFF;
    padding: 5px;
    width: 150px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

    .button:after {
        content: "";
        background: #5489b2;
        display: block;
        position: absolute;
        padding-top: 300%;
        padding-left: 350%;
        margin-left: -20px!important;
        margin-top: -120%;
        opacity: 0;
        transition: all 0.8s;
    }

    .button:active:after {
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s;
    }

/*
    ------------------------------------------------------------------------------------------
    Tooltips
    ------------------------------------------------------------------------------------------    
*/
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        top: 100%;
        left: 50%;
        margin-left: -60px;
        /* Fade in tooltip */
        opacity: 0;
        transition: opacity 1s;
    }

        /* Tooltip arrow */
        .tooltip .tooltiptext::after {
            content: " ";
            position: absolute;
            bottom: 100%; /* At the top of the tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
/*
    ------------------------------------------------------------------------------------------
    Loader
    ------------------------------------------------------------------------------------------    
*/
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    text-align: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*
    ------------------------------------------------------------------------------------------
    Dropdown
    ------------------------------------------------------------------------------------------    
*/
/*.dropdown {
    position: relative;
    display: inline-block;
}*/

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    color: black;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    height: 200px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/*
    ------------------------------------------------------------------------------------------
    Navigation Bars
    ------------------------------------------------------------------------------------------    
*/

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


#reportViewer_ctl09 {
  overflow:visible !important;
 }

/*

*/
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .btn:focus {
        outline: thin dotted #333;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .btn:hover,
    .btn:focus {
        color: #333333;
        text-decoration: none;
    }

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.65;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.btn-default {
    color: #333333;
    background-color: #ffffff;
    border-color: #cccccc;
}

.btn-specfic {
    color: #333333;
    background-color: #ffffff;
    border-color: #cccccc;
    font-size: medium;
    font-stretch: extra-expanded;
    width: 150px;
    text-align: center;
    vertical-align: text-top;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    text-decoration: none;
}

.btn-Control {
    color: #333333;
    background-color: #ffffff;
    border-color: #cccccc;
    text-align: center;
    font-size: medium;
    vertical-align: text-top;
    border-radius: 10px 10px 10px 10px;
}

    .btn-default-coloured {
    color: #FFFFFF;
    background-color: #1267a0;
    border-color: #cccccc;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-default.active,
    .open .dropdown-toggle.btn-default {
        color: #333333;
        background-color: #ebebeb;
        border-color: #adadad;
    }

    .btn-default:active,
    .btn-default.active,
    .open .dropdown-toggle.btn-default {
        background-image: none;
    }

    .btn-default.disabled,
    .btn-default[disabled],
    fieldset[disabled] .btn-default,
    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled:active,
    .btn-default[disabled]:active,
    fieldset[disabled] .btn-default:active,
    .btn-default.disabled.active,
    .btn-default[disabled].active,
    fieldset[disabled] .btn-default.active {
        background-color: #ffffff;
        border-color: #cccccc;
    }

.btn-primary {
    color: #ffffff;
    background-color: #428bca;
    border-color: #357ebd;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #ffffff;
        background-color: #3276b1;
        border-color: #285e8e;
    }

    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        background-image: none;
    }

    .btn-primary.disabled,
    .btn-primary[disabled],
    fieldset[disabled] .btn-primary,
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled:active,
    .btn-primary[disabled]:active,
    fieldset[disabled] .btn-primary:active,
    .btn-primary.disabled.active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary.active {
        background-color: #428bca;
        border-color: #357ebd;
    }

.btn-warning {
    color: #ffffff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning.active,
    .open .dropdown-toggle.btn-warning {
        color: #ffffff;
        background-color: #ed9c28;
        border-color: #d58512;
    }

    .btn-warning:active,
    .btn-warning.active,
    .open .dropdown-toggle.btn-warning {
        background-image: none;
    }

    .btn-warning.disabled,
    .btn-warning[disabled],
    fieldset[disabled] .btn-warning,
    .btn-warning.disabled:hover,
    .btn-warning[disabled]:hover,
    fieldset[disabled] .btn-warning:hover,
    .btn-warning.disabled:focus,
    .btn-warning[disabled]:focus,
    fieldset[disabled] .btn-warning:focus,
    .btn-warning.disabled:active,
    .btn-warning[disabled]:active,
    fieldset[disabled] .btn-warning:active,
    .btn-warning.disabled.active,
    .btn-warning[disabled].active,
    fieldset[disabled] .btn-warning.active {
        background-color: #f0ad4e;
        border-color: #eea236;
    }

.btn-danger {
    color: #ffffff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active,
    .open .dropdown-toggle.btn-danger {
        color: #ffffff;
        background-color: #d2322d;
        border-color: #ac2925;
    }

    .btn-danger:active,
    .btn-danger.active,
    .open .dropdown-toggle.btn-danger {
        background-image: none;
    }

    .btn-danger.disabled,
    .btn-danger[disabled],
    fieldset[disabled] .btn-danger,
    .btn-danger.disabled:hover,
    .btn-danger[disabled]:hover,
    fieldset[disabled] .btn-danger:hover,
    .btn-danger.disabled:focus,
    .btn-danger[disabled]:focus,
    fieldset[disabled] .btn-danger:focus,
    .btn-danger.disabled:active,
    .btn-danger[disabled]:active,
    fieldset[disabled] .btn-danger:active,
    .btn-danger.disabled.active,
    .btn-danger[disabled].active,
    fieldset[disabled] .btn-danger.active {
        background-color: #d9534f;
        border-color: #d43f3a;
    }

.btn-success {
    color: #ffffff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active,
    .open .dropdown-toggle.btn-success {
        color: #ffffff;
        background-color: #47a447;
        border-color: #398439;
    }

    .btn-success:active,
    .btn-success.active,
    .open .dropdown-toggle.btn-success {
        background-image: none;
    }

    .btn-success.disabled,
    .btn-success[disabled],
    fieldset[disabled] .btn-success,
    .btn-success.disabled:hover,
    .btn-success[disabled]:hover,
    fieldset[disabled] .btn-success:hover,
    .btn-success.disabled:focus,
    .btn-success[disabled]:focus,
    fieldset[disabled] .btn-success:focus,
    .btn-success.disabled:active,
    .btn-success[disabled]:active,
    fieldset[disabled] .btn-success:active,
    .btn-success.disabled.active,
    .btn-success[disabled].active,
    fieldset[disabled] .btn-success.active {
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

.btn-info {
    color: #ffffff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active,
    .btn-info.active,
    .open .dropdown-toggle.btn-info {
        color: #ffffff;
        background-color: #39b3d7;
        border-color: #269abc;
    }

    .btn-info:active,
    .btn-info.active,
    .open .dropdown-toggle.btn-info {
        background-image: none;
    }

    .btn-info.disabled,
    .btn-info[disabled],
    fieldset[disabled] .btn-info,
    .btn-info.disabled:hover,
    .btn-info[disabled]:hover,
    fieldset[disabled] .btn-info:hover,
    .btn-info.disabled:focus,
    .btn-info[disabled]:focus,
    fieldset[disabled] .btn-info:focus,
    .btn-info.disabled:active,
    .btn-info[disabled]:active,
    fieldset[disabled] .btn-info:active,
    .btn-info.disabled.active,
    .btn-info[disabled].active,
    fieldset[disabled] .btn-info.active {
        background-color: #5bc0de;
        border-color: #46b8da;
    }

.btn-link {
    font-weight: normal;
    color: #428bca;
    cursor: pointer;
    border-radius: 0;
}

    .btn-link,
    .btn-link:active,
    .btn-link[disabled],
    fieldset[disabled] .btn-link {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .btn-link,
        .btn-link:hover,
        .btn-link:focus,
        .btn-link:active {
            border-color: transparent;
        }

            .btn-link:hover,
            .btn-link:focus {
                color: #2a6496;
                text-decoration: underline;
                background-color: transparent;
            }

            .btn-link[disabled]:hover,
            fieldset[disabled] .btn-link:hover,
            .btn-link[disabled]:focus,
            fieldset[disabled] .btn-link:focus {
                color: #999999;
                text-decoration: none;
            }

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

.btn-sm,
.btn-xs {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-xs {
    padding: 1px 5px;
}

.btn-block {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

    .btn-block + .btn-block {
        margin-top: 5px;
    }

/* Custom Table Formation */
.tableFormsHead {
    width: 100%;
    padding: 2px;
}
    .tableFormsHead tr {
        height: 25px;
        background-color: #1267a0;
        color: white;
        padding: 2px;
       
    }

.tableInputForm{
    width:100%;
    padding:5px;
    border:groove;
    border-width:1px;
    border-color:gray;
}

/* Custom Input Label Fields*/
.InputFieldLabel {  
    font-size:small;
    text-align: left;   
}

.InputFieldDataLabel {
    font-size: small;
    text-align: center;
    padding: 5px;
}

.InputFieldDataHelp {
    text-align: left;
    font-size: xx-small;
}

.InputFieldErrorHelp {
    color:red;
    text-align: left;
    font-size: xx-small;
}

/* Custom Input Fields*/
.InputFieldText {
    width: 150px;
    padding: 3px;
    border-radius: 5px 5px 5px 5px;
}

.InputFieldLargeText {
    width: 250px;
    padding: 3px;
    border-radius: 5px 5px 5px 5px;
}


.InputFieldTextEmailID {
    width: 300px;
    padding: 3px;
    border-radius: 5px 5px 5px 5px;
}

.InputFieldTextDropDown {
    width: 300px;
    padding: 3px;
    border-radius: 5px 5px 5px 5px;
}

/* Required Field*/
.InputRequiredField{
    color:red;
}

/* Table Design */
.tblDataStyle {
    color: #333; /* Lighten up font color */
    font-family: Helvetica, Arial, sans-serif; /* Nicer font */
    width: 98%;
    border-collapse: collapse;
    border-spacing: 0;
}

.tblDataStyle th {
    border: 1px solid #CCC;
    height: 30px;
    background: #F3F3F3; /* Light grey background */
    font-weight: bold; /* Make sure they're bold */
    text-align:center;
}

.tblDataStyle td {
    border: 1px solid #CCC;
    height: 30px;
    background: #FAFAFA; /* Lighter grey background */
    text-align: center; /* Center our text */
}