@charset "utf-8";
/* CSS Document */

html {
    height: 100%;
}

body {
    background: #edece6 url(../images/bg-body.jpg) 50% 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 100%;
}

.ans {
    margin-top: 10px;
}
/*.searchbtn {
        background: green;
    padding: 6px;
    color: white;
    border-radius: 5px;
}*/
.searchbtn {
    background: none;
    border: 0;
    color: white;
}
/*.tooltip {
	display: none;
	min-width: 100px;
	max-width: 250px;
	position: absolute;
	border: 2px solid #000;
	background-color: #C39919;
	border-radius: 5px;
	text-align: center;
	padding: 10px;
	color: #fff;
	font-size: 10px;
}*/
.modalBackground {
    background-color: Black;
    filter: alpha(opacity=90);
    opacity: 0.8;
}

.modalPopup {
    background-color: #FFFFFF;
    border: 1px solid black;
    border-style: solid;
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    width: 500px;
    height: 140px;
}

.clear {
    clear: both;
}

h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
}

a {
    color: #000;
}

    a:hover {
        text-decoration: none;
    }

.wrapper {
    min-height: 100%;
    position: relative;
    width: 100%;
}



.graphstyle {
    float: left;
    width: 45%;
    margin-right: 5%;
}

.container {
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

header {
    position: relative;
}

    header .heading {
        color: #FFF;
        text-align: center;
        font-size: 18px;
        padding: 13px 0;
    }

        header .heading span {
            font-size: 28px;
        }

    header .user {
        color: #000;
        font-family: 'Lato', sans-serif;
        font-size: 12px;
        padding: 10px;
        text-align: center;
        position: absolute;
        right: 0;
        z-index: 99;
        top: 0;
    }

        header .user .pic {
            float: left;
            border: 1px solid #000;
            height: 70px;
            width: 70px;
            margin-right: 10px;
        }

        header .user .name {
            font-size: 14px;
            float: left;
            text-align: left;
            margin-top: 20px;
            margin-bottom: 5px;
        }

.header-holder {
    border-bottom: 2px solid #000;
}

.logo {
    text-align: left;
    width: 180px;
    height: 180px;
    position: absolute;
    left: 9px;
    top: 10px;
    z-index: 100;
}

.nav-holder {
    border-color: #000 transparent #000;
    border-width: 1px 0;
    border-style: solid;
    background: #0c60ac;
    -webkit-box-shadow: 0 12px 43px -17px #000;
    -moz-box-shadow: 0 12px 43px -17px #000;
    box-shadow: 0 12px 43px -17px #000;
}

    .nav-holder .nav {
        /*margin-left:200px;*/
        padding: 20px 0;
        text-align: center;
        font-weight: bold;
    }

.content {
    margin-top: 70px;
    padding-bottom: 100px;
}

.textbox {
    width: 350px;
    height: 100px;
}
/*--------- Activity centered -----------*/
.row-centered {
    text-align: center;
}

.col-centered {
    display: inline-block;
    float: none;
}
/*--------- Activity -----------*/
.activity {
    margin: 0 auto;
}

    .activity h4 {
        font-family: 'Lato', sans-serif;
        font-size: 20px;
        font-weight: 800;
    }

.active-col {
    width: 100px;
    margin: 5px 15px;
    padding: 10px 15px;
    text-align: center;
    cursor:pointer;
}

    .active-col img {
        width: 50px;
    }

    .active-col input[type="image"] {
        width: 50px;
        border: none;
        outline: none;
    }

    .active-col h5 {
        font-family: 'Lato', sans-serif;
        font-weight: normal;
        text-align: center;
        line-height: 16px;
    }

.active-button {
    width: 100px;
    margin: 5px 15px;
    padding: 10px 15px;
    text-align: center;
    background: #e2e2e2;
    border-radius: 10px;
    box-shadow: 2px 2px 1px #e3e3e3;
    display: inline-block;
    float: none;
}
    .active-button img {
        width: 50px;
    }

    .active-button input[type="image"] {
        width: 50px;
        outline: none;
    }
    .active-button h5 {
        font-family: 'Lato', sans-serif;
        font-weight: bold;
        text-align: center;
        line-height: 16px
    }

.counselor-data {
    margin: 0 auto
}

.select-filter {
    margin: 0 auto
}

    .select-filter table td {
        border: 1px solid #d2d2d2;
        padding: 5px;
    }

    .select-filter table th {
        padding: 5px;
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        font-weight: bold;
        background: #32468D;
        color:white;
        border: 1px solid #d2d2d2;
    }
    .select-filter .ajax__calendar_container td {
    border:none !important;
    padding:0 !important;
    }

.select-filter .selet-type {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

        .select-filter .selet-type option {
            border: 1px solid #000
        }

    .select-filter .selet-date {
        width: 50%;
        margin: 0;
    }

    .select-filter td textarea {
        width: 90%;
        box-sizing: border-box;
    }

.active-col:hover, .btn:active {
    background: #f2f2f2;
    border-radius: 10px;
    box-shadow: 2px 2px 1px #e3e3e3;
}

.right-side {
    margin: 10px 0;
    float: right;
}

.feed-save-btn {
    background: #EF971B;
    background-image: -webkit-linear-gradient(top, #EF971B, #D28500);
    background-image: -moz-linear-gradient(top, #EF971B, #D28500);
    background-image: -ms-linear-gradient(top, #EF971B, #D28500);
    background-image: -o-linear-gradient(top, #EF971B, #D28500);
    background-image: linear-gradient(to bottom, #EF971B, #D28500);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #B77600 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
}

    .feed-save-btn:hover {
        background: #D28500;
        background-image: -webkit-linear-gradient(top, #D28500, #EF971B);
        background-image: -moz-linear-gradient(top, #D28500, #EF971B);
        background-image: -ms-linear-gradient(top, #D28500, #EF971B);
        background-image: -o-linear-gradient(top, #D28500, #EF971B);
        background-image: linear-gradient(to bottom, #D28500, #EF971B);
        text-decoration: none;
    }
/*--------------------*/
/*==================== Custom Chart Grid Header Style Start======================*/
.detailed th {
    background: #32468D !important;
    color: #FFF !important;
}

.complete th {
    background: #26B7D4 !important;
    color: #000 !important;
}

.completeEmployee th {
    background: #3D79AF !important;
    color: #fff !important;
}

    .completeEmployee th a {
        color: #fff !important;
    }

.incomplete th {
    background: #FB5557 !important;
}

.incompleteEmployee th {
    background: #FDC611 !important;
    color: #000 !important;
}

.observation {
    width: 100%;
    padding: 10px 30px;
    box-sizing: border-box;
}

/*==================== Custom Chart Grid Header Style End ======================*/
/*==================== Observation Page ======================*/
.ob-tabs {
    overflow: auto;
    margin: 0 auto;
    display: table;
    margin-top: 30px;
    margin-bottom: 30px;
}

    .ob-tabs .ob-btn {
        float: left;
        width: 220px;
        height: 140px;
        background: #F1F1F1;
        border: 1px solid #B5B5B5;
        margin-right: 50px;
        border-radius: 5px;
        box-shadow: 5px 5px 0 #C7C7C7;
        text-align: center;
        font-weight: bold;
        color: #000;
    }

        .ob-tabs .ob-btn:active {
            box-shadow: 0px 0px 0 #C7C7C7;
        }

        .ob-tabs .ob-btn img {
            display: table;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 10px;
        }

.ob-progress {
    background: #F1F1F1;
    border-radius: 5px;
    border: 1px solid #B5B5B5;
    padding: 10px;
}

    .ob-progress h3 {
        text-align: center;
        font-size: 18px;
        color: #000;
    }

    .ob-progress .ob {
        background: #C39919;
        width: 50%;
        margin: 0 auto;
        padding: 0 2px;
        font-size: 12px;
        color: #FFF;
        border: 1px solid #FFF;
        box-shadow: 0px 0px 2px #CCCCCC;
    }

        .ob-progress .ob .ob-row {
            border-bottom: 1px solid #FFF;
            padding: 5px;
            overflow: auto;
        }

            .ob-progress .ob .ob-row .ob-text {
                float: left;
            }

            .ob-progress .ob .ob-row .ob-value {
                float: right;
            }

            .ob-progress .ob .ob-row:last-child {
                border: 0;
            }

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f7f7f7;
    background-repeat: repeat-x;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
}

    .progress .bar {
        float: left;
        width: 0;
        height: 100%;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: #0e90d2;
        background-repeat: repeat-x;
        -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: width 0.6s ease;
        -moz-transition: width 0.6s ease;
        -o-transition: width 0.6s ease;
        transition: width 0.6s ease;
        background-image: linear-gradient(to bottom, #149bdf, #0480be);
    }

        .progress .bar + .bar {
            -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
        }

.progress-striped .bar {
    background-color: #149bdf;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress.active .bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -ms-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.progress-danger .bar,
.progress .bar-danger {
    background-color: #dd514c;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
}

.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
    background-color: #ee5f5b;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-success .bar,
.progress .bar-success {
    background-color: #5eb95e;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, #62c462, #57a957);
}

.progress-success.progress-striped .bar,
.progress-striped .bar-success {
    background-color: #62c462;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-info .bar,
.progress .bar-info {
    background-color: #4bb1cf;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
}

.progress-info.progress-striped .bar,
.progress-striped .bar-info {
    background-color: #5bc0de;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-warning .bar,
.progress .bar-warning {
    background-color: #faa732;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
}

.progress-warning.progress-striped .bar,
.progress-striped .bar-warning {
    background-color: #fbb450;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

progress-bar-stripe s {
    from

{
    background-position: 40px 0
}

to {
    background-position: 0 0
}

}

@-o-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1)
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease
}

.progress-bar-striped, .progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px
}

.progress-bar.active, .progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite
}

.progress-bar-success {
    background-color: #5cb85c
}

.progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
}

.progress-bar-info {
    background-color: grey
}

.progress-striped .progress-bar-info {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
}

.progress-bar-warning {
    background-color: #f0ad4e
}

.progress-striped .progress-bar-warning {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
}

.progress-bar-danger {
    background-color: #d9534f
}

.progress-striped .progress-bar-danger {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
}

.checkout-wrap {
    color: #444;
    font-family: 'PT Sans Caption', sans-serif;
    margin: 40px auto;
    max-width: 1200px;
    position: relative;
}

ul.checkout-bar li {
    color: #ccc;
    display: block;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 20px 14px 80px;
    position: relative;
}

    ul.checkout-bar li:before {
        -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        background: #ddd;
        border: 2px solid #FFF;
        border-radius: 50%;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        left: 20px;
        line-height: 37px;
        height: 35px;
        position: absolute;
        text-align: center;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
        top: 4px;
        width: 35px;
        z-index: 999;
    }

    ul.checkout-bar li.active {
        color: #8bc53f;
        font-weight: bold;
    }

        ul.checkout-bar li.active:before {
            background: #8bc53f;
            z-index: 99999;
        }

    ul.checkout-bar li.visited {
        background: #ECECEC;
        color: #57aed1;
        z-index: 99999;
    }

        ul.checkout-bar li.visited:before {
            background: #57aed1;
            z-index: 99999;
        }

    ul.checkout-bar li:nth-child(1):before {
        content: "1";
    }

    ul.checkout-bar li:nth-child(2):before {
        content: "2";
    }

    ul.checkout-bar li:nth-child(3):before {
        content: "3";
    }

    ul.checkout-bar li:nth-child(4):before {
        content: "4";
    }

ul.checkout-bar a {
    color: #57aed1;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.observer h4 {
    color: #000;
}

.observer .selector {
    float: left;
    width: 35%;
}

.dashboard {
    overflow: auto;
    margin-bottom: 15px;
}

    .dashboard h4 {
        color: #2d2d2d !important;
        margin: 25px 0 15px 0;
    }

    .dashboard select {
        margin: 0 15px 25px 15px;
    }


    .dashboard .mainchart {
        float: left;
        width: 60%;
        text-align: center;
        padding: 0 25px;
        box-sizing: border-box;
    }

    .dashboard .piechart {
        float: left;
        width: 40%;
        text-align: center;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .dashboard .activity-pie {
        float: left;
        width: 50%;
        text-align: center;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .dashboard .obs-score {
        float: left;
        width: 50%;
        text-align: center;
        padding: 0 15px;
        box-sizing: border-box;
    }

.grid {
    width: 100%;
    text-align: center;
    padding: 0 15px;
    box-sizing: border-box;
}

    .grid select {
        margin: 0 15px 25px 15px;
    }


.observer .selector select {
    width: 97%;
}

.observer .selector .ob-reset-btn {
    background: #cc0000;
    background-image: -webkit-linear-gradient(top, #cc0000, #830000);
    background-image: -moz-linear-gradient(top, #cc0000, #830000);
    background-image: -ms-linear-gradient(top, #cc0000, #830000);
    background-image: -o-linear-gradient(top, #cc0000, #830000);
    background-image: linear-gradient(to bottom, #cc0000, #830000);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #830000 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .observer .selector .ob-reset-btn:hover {
        background: #830000;
        background-image: -webkit-linear-gradient(top, #830000, #cc0000);
        background-image: -moz-linear-gradient(top, #830000, #cc0000);
        background-image: -ms-linear-gradient(top, #830000, #cc0000);
        background-image: -o-linear-gradient(top, #830000, #cc0000);
        background-image: linear-gradient(to bottom, #830000, #cc0000);
        text-decoration: none;
    }

.observer .time-date {
    float: left;
    width: 35%;
}

    .observer .time-date .row {
        margin-bottom: 5px;
        overflow: auto;
    }

        .observer .time-date .row label {
            float: left;
            width: 35%;
            line-height: 26px;
        }



.observer .time-dateself {
    float: left;
    width: 60%;
}

    .observer .time-dateself .row {
        margin-bottom: 0px;
        overflow: auto;
    }

        .observer .time-dateself .row label {
            float: left;
            width: 40%;
            line-height: 26px;
        }

        .observer .time-dateself .row img {
            vertical-align: middle;
        }

.observer .time-date .ob-save-btn {
    background: #EF971B;
    background-image: -webkit-linear-gradient(top, #EF971B, #D28500);
    background-image: -moz-linear-gradient(top, #EF971B, #D28500);
    background-image: -ms-linear-gradient(top, #EF971B, #D28500);
    background-image: -o-linear-gradient(top, #EF971B, #D28500);
    background-image: linear-gradient(to bottom, #EF971B, #D28500);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #B77600 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .observer .time-date .ob-save-btn:hover {
        background: #D28500;
        background-image: -webkit-linear-gradient(top, #D28500, #EF971B);
        background-image: -moz-linear-gradient(top, #D28500, #EF971B);
        background-image: -ms-linear-gradient(top, #D28500, #EF971B);
        background-image: -o-linear-gradient(top, #D28500, #EF971B);
        background-image: linear-gradient(to bottom, #D28500, #EF971B);
        text-decoration: none;
    }

.observer .time-date .ob-cont-btn {
    background: #76B9E0;
    background-image: -webkit-linear-gradient(top, #76B9E0, #2694D3);
    background-image: -moz-linear-gradient(top, #76B9E0, #2694D3);
    background-image: -ms-linear-gradient(top, #76B9E0, #2694D3);
    background-image: -o-linear-gradient(top, #76B9E0, #2694D3);
    background-image: linear-gradient(to bottom, #76B9E0, #2694D3);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #158ACC 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .observer .time-date .ob-cont-btn:hover {
        background: #2694D3;
        background-image: -webkit-linear-gradient(top, #2694D3, #76B9E0);
        background-image: -moz-linear-gradient(top, #2694D3, #76B9E0);
        background-image: -ms-linear-gradient(top, #2694D3, #76B9E0);
        background-image: -o-linear-gradient(top, #2694D3, #76B9E0);
        background-image: linear-gradient(to bottom, #2694D3, #76B9E0);
        text-decoration: none;
    }

.cpBody {
    border-bottom: 1px dashed #ccc;
    background: #D6E4FF;
    padding: 10px 0 0 10px;
    height: 0px;
    overflow: hidden;
}

.cpDocumentBody {
    background: #D6E4FF;
    padding: 10px 0 0 10px;
}
/* ====== ======== */

.view-observer h4 {
    color: #000;
}

.view-observer .selector {
    float: left;
    width: 25%;
}

    .view-observer .selector select {
        width: 100%;
    }

    .view-observer .selector .row label {
        float: left;
        width: 25%;
        line-height: 26px;
    }

.view-observer .time-date .ob-reset-btn {
    background: #cc0000;
    background-image: -webkit-linear-gradient(top, #cc0000, #830000);
    background-image: -moz-linear-gradient(top, #cc0000, #830000);
    background-image: -ms-linear-gradient(top, #cc0000, #830000);
    background-image: -o-linear-gradient(top, #cc0000, #830000);
    background-image: linear-gradient(to bottom, #cc0000, #830000);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #830000 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .view-observer .time-date .ob-reset-btn:hover {
        background: #830000;
        background-image: -webkit-linear-gradient(top, #830000, #cc0000);
        background-image: -moz-linear-gradient(top, #830000, #cc0000);
        background-image: -ms-linear-gradient(top, #830000, #cc0000);
        background-image: -o-linear-gradient(top, #830000, #cc0000);
        background-image: linear-gradient(to bottom, #830000, #cc0000);
        text-decoration: none;
    }

.view-observer .time-date {
    float: left;
    width: 25%;
}

    .view-observer .time-date .row {
        margin-left: 5px;
        margin-bottom: 0px;
        overflow: auto;
    }

        .view-observer .time-date .row label {
            float: left;
            width: 20%;
            line-height: 26px;
        }

        .view-observer .time-date .row img {
            vertical-align: middle;
        }

    .view-observer .time-date .ob-save-btn {
        background: #EF971B;
        background-image: -webkit-linear-gradient(top, #EF971B, #D28500);
        background-image: -moz-linear-gradient(top, #EF971B, #D28500);
        background-image: -ms-linear-gradient(top, #EF971B, #D28500);
        background-image: -o-linear-gradient(top, #EF971B, #D28500);
        background-image: linear-gradient(to bottom, #EF971B, #D28500);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 12px;
        padding: 5px 20px;
        border: solid #B77600 1px;
        text-decoration: none;
        display: table;
        cursor: pointer;
        float: left;
        margin-bottom: 10px;
        margin-right: 5px;
    }

        .view-observer .time-date .ob-save-btn:hover {
            background: #D28500;
            background-image: -webkit-linear-gradient(top, #D28500, #EF971B);
            background-image: -moz-linear-gradient(top, #D28500, #EF971B);
            background-image: -ms-linear-gradient(top, #D28500, #EF971B);
            background-image: -o-linear-gradient(top, #D28500, #EF971B);
            background-image: linear-gradient(to bottom, #D28500, #EF971B);
            text-decoration: none;
        }

    .view-observer .time-date .ob-cont-btn {
        background: #76B9E0;
        background-image: -webkit-linear-gradient(top, #76B9E0, #2694D3);
        background-image: -moz-linear-gradient(top, #76B9E0, #2694D3);
        background-image: -ms-linear-gradient(top, #76B9E0, #2694D3);
        background-image: -o-linear-gradient(top, #76B9E0, #2694D3);
        background-image: linear-gradient(to bottom, #76B9E0, #2694D3);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 12px;
        padding: 5px 20px;
        border: solid #158ACC 1px;
        text-decoration: none;
        display: table;
        cursor: pointer;
        float: left;
        margin-bottom: 10px;
        margin-right: 5px;
    }

        .view-observer .time-date .ob-cont-btn:hover {
            background: #2694D3;
            background-image: -webkit-linear-gradient(top, #2694D3, #76B9E0);
            background-image: -moz-linear-gradient(top, #2694D3, #76B9E0);
            background-image: -ms-linear-gradient(top, #2694D3, #76B9E0);
            background-image: -o-linear-gradient(top, #2694D3, #76B9E0);
            background-image: linear-gradient(to bottom, #2694D3, #76B9E0);
            text-decoration: none;
        }


/*==================== Download form Textboxes ======================*/
.textClass {
    border: solid 1px #000;
    font-style: italic;
    width: 90%;
    padding-left: 10px;
}
/*==================== Feedback Form ======================*/

.feedback-form {
    color: #666666;
}

    .feedback-form strong {
        color: #000;
    }

    .feedback-form h4 {
        margin-bottom: 20px;
    }

    .feedback-form .row {
        line-height: 25px;
        overflow: auto;
    }

    .feedback-form .lblAttach {
        width: 80px !important;
        margin-right: 10px;
        float: left;
    }

.attachbtn {
    background: #EF971B;
    background-image: -webkit-linear-gradient(top, #EF971B, #D28500);
    background-image: -moz-linear-gradient(top, #EF971B, #D28500);
    background-image: -ms-linear-gradient(top, #EF971B, #D28500);
    background-image: -o-linear-gradient(top, #EF971B, #D28500);
    background-image: linear-gradient(to bottom, #EF971B, #D28500);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #B77600 1px;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .attachbtn:hover {
        background: #D28500;
        background-image: -webkit-linear-gradient(top, #D28500, #EF971B);
        background-image: -moz-linear-gradient(top, #D28500, #EF971B);
        background-image: -ms-linear-gradient(top, #D28500, #EF971B);
        background-image: -o-linear-gradient(top, #D28500, #EF971B);
        background-image: linear-gradient(to bottom, #D28500, #EF971B);
        text-decoration: none;
    }

input[type="checkbox"], input[type="radio"] {
    margin: 0 5px 0 0 !important;
    vertical-align: middle !important;
}

.feedback-form .row .rdo tr td {
    /*float:left;*/
    margin: 0 15px;
    vertical-align: top;
}

.feedback-form .row .item {
    float: left;
    margin: 0 10px;
}

.feedback-form .reset-side {
    float: left;
    width: 35%;
}

    .feedback-form .reset-side .feed-reset-btn {
        background: #cc0000;
        background-image: -webkit-linear-gradient(top, #cc0000, #830000);
        background-image: -moz-linear-gradient(top, #cc0000, #830000);
        background-image: -ms-linear-gradient(top, #cc0000, #830000);
        background-image: -o-linear-gradient(top, #cc0000, #830000);
        background-image: linear-gradient(to bottom, #cc0000, #830000);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 12px;
        padding: 5px 20px;
        border: solid #830000 1px;
        text-decoration: none;
        display: table;
        cursor: pointer;
        float: left;
        margin-bottom: 10px;
        margin-right: 5px;
    }

        .feedback-form .reset-side .feed-reset-btn:hover {
            background: #830000;
            background-image: -webkit-linear-gradient(top, #830000, #cc0000);
            background-image: -moz-linear-gradient(top, #830000, #cc0000);
            background-image: -ms-linear-gradient(top, #830000, #cc0000);
            background-image: -o-linear-gradient(top, #830000, #cc0000);
            background-image: linear-gradient(to bottom, #830000, #cc0000);
            text-decoration: none;
        }

.feedback-form .save-side {
    float: left;
    width: 100%;
}

    .feedback-form .save-side .feed-save-btn {
        background: #EF971B;
        background-image: -webkit-linear-gradient(top, #EF971B, #D28500);
        background-image: -moz-linear-gradient(top, #EF971B, #D28500);
        background-image: -ms-linear-gradient(top, #EF971B, #D28500);
        background-image: -o-linear-gradient(top, #EF971B, #D28500);
        background-image: linear-gradient(to bottom, #EF971B, #D28500);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 12px;
        padding: 5px 20px;
        border: solid #B77600 1px;
        text-decoration: none;
        display: table;
        cursor: pointer;
        float: left;
        margin-bottom: 10px;
        margin-right: 5px;
    }

        .feedback-form .save-side .feed-save-btn:hover {
            background: #D28500;
            background-image: -webkit-linear-gradient(top, #D28500, #EF971B);
            background-image: -moz-linear-gradient(top, #D28500, #EF971B);
            background-image: -ms-linear-gradient(top, #D28500, #EF971B);
            background-image: -o-linear-gradient(top, #D28500, #EF971B);
            background-image: linear-gradient(to bottom, #D28500, #EF971B);
            text-decoration: none;
        }

    .feedback-form .save-side .feed-cont-btn {
        background: #76B9E0;
        background-image: -webkit-linear-gradient(top, #76B9E0, #2694D3);
        background-image: -moz-linear-gradient(top, #76B9E0, #2694D3);
        background-image: -ms-linear-gradient(top, #76B9E0, #2694D3);
        background-image: -o-linear-gradient(top, #76B9E0, #2694D3);
        background-image: linear-gradient(to bottom, #76B9E0, #2694D3);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 12px;
        padding: 5px 20px;
        border: solid #158ACC 1px;
        text-decoration: none;
        display: table;
        cursor: pointer;
        float: left;
        margin-bottom: 10px;
        margin-right: 5px;
    }

        .feedback-form .save-side .feed-cont-btn:hover {
            background: #2694D3;
            background-image: -webkit-linear-gradient(top, #2694D3, #76B9E0);
            background-image: -moz-linear-gradient(top, #2694D3, #76B9E0);
            background-image: -ms-linear-gradient(top, #2694D3, #76B9E0);
            background-image: -o-linear-gradient(top, #2694D3, #76B9E0);
            background-image: linear-gradient(to bottom, #2694D3, #76B9E0);
            text-decoration: none;
        }

    .feedback-form .save-side .feed-submit-btn {
        background: #158ACC;
        background-image: -webkit-linear-gradient(top, #158ACC, #0A5A87);
        background-image: -moz-linear-gradient(top, #158ACC, #0A5A87);
        background-image: -ms-linear-gradient(top, #158ACC, #0A5A87);
        background-image: -o-linear-gradient(top, #158ACC, #0A5A87);
        background-image: linear-gradient(to bottom, #158ACC, #0A5A87);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 12px;
        padding: 5px 20px;
        border: solid #142559 1px;
        text-decoration: none;
        display: table;
        cursor: pointer;
        float: left;
        margin-bottom: 10px;
        margin-right: 5px;
    }

        .feedback-form .save-side .feed-submit-btn:hover {
            background: #0A5A87;
            background-image: -webkit-linear-gradient(top, #0A5A87, #158ACC);
            background-image: -moz-linear-gradient(top, #0A5A87, #158ACC);
            background-image: -ms-linear-gradient(top, #0A5A87, #158ACC);
            background-image: -o-linear-gradient(top, #0A5A87, #158ACC);
            background-image: linear-gradient(to bottom, #0A5A87, #158ACC);
            text-decoration: none;
        }


/*==================== Login Page ======================*/

.login-box {
    width: 400px;
    background: #FFF;
    border: 1px solid #d7d7d7;
    margin: 0 auto;
    border-radius: 3px;
    padding: 20px 0;
}

    .login-box .heading {
        text-transform: uppercase;
        color: #FFF;
        font-size: 15px;
        font-weight: bold;
        padding: 10px 0 10px 20px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3859c1+0,123491+100 */
        background: #5a5a5a; /* Old browsers */
        background: -moz-linear-gradient(top, #5a5a5a 0%, #000 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #5a5a5a 0%,#000 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #5a5a5a 0%,#000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#000',GradientType=0 ); /* IE6-9 */
    }

    .login-box .user-box {
        color: #909090;
        font-size: 13px;
        border: 1px solid #cecece;
        border-radius: 3px;
        padding: 15px 0 15px 35px;
        margin: 0 auto;
        display: table;
        width: 65%;
        margin-top: 20px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,ffffff+100 */
        background: #eeeeee; /* Old browsers */
        background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: url(../images/user-icon.png) no-repeat left, linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        background-position: 10px;
    }

    .login-box .pass-box {
        color: #909090;
        font-size: 13px;
        border: 1px solid #cecece;
        border-radius: 3px;
        padding: 15px 0 15px 35px;
        margin: 0 auto;
        display: table;
        width: 65%;
        margin-top: 20px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,ffffff+100 */
        background: #eeeeee; /* Old browsers */
        background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: url(../images/pass-icon.png) no-repeat left, linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        background-position: 10px;
    }

    .login-box .remember {
        margin: 0 auto;
        display: table;
        margin-top: 20px;
    }

    .login-box .submit-btn {
        background: #e89d1b;
        background-image: -webkit-linear-gradient(top, #e89d1b, #cf8400);
        background-image: -moz-linear-gradient(top, #e89d1b, #cf8400);
        background-image: -ms-linear-gradient(top, #e89d1b, #cf8400);
        background-image: -o-linear-gradient(top, #e89d1b, #cf8400);
        background-image: linear-gradient(to bottom, #e89d1b, #cf8400);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 13px;
        padding: 14px 60px 14px 60px;
        border: solid #b77400 1px;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0 auto;
        display: table;
        margin-top: 20px;
        cursor: pointer;
    }

        .login-box .submit-btn:hover {
            background: #cf8400;
            background-image: -webkit-linear-gradient(top, #cf8400, #e89d1b);
            background-image: -moz-linear-gradient(top, #cf8400, #e89d1b);
            background-image: -ms-linear-gradient(top, #cf8400, #e89d1b);
            background-image: -o-linear-gradient(top, #cf8400, #e89d1b);
            background-image: linear-gradient(to bottom, #cf8400, #e89d1b);
            text-decoration: none;
        }

/*==================== Forgot Password ======================*/

.forgot-pass {
    width: 70%;
    background: #FFF;
    border: 1px solid #d7d7d7;
    margin: 0 auto;
    border-radius: 3px;
    padding: 20px;
    line-height: 20px;
    text-align: center;
}

    .forgot-pass .user-box {
        color: #909090;
        font-size: 13px;
        border: 1px solid #cecece;
        border-radius: 3px;
        margin: 0 auto;
        display: table;
        width: 90%;
        margin-top: 20px;
    }

    .forgot-pass .submit-btn {
        background: #e89d1b;
        background-image: -webkit-linear-gradient(top, #e89d1b, #cf8400);
        background-image: -moz-linear-gradient(top, #e89d1b, #cf8400);
        background-image: -ms-linear-gradient(top, #e89d1b, #cf8400);
        background-image: -o-linear-gradient(top, #e89d1b, #cf8400);
        background-image: linear-gradient(to bottom, #e89d1b, #cf8400);
        -webkit-border-radius: 3;
        -moz-border-radius: 3;
        border-radius: 3px;
        font-family: Arial;
        color: #ffffff;
        font-size: 13px;
        padding: 10px 50px 10px 50px;
        border: solid #b77400 1px;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0 auto;
        display: table;
        margin-top: 20px;
        cursor: pointer;
    }

        .forgot-pass .submit-btn:hover {
            background: #cf8400;
            background-image: -webkit-linear-gradient(top, #cf8400, #e89d1b);
            background-image: -moz-linear-gradient(top, #cf8400, #e89d1b);
            background-image: -ms-linear-gradient(top, #cf8400, #e89d1b);
            background-image: -o-linear-gradient(top, #cf8400, #e89d1b);
            background-image: linear-gradient(to bottom, #cf8400, #e89d1b);
            text-decoration: none;
        }

.reset-pass-box {
    color: #909090;
    font-size: 13px;
    border: 1px solid #cecece;
    border-radius: 3px;
    padding: 7px 0 7px 35px !important;
    background: url(../images/pass-icon.png) no-repeat left;
    background-position: 10px;
}

/*==================== Grid ======================*/

.add-user .row {
}

.add-user label {
    display: inline-block !important;
    width: 17%;
}


.grid-container {
    background: #FFF;
    border: 1px solid #c7c7c7;
}

.nav-tabs {
    background: #000;
    border-radius: 0px;
    border-bottom: 0px solid #ddd !important;
}

    .nav-tabs > li {
        margin-bottom: 0px !important;
    }

        .nav-tabs > li > a {
            border: 0px solid transparent !important;
            color: #fff;
            text-decoration: none;
            line-height: 40px !important;
            font-weight: bold;
            font-size: 16px;
            border-radius: 0px !important;
        }

        .nav-tabs > li > a, .nav-pills > li > a {
            padding: 8px 25px !important;
        }

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #2ac4e3 !important;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
    background-color: #2ac4e3 !important;
    border: 0px solid #ddd !important;
    color: #fff !important;
}

.tab-content {
    padding: 5px;
    overflow: auto;
}

.date-fld {
    background: url(../images/schedule-icon.png) no-repeat right;
    padding-right: 30px !important;
    width: 36%;
}

.search-filter {
    float: right;
    margin-top: 30px;
}

.alphabet-filter {
    float: left;
}
.btncenter {
    display: inline !important;
    float: none !important;
}

.new-user-btn {
    background: #158ACC;
    background-image: -webkit-linear-gradient(top, #158ACC, #0A5A87);
    background-image: -moz-linear-gradient(top, #158ACC, #0A5A87);
    background-image: -ms-linear-gradient(top, #158ACC, #0A5A87);
    background-image: -o-linear-gradient(top, #158ACC, #0A5A87);
    background-image: linear-gradient(to bottom, #158ACC, #0A5A87);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #3281d3 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .new-user-btn:hover {
        background: #0A5A87;
        background-image: -webkit-linear-gradient(top, #0A5A87, #158ACC);
        background-image: -moz-linear-gradient(top, #0A5A87, #158ACC);
        background-image: -ms-linear-gradient(top, #0A5A87, #158ACC);
        background-image: -o-linear-gradient(top, #0A5A87, #158ACC);
        background-image: linear-gradient(to bottom, #0A5A87, #158ACC);
        text-decoration: none;
    }

.export-excel-btn {
    background: #20b24b;
    background-image: -webkit-linear-gradient(top, #20b24b, #146A2D);
    background-image: -moz-linear-gradient(top, #20b24b, #146A2D);
    background-image: -ms-linear-gradient(top, #20b24b, #146A2D);
    background-image: -o-linear-gradient(top, #20b24b, #146A2D);
    background-image: linear-gradient(to bottom, #20b24b, #146A2D);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #146A2D 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .export-excel-btn:hover {
        background: #146A2D;
        background-image: -webkit-linear-gradient(top, #146A2D, #20b24b);
        background-image: -moz-linear-gradient(top, #146A2D, #20b24b);
        background-image: -ms-linear-gradient(top, #146A2D, #20b24b);
        background-image: -o-linear-gradient(top, #146A2D, #20b24b);
        background-image: linear-gradient(to bottom, #146A2D, #20b24b);
        text-decoration: none;
    }

.import-excel-btn {
    background: #EF971B;
    background-image: -webkit-linear-gradient(top, #EF971B, #D28500);
    background-image: -moz-linear-gradient(top, #EF971B, #D28500);
    background-image: -ms-linear-gradient(top, #EF971B, #D28500);
    background-image: -o-linear-gradient(top, #EF971B, #D28500);
    background-image: linear-gradient(to bottom, #EF971B, #D28500);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #B77600 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: right;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .import-excel-btn:hover {
        background: #D28500;
        background-image: -webkit-linear-gradient(top, #D28500, #EF971B);
        background-image: -moz-linear-gradient(top, #D28500, #EF971B);
        background-image: -ms-linear-gradient(top, #D28500, #EF971B);
        background-image: -o-linear-gradient(top, #D28500, #EF971B);
        background-image: linear-gradient(to bottom, #D28500, #EF971B);
        text-decoration: none;
    }


.change-status-btn {
    background: #979797;
    background-image: -webkit-linear-gradient(top, #979797, #5C5C5C);
    background-image: -moz-linear-gradient(top, #979797, #5C5C5C);
    background-image: -ms-linear-gradient(top, #979797, #5C5C5C);
    background-image: -o-linear-gradient(top, #979797, #5C5C5C);
    background-image: linear-gradient(to bottom, #979797, #5C5C5C);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #5C5C5C 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .change-status-btn:hover {
        background: #5C5C5C;
        background-image: -webkit-linear-gradient(top, #5C5C5C, #979797);
        background-image: -moz-linear-gradient(top, #5C5C5C, #979797);
        background-image: -ms-linear-gradient(top, #5C5C5C, #979797);
        background-image: -o-linear-gradient(top, #5C5C5C, #979797);
        background-image: linear-gradient(to bottom, #5C5C5C, #979797);
        text-decoration: none;
    }

.del-btn {
    background: #20b24b;
    background-image: -webkit-linear-gradient(top, #cc0000, #830000);
    background-image: -moz-linear-gradient(top, #cc0000, #830000);
    background-image: -ms-linear-gradient(top, #cc0000, #830000);
    background-image: -o-linear-gradient(top, #cc0000, #830000);
    background-image: linear-gradient(to bottom, #cc0000, #830000);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #830000 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .del-btn:hover {
        background: #830000;
        background-image: -webkit-linear-gradient(top, #830000, #cc0000);
        background-image: -moz-linear-gradient(top, #830000, #cc0000);
        background-image: -ms-linear-gradient(top, #830000, #cc0000);
        background-image: -o-linear-gradient(top, #830000, #cc0000);
        background-image: linear-gradient(to bottom, #830000, #cc0000);
        text-decoration: none;
    }

.copy-btn {
    background: #e89d1b;
    background-image: -webkit-linear-gradient(top, #e89d1b, #cf8400);
    background-image: -moz-linear-gradient(top, #e89d1b, #cf8400);
    background-image: -ms-linear-gradient(top, #e89d1b, #cf8400);
    background-image: -o-linear-gradient(top, #e89d1b, #cf8400);
    background-image: linear-gradient(to bottom, #e89d1b, #cf8400);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #cf8400 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .copy-btn:hover {
        background: #cf8400;
        background-image: -webkit-linear-gradient(top, #cf8400, #e89d1b);
        background-image: -moz-linear-gradient(top, #cf8400, #e89d1b);
        background-image: -ms-linear-gradient(top, #cf8400, #e89d1b);
        background-image: -o-linear-gradient(top, #cf8400, #e89d1b);
        background-image: linear-gradient(to bottom, #cf8400, #e89d1b);
        text-decoration: none;
    }

.add-user .reset-btn {
    background: #979797;
    background-image: -webkit-linear-gradient(top, #979797, #5C5C5C);
    background-image: -moz-linear-gradient(top, #979797, #5C5C5C);
    background-image: -ms-linear-gradient(top, #979797, #5C5C5C);
    background-image: -o-linear-gradient(top, #979797, #5C5C5C);
    background-image: linear-gradient(to bottom, #979797, #5C5C5C);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 20px;
    border: solid #5C5C5C 1px;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 5px;
}

.add-user .cancel-btn:hover {
    background: #5C5C5C;
    background-image: -webkit-linear-gradient(top, #5C5C5C, #979797);
    background-image: -moz-linear-gradient(top, #5C5C5C, #979797);
    background-image: -ms-linear-gradient(top, #5C5C5C, #979797);
    background-image: -o-linear-gradient(top, #5C5C5C, #979797);
    background-image: linear-gradient(to bottom, #5C5C5C, #979797);
    text-decoration: none;
}

.add-user .cancel-btn {
    background-position: 0% 0%;
    background-image: linear-gradient(to bottom, #cc0000, #830000) !important !important;
    border-radius: 3px !important;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 20px;
    border: solid #830000 1px !important;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 5px;
    background-color: #cc0000 !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

    .add-user .cancel-btn:hover {
        background: #830000;
        background-image: -webkit-linear-gradient(top, #830000, #cc0000);
        background-image: -moz-linear-gradient(top, #830000, #cc0000);
        background-image: -ms-linear-gradient(top, #830000, #cc0000);
        background-image: -o-linear-gradient(top, #830000, #cc0000);
        background-image: linear-gradient(to bottom, #830000, #cc0000);
        text-decoration: none;
    }

.add-user .sbmt-btn {
    background: #e89d1b;
    background-image: -webkit-linear-gradient(top, #e89d1b, #cf8400);
    background-image: -moz-linear-gradient(top, #e89d1b, #cf8400);
    background-image: -ms-linear-gradient(top, #e89d1b, #cf8400);
    background-image: -o-linear-gradient(top, #e89d1b, #cf8400);
    background-image: linear-gradient(to bottom, #e89d1b, #cf8400);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 20px;
    border: solid #b77400 1px;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .add-user .sbmt-btn:hover {
        background: #cf8400;
        background-image: -webkit-linear-gradient(top, #cf8400, #e89d1b);
        background-image: -moz-linear-gradient(top, #cf8400, #e89d1b);
        background-image: -ms-linear-gradient(top, #cf8400, #e89d1b);
        background-image: -o-linear-gradient(top, #cf8400, #e89d1b);
        background-image: linear-gradient(to bottom, #cf8400, #e89d1b);
        text-decoration: none;
    }




.send-btn {
    background: #20b24b;
    background-image: -webkit-linear-gradient(top, #74bb21, #446e13);
    background-image: -moz-linear-gradient(top, #74bb21, #446e13);
    background-image: -ms-linear-gradient(top, #74bb21, #446e13);
    background-image: -o-linear-gradient(top, #74bb21, #446e13);
    background-image: linear-gradient(to bottom, #74bb21, #446e13);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 20px;
    border: solid #446e13 1px;
    text-decoration: none;
    display: table;
    cursor: pointer;
    float: left;
    margin-bottom: 10px;
    margin-right: 5px;
}

    .send-btn:hover {
        background: #446e13;
        background-image: -webkit-linear-gradient(top, #446e13, #74bb21);
        background-image: -moz-linear-gradient(top, #446e13,#74bb21);
        background-image: -ms-linear-gradient(top, #446e13, #74bb21);
        background-image: -o-linear-gradient(top, #446e13,#74bb21);
        background-image: linear-gradient(to bottom, #446e13, #74bb21);
        text-decoration: none;
    }
/*Tool tip Design*/

.tooltip {
    position: absolute;
    z-index: 1030;
    display: block;
    font-size: 12px !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    filter: alpha(opacity=0);
    visibility: visible;
}

    .tooltip.in {
        opacity: 1 !important;
        filter: alpha(opacity=100);
    }

    .tooltip.top {
        padding: 5px 0;
        margin-top: -3px;
    }

    .tooltip.right {
        padding: 0 5px;
        margin-left: 3px;
    }

    .tooltip.bottom {
        padding: 5px 0;
        margin-top: 3px;
    }

    .tooltip.left {
        padding: 0 5px;
        margin-left: -3px;
    }

.tooltip-inner {
    max-width: 300px !important;
    padding: 8px;
    color: #000 !important;
    text-align: justify !important;
    box-shadow: 0 0 13px #333;
    background-color: #ffffff !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-color: #ffffff !important;
    border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-right-color: #ffffff !important;
    border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-left-color: #ffffff !important;
    border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: #ffffff !important;
    border-width: 0 5px 5px;
}

/* Tables */

.search-by-name th {
    background: #000;
    font-weight: bold;
    color: #FFF;
    padding: 5px;
}

.search-by-name td {
    padding: 5px;
    border: 1px solid #FFFFFF;
    background: #F1F1F1;
    text-align: center;
}

    .search-by-name td a {
        color: #85858E;
        text-decoration: none;
    }

        .search-by-name td a.active {
            font-weight: bold;
        }

.rwd-table {
    margin: 1em 0;
    width: 100%;
}

    .rwd-table th {
        display: none;
        background: #f2f2f2;
    }

    .rwd-table td {
        display: block;
    }

        .rwd-table td a {
            color: #0073AA;
            text-decoration: underline;
        }

        .rwd-table td:first-child {
            padding-top: .5em;
        }

        .rwd-table td:last-child {
            padding-bottom: .5em;
        }

        .rwd-table td:before {
            content: attr(data-th) ": ";
            font-weight: bold;
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }

    .rwd-table tr:nth-child(odd) {
        background-color: #f1f1f1;
    }

    .rwd-table tr:hover {
        background-color: #CCC;
    }

@media (min-width: 768px) {
    .rwd-table td:before {
        display: none;
    }
}

.rwd-table th, .rwd-table td {
    text-align: left;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .rwd-table th, .rwd-table td {
        display: table-cell;
        padding: .25em .5em;
        vertical-align: middle;
    }

        .rwd-table th:first-child, .rwd-table td:first-child {
            padding-left: 0;
        }

        .rwd-table th:last-child, .rwd-table td:last-child {
            padding-right: 0;
        }
}

.rwd-table {
    color: #333333;
    overflow: hidden;
    border: 1px solid #C7C7C7;
    font-size: 12px;
}

    .rwd-table tr {
        border-color: #46637f;
    }

    .rwd-table th, .rwd-table td {
        margin: .5em 1em;
        border: 1px solid #c1c1c1;
    }

@media (min-width: 768px) {
    .rwd-table th, .rwd-table td {
        padding: 6px !important;
    }
}

.rwd-table th, .rwd-table td:before {
    /*color: #FFF;*/
    font-size: 14px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .rwd-table th, .rwd-table td {
        margin: .5em 1em;
        border: 0px solid #c1c1c1;
    }

    .rwd-table tr {
        color: #333333;
        overflow: hidden;
        border: 1px solid #C7C7C7;
        font-size: 12px;
    }
}

.grid-section {
    float: left;
    width: 63%
}

.chart-section {
    float: left;
    margin-right: 2%;
    width: 35%;
}


/*==================== Footer ======================*/

footer {
    background: #000;
    padding: 20px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    text-align: center;
    font-size: 11px;
}

/*==================== Responsive Structure ======================*/

@media all and (min-width: 800px) {
    .checkout-bar li.active:after {
        -webkit-animation: myanimation 3s 0;
        background-size: 35px 35px;
        background-color: #8bc53f;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        content: "";
        height: 15px;
        width: 100%;
        left: 50%;
        position: absolute;
        top: -50px;
        z-index: 0;
    }

    .checkout-wrap {
        margin: 50px auto;
    }

    ul.checkout-bar {
        -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
        background-size: 35px 35px;
        background-color: #EcEcEc;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
        border-radius: 15px;
        height: 15px;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

        ul.checkout-bar:before {
            background-size: 35px 35px;
            background-color: #57aed1;
            background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            content: " ";
            height: 15px;
            left: 0;
            position: absolute;
            width: 13%;
        }

        ul.checkout-bar li {
            display: inline-block;
            margin: 50px 0 0;
            padding: 0;
            text-align: center;
            width: 24%;
        }

            ul.checkout-bar li:before {
                height: 45px;
                left: 40%;
                line-height: 45px;
                position: absolute;
                top: -65px;
                width: 45px;
                z-index: 99;
            }

            ul.checkout-bar li.visited {
                background: none;
            }

                ul.checkout-bar li.visited:after {
                    background-size: 35px 35px;
                    background-color: #57aed1;
                    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
                    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
                    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
                    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
                    content: "";
                    height: 15px;
                    left: 50%;
                    position: absolute;
                    top: -50px;
                    width: 102%;
                    z-index: 99;
                }
}

@media only screen and (max-width : 992px) {
    .observer .time-date .row label {
        width: 65%;
    }

    .grid-section {
        float: none;
        width: 100%;
    }

    .chart-section {
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }
}


@media only screen and (max-width : 768px) {
    .dashboard .mainchart {
        float: none;
        width: 100%;
        text-align: center;
    }

    .dashboard .piechart {
        float: none;
        width: 100%;
        text-align: center;
    }

    .dashboard .activity-pie {
        float: none;
        width: 100%;
        text-align: center;
    }

    .dashboard .obs-score {
        float: none;
        width: 100%;
        text-align: center;
    }

    .dashboard select {
        margin: 0 0 10px 0;
    }

    header .heading {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0px;
        float: none;
    }

    .logo {
        position: static;
        padding: 0;
        margin: 0 auto;
        display: table;
    }

    header .user {
        float: none;
        margin-top: 0px;
        position: static;
    }

        header .user .pic {
            float: none;
            margin: 0 auto;
            display: table;
            margin-bottom: 5px;
        }

        header .user .name {
            float: none;
            margin-top: 0px;
            margin-bottom: 0px;
        }

    .ob-progress .ob {
        width: 90%;
    }

    .feedback-form .row .rdo {
        float: none;
    }

    .feedback-form .row .rdo {
        float: none;
    }

    .feedback-form .row .rdo {
        width: 500px;
    }

        .feedback-form .row .rdo tr td {
            height: 20px;
            background-color: red;
            vertical-align: middle;
            padding: 5px;
            width: 33%;
        }

        .feedback-form .row .rdo input {
            float: right;
        }

        .feedback-form .row .rdo label {
            position: relative;
            padding-left: 20px;
        }

    .graphstyle {
        float: none;
        width: 100%;
    }
}

@media only screen and (max-width : 480px) {
    .new-user-btn {
        float: none;
        display: block;
        margin: 5px;
    }

    .export-excel-btn {
        float: none;
        display: block;
        margin: 5px;
    }

    .change-status-btn {
        float: none;
        display: block;
        margin: 5px;
    }

    .del-btn {
        float: none;
        display: block;
        margin: 5px;
    }

    .date-fld {
        width: auto;
    }

    .search-filter {
        margin-top: 20px;
        float: none;
    }

    .alphabet-filter {
        float: none;
    }

    .login-box {
        width: 100%;
    }

    .observer .selector {
        float: none;
        width: 100%;
    }

    .observer .time-date {
        float: none;
        width: 100%;
    }


        .observer .time-date .row label {
            width: 85%;
        }

    .view-observer .selector {
        float: none;
        width: 100%;
    }

    .view-observer .time-date {
        float: none;
        width: 100%;
    }

        .view-observer .time-date .row label {
            width: 85%;
        }

    .feedback-form .reset-side {
        float: none;
        width: 100%;
    }

    .feedback-form .save-side {
        float: none;
        width: 100%;
    }

    .textbox {
        width: 250px;
        height: 100px;
    }

    header .user .name {
        text-align: center;
    }
}

input[type=file] {
    /*width:30px;*/
    /*color:transparent;*/
}


@media only screen and (max-width : 320px) {
    .login-box {
        width: 100%;
    }
}