/* Sticky footer styles
-------------------------------------------------- */
html {
    height: 100%;
    background-color: #f9f9f9;
    margin: 0px;
}

body {
    margin: 0px;
    font-size: 13px;
    height: 100%;
    background-color: rgb(232 241 245);
}
a{
    text-decoration:none;
    color:rgb(98 157 209);
}
div,input,select,textarea,span,a,button,td,th{
    box-sizing:border-box;
}
    input[type=text], input[type=password], select, textarea {
        padding: 4px 4px 4px 6px;
        border-radius: 4px;
        border: 1px solid #CCC;
        width: 120px;
        margin: 4px;
        height: 28px;
        font-size: 14px;
    }
        input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {
            border: 1px solid rgb(60 177 234);
            outline: none;
            box-shadow: 0px 0px 2px 2px rgb(208 235 249);
        }
        .errattr,input[name=errattr], textarea[name=errattr], select[name=errattr], td[name=errattr], tr[name=errattr], div[name=errattr] {
            border: 1px solid rgb(234 60 100);
        }
            input[name=errattr]:focus, textarea[name=errattr]:focus, select[name=errattr]:focus {
                border: 1px solid rgb(234 60 100);
                outline: none;
                box-shadow: 0px 0px 2px 2px rgb(249 208 235);
            }
        option{
            padding:4px;
        }
input[type=button] {
    outline: none;
}
select {
    margin-left: 2px;
}
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

#divForm {
    display: none;
    height: 100%;
    width: 100%;
    padding:2px;
}
.whitePanel {
    background-color: white;
    margin: 8px;
    border-radius: 4px;
    padding: 8px;
    border:1px solid rgb(213 223 227);
    min-height:300px;
}
.whitePanel div[name=title]{
    font-size:16px;
    font-weight:bold;
    padding:10px;
}
.table {
    width: 100%;
    border-collapse: collapse;
}
    .table th {
        background-repeat: repeat-x;
        height: 28px;
        font: bold 13px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #000000;
        letter-spacing: 2px;
        padding: 4px;
        background: rgb(250 250 250) no-repeat;
        text-align: center;
        border: 1px solid rgb(221 221 221);
        border-bottom: 2px solid rgb(221 221 221);
    }
    .table th[name=header] {
        background-repeat: repeat-x;
        height: 28px;
        font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        letter-spacing: 2px;
        padding: 4px;
        background: rgb(98 157 209);
        color: white;
        border-radius:8px 8px 0px 0px;
        border:2px;
    }
    .table td {
        border: 1px solid rgb(221 221 221);
        padding: 4px;
        text-align: center;
    }
    .table tr.alter {
        background-color: #f5fafe;
    }
    .table tr {
        background-color: white;
    }
    .table tr:hover {
        background-color: rgba(0,0,0,0.25);
    }
.StatusSpanRed {
    padding: 4px;
    background-color: rgb(254 75 54);
    color: #dae7f6;
    border-radius: 4px;
}
.StatusSpanGreen {
    padding: 4px;
    background-color: rgb(0 204 99);
    color: #dae7f6;
    border-radius: 4px;
}
.StatusSpanBlue {
    padding: 4px;
    background-color: rgb(17 13 130);
    color: #dae7f6;
    border-radius: 4px;
}
.StatusSpanYellow {
    padding: 4px;
    background-color: rgb(255 151 0);
    color: #dae7f6;
    border-radius: 4px;
}
.formTable {
    width: 100%;
    border: 1px solid #cad9ea;
    color: #666;
    border-collapse: collapse;
}

    .formTable th {
        background-repeat: repeat-x;
        height: 28px;
        color: #4f6b72;
        border-right: 1px solid rgb(148 147 201);
        border-bottom: 1px solid rgb(148 147 201);
        border-top: 1px solid rgb(148 147 201);
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 4px;
        background: rgb(248 248 248) no-repeat;
        color: black;
    }

    .formTable td, .formTable th {
        border: 1px solid rgb(148 147 201);
        padding: 4px;
    }
.button, .button:visited {
    /*background: #222 url(overlay.png) repeat-x;*/
    background: #222;
    display: inline-block;
    padding: 5px 10px 6px 10px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border:0px;
    position: relative;
    cursor: pointer;
    margin:3px;
}

    .button:hover {
        background-color: #999;
        color: #fff;
    }

    .button:active {
        top: 1px;
        color: #fff;
    }

.small.button, .small.button:visited {
    font-size: 12px;
    padding: 8px 14px 8px 14px;
}

.button, .button:visited, .medium.button, .medium.button:visited {
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.large.button, .large.button:visited {
    font-size: 14px;
    padding: 8px 14px 9px;
}

.super.button, .super.button:visited {
    font-size: 34px;
    padding: 8px 14px 9px;
}

.pink.button, .magenta.button:visited {
    background-color: #e22092;
}

    .pink.button:hover {
        background-color: #c81e82;
    }

.green.button, .green.button:visited {
    background-color: #91bd09;
}

    .green.button:hover {
        background-color: #749a02;
    }

.red.button, .red.button:visited {
    background-color: #2981e4;
}

    .red.button:hover {
        background-color: #2575cf;
    }

.orange.button, .orange.button:visited {
    background-color: #ff5c00;
}

    .orange.button:hover {
        background-color: #d45500;
    }

.blue.button, .blue.button:visited {
    background-color: #2981e4;
}

    .blue.button:hover {
        background-color: #2575cf;
    }

.yellow.button, .yellow.button:visited {
    background-color: #ffb515;
}

    .yellow.button:hover {
        background-color: #fc9200;
    }
    .inTableButton{
        border:0px;
        cursor:pointer;
        display:inline-block;
        color:cadetblue;
        padding:2px;
    }
        .inTableButton:hover {
            color:aquamarine;
        }
.title {
    font-weight: bold;
    color: #04408C;
    border:1px solid #99bce8;
    padding: 4px;
    background-image: none;
    background-color: #cbddf3;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#dae7f6),color-stop(45%,#cddef3),color-stop(46%,#abc7ec),color-stop(50%,#abc7ec),color-stop(51%,#b8cfee),color-stop(100%,#cbddf3));
    background-image: -webkit-linear-gradient(top,#dae7f6,#cddef3 45%,#abc7ec 46%,#abc7ec 50%,#b8cfee 51%,#cbddf3);
    background-image: -moz-linear-gradient(top,#dae7f6,#cddef3 45%,#abc7ec 46%,#abc7ec 50%,#b8cfee 51%,#cbddf3);
    background-image: -o-linear-gradient(top,#dae7f6,#cddef3 45%,#abc7ec 46%,#abc7ec 50%,#b8cfee 51%,#cbddf3);
    background-image: -ms-linear-gradient(top,#dae7f6,#cddef3 45%,#abc7ec 46%,#abc7ec 50%,#b8cfee 51%,#cbddf3);
    background-image: linear-gradient(top,#dae7f6,#cddef3 45%,#abc7ec 46%,#abc7ec 50%,#b8cfee 51%,#cbddf3);
    -webkit-box-shadow: #f4f8fd 0 1px 0 0 inset;
    -moz-box-shadow: #f4f8fd 0 1px 0 0 inset;
    box-shadow: #f4f8fd 0 1px 0 0 inset;
}
.title1 {
    border-bottom: 1px solid red;
    width: 100%;
    color: brown;
    font-weight: bold;
}
.area {
    background-color: #74a9ad;
    overflow: hidden;
    margin: 0px auto;
    height: auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 2px #000000;
    -moz-box-shadow: 0px 0px 2px #000000;
    box-shadow: 0px 0px 2px #000000;
    background: -webkit-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: -moz-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: -ms-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: -o-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: radial-gradient(center, circle, #f0f0f0, #a1d7db);
}
.window {
    display: none;
    position: fixed;
    background-color: #74a9ad;
    overflow: hidden;
    margin: 0px auto;
    height:auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 2px #000000;
    -moz-box-shadow: 0px 0px 2px #000000;
    box-shadow: 0px 0px 2px #000000;
    background: -webkit-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: -moz-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: -ms-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: -o-radial-gradient(center, circle, #f0f0f0, #a1d7db);
    background: radial-gradient(center, circle, #f0f0f0, #a1d7db);
    z-index:999999;
}

    .window [name=title], .area [name=title] {
        text-align: left;
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        color: #fff;
        height: 28px;
        line-height: 30px;
    }

    .window [name=content], .area [name=content] {
        margin: 4px;
        padding: 4px;
        border: 1px solid rgba(0,0,0,0.25);
        overflow-y: auto;
        overflow-x:hidden;
    }

    .window [name=window] {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        margin: 0 auto;
        margin-top: 100px;
        border: 1px solid #F00;
        width: 80%;
        height: 400px;
        z-index: 999;
        background-color: white;
    }

    .window [contenteditable=true] {
        margin: 0 auto;
        margin-top: 10px;
        border: 1px solid #808080;
        width: 100%;
        height: 400px;
        background-color: white;
    }
    .window [name=footer]{
        text-align:right;
        padding:2px;
    }
.InputCell {
    margin: 8px;
    background-color:white;
    padding:8px;
    border-radius:4px;
    border:1px solid rgb(221 231 247);
    clear:both;
}
    .InputCell::after{
        content:"";
        display: block;
        clear: both;
    }
    .InputCell div[name=cell] {
        display: inline-flex;
        margin: 4px;
        width: auto;
        align-items: center;
    }
        .InputCell div[name=cell] input {
            flex-grow: 1;
        }
    .InputCell div[name=BtnCell] {
        display: inline-block;
        background-color: rgb(127 143 169);
        border: 1px solid rgb(127 143 169);
        margin: 2px;
        padding: 4px;
        color: white;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        width: 120px;
    }
    .InputCell div[name=BtnCell]:hover {
        background-color:cadetblue;
    }
    .InputCell div[name=BtnCell]:active {
        background-color: white;
    }
    .InputCell label {
        display: inline-block;
        text-align: right;
        font-weight: bold;
        width: 80px;
    }
    .InputCell input[type=text] {
        margin-left:6px;
        width: 140px;
        height: 28px;
        font-size:14px;
    }
    .InputCell select {
        width: 140px;
        height: 28px;
        font-size: 14px;
    }
.tabs {
    background-color: white;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    padding: 6px;
}

    .tabs div[name=YC], .tabs div[name=NC] {
        display: inline-block;
        border-radius: 4px;
        margin: 4px;
        padding: 10px 26px;
        color: white;
        cursor: pointer;
    }

    .tabs div[name=YC] {
        background-color: #ef355d;
    }

    .tabs div[name=NC] {
        background-color: #4a90e2;
    }