﻿*:focus,
*:active,
a:active,
a:focus,
input:focus,
input:active {
    -moz-outline-style: none;
    outline: none;
    outline: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

img {
    width: 100%;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

.navbar-default {
    background-color: /*#f8f8f8*/ #122d5c;
    border-color: /*#f8f8f8*/ #122d5c;
    box-shadow: 0 0 4px 0px #fafafa;
}

    /*.navbar-default .navbar-nav > li > a {
        color: #777;
    }*/
    .navbar-default .navbar-nav > li > a {
        color: #fafafa;
        letter-spacing: 1px;
    }
/************************ CSS Modifiy*************************/



.login-page .form-horizontal .form-group, .register-page .form-horizontal .form-group {
    margin-right: -6px;
    margin-left: 0;
}

/*.login-page .has-feedback .form-control, .register-page .has-feedback .form-control {
    padding-right: 42.5px;
    width: 100% !important;
    max-width: 98%;
}*/
.login-page .has-feedback .form-control, .register-page .has-feedback .form-control {
    padding-right: 42.5px;
    width: 100% !important;
    max-width: 98%;
    padding: 20px 4%;
    border-radius: 50px;
    transition: all .4s ease;
    letter-spacing: 0.4px;
}

.login-page .form-horizontal .has-feedback .form-control-feedback, .register-page .form-horizontal .has-feedback .form-control-feedback {
    right: 12px !important;
}

.login-page .form-control-feedback, .register-page .form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    pointer-events: none;
}

.login-page .form-group {
    margin-bottom: 25px;
}
/*.login-page .btn {
    border: none !important;
    margin: 0 !important;
}*/
.BorderBtnStyle {
    border: 2px solid;
    color: #333;
    font-size: 16px;
    letter-spacing: 0.5px;
    border-radius: 50px;
    padding: 10px;
    width: 100%;
    float: left;
    transition: all .4s ease;
    text-align: center;
    font-weight: bold;
}


.BorderDivMillageCalculatorStyle {
    border: 2px solid;
    margin: 0;
    background: gainsboro;
    color: #333;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 26px;
    padding: 2px;
    width: 100%;
    /* float: left; */
    transition: all .4s ease;
    text-align: center;
    font-weight: normal;
}

    .BorderDivMillageCalculatorStyle .Line + .Line {
        border-left: 1px solid #333;
    }

    .BorderDivMillageCalculatorStyle .col-lg-6 {
        padding: 0;
    }

    .BorderDivMillageCalculatorStyle .col-md-2.Line {
        width: 20%;
        position: relative;
    }

    .BorderDivMillageCalculatorStyle .DataDetail {
        font-size: 16px;
        font-style: italic;
        font-weight: 600;
    }



.DiesalHeading {
    padding: 0;
    background-color: silver;
    padding: 8px;
    text-align: center;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin: 0;
    width: 48.5%;
    margin-bottom: 0 !important;
    margin-top: -16px;
}

    .DiesalHeading h4 {
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
        font-weight: 600;
    }

.MultipleDiesel {
    padding: 12px !important;
    background: #fafafa !important;
    border: 1px solid silver !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.125);
    color: #000;
}

.LogoBlock {
    font-style: italic;
    color: #fafafa !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.login-box-body .LogoBlock {
    padding: 10px 10px 30px 10px;
    color: #122d5c !important;
    letter-spacing: 1px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}

.register-box-body .LogoBlock {
    padding: 10px 10px 30px 10px;
    color: #122d5c !important;
    letter-spacing: 1px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}

.login-page .LightGreenBtn, .register-page .LightGreenBtn {
    background-color: #122d5c;
    border-color: #122d5c;
    transition: all .4s ease;
    color: #fff;
}

    .login-page .LightGreenBtn:hover, .register-page .LightGreenBtn:hover {
        background-color: transparent;
        border-color: #122d5c;
        transition: all .4s ease;
        color: #122d5c;
    }

.login-page .GreyBtn, .register-page .GreyBtn {
    background-color: #434c4b;
    border-color: #434c4b;
    transition: all .4s ease;
    color: #fff;
}

    .login-page .GreyBtn:hover, .register-page .GreyBtn:hover {
        background-color: transparent;
        border-color: #434c4b;
        transition: all .4s ease;
        color: #434c4b;
    }

.login-page input[type="checkbox"] {
}

.login-page .btn {
    border: none !important;
    margin: 0 !important;
    border-radius: 50px;
    padding: 12px;
    letter-spacing: 0.5px;
    font-size: 16px;
}

.login-box {
    width: 80%;
    margin: 5% auto;
    box-shadow: -1px 1px 2px 2px rgba(67,76,75,0.2);
    border-radius: 8px;
}

#modelChangePasswordContent .form-control {
    width: 100% !important;
    max-width: 98%;
    padding: 20px 4%;
    border-radius: 50px;
    transition: all .4s ease;
    letter-spacing: 0.4px;
}

#modelChangePasswordContent .exampleInputEmail1 {
    padding-top: 15px;
}

.LogisticsBlock {
}

    .LogisticsBlock h2 {
        text-align: center;
        color: #333;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        font-weight: 700;
        border-bottom: 1px solid #333;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .LogisticsBlock p {
        font-size: 16px;
        letter-spacing: 0.5px;
        margin-bottom: 26px;
    }

    .LogisticsBlock a {
        float: left;
        width: 90%;
    }

        .LogisticsBlock a img {
            width: 100%;
        }

.register-box {
    width: 600px;
    margin: 5% auto;
    box-shadow: -1px 1px 2px 2px rgba(67,76,75,0.2);
    border-radius: 8px;
}

.login-box-body, .register-box-body {
    border-radius: 8px;
}

.register-box .form-control {
    border-radius: 4px !important;
}

.AddStudentPopup, .AddStaffPopup {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

    .AddStudentPopup .form-horizontal .form-group, .AddStaffPopup .form-horizontal .form-group {
        margin-right: 0;
        margin-left: 0;
    }

    .AddStudentPopup input, .AddStudentPopup select, .AddStudentPopup textarea, .AddStaffPopup input, .AddStaffPopup select, .AddStaffPopup textarea {
        max-width: 100%;
    }






.StaffAttendenceBlock {
}

    .StaffAttendenceBlock .dataTables_filter .form-control {
        width: 72%;
    }

.ClassAttendenceBlock {
}

.AddBtnStyle {
    color: #fff;
    padding: 4px 4px;
    border-radius: 2px;
    border: 1px solid transparent;
    border-radius: 2px;
    margin-right: 0px;
    /*margin-right: 16px;*/
    background-color: #333;
    transition: all .6s ease-out;
}

    .AddBtnStyle:hover {
        color: #333;
        padding: 4px 4px;
        border-radius: 2px;
        border: 1px solid #333;
        margin-right: 0px;
        /*margin-right: 16px;*/
        background-color: transparent;
        transition: all .6s ease-out;
    }


.StockBtnStyle {
    color: #fff;
    padding: 4px 6px;
    border-radius: 2px;
    border: 1px solid transparent;
    border-radius: 2px;
    margin-right: 10px;
    background-color: #333;
    transition: all .6s ease-out;
}

    .StockBtnStyle:hover {
        color: #333;
        padding: 4px 6px;
        border-radius: 2px;
        border: 1px solid #333;
        margin-right: 10px;
        background-color: transparent;
        transition: all .6s ease-out;
    }

#dvtblStaff .col-lg-6, #dvtblStaff .col-lg-2 {
    padding: 0 !important;
}

#dvtblStaff label {
    background-color: #e5e5e5;
    padding: 4px 6px;
}

#dvtblStaff .DataValueBlock {
    padding: 4px 6px;
}

#dvtblStaff .row:hover {
    background-color: #f3f3f3;
}

.DataComingPage {
    border: 1px solid #E2E7EB;
    margin: 4px 0;
    margin-bottom: 4px;
    background-color: #fff;
}

    .DataComingPage .row {
        margin: 0;
    }

#dvtblfilter1 {
    border: 1px solid #E2E7EB;
}

.DataComingPage .row + .row {
    border-top: 1px solid #E2E7EB;
}

.DataComingPage .row:hover {
    background-color: #f0f3f5;
}

.DataComingPage .col-lg-2 {
    border-left: 1px solid #E2E7EB;
}

.DataComingPage .col-lg-2, .DataComingPage .col-lg-6, .DataComingPage .col-lg-1, .DataComingPage .col-lg-3, .DataComingPage .col-lg-4 {
    padding: 0 !important;
}

.DataComingPage label {
    background-color: #333;
    color: #fff;
}

.DataComingPage label, .DataComingPage .DataValueBlock {
    padding: 4px 6px;
    font-size: 12px;
    min-height: 26px;
}

.DataComingPage label {
    font-size: 12px;
    min-width: 87px;
    width: 100%;
}

.DataComingPage .col-lg-2, .DataComingPage .col-lg-1 {
    border-left: 1px solid silver;
}

#dvtblStaff {
    background-color: #fff;
    color: #333;
}

    #dvtblStaff .row + .row {
        border-top: 1px solid silver;
    }

    #dvtblStaff .col-lg-2, #dvtblStaff .col-lg-1 {
        border-left: 1px solid silver;
        padding: 2px 4px;
    }

    #dvtblStaff label {
    }

#divTableData {
    float: left;
    width: 100%;
    background-color: #eee;
    padding: 10px;
}
/*********************************************************************************/
.skin-blue .main-header .navbar {
    background-color: #122d5c;
}

.main-header .logo .logo-lg {
    display: block;
    color: #122d5c;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.5px;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: transparent;
}

.content-wrapper, .right-side {
    background-color: #eeeeee;
}

.skin-blue .main-header .logo {
    background-color: #eeeeee;
}

    .skin-blue .main-header .logo:hover {
        background-color: #eeeeee;
    }

.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    background-color: #f9f9f9;
    box-shadow: 0px 0px 4px 0px grey;
}

.skin-blue .main-header li.user-header {
    background-color: #122d5c;
}

.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a {
    color: #fff;
    background: #151d20;
    border-left-color: #122d5c;
}

.main-header .logo .logo-lg img {
    width: 100%;
    padding-top: 5%;
}

.small-box .icon {
    font-size: 70px;
}

.small-box:hover .icon {
    font-size: 80px;
}

.skin-blue .treeview-menu > li.active > a {
    color: #fff;
}

.NewDesignStyleBlock .form-row .row {
    margin-bottom: 10px;
}

    .NewDesignStyleBlock .form-row .row .form-control {
        border-color: #c5c5c5;
        border-radius: 6px;
    }

        .NewDesignStyleBlock .form-row .row .form-control:focus {
            border-color: #6c3 !important;
            outline: 0;
            box-shadow: 0 0 4px 2px #abe391;
        }


.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
    width: 100%;
}

.WhiteBox {
    background-color: #fff;
    /*float: left;*/
    /*width: 98%;*/
    margin: 4px 0% !important;
}

    .WhiteBox .box-header {
        border-bottom: 1px solid #f4f4f4;
        width: 100%;
        margin-bottom: 6px;
    }

.GreenBoder {
    border-top: 4px solid #00a65a !important;
}

.GreyBoder {
    border-top: 4px solid #C0C0C0 !important;
}

.GreenText {
    color: forestgreen !important;
}

.RedBoder {
    color: orangered !important;
}


.RightLabel label {
    text-align: right;
    width: 100%;
}

.PaddingTopLabel label {
    padding-top: 6px;
}

.main-header .logo-mini {
    color: #434c4b;
    font-weight: bold;
    letter-spacing: 1px;
}

    .main-header .logo-mini b {
        color: #122d5c;
    }

/*#divTableData {
    background-color: #eee !important;
}*/


#divOuterTableData {
    padding: 2px !important;
    margin: 0px 0;
    border-radius: 2px;
    border: none !important;
    float: left !important;
    width: 100% !important;
}

    #divOuterTableData .HeadingTr {
        background-color: #fff !important;
    }

.WhiteBox #divOuterTableData {
    margin: 4px 0px !important;
}


#divTableData {
    padding: 2px !important;
    margin: 0px 0;
    border-radius: 2px;
    border: none !important;
    float: left !important;
    width: 100% !important;
}

    #divTableData .HeadingTr {
        background-color: #fff !important;
    }

.WhiteBox #divTableData {
    margin: 4px 0px !important;
}

.modal .bg-primary {
    color: #fff;
    background-color: #122d5c !important;
}

.table.dataTable tbody tr.active td, .table.dataTable tbody tr.active th,
.table.dataTable tbody tr td, .table.dataTable tbody tr th, .table.dataTable tr th {
    /*word-break: break-word;*/
    text-overflow: ellipsis;
    overflow: hidden;
}

.WhiteBox .HalfBlock {
    width: 50%;
    float: left;
}

.WhiteBox .CenterBlock80 {
    width: 80%;
    margin: 10px auto;
    float: none;
}

.WhiteBox .MarginZero {
    margin: 0;
}

.MonthYearBlock .Width40 {
    width: 40% !important;
}

.MonthYearBlock .Width70 {
    width: 68% !important;
}

.MonthYearBlock .Width85 {
    width: 85% !important;
}

.form-group {
    margin-bottom: 4px !important;
}

.IconImgStyle {
    width: 16px;
}

.ThemeBtnStyle {
    background-color: #122d5c;
    color: #fff;
    transition: all .6s ease-out;
}

    .ThemeBtnStyle:hover {
        background-color: #151d20;
        color: #fff;
        transition: all .6s ease-out;
    }


.FloatLeft {
    float: left;
}

.MarginRight10 {
    margin-right: 10px;
}

.MapBlock {
    height: 500px;
    width: 100%;
}


.HistoryViewBlock {
    float: left;
    width: 100%;
    border: 1px solid silver;
    margin: 16px 0;
    border-radius: 2px;
}

    .HistoryViewBlock h4 {
        background-color: #222d32;
        text-align: center;
        margin: 0;
        padding: 2px;
        color: #fff;
        font-size: 15px;
        letter-spacing: 0.5px;
        line-height: 30px;
    }

    .HistoryViewBlock .HisttoryTime {
        float: left;
        width: 100%;
        padding: 6px;
        font-size: 14px;
    }

    .HistoryViewBlock .HisttoryTime {
        border-top: 1px solid silver;
    }

    .HistoryViewBlock .HisttoryRoute {
        float: left;
        width: 100%;
        padding: 6px;
        font-size: 14px;
    }

.ThemeBtnStyle input {
    color: #555;
    font-size: 12px;
    border-radius: 2px;
    border: none;
}

.btn-group-sm > .btn, .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    color: #444;
    background-color: #fff;
}

.WhiteBox .table.dataTable tbody tr.active th > a, .WhiteBox .table.dataTable tbody tr.active td > a {
    color: #3c8dbc;
}

.PaddingTop10 {
    padding-top: 10px;
}

.table-striped.dataTable tbody tr.active:nth-child(odd) td, .table-striped.dataTable tbody tr.active:nth-child(odd) th {
    background-color: transparent;
}

.table-striped > tbody > tr:hover, .table-striped > tbody > tr:hover td {
    background-color: #e6e6e6 !important;
}

.table-striped > tbody > tr:nth-of-type(even), .table-striped.dataTable tbody tr.active:nth-child(even) {
    background-color: #fff;
}

    .table-striped > tbody > tr:nth-of-type(even) td, .table-striped.dataTable tbody tr.active:nth-child(even) td {
        background-color: #fff;
    }

.FromToStyle {
}

    .FromToStyle input {
        font-size: 14px;
        max-width: 190px;
    }

    .FromToStyle .btn {
    }

.CollapseExpandBlock {
}

    .CollapseExpandBlock table tr td {
        padding: 6px;
        line-height: 20px;
        vertical-align: top;
        font-size: 16px;
    }

    .CollapseExpandBlock .btn {
        background-color: #151d20;
        border-color: #151d20;
        width: 100%;
        color: #fff;
    }

    .CollapseExpandBlock .HistoryViewBlock {
        float: left;
        width: 100%;
        border: none;
        margin: 5px 0;
        border-radius: 2px;
    }

    .CollapseExpandBlock #dvHistoryDetails {
        border: 1px solid silver;
        clear: both;
        float: left;
        height: 58vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

.HistoryViewBlock .HisttoryTime {
    border-top: none;
    background-color: #fff;
}





















@media only screen and (min-width:300px) and (max-width:1199px) {
    .DataComingPage {
        border: none;
    }

        .DataComingPage .row {
            margin: 6px 0;
            border: 1px solid silver;
        }

            .DataComingPage .row + .row {
                border-top: 1px solid silver;
                padding-bottom: 6px;
            }

            .DataComingPage .row label {
                float: none;
                width: 45%;
                background-color: transparent !important;
                color: #333;
                font-size: 12px;
            }

        .DataComingPage .col-lg-2 {
            border-top: 1px solid #E2E7EB;
        }

        .DataComingPage .row .DataValueBlock {
            color: #333;
            float: right;
            width: 50%;
            font-size: 12px;
        }

    #dvtblStaff .col-lg-6, #dvtblStaff .col-lg-2 {
        padding: 0 !important;
        float: left;
        width: 100%;
    }

    #dvtblStaff .row .col-lg-2 {
        border-top: 1px solid silver;
        border-left: none;
    }

    /*.content-wrapper .content {*/
    /*background-color: rgba(0, 0, 0, 0.4);*/
    /*height: 100%;
        color: #fff; 
    }*/

    .PopupDesign700 .box-body .col-md-6, .PopupDesign700 .box-body .HalfBlock {
        width: 50%;
        float: left;
    }

    .WhiteBox .box-body label {
        color: #333;
    }

    .WhiteBox .Width100 {
        width: 98%;
    }

    .WhiteBox .box-body label {
        text-align: left;
    }

    .MonthYearBlock .col-lg-2, .MonthYearBlock .col-lg-3 {
        padding-left: 0px !important;
        width: 18%;
        float: left;
        display: block;
    }

    .MonthYearBlock select {
        width: 86% !important;
    }

    .MonthYearBlock .Width40 {
        width: 86% !important;
    }
}

@media only screen and (min-width:1200px) and (max-width:3333333333333333333333333px) {
    .DataComingPage .row + .row label {
        display: none;
    }

    #divTableData {
        float: left;
        width: 100%;
        padding: 0 2px;
    }
}


.MonthYearBlock {
    padding-left: 26px;
}

    .MonthYearBlock .col-lg-5, .MonthYearBlock .col-lg-4, .MonthYearBlock .col-lg-3 {
        padding: 2px 6px;
    }

    .MonthYearBlock label {
        float: left;
        padding-right: 6px;
        padding-top: 6px;
        width: auto;
    }

    .MonthYearBlock select {
        width: 60%;
        padding: 2px;
    }




@media only screen and (min-width:300px) and (max-width:767px) {
    .MonthYearBlock {
    }

        .MonthYearBlock .col-lg-9, .MonthYearBlock .col-lg-3 {
            float: left;
            width: 100%;
        }


        .MonthYearBlock #dvClass label {
            float: left;
            width: 20%;
            font-size: 14px;
        }

        .MonthYearBlock #dvClass label {
            float: left;
            width: 20%;
            font-size: 14px;
        }

        .MonthYearBlock select {
            width: 54% !important;
            padding: 2px;
        }

        .MonthYearBlock #routebtn {
            float: left;
            margin: 0;
        }

        .MonthYearBlock .ThemeBtnStyle {
            float: right !important;
            margin: 0 0 0 4px !important;
            padding: 0 1px 1px 4px;
            width: auto !important;
        }

    .FromToStyle .btn span {
        display: none;
    }

    .FromToStyle {
        font-size: 14px;
    }

    div#dvHistorySelect {
        padding-top: 8px;
        float: left;
        width: 100%;
    }
}

@media only screen and (min-width:768px) and (max-width:1200px) {
    .MonthYearBlock {
    }

        .MonthYearBlock .col-lg-9 {
            float: left;
            width: 70% !important;
        }

        .MonthYearBlock .col-lg-3 {
            float: left;
            width: 30% !important;
        }

        .MonthYearBlock .TerminalBlock {
            float: left;
            width: 62% !important;
        }

            .MonthYearBlock .TerminalBlock .btn {
                margin-left: 0 !important;
            }

    .FloatLeftWidth .AddBtnStyle {
        width: auto !important;
    }

    .MonthYearBlock #dvClass label {
        float: left;
        width: 20%;
        font-size: 14px;
    }

    .MonthYearBlock #dvClass label {
        float: left;
        width: 20%;
        font-size: 14px;
    }

    .MonthYearBlock select {
        width: 50% !important;
        padding: 2px;
    }

    .MonthYearBlock #routebtn {
        float: left;
        margin: 0;
    }

    .MonthYearBlock .ThemeBtnStyle {
        float: right !important;
        margin: 3% !important;
        width: auto !important;
    }




    @media only screen and (min-width:300px) and (max-width:479px) {
        .register-box {
            width: 300px !important;
            margin: 7% auto;
            margin-top: 7%;
            margin-top: 3%;
        }
    }

    @media only screen and (min-width:300px) and (max-width:369px) {
        .StaffAttendenceBlock, .ClassAttendenceBlock {
            width: 100% !important;
        }

        .MonthYearBlock label {
            float: left;
            padding-right: 6px;
            padding-top: 6px;
            width: 76px;
        }

        .MonthYearBlock select {
            width: 60%;
            padding: 2px;
        }

        .MonthYearBlock .btn {
            width: 92px;
            letter-spacing: 0.5px;
            margin-left: 0px;
        }

        .MonthYearHeader .btn-group-sm {
            margin-top: -34px;
        }
    }

    @media only screen and (min-width:370px) and (max-width:549px) {
        .StaffAttendenceBlock, .ClassAttendenceBlock {
            width: 100% !important;
        }

        .MonthYearBlock label {
            float: left;
            padding-right: 6px;
            padding-top: 6px;
            width: 76px;
        }

        .MonthYearBlock select {
            width: 60%;
            padding: 2px;
        }

        .MonthYearBlock .btn {
            width: 92px;
            letter-spacing: 0.5px;
            margin-left: 76px;
        }

        .MonthYearHeader .btn-group-sm {
            margin-top: -34px;
        }

        #dvtblStaff_wrapper .col-sm-6 {
            width: 50%;
            float: left;
        }
    }

    @media only screen and (min-width:550px) and (max-width:1200px) {

        .MonthYearBlock label {
            float: left;
            padding-right: 6px;
            padding-top: 6px;
            width: 76px;
        }

        .MonthYearBlock select {
            width: 60%;
            padding: 2px;
        }

        .MonthYearBlock .btn {
            width: 92px;
            letter-spacing: 0.5px;
            margin-left: 76px;
        }

        .MonthYearHeader .btn-group-sm {
            margin-top: -106px;
        }

        #dvtblStaff_wrapper .col-sm-6 {
            width: 50%;
            float: left;
        }
    }
    /*thead{
    background-color: blue;
    background: linear-gradient(#3c8dbc,lightblue);
    color: white;
}*/



    /************************ 24 Oct 2017 **********************/
    table tr.active {
        background-color: #fff !important;
        background: transparent !important;
        color: #333 !important;
    }

    .table-striped.dataTable tbody tr.active:nth-child(2n+1) td, .table-striped.dataTable tbody tr.active:nth-child(2n+1) th {
        background-color: #f1f3f5 !important;
    }

    table tbody tr:hover {
        background-color: #aacce8 !important;
    }

    .table.dataTable tbody tr.active th > a, .table.dataTable tbody tr.active td > a {
        color: #333 !important;
    }

    .content-header {
        position: relative;
        padding: 0 !important;
    }

    .box {
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: none !important;
        margin-bottom: 20px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }

    .content {
        min-height: 250px;
        padding: 4px !important;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
    }



    /* table thead {
        background: rgba(73,155,234,1) !important;
        background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1))) !important;
        background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
        background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
        background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
        background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 ) !important;
    }

        table thead th {
            color: #fff !important;
        }

            table thead th:hover, table thead:hover, table thead th.active, table thead.active {
                color: #fff !important;
                background: rgba(73,155,234,1) !important;
                background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
                background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1))) !important;
                background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
                background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
                background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
                background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 ) !important;
            }*/

    /*
.icon-exam::before {
    content: "\e604";
}
.treeview a .glyphicon, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .glyphicon {
    display:block !important;
}
.treeview a  {
float:left !important;
min-height: 40px;
}
.treeview a .glyphicon {
float:left !important;
}
.sidebar-menu > li {
   
    width: 100% !important;
    float: left;
}
.skin-blue .sidebar-menu > li > a {
    
    width: 100%;
}
.sidebar-menu > li ul li  {
   
    width: 100% !important;
    float: left;
}
.skin-blue .sidebar-menu > li > a {
    
    width: 100%;
}*/
}

/**************************** 09 Sep. 2020 ********************/
.navbar .LogoBlock {
    width: 180px;
}

/*.navbar-default .navbar-nav > li > a:hover {
    color: #777;
    background-color: #434c4b;
    color: #fff;
}*/
.navbar-default .navbar-nav > li > a:hover {
    color: #777;
    background-color: #fff;
    color: #122d5c;
}

.navbar-default .navbar-nav > li > a.active {
    color: #777;
    background-color: #122d5c;
    color: #fff;
}
/*.DefaultImageBg {
    background-image: url(Images/default_image.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100%;
  
}*/
.DefaultImageBg #imgOrgLogo {
    width: 120px;
    float: right;
    background-image: url(Images/default_image.jpg);
    background-repeat: no-repeat;
    height: 120px;
    background-size: 80px;
    background-position: center;
}

.AddressHeightFixed textarea {
    height: 80px;
    resize: none;
    width: 100%;
}

.FloatRight {
    float: right;
}

.MarginTop6 {
    margin-top: 6px;
}


.navbar-nav .LightGreenBtn {
    background-color: #ecf0f5;
    display: inline-flex;
    flex-flow: column;
    vertical-align: top;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 6px 6px 6px 6px;
    float: left;
    width: 100%;
    height: 100%;
    color: #122d5c !important;
    /* background: linear-gradient(36deg, transparent 30%, 1em ), linear-gradient(to top, #434c4b 20%, #434c4b 20%, #434c4b 40%, #434c4b 40%, #434c4b 60%, #434c4b 60%, #434c4b 80%, #434c4b 80%);*/
    transition: all .6s ease-out;
}

    .navbar-nav .LightGreenBtn:hover {
        background-color: transparent !important;
        border-color: #fff;
        border-radius: 50px;
        padding: 6px 10px;
        margin: 6px 6px 6px 6px;
        float: left;
        color: #fff !important;
        transition: all .6s ease-out;
    }

.PaddingRight12 {
    padding-right: 12px;
}

.register-page .has-feedback .form-control {
    padding-right: 42.5px;
    width: 100% !important;
    max-width: 98%;
    padding: 20px 4%;
    border-radius: 6px;
    transition: all .4s ease;
    letter-spacing: 0.4px;
}

/*****************************************/
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    display: block;
    max-width: 100%;
    min-height: 517px;
}

.ReportTableBlock {
    width: 100%;
}

.Width33 {
    width: 33%;
}

.HomePage {
}

    .HomePage h1 {
        color: #454d4c;
        font-weight: 600;
        text-align: center;
    }

        .HomePage h1 span {
            color: #122d5c;
        }

    .HomePage h3 {
        text-align: center;
    }

.RelativePostion {
    position: relative;
}

.HomeEnquiryForm {
    position: absolute;
    top: 12%;
    width: 340px;
    right: 6%;
    background-color: /*#122d5c*/ #122d5c;
    border-radius: 4px;
}

    .HomeEnquiryForm h3 {
        color: #fff;
        border-bottom: 1px solid /*#454d4c*/ grey;
        text-align: center;
        width: 90%;
        margin: 16px auto;
        padding-bottom: 10px;
    }

    .HomeEnquiryForm form {
        width: 90%;
        float: left;
        margin: 4px 5%;
    }

    .HomeEnquiryForm input {
        width: 100%;
        margin-bottom: 6px;
        padding: 6px;
        letter-spacing: 0.5px;
    }

::placeholder {
    color: #454d4c;
    opacity: 0.5;
}

.HomeEnquiryForm textarea {
    width: 100%;
    margin-bottom: 6px;
    border-radius: 2px;
    padding: 6px;
    letter-spacing: 0.5px;
    height: 66px;
    resize: none;
    font: Arial;
}

.HomeEnquiryForm button[type="submit"] {
    background-color: #ecf0f5;
    color: /*#fff*/ #122d5c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    width: 100%;
    border-radius: 2px;
    font-size: 16px;
    margin-bottom: 10px;
    transition: all .4s ease;
    border: 1px solid transparent;
    box-shadow: 2px 2px 4px 0 #454d4c;
}

    .HomeEnquiryForm button[type="submit"]:hover {
        transition: all .4s ease;
        background-color: transparent;
        width: 100%;
        border: 1px solid #fff;
        color: #fff;
        letter-spacing: 1.5px;
        box-shadow: 2px 2px 4px 0 #fff;
    }



.PaddingSection {
    padding: 48px 0 16px !important;
}

.PaddingZero {
    padding: 0;
}



/********************** ProcuctList **************************/

.ProcuctList {
    padding: 26px 0;
    background-color: #f8f8f8;
    border-top: 1px solid silver;
}

.MarginTop26 {
    margin-top: 26px;
}

.ProcuctListBlock {
    float: left;
    width: 90%;
    text-align: center;
    height: 226px;
    border: 3px dashed #fff;
    margin: 5%;
    background-color: #454d4c;
    color: #fff;
    cursor: crosshair;
    transition: all .6s ease-out;
}

.ProcuctListBlockBlackColor {
    background-color: #212121;
}

.ProcuctListBlock .fa {
    font-size: 50px;
    margin: 18px 0;
    height: 50px;
}

.ProcuctListBlock h4 {
    font-size: 26px;
    width: 80%;
    margin: 0 auto;
    line-height: 34px;
}

.ProcuctListBlock:hover {
    float: left;
    width: 90%;
    text-align: center;
    height: 226px;
    border: 3px dashed #fff;
    margin: 5%;
    background-color: #122d5c;
    color: #fff;
    cursor: crosshair;
    transition: all .6s ease-out;
}
/********************** About **************************/

.AboutPageDesign {
    padding: 13px 0 48px;
}

    .AboutPageDesign h2 {
        color: #333;
        text-align: center;
        font-size: 46px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding-bottom: 30px;
        font-family: 'RalewayRegular';
    }

    .AboutPageDesign hr {
        background-color: #333;
        border-color: #333;
        max-width: 100px;
    }

    .AboutPageDesign p {
        font-size: 18px;
        line-height: 38px;
        color: #666;
        font-family: 'RalewayRegular';
        font-weight: normal;
        letter-spacing: 0.5px;
        margin-top: 38px;
    }


/********************* ImgBtnEffect **********************/
.ImgBtnEffect {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    float: left;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 30px;
    background-color: #333;
}

    .ImgBtnEffect img {
        opacity: 0.8;
        height: 230px;
    }

    .ImgBtnEffect h1 {
        position: absolute;
        top: 30%;
        color: #fff;
        width: 100%;
        text-align: center;
        text-shadow: 0 0 20px black;
    }

.OverEffect {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    top: 100%;
    width: 100%;
    height: 100%;
    transition: all .6s ease-out;
}

.ImgBtnEffect:hover .OverEffect {
    transition: all .6s ease-out;
    top: 0;
}

.OverEffect h3 {
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 40px;
    padding: 40px;
}
/************************* ContactSectionBlock ********************/

.pdfIcon {
    /* background-image: url(../Content/Images/Icons/pdf_icon.png);
    width: 24px;
    height: 24px;*/
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 26px;
    transition: all 1s ease-out;
    float: right;
    margin-right: 6px;
}

    .pdfIcon .fa {
        color: red;
    }

    .pdfIcon:hover {
        rotate: 360deg;
        transition: all 3s ease-out;
    }

.excelIcon {
    /* background-image: url(../Content/Images/Icons/pdf_icon.png);
    width: 24px;
    height: 24px;*/
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 26px;
    transition: all 1s ease-out;
    float: right;
    margin-right: 6px;
}

    .excelIcon .fa {
        /*color: red;*/
    }

    .excelIcon:hover {
        rotate: 360deg;
        transition: all 3s ease-out;
    }


.wordIcon {
    /* background-image: url(../Content/Images/Icons/pdf_icon.png);
    width: 24px;
    height: 24px;*/
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 26px;
    transition: all 1s ease-out;
    float: right;
    margin-right: 6px;
}

    .wordIcon .fa {
       /* color: red;*/
    }

    .wordIcon:hover {
        rotate: 360deg;
        transition: all 3s ease-out;
    }


.smallwordIcon {
    /* background-image: url(../Content/Images/Icons/pdf_icon.png);
    width: 24px;
    height: 24px;*/
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 16px;
    transition: all 1s ease-out;
    float: right;
    margin-right: 6px;
}

    .smallwordIcon .fa {
        /* color: red;*/
    }

    .smallwordIcon:hover {
        rotate: 360deg;
        transition: all 3s ease-out;
    }

.ContactDiv {
    background-color: #f9f9f9;
    float: left;
    width: 100%;
}

.ContactSectionBlock {
    background-color: #f8f8f8;
}

.MapDiv {
    float: left;
    width: 100%;
    height: 560px;
}

.FindUsDiv {
    background-color: /*#00aff0*/ /*#122d5c*/ #122d5c;
    color: #fff;
    float: left;
    width: 100%;
    color: #fff;
    padding: 24px 24px 170px 24px;
}

    .FindUsDiv .PaddingContact {
        padding-top: 52px;
    }

    .FindUsDiv h3, .EnquiryDiv h3 {
        color: #333;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 28px;
        letter-spacing: 0.5px;
        margin: 0 0 20px 0;
    }

    .FindUsDiv h3 {
        color: #fff;
    }

    .FindUsDiv h4 {
        color: #005677;
        font-weight: bold;
    }

    .FindUsDiv p {
    }

    .FindUsDiv a {
        color: #dfdfdf;
        text-decoration: none;
    }

        .FindUsDiv a:hover {
            color: #fff;
            text-decoration: none;
        }

.EnquiryDiv {
    padding: 24px;
    float: left;
    width: 100%;
}

    .EnquiryDiv .mandatory {
        float: right;
    }

    .EnquiryDiv input[type="text"], .EnquiryDiv input[type="email"] {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border-radius: 2px;
        border: 1px solid #b6b6b6;
        color: #333;
        max-width: 100%;
    }

        .EnquiryDiv input[type="text"]:focus, .EnquiryDiv input[type="email"]:focus, .EnquiryDiv textarea:focus {
            border: 1px solid #ff8000;
        }

    .EnquiryDiv textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border-radius: 2px;
        border: 1px solid #b6b6b6;
        color: #333;
        resize: none;
        height: 120px;
        max-width: 100%;
    }

    .EnquiryDiv .SubmitBtn {
        background-color: #ff8000;
        color: #fff;
        border: 1px solid #ff8000;
        font-size: 18px;
        padding: 10px 30px;
        float: right;
        border-radius: 2px;
        transition: transform .25s linear;
    }

        .EnquiryDiv .SubmitBtn:hover {
            background-color: transparent;
            color: #ff8000;
            border: 1px solid #ff8000;
            transition: transform .25s linear;
        }




.ContactFormStyle {
    background-color: #fff;
    padding: 8px 24px;
    margin-top: -100px;
    box-shadow: 0 0px 4px #000;
    margin-bottom: 32px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2px;
}

    .ContactFormStyle h3 {
        color: #333;
        font-family: 'Roboto-Light' !important;
        letter-spacing: 0.5px;
    }

    .ContactFormStyle .mandatory {
        color: #f55448;
        float: right;
        font-size: 12px;
        padding: 4px 0;
    }

    .ContactFormStyle .form-control {
        height: auto;
        margin-bottom: 6px;
        padding: 10px 12px;
    }

    .ContactFormStyle textarea {
        resize: none;
    }

    .ContactFormStyle .SubmitBtn {
        background-color: #00afef;
        border: 1px solid #00afef;
        color: #fff;
        padding: 6px 24px;
        border-radius: 4px;
        font-size: 14px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        transition: all 0.5s;
    }

        .ContactFormStyle .SubmitBtn:hover {
            background-color: #fff;
            border: 1px solid #333;
            color: #333;
            transition: all 0.5s;
        }


/******************************* ContactPersonBlock ******************************/

.ContactPersonBlock h3 {
    font-size: 20px;
}

.ContactPersonBlock .ImgBlock {
    transition: all 0.5s;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 2px 0 #333;
    margin: 10px 0;
}

    .ContactPersonBlock .ImgBlock:hover {
        transition: all 0.5s;
        transform: scale(1.06); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }

    .ContactPersonBlock .ImgBlock img {
    }

.ContactPersonBlock .LocationContact {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: maroon;
    width: 100%;
    position: relative;
    border-radius: 4px;
    padding: 14px 4px;
    line-height: 0;
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 18px;
}

    .ContactPersonBlock .LocationContact .fa {
        position: absolute;
        color: maroon;
        left: 46%;
        right: auto;
        bottom: -18px;
        font-size: 30px;
    }

.ContactPersonBlock .NameBlock {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    padding: 6px 0;
    letter-spacing: 0.5px;
    font-family: 'RalewayRegular';
}

.ContactPersonBlock .PhoneBlock {
    text-align: center;
    font-weight: 500;
    font-size: 17px;
    padding: 6px 0;
}

    /* .ContactPersonBlock .PhoneBlock a {
            background-color: #333;
            color: #dfdfdf;
            padding: 4px 8px;
            border-radius: 38px;
            transition: all 0.5s;
        }*/
    .ContactPersonBlock .PhoneBlock a {
        background-color: transparent;
        color: #dfdfdf;
        padding: 6px 10px;
        border-radius: 38px;
        transition: all 0.5s;
        border: 1px solid #fff;
    }

        .ContactPersonBlock .PhoneBlock a:hover {
            background-color: #fff;
            color: #333;
            transition: all 0.5s;
        }

.ContactPersonBlock .AdressBlock {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    padding: 10px 2px;
    font-family: arial;
    text-transform: capitalize;
    line-height: 26px;
    letter-spacing: 0.3px;
}
/***************************** ImgPopupStyle **************************/

.ImgPopupStyle {
}

    .ImgPopupStyle .close {
        position: absolute;
        right: -15px;
        z-index: 2;
        background-color: #333;
        color: #fff;
        opacity: 1;
        font-weight: 500;
        padding: 10px;
        border-radius: 39px;
        width: 40px;
        height: 40px;
        top: -20px;
        transition: all 0.5s;
    }

        .ImgPopupStyle .close:hover {
            background-color: #000;
            transition: all 0.5s;
        }

    .ImgPopupStyle .modal-body {
        padding: 0;
        position: relative;
    }

        .ImgPopupStyle .modal-body p {
            padding: 10px;
            margin: 0;
            min-height: 200px;
        }

.ImgPopupStyle {
}

.ImgPopupStyle {
}

.CodeImgBlock {
    min-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: center;
}

#Manage .CodeImgBlock {
    background-image: url("Images/Manage.jpg");
}

#Attendance .CodeImgBlock {
    background-image: url("Images/Attendance.jpg");
}

#Account .CodeImgBlock {
    background-image: url("Images/Account.jpg");
}

#Transport .CodeImgBlock {
    background-image: url("Images/Transport.jpg");
}

#SkyBooks .CodeImgBlock {
    background-image: url("Images/Books.jpg");
}

#Announcement .CodeImgBlock {
    background-image: url("Images/Announcement.jpg");
}

.small-box > .inner {
    padding: 10px;
    width: 95%;
    min-height: 100px;
    vertical-align: text-bottom;
}

.PaddingTop6Only {
    padding: 6px 15px !important;
}

.BorderDivMillageCalculatorStyle .OilCheckBox {
    position: absolute;
    left: -12px;
    top: -6px;
}

.OilNeedBlock {
    background-color: aliceblue;
    border-radius: 30px;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 600;
}

.PDFBtnStyle {
    background-image: url(Images/Icons/pdf_icon_1.png);
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -99999px;
}

.InlineBlock {
    display: inline-block;
}


.FloatImp {
    float: left !important;
}

.TimerCountDownDisplay {
    text-align: center;
    float: left;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.5px;
    width: 98%;
    background-color: red;
    margin: 0px 0% 2px 1%;
    line-height: normal;
    height: 20px;
}







@media only screen and (min-width:300px) and (max-width:639px) {
    .ContactPersonBlock {
    }

        .ContactPersonBlock .ImgBlock {
            margin: 22px 0;
        }

    .register-box {
        width: 80%;
    }

    .main-header .logo .logo-lg {
        display: block;
        color: #122d5c;
        font-weight: 600;
        font-style: italic;
        letter-spacing: 0.5px;
        font-size: 60px;
        padding: 10px;
    }

    .main-header .logo {
        -webkit-transition: width .3s ease-in-out;
        -o-transition: width .3s ease-in-out;
        transition: width .3s ease-in-out;
        display: block;
        float: left;
        height: auto !important;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        width: 230px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 0 15px;
        font-weight: 300;
        overflow: hidden;
    }
}

@media only screen and (min-width:300px) and (max-width:1200px) {

    /* .TimerCountDownDisplay {
        text-align: center;
        float: none;
        color: #fff;
        font-size: 23px;
        margin: 4px;
        line-height: normal;
        letter-spacing: 0.5px;
        position: absolute;
        background-color: red;
        width: 100%;
        top: 47px;
    }
    .TimerCountDownDisplayShow {
        margin-top: 10px;
        float: left;
    }*/
    .ColorBox .col-lg-4 {
        width: 33%;
        float: left;
    }

    .ColorBox .small-box > .inner {
        padding: 10px;
        width: 100%;
        min-height: 100px;
        vertical-align: text-bottom;
    }

    .ColorBox .small-box p {
        font-size: 17px;
        /* font-weight: bold; */
        letter-spacing: 0.5px;
    }

    .ResponsiveView1 {
        width: 100% !important;
        float: left;
    }

    .ResponsiveView2 {
        width: 50%;
        float: left;
    }

    .ResponsiveView40 {
        width: 40%;
        float: left;
    }

    .ResponsiveView60 {
        width: 60%;
        float: left;
    }

    .ResponsiveView80 {
        width: 80%;
        float: left;
    }

    .ResponsiveView20 {
        width: 20% !important;
        float: left;
    }

    .DisplayFloeRoot {
        display: flow-root;
    }

    .ResponsiveView3 {
        width: 33%;
        float: left;
    }

    .ResponsiveView601 {
        width: 30%;
        float: left;
    }

    .BorderDivMillageCalculatorStyle {
    }

        .BorderDivMillageCalculatorStyle .Line {
            width: 100% !important;
            float: left;
            border-left: none !important;
        }

            .BorderDivMillageCalculatorStyle .Line + .Line {
                border-top: 1px solid #333;
            }

            .BorderDivMillageCalculatorStyle .Line .row {
                width: 50%;
                float: left;
            }

        .BorderDivMillageCalculatorStyle .DataDetail {
        }

    .OilNeedBlock {
        background-color: aliceblue;
        border-top-left-radius: 23px;
        letter-spacing: 1px;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        right: 0px;
        top: 8px;
        padding: 4px 4px 4px 10px;
        border-bottom-left-radius: 23px;
        border: 1px solid #000;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .modal-dialog {
        width: 95%;
    }

    .Width94Pop {
        width: 94% !important;
    }

    .BorderDivMillageCalculatorStyle label {
        margin: 0;
        padding: 0;
    }

    .BorderDivMillageCalculatorStyle .Line .row {
        margin-bottom: 2px !important;
    }

    .MobileWith84 {
        width: 84%;
    }

    .DisplayInlineMobile {
        display: inline-flex;
    }

    .FloatLeftWidth {
        float: right !important;
        width: auto !important;
    }

    .TerminalBlock {
        margin-bottom: 10px;
    }

    .MonthYearBlock .TerminalBlock .Width70 {
        width: 81% !important;
    }

    .ResponsiveView40 label {
        width: 100% !important;
    }

    .MonthYearBlock .TerminalBlock .ResponsiveView15 {
        width: 15%;
    }

    .MonthYearBlock .TerminalBlock .ResponsiveView25 {
        width: 25% !important;
        padding-top: 7px;
    }

    .MonthYearBlock .TerminalBlock .ResponsiveView60 {
        width: 60% !important;
    }

        .MonthYearBlock .TerminalBlock .ResponsiveView60 .form-control {
            width: 56% !important;
        }

    .MonthYearBlock .ResponsiveView3 {
        width: 33% !important;
    }

        .MonthYearBlock .ResponsiveView3 .Width70 {
            width: 98% !important;
        }

    .ResponsiveView201 {
        padding: 0;
        margin-left: 30px;
        width: 92%;
    }

    .MonthYearBlock .ResponsiveView55 {
        width: 25% !important;
    }

    .MonthYearBlock .ResponsiveView55 {
        width: 55% !important;
        float: left;
    }

    .InlineBlock {
        display: inline-block;
        width: 100%;
    }

    .PaddingTop26 {
        padding-top: 26px;
    }

    .PostionAbsolute {
        top: 0;
        position: absolute;
    }

    .OverflowTableDataX .dataTables_wrapper {
        overflow-x: scroll;
        width: 99%;
    }
}

@media only screen and (min-width:640px) and (max-width:1200px) {
    .ContactPersonBlock {
    }

        .ContactPersonBlock .col-lg-3 {
            width: 48%;
            float: left;
            margin: 1%;
        }

        .ContactPersonBlock .ImgBlock {
            margin: 22px 0;
        }

    .ProcuctList .col-lg-4 {
        width: 48%;
        float: left;
        margin: 1%;
    }

    .register-box {
        width: 600px;
        margin: 7% auto;
        margin-top: 3%;
    }

    .WhiteBox .Width100 {
        width: 98%;
    }
}

@media only screen and (min-width:768px) and (max-width:1200px) {
    .MonthYearBlock .TerminalBlock .Width70 {
        width: 78% !important;
    }

    .MonthYearBlock .TerminalBlock {
        float: left;
        width: 62% !important;
    }

    .MonthYearBlock .btn {
        margin-left: 0 !important;
    }

    .FloatLeftWidth .AddBtnStyle {
        width: auto !important;
    }

    .MonthYearBlock .FloatLeftWidth {
        float: right !important;
        width: 20% !important;
    }

    .MonthYearBlock .TerminalBlock {
        float: left;
        width: 100% !important;
    }
}

@media only screen and (min-width:900px) and (max-width:1200px) {
    .ResponsiveView50 {
        float: left;
        width: 50% !important;
    }

    .ResponsiveView201 {
        padding: 0;
        margin-left: 0;
        width: 92%;
    }
}
