@charset "utf-8";
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*  
/*  Custom CSS Template/Library - Forms & Tables - TBLFRMS.V2.R1.2018
/*  [c] 2018 Grendelfly - A Division of SC&G Technology Solutions
/*  Author(s):  George T Johnson
/* 	Created:    2013.08.26
/*	Updated: 2018.04.11
/*  
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Table */
.css-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    background-color: white;
}

    .css-table th, .css-table .css-table-th {
        padding: 8px 5px;
        font-size: 12px;
    }

    .css-table td, .css-table .css-table-td {
        padding: 8px 5px;
        text-align: center;
        font-size: 12px;
        vertical-align: middle;
    }

        .css-table td.left, .css-table .css-table-td.left {
            text-align: left;
        }

        .css-table td.right, .css-table .css-table-td.right {
            text-align: right;
        }

        .css-table td.center, .css-table .css-table-td.center {
            text-align: center;
        }

        .css-table td.nowrap, .css-table .css-table-td.nowrap {
            white-space: nowrap;
        }

        .css-table td.empty, .css-table .css-table-td.empty {
            background-color: #F2F2F2;
        }

        .css-table td.checkbox, .css-table .css-table-td.checkbox {
            text-align: left;
            vertical-align: middle !important;
            padding-left: 10px !important;
            border: #CCC solid 1px;
        }


    .css-table th.nowrap, .css-table .css-table-th.nowrap {
        white-space: nowrap;
    }

    .css-table .css-table-thead {
        display: none;
    }

        .css-table thead tr, .css-table .css-table-thead .css-table-tr {
            background-color: #F2F2F2;
        }

        .css-table thead th, .css-table .css-table-thead .css-table-th {
            font-weight: 600;
            text-align: center;
            vertical-align: top;
        }

    .css-table tbody th, .css-table .css-table-tbody .css-table-th {
        font-weight: 600;
        text-align: right;
        background: none;
    }

    .css-table tbody td, .css-table .css-table-tbody .css-table-td {
        /*vertical-align: top;*/
    }

    .css-table.css-table-striped {
        border: #DEE2E6 solid 1px;
    }

        .css-table.css-table-striped th, .css-table.css-table-striped .css-table-th {
            border: #DEE2E6 solid 1px;
        }

        .css-table.css-table-striped td, .css-table.css-table-striped .css-table-td {
            border: #DEE2E6 solid 1px;
        }

    .css-table.css-table-grid {
        border: #CCCCCC solid 1px;
    }

        .css-table.css-table-grid tbody tr:nth-child(2n+1), .css-table.css-table-grid .css-table-tbody .css-table-tr:nth-child(2n+1) {
            background-color: #F2F2F2;
            font-size: 10px;
            padding: 2px 3px;
        }

        .css-table.css-table-grid th, .css-table.css-table-grid .css-table-th {
            border: #CCCCCC solid 1px;
            font-size: 10px;
            padding: 2px 3px;
        }

        .css-table.css-table-grid td, .css-table.css-table-grid .css-table-td {
            border: #CCCCCC solid 1px;
            font-size: 10px;
            padding: 2px 3px;
        }


    .css-table.css-table-hover tbody tr:hover, .css-table.css-table-hover .css-table-tbody .css-table-tr:hover {
        background-color: pink !important;
    }
    /* Tools */
    .css-table .tools {
        text-align: right !important;
        vertical-align: top;
        white-space: nowrap;
        padding: 2px 4px !important;
        width: 10px;
    }

        .css-table .tools i {
            display: inline-block;
            padding: 4px;
            color: #FFFFFF;
            vertical-align: middle;
            cursor: pointer;
            background-color: #CCC;
            border-radius: 4px;
        }

        .css-table .tools .letter {
            padding: 3px 8px;
        }

        .css-table .tools .add, .css-table .tools .blue {
            color: #2f5377;
            background-color: #9eaebf;
        }

            .css-table .tools .add:hover, .css-table .tools .blue:hover {
                color: #FFFFFF;
                background-color: #2f5377;
            }

        .css-table .tools .edt, .css-table .tools .green {
            color: #778c46;
            background-color: #bfc9a8;
        }

            .css-table .tools .edt:hover, .css-table .tools .green:hover {
                color: #FFFFFF;
                background-color: #778c46;
            }

        .css-table .tools .dlt, .css-table .tools .red {
            color: #a4232e;
            background-color: #ecd0d0;
        }

            .css-table .tools .dlt:hover, .css-table .tools .red:hover {
                color: #FFFFFF;
                background-color: #a4232e;
            }

        .css-table .tools .yellow {
            color: #FFF;
            text-align: center;
            cursor: pointer;
            background-color: #ebd257;
            margin: -5px 0;
        }

            .css-table .tools .yellow:hover {
                color: #FFF;
                background-color: orange;
                cursor: pointer;
            }

    .css-table tbody td[contains="0"], .css-table .css-table-tbody .css-table-td[contains="0"] {
        color: red;
    }

    .css-table tbody td[contains="1"], .css-table .css-table-tbody .css-table-td[contains="1"] {
        color: green;
    }

    .css-table .css-table-thead {
        display: table-header-group;
    }

    .css-table .css-table-tbody {
        display: table-row-group;
    }

    .css-table .css-table-tr {
        display: table-row;
    }

    .css-table .css-table-th {
        display: table-cell;
    }

    .css-table .css-table-td {
        display: table-cell;
    }

/* Forms & Form Elements*/
.css-form {
}

    .css-form a {
        color: orange;
        text-decoration: none;
        display: inline-block;
        padding: 5px 20px;
    }

fieldset {
    border: none;
}

.css-form label {
    display: inline-block;
    min-height: 15px;
    font-size: 14px;
    font-weight: 600;
}

.css-form input[type="text"], .css-form input[type="password"], .css-form input[type="file"], .css-form select, .css-form textarea {
    width: 98%;
    padding: 10px 1%;
    font-size: 16px;
    color: #333;
    border: #CCC solid 1px;
    border-radius: 4px;
}

.css-form select {
    width: 100%;
}

input[readonly], input[disabled], select[readonly], select[disabled], textarea[readonly], textarea[disabled] {
    background-color: #F2F2F2;
}

input[type='text']:hover, input[type='password']:hover, input[type='file']:hover, select:hover, textarea:hover, input[type='text']:focus, input[type='password']:focus, input[type='file']:focus, select:focus, textarea:focus {
    border-color: #C0C081;
    background-color: #FFFFE6;
}

input[type='checkbox'], input[type='radio'] {
    margin: 0 2px 0 0px;
    vertical-align: middle;
    cursor: pointer;
}

input[type='submit'], input[type='button'], input[type='reset'] {
    margin: 5px 0px 5px 5px;
    padding: 10px 30px;
    background-color: #F2F2F2;
    border: #CCC solid 1px;
    border-radius: 4px;
}

    input[type='submit']:hover, input[type='button']:hover, input[type='reset']:hover {
        color: #09F;
        cursor: pointer;
        background: none;
        background-color: #F2F2F2;
        border: #CCC solid 1px;
    }

textarea {
    height: 150px;
}

.css-form .css-table {
    border-collapse: separate;
    border-spacing: 4px;
    margin-bottom: -4px;
}

.css-form .css-table-tbody .css-table-th {
    background-color: #F2F2F2;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.css-form .css-table-tbody .css-table-td {
    padding: 0;
    font-size: 0;
}

.css-form .css-from-submit {
    margin-bottom: 40px;
    text-align: right;
}

@media only screen and (min-width: 991px) {
    .css-form-sgl .css-table-th {
        width: 20%;
    }

    .css-form-sgl .css-table-td {
        width: 80%;
    }

    .css-form-dbl .css-table-th {
        width: 20%;
    }

    .css-form-dbl .css-table-td {
        width: 30%;
    }
}

.clickable {
    cursor: pointer;
    background: url(/images/ptn/ptn-grey-lght.png);
    width:10px;
    white-space: nowrap;
}

    .clickable:hover, .clickable.slt {
        background: url(/images/ptn/ptn-blue-grey.png);
    }

thead .sort {
    white-space: nowrap;
}

    thead .sort img {
        vertical-align: text-bottom;
        margin-right: 3px;
        opacity: 0;
    }

    thead .sort.asc img, thead .sort.desc img {
        opacity: 1;
    }

    thead .sort.asc img {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }

    thead .sort.desc img {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
    }

/* Checkbox Wrap */
.chk_bx_wrp {
    border: #CCC solid 1px;
    border-radius: 4px;
    text-align: left !important;
}
.chk_bx_wrp * {
    vertical-align: middle;
}

.chk_bx_wrp > div {
    display: inline-block;
    width: 45%;
    padding: 5px;
}

.chk_bx_wrp input {
    margin-right: 10px;
}

.width-100 {
    width: 100%;
}

.width-50 {
    width: 50%;
}

.width-25 {
    width: 25%;
}

.width-20 {
    width: 20%;
}



/* Scroll */
#Wrap, #JustWrap {
    width: calc(100vw - 58px);
    height: calc(100vh - 310px);
    overflow-x: auto;
    overflow-y: scroll;
}

/* Freeze Headers */
    #Wrap table {
        text-align: left;
        position: relative;
        border-collapse: collapse;
        width: 100%;
        background-color: white;
    }

    #Wrap thead {
        background: #F2F2F2 !important;
        position: sticky;
        top: 0; /* Don't forget this, required for the stickiness */
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    .ar-num{
        font-weight: bold;
        text-align: center !important;
        background: url(/Images/ptn/ptn-grey.png);
        cursor: pointer;
        white-space: nowrap;
        width: 100px;
    }