body {
    color: #50B7D1;
    background: #313030;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.22444;
    vertical-align: bottom;
}

a {
    color: #50B7D1;
    text-decoration: none;
}

    a:hover {
        color: #50B7D1;
        text-decoration: underline;
    }


.pagetitle {
    color: #50B7D1;
    font-size: 18px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.gridview > tr > td,
.gridview > tr > th
{
  padding: 2px 2px 2px 2px;
}

.gridview > tbody > tr:nth-child(odd) {
    background-color: #E7E7E7;
    color: #313030;
    
}
.gridview > tbody > tr:nth-child(even) {
    background-color: #313030;
    color: #50B7D1;
}

.gridview > tbody > tr:hover > td 
{
    background-color: #5AD7EB;
    color: White;
    border-color: #ADADAD;
}
.gridview > tbody > tr:nth-child(odd) > th {
    color: #50B7D1;
    background-color: #E7E7E7;
    border-color: #ADADAD;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 
{
    padding: 2px;
    
}

.alert
{
   display: block;       
}

.lb
{
   padding: 2px;
   float: left;
   display: inline-block;
   text-align: left;
}
.lb-sm
{
    width: 40px;
}
.lb-md
{
    width: 80px;
}
.lb-lg
{
    width: 120px;
}
.lb-xl
{
    width: 240px;
}

.center {
    text-align: center;
}
.left {
    text-align: left;
    float: left;
}
.right {
    text-align: right;
    float: right;
}

.error
{
    display: inline-block;  
}

.container-detail
{
    width: 325px;
}
@media (min-width: 768px) { .container-detail {width: 350px;} }
@media (min-width: 992px) { .container-detail {width: 485px;} }
@media (min-width: 1200px) { .container-detail {width: 535px;} }



.row
{
  margin-right: 0px;
  margin-left: 0px;   
}



.form-control {
    padding: 2px;
    float: left; 
    display: inline-block;
}
.form-pin {
    line-height: 1.42857;
    font-size: 14px;
    height: 24px;
    width: 24px;
    text-align: center;
}


.form-user {
    line-height: 1.42857;
    font-size: 14px;
    height: 24px;
    width: 220px;
    text-align: left;
}

@media (max-width: 768px) {
    .form-user {
        line-height: 1.42857;
        font-size: 14px;
        height: 24px;
        width: 180px;
        text-align: left;
    }
}
    .form-code {
        line-height: 1.22444;
        font-size: 12px;
        height: 20px;
        width: 50px;
        text-align: right;
    }

    .form-date {
        line-height: 1.22444;
        font-size: 12px;
        height: 20px;
        width: 80px;
        text-align: right;
    }

    .form-text {
        line-height: 1.22444;
        font-size: 12px;
        text-align: left;
    }

    .form-text-sm {
        line-height: 1.22444;
        font-size: 12px;
        height: 20px;
        width: 50px;
        text-align: left;
    }

    .form-text-md {
        line-height: 1.22444;
        font-size: 12px;
        height: 20px;
        width: 100px;
        text-align: left;
    }

    .form-text-lg {
        line-height: 1.22444;
        font-size: 12px;
        height: 20px;
        width: 160px;
        text-align: left;
    }

    .form-text-xl {
        line-height: 1.22444;
        font-size: 12px;
        height: 20px;
        width: 240px;
        text-align: left;
    }

    .form-sddl-big {
        width: 80%;
        text-align: left;
    }

    .panel-heading-sm {
        background-color: #F5F5F5;
        border-color: #DDDDDD;
        padding: 2px;
    }


.panel-detail {
    border-color: #50B7D1;
    border-style: solid;
    border-radius: 8px;
}

    .panel-detail > .heading {
        color: #50B7D1;
        background-color: #313030;
        padding: 15px;
    }

    .panel-detail > .body {
        background-color: #313030;
        padding: 15px;
    }



.btn-app {
    color: #50B7D1;
    background-color: #222121;
    border-color: #50B7D1;
}

    .btn-app:hover,
    .btn-app:focus,
    .btn-app:active,
    .btn-app.active,
    .open .dropdown-toggle.btn-app {
        color: #50B7D1;
        background-color: #222121;
        border-color: #50B7D1;
    }

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

    .btn-app.disabled,
    .btn-app[disabled],
    fieldset[disabled] .btn-app,
    .btn-app.disabled:hover,
    .btn-app[disabled]:hover,
    fieldset[disabled] .btn-app:hover,
    .btn-app.disabled:focus,
    .btn-app[disabled]:focus,
    fieldset[disabled] .btn-app:focus,
    .btn-app.disabled:active,
    .btn-app[disabled]:active,
    fieldset[disabled] .btn-app:active,
    .btn-app.disabled.active,
    .btn-app[disabled].active,
    fieldset[disabled] .btn-app.active {
        background-color: #222121;
    }

    .btn-file {
        position: relative;
        overflow: hidden;
    }

        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 999px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }

    .middle {
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    .hidden {
        display: none;
    }

.topbar {
    position: fixed; 
    top: 0; 
    width: 100%;
    z-index: 10;
}
.bottombar {
    position: fixed; 
    bottom: 0; 
    width: 100%;
    z-index: 10;
}
.main {
    margin-top: 30px;
    margin-bottom: 30px;
}