/*--------------------------------Global--------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

a, p, span, input[type=text], input[type=password], textarea, button, input[type=submit], select, 
td, th, li, label, b, td, input[type=file] {
    font-family: 'Ubuntu', sans-serif;
    font-size:15px;
    font-weight:400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
}

b {
    font-weight:500;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

body {
    background-color:#24313c;
}

/*--------------------------------UI--------------------------------*/

.clsGrid {

}

    .clsGrid, .clsGrid th, .clsGrid tr, .clsGrid tr td {
        border:none;
    }

    .clsGrid th {
        padding: 10px;
        color: #000;
        text-align: left;
        font-weight: bold;
        background-color: #e3e3e3;
    }

    .clsGrid tr td {
        padding: 10px 7px;
        vertical-align:top;
        font-size: 14px;
        border-bottom:1px solid #eee;
    }

    /*.clsGrid tr:nth-child(odd) td {
        background-color:#f5f5f5;
    }*/

    .clsGrid tr td a {
        text-decoration:none;
    }

    .clsLnkExpand {
        border: 1px solid #b8b8b8;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 1;
        display: inline-block;
    }

        .clsLnkExpand:hover {
            color: rgba(0,122,204,1);
            -webkit-transition: color .9s;
            transition: color .9s;
        }

    .clsDetail {
       
    }

        .clsDetail table {
            width:100%;
            border:none;
            margin-bottom: 10px;
            border: 1px solid #eaeaea;
        }

        .clsDetail table th {
            border-bottom: 1px solid #eaeaea;
        }

        .clsDetailRow {
            display:none;
        }

/*--------------------------------Login--------------------------------*/

.clsLoginBox {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

    .clsLoginBox h2 {
        color: #fff;
        margin-bottom: 20px;
        font-size: 22px;
        background-image: url(/images/link.png);
        background-repeat: no-repeat;
        background-position: 10px center;
        background-size: auto 100%;
        padding-left:45px;
    }

    .clsLoginBox span {
        text-align: center;
        display: block;
        margin-top: 10px;
        color: #dd3e3e;
    }

    .clsLogin {
        padding:15px;
        border: 1px solid #303f4c;
    }

        .clsLoginBox input[type=text], .clsLoginBox input[type=password] {
            display:block;
            background-color: transparent;
            color: #44caa5;
            outline: none;
            padding: 10px 0px;
            width: 265px;
            border: none;
            border-bottom: 1px dashed #3d4c59;
        }

        .clsLoginBox input[type=text]:focus, .clsLoginBox input[type=password]:focus {
            border-bottom: 1px solid #44caa5;
        }

        .clsLoginBox p {
            color:#9e9e9e;
        }

        .clsLoginBox input[type=submit] {
            display:block;
            margin-top: 15px;
            border: none;
            outline: none;
            font-size: 13px;
            font-weight: bold;
            color: #2B334F;
            border-radius: 5px;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            background-color: #44caa5;
            padding: 10px 15px;
            cursor: pointer;
            width: 100%;
        }
    
/*--------------------------------Data--------------------------------*/

header {
    padding: 30px;
    position:relative;
}

    header h2 {
        color:#fff;
        background-image: url(/images/link.png);
        background-repeat: no-repeat;
        background-position: 10px center;
        background-size: auto 100%;
        padding-left:45px;
    }

    header p {
        position:absolute;
        right:30px;
        top:50%;
        transform:translateY(-50%);
    }

        header p span {
            display:block;
            text-align:right;
            color:#fff;
        }

        header p a {
            display:block;
            text-align:right;
            color: #44caa5;
            margin-top:3px;
        }

.clsFilters {
    margin:0 30px 30px 30px;
    background-color:#fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow:hidden;
    padding:10px 15px;
}

    .clsFilters > span {
        margin-right:5px;
    }

    .clsFilters > span:not(:first-child) {
        margin-left:20px;
    }

    .clsFilters > input[type=text], .clsFilters > select {
        padding: 5px 7px;
        border: 1px solid #c9c9c9;
    }

    .clsFilters > input[type=submit] {
        border: none;
        outline: none;
        font-size: 13px;
        font-weight: bold;
        color: #2B334F;
        border-radius: 5px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        background-color: #44caa5;
        padding: 10px 15px;
        cursor: pointer;
    }

    .clsFilters > input[type=submit]:last-child {
        float:right;
    }

    .clsFilters > a {
        color: #44caa5;
        margin-left:5px;
    }

.clsData {
    margin:0 30px 30px 30px;
    background-color:#fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow:hidden;
}