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

a, p, span, input[type=text], input[type=password], textarea, button, input[type=submit], select,
h1, h2, h3, td, th, li, label, b, td, i, input[type=file], body {
    font-family: 'Roboto', sans-serif;
    font-weight:400;
}

a, p, span, input[type=text], input[type=password], textarea, button, input[type=submit], select,
td, th, li, label, b, td, input[type=file], body {
    font-size:13px;
}

html, body, form {
    width:100%;
    height:100%;
}

body {
    background-color: #fff;
    scroll-behavior: smooth;
}

.clsTxtBox {
    border: 1px solid #b5b5b5;
    padding: 7px 10px;
    border-radius: 3px;
    outline: none;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    transition: ease-in 0.2s;
}

    .clsTxtBox:focus {
        border: 1px solid #000;
        background-color: #f2f8ff;
    }

    .clsTxtBox:disabled {
        background-color: #eee;
    }

    input[type=text].aspNetDisabled, input[type=password].aspNetDisabled, select.aspNetDisabled {
        background-color:#eee;
    }

.clsBtn {
    display:inline-block;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    text-align: center;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition:0.2s ease-out;
    border-radius:4px;
    background-color: #512282;
    color: #fff;
}

.clsLoading {
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background-image:url('images/admin/loading.gif');
    background-repeat:no-repeat;
    background-position:center center;
    background-color: rgba(255, 255, 255, 0.8);
    background-size: 55px;
    z-index: 9;
}

.clsTemplate {
    display:none;
}

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

.clsLogin {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:350px;
    padding:20px;
    border-radius: 4px;
}

    .clsLogin h2 {
        font-size: 16px;
        text-align: center;
        color: #000;
        padding: 20px 0 30px 0;
        font-weight: 500;
    }

    .clsLogin input {
        width:100%;
    }

    .clsLogin input[type=text], .clsLogin input[type=password]{
        margin-bottom:10px;
        background-repeat: no-repeat;
        background-size: 15px;
        background-position: 10px center;
    }

    .clsLogin input[type=submit] {
        font-weight: 500;
    }

    .clsLogin span {
        display:block;
        text-align:center;
        color: DarkRed;
        margin-top: 10px;
    }

/*----------------------------Admin Data----------------------------*/

.clsLogout {
    margin-left:10px;
    display:inline-block;
    width:15px;
    height:15px;
    background-image:url(images/logout.png);
    background-repeat:no-repeat;
    background-size:contain;
}

.clsFilter {
    padding: 10px;
    background-color: #dbdbdb;
    background-repeat: no-repeat;
    background-image: url(images/search.png);
    background-size: 30px;
    background-position: 10px;
    padding-left: 50px;
    height:58px;
}

    .clsFilter > span {
        margin-right:10px;
    }

.clsGrid {
    background-color: white;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    bottom: 0;
}

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

    .clsGrid th {
        padding: 10px;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        color: #fff;
        background-color: #512282;
    }

        .clsGrid th:last-child {
            border-right:none;
        }

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

    .clsGrid td {
        padding: 10px;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
    }

        .clsGrid td:last-child {
            border-right:none;
        }

        .clsGrid tr:last-child td {
            border-bottom:none;
        }

        .clsGrdPager:hover {
                background-color:white !important;
            }

                .clsGrdPager tr:hover {
                    background-color:white !important;
                }

            .clsGrdPager table td {
                border: none;
                padding: 2px;
            }

                .clsGrdPager table td span, .clsGrdPager table td a {
                    display: inline-block;
                    width: 20px;
                    height: 24px;
                    text-align: center;
                    padding: 2px;
                }

                .clsGrdPager table td span {
                    background-color: #4c9ae6;
                    border: 1px solid #3782cf;
                    color: white;
                }

                .clsGrdPager table td a {
                    border: 1px dashed lightgrey;
                    text-decoration:none;
                }

/*----------------------------Dashboard----------------------------*/

.clsDashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    width:70%;
    margin:0 auto;
    padding:50px;
}

    .clsDashboard .card {
        border: 3px solid #512282;
        padding: 20px;
    }

        .clsDashboard .card p {
            text-align: center;
            font-weight: 500;
            font-size: 15px;
        }

        .clsDashboard .card span {
            display: block;
            text-align: center;
            font-weight: 600;
            font-size: 25px;
            border-top: 1px solid #aaa;
            padding-top: 15px;
            margin-top: 10px;
            color: #512282;
        }