/*===== CSS for Portal of Staffio=====*/

/* Emmbed Font */
@font-face {
    font-family: 'promptregular';
    src: url('fonts/prompt-regular-webfont.eot');
    src: url('fonts/prompt-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/prompt-regular-webfont.woff2') format('woff2'),
        url('fonts/prompt-regular-webfont.woff') format('woff'), url('fonts/prompt-regular-webfont.ttf') format('truetype'),
        url('fonts/prompt-regular-webfont.svg#promptregular') format('svg'); font-weight: normal;
    font-style: normal;
}

/* Main Tag */
body {
    padding-top: 75px;
    background-image: url("images/subtle_dots.png");
    background-repeat: repeat;
    font-family: 'promptregular',sans-serif; /* Call Emmbed Font */
    position: relative; /*Scroll Spy reqired*/
}

hr {
    margin: 9px 0px;
}

/* Float Align */
.fClear {
    clear: both;
    line-height: 0;
    height: 0;
    font-size: 1px;
}

.fLeft {
    float: left;
}

.fRight {
    float: right;
}

/* Align */
.txtCenter {
    text-align: center;
}

.txtLeft {
    text-align: left;
}

.txtRight {
    text-align: right;
}
/* Vertical Align */
.txtvTop {
    vertical-align: top;
}

.txtvMiddle {
    vertical-align: middle;
}

.txtvBottom {
    vertical-align: bottom;
}
/* Mixed Align */
.txtCentervTop {
    text-align: center;
    vertical-align: top;
}

.txtCentervMiddle {
    text-align: center;
    vertical-align: middle;
}

.txtCentervBottom {
    text-align: center;
    vertical-align: bottom;
}

.txtLeftvTop {
    text-align: left;
    vertical-align: top;
}

.txtLeftvMiddle {
    text-align: left;
    vertical-align: middle;
}

.txtLeftvBottom {
    text-align: left;
    vertical-align: bottom;
}

.txtRightvTop {
    text-align: right;
    vertical-align: top;
}

.txtRightvMiddle {
    text-align: right;
    vertical-align: middle;
}

.txtRightvBottom {
    text-align: right;
    vertical-align: bottom;
}


.hide {
    display: none;
}

.show {
    display: block;
}

/*Text Color*/
.orangeTxt {
    color: #EF4924;
}

/* Text Style */
.iTxt {
    font-style: italic;
}

.nTxt {
    font-style: normal;
}

.obTxt {
    font-style: oblique;
}

.bTxt {
    font-weight: bold;
}



/* Class for Portal */
.alertBell {
    font-size: 25px;
    vertical-align: middle;
    margin-top: 8px;
}

    .alertBell > .badge {
        position: relative;
        left: -16px;
    }

        .alertBell > .badge.red {
            background-color: red;
        }

.rightPanel {
    margin: 12px 10px;
    display: inline-flex;
}

.loginDropdown {
    background-color: #D1D2D4;
    color: #fff;
    letter-spacing: 2px;
    min-width: 220px;
    text-align: center;
    margin: 8px 0px 8px 25px;
}

    .loginDropdown > span.caret {
        margin-left: 25px;
    }


.mainMenu {
    position: relative;
    top: 13px;
    right: 35px;
    font-weight: bold;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

    .mainMenu.small {
        position: relative;
        top: -14px;
        right: 35px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .mainMenu > li {
        margin-top: 20px;
    }

        .mainMenu > li:hover {
            border-bottom: 3px solid red;
        }

        .mainMenu > li.active {
            border-bottom: 3px solid red;
        }

        .mainMenu > li > a {
            padding: 5px 15px;
        }

            .mainMenu > li > a:hover {
                padding: 5px 15px;
                background-color: transparent;
            }


.Main_Section {
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.7));
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #cccccc;
    height: 88vh;
}

.Main_Section_Policy {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.Secound_Section {
    margin: 100px 0px;
    height: 88vh;
}

.HRM-Section {
    margin-top: 32px;
}

.Contact_Section {
    background-color: #005081;
}

.Contact_innerSection {
    padding: 15px 0px;
    color: white;
    font-weight: normal;
    font-size: 12px;
}

.contactIcon {
    font-size: 28px;
}

.company_name {
    margin: 0px;
}

.footerThum-Section {
    margin-top: 0px;
}

.footerThum {
    margin: 0px 0px 25px 5px;
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.7;
}

.e-New_Subcribe {
    padding: 25px 0px 0px 150px;
    background-image: url('images/img-Thumb3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 135px;
    /*opacity: .7;      by jai*/
}

.e-New_Subcribe_input {
    border-radius: 0px;
}

.countVisitor {
    font-size: 16px;
    margin-top: 10px;
}

.countSquare {
    background-color: white;
    padding: 3px 8px;
    color: black;
}

.fCompany_Section {
    margin: 20px 0px;
    color: #bbbbbb;
}

    .fCompany_Section a {
        color: #bbbbbb;
    }
/* Panel Base*/
.Panel {
    width: 100%;
    height: 160px;
    padding: 20px;
    background-color: #fff;
    margin: 8px 0px;
    cursor: pointer;
    border: 1px solid #000;
    /*border: 0.1px solid rgba(221, 221, 221, 0.7);*/ /*jai*/
}

.panelCircle {
    width: 110px;
    height: 110px;
    border: 1px solid #000;
    border-radius: 100px;
    font-size: 60px;
    padding: 11px;
    margin: 10px 5px;
}

.panelDescription {
    /*width: 180px;*/
    width: 100%;
    height: 130px;
    padding: 15px 0px;
    text-align: left;
}

/* Theme of Panel*/
/*Organization Panel*/
.Panel.Organization_panel {
    /*width: 100%;
    height: 170px;
    padding: 20px;
    background-color: #fff;
    margin: 10px 0px;*/
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: 2px solid #47BDA1;
    /* border-radius: 35px;*/ /*jai*/
}

    .Panel.Organization_panel:hover {
        background-color: #47BDA1;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Organization_panel .panelCircle {
        width: 110px;
        height: 110px;
        border: 2px solid #47BDA1;
        border-radius: 100px;
        color: #47BDA1;
        font-size: 60px;
        padding: 9px;
        margin: 10px 5px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Organization_panel:hover .panelCircle {
        background-color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Organization_panel:hover .panelDescription {
        color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

/*Personal Panel*/
.Panel.Personal_panel {
    /*width: 100%;
    height: 170px;
    padding: 20px;
    background-color: #fff;
    margin: 10px 0px;*/
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: 2px solid #4BC4D2;
    /* border-radius: 35px;*/ /*jai*/
}

    .Panel.Personal_panel:hover {
        background-color: #33CCCC;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Personal_panel .panelCircle {
        width: 110px;
        height: 110px;
        border: 2px solid #4BC4D2;
        border-radius: 100px;
        color: #4BC4D2;
        font-size: 60px;
        padding: 11px;
        margin: 10px 5px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Personal_panel:hover .panelCircle {
        background-color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Personal_panel:hover .panelDescription {
        color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

/*ESS Panel*/
.Panel.ESS_panel {
    /*width: 100%;
    height: 170px;
    padding: 20px;
    background-color: #fff;
    margin: 10px 0px;*/
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: 2px solid #37b0a7;
    /* border-radius: 35px;*/ /*jai*/
}

    .Panel.ESS_panel:hover {
        background-color: #33CC99;
        color: #33CC99;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.ESS_panel .panelCircle {
        width: 110px;
        height: 110px;
        border: 2px solid #37b0a7;
        border-radius: 100px;
        color: #33CC99;
        font-size: 60px;
        padding: 11px;
        margin: 10px 5px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.ESS_panel:hover .panelCircle {
        background-color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.ESS_panel:hover .panelDescription {
        color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

/*Time Attendance Panel*/
.Panel.TimeAttendance_panel {
    /*width: 100%;
    height: 170px;
    padding: 20px;
    background-color: #fff;
    margin: 10px 0px;*/
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: 2px solid #09A9E0;
    /* border-radius: 35px;*/ /*jai*/
}

    .Panel.TimeAttendance_panel:hover {
        background-color: #09A9E0;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.TimeAttendance_panel .panelCircle {
        width: 110px;
        height: 110px;
        border: 2px solid #09A9E0;
        border-radius: 100px;
        color: #09A9E0;
        font-size: 60px;
        padding: 8px;
        margin: 10px 5px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.TimeAttendance_panel:hover .panelCircle {
        background-color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.TimeAttendance_panel:hover .panelDescription {
        color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }
/*Leave Panel*/
.Panel.Leave_panel {
    /*width: 100%;
    height: 170px;
    padding: 20px;
    background-color: #fff;
    margin: 10px 0px;*/
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: 2px solid #2380C3;
    /* border-radius: 35px;*/ /*jai*/
}

    .Panel.Leave_panel:hover {
        background-color: #2380C3;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Leave_panel .panelCircle {
        width: 110px;
        height: 110px;
        border: 2px solid #2380C3;
        border-radius: 100px;
        color: #2380C3;
        font-size: 60px;
        padding: 11px;
        margin: 10px 5px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Leave_panel:hover .panelCircle {
        background-color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Leave_panel:hover .panelDescription {
        color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

/*Payroll Panel*/
.Panel.Payroll_panel {
    /*width: 100%;
    height: 170px;
    padding: 20px;
    background-color: #fff;
    margin: 10px 0px;*/
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    border: 2px solid #8FCA70;
    /* border-radius: 35px;*/ /*jai*/
}

    .Panel.Payroll_panel:hover {
        background-color: #8FCA70;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Payroll_panel .panelCircle {
        width: 110px;
        height: 110px;
        border: 2px solid #8FCA70;
        border-radius: 100px;
        color: #8FCA70;
        font-size: 60px;
        padding: 11px;
        margin: 10px 5px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Payroll_panel:hover .panelCircle {
        background-color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .Panel.Payroll_panel:hover .panelDescription {
        color: #fff;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

.LoginBtn {
    background-color: #EF4924;
    border: 0px;
    color: white;
    border-radius: 30px;
    width: 115px;
    height: 40px;
    margin-bottom: 7px;
    background: -webkit-linear-gradient(#EF4924,#fff);
    background: -moz-linear-gradient(#EF4924,#fff);
    background: -o-linear-gradient(#EF4924,#fff);
    background: linear-gradient(#EF4924,#fff);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    background-size: 1px 300px;
}

    .LoginBtn:hover {
        background-position: 100px;
    }

.forgotPass-link {
    font-size: 12px;
    color: black;
}

.MainCircle {
    background-color: #005081;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    padding: 10px 15px;
    border-radius: 100px;
    color: white;
    position: relative;
    top: 30%;
    left: calc(50% - 85px);
}

    .MainCircle > .MC-description {
        line-height: 23px;
    }

.clickCircle {
    /*background-color: #EF4924;*/
    width: 60px;
    height: 60px;
    font-size: 40px;
    border-radius: 80px;
    padding-top: 2px;
    position: relative;
    left: 56px;
    bottom: 24px;
    margin-top: -10px;
}



    .clickCircle > a {
        color: white;
        text-decoration: none;
    }

.fistPage-Maintxt {
    position: relative;
    top: 230px;
    color: white;
    text-shadow: 3px 4px 2px rgb(95, 95, 95);
}


/* Modal */
.Login_Modal {
    width: 295px;
    height: 230px;
    padding: 35px 20px;
    border-top: 3px solid red;
    position: fixed;
    top: 77px;
    right: 269px;
    background-color: #fff;
    z-index: 1030;
    box-shadow: 0px 3px 6px grey;
}

/* Custmize Bootstrap Class */
.navbar {
    height: 80px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.navbar-default {
    background-color: #fff;
    border-color: #D1D2D4;
    border-bottom-width: 2px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.navbar-small {
    height: 50px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.navbar-default-small {
    background-color: #e2e2e2;
    box-shadow: 0px 3px 5px gray;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

    .navbar-default-small .navbar-nav > li > a {
        color: #777;
    }

        .navbar-default-small .navbar-nav > li > a:hover {
            color: #333;
            background-color: transparent;
        }

.navbar-brand {
    float: left;
    height: 100%;
    padding: 15px 40px;
    font-size: 18px;
    line-height: 20px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.navbar-brand-small {
    float: left;
    height: 50px;
    padding: 0px 0px 0px 40px;
    font-size: 18px;
    line-height: 20px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.colortone-red1, .colortone-red1 .panelCircle {
    border-color: #FD8589 !important;
    color: #FD8589 !important;
}

    .colortone-red1:hover {
        background-color: #FD8589 !important;
    }

.colortone-red2, .colortone-red2 .panelCircle {
    border-color: #F4666A !important;
    color: #F4666A !important;
}

    .colortone-red2:hover {
        background-color: #F4666A !important;
    }


.colortone-red3, .colortone-red3 .panelCircle {
    border-color: #DD4C50 !important;
    color: #DD4C50 !important;
}

    .colortone-red3:hover {
        background-color: #DD4C50 !important;
    }

.colortone-red4, .colortone-red4 .panelCircle {
    border-color: #CA363A !important;
    color: #CA363A !important;
}

    .colortone-red4:hover {
        background-color: #CA363A !important;
    }

.colortone-red5, .colortone-red5 .panelCircle {
    border-color: #AE2428 !important;
    color: #AE2428 !important;
}

    .colortone-red5:hover {
        background-color: #AE2428 !important;
    }


.colortone-red6, .colortone-red6 .panelCircle {
    border-color: #961d21 !important;
    color: #961d21 !important;
}

    .colortone-red6:hover {
        background-color: #961d21 !important;
    }

.colortone-blue0, .colortone-blue0 .panelCircle {
    border-color: #8aa5de !important;
    color: #8aa5de !important;
}

    .colortone-blue0:hover {
        background-color: #8aa5de !important;
    }

.colortone-blue1, .colortone-blue1 .panelCircle {
    border-color: #6E88C0 !important;
    color: #6E88C0 !important;
}

    .colortone-blue1:hover {
        background-color: #6E88C0 !important;
    }

.colortone-blue2, .colortone-blue2 .panelCircle {
    border-color: #4E6AA4 !important;
    color: #4E6AA4 !important;
}

    .colortone-blue2:hover {
        background-color: #4E6AA4 !important;
    }

.colortone-blue3, .colortone-blue3 .panelCircle {
    border-color: #3D5995 !important;
    color: #3D5995 !important;
}

    .colortone-blue3:hover {
        background-color: #3D5995 !important;
    }

.colortone-blue4, .colortone-blue4 .panelCircle {
    border-color: #2F4B88 !important;
    color: #2F4B88 !important;
}

    .colortone-blue4:hover {
        background-color: #2F4B88 !important;
    }

.colortone-blue5, .colortone-blue5 .panelCircle {
    border-color: #223C75 !important;
    color: #223C75 !important;
}

    .colortone-blue5:hover {
        background-color: #223C75 !important;
    }

.colortone-blue6, .colortone-blue6 .panelCircle {
    border-color: #1b305e !important;
    color: #1b305e !important;
}

    .colortone-blue6:hover {
        background-color: #1b305e !important;
    }




.colortone-green1, .colortone-green1 .panelCircle {
    border-color: #78DB73 !important;
    color: #78DB73 !important;
}

    .colortone-green1:hover {
        background-color: #78DB73 !important;
    }

.colortone-green2, .colortone-green2 .panelCircle {
    border-color: #8FCA70 !important;
    color: #59C753 !important;
}

    .colortone-green2:hover {
        background-color: #8FCA70 !important;
    }

.colortone-green3, .colortone-green3 .panelCircle {
    border-color: #44B43E !important;
    color: #44B43E !important;
}

    .colortone-green3:hover {
        background-color: #44B43E !important;
    }

.colortone-green4, .colortone-green4 .panelCircle {
    border-color: #32A52C !important;
    color: #32A52C !important;
}

    .colortone-green4:hover {
        background-color: #32A52C !important;
    }

.colortone-green5, .colortone-green5 .panelCircle {
    border-color: #238E1E !important;
    color: #238E1E !important;
}

    .colortone-green5:hover {
        background-color: #238E1E !important;
    }


.colortone-green6, .colortone-green6 .panelCircle {
    border-color: #1b6f17 !important;
    color: #1b6f17 !important;
}

    .colortone-green6:hover {
        background-color: #1b6f17 !important;
    }

.colortone-greenblue1, .colortone-greenblue1 .panelCircle {
    border-color: #5FB4B1 !important;
    color: #5FB4B1 !important;
}

    .colortone-greenblue1:hover {
        background-color: #5FB4B1 !important;
    }

.colortone-greenblue2, .colortone-greenblue2 .panelCircle {
    border-color: #3E9592 !important;
    color: #3E9592 !important;
}

    .colortone-greenblue2:hover {
        background-color: #3E9592 !important;
    }

.colortone-greenblue3, .colortone-greenblue3 .panelCircle {
    border-color: #2E8784 !important;
    color: #2E8784 !important;
}

    .colortone-greenblue3:hover {
        background-color: #2E8784 !important;
    }

.colortone-greenblue4, .colortone-greenblue4 .panelCircle {
    border-color: #217C78 !important;
    color: #217C78 !important;
}

    .colortone-greenblue4:hover {
        background-color: #217C78 !important;
    }

.colortone-greenblue5, .colortone-greenblue5 .panelCircle {
    border-color: #166A67 !important;
    color: #166A67 !important;
}

    .colortone-greenblue5:hover {
        background-color: #166A67 !important;
    }

.colortone-greenblue6, .colortone-greenblue6 .panelCircle {
    border-color: #115250 !important;
    color: #115250 !important;
}

    .colortone-greenblue6:hover {
        background-color: #115250 !important;
    }

.colortone-custom1, .colortone-custom1 .panelCircle {
    border-color: #f2ae33 !important;
    color: #f2ae33 !important;
}

    .colortone-custom1:hover {
        background-color: #f2ae33 !important;
    }

.colortone-custom2, .colortone-custom2 .panelCircle {
    border-color: #dc8b27 !important;
    color: #dc8b27 !important;
}

    .colortone-custom2:hover {
        background-color: #dc8b27 !important;
    }

.colortone-custom3, .colortone-custom3 .panelCircle {
    border-color: #c3681b !important;
    color: #c3681b !important;
}

    .colortone-custom3:hover {
        background-color: #c3681b !important;
    }

.colortone-custom4, .colortone-custom4 .panelCircle {
    border-color: #1BA977 !important;
    color: #1BA977 !important;
}

    .colortone-custom4:hover {
        background-color: #1BA977 !important;
    }

.colortone-custom5, .colortone-custom5 .panelCircle {
    border-color: #138b6a !important;
    color: #138b6a !important;
}

    .colortone-custom5:hover {
        background-color: #138b6a !important;
    }

.colortone-custom6, .colortone-custom6 .panelCircle {
    border-color: #10694b !important;
    color: #10694b !important;
}

    .colortone-custom6:hover {
        background-color: #10694b !important;
    }

.colortone-custom7, .colortone-custom7 .panelCircle {
    border-color: #1e92ac !important;
    color: #1e92ac !important;
}

    .colortone-custom7:hover {
        background-color: #1e92ac !important;
    }

.colortone-custom8, .colortone-custom8 .panelCircle {
    border-color: #016a92 !important;
    color: #016a92 !important;
}

    .colortone-custom8:hover {
        background-color: #016a92 !important;
    }

.colortone-custom9, .colortone-custom9 .panelCircle {
    border-color: #00416c !important;
    color: #00416c !important;
}

    .colortone-custom9:hover {
        background-color: #00416c !important;
    }


@media (max-width: 767px) {
    .panelCircle {
        display: none;
    }
}

@media (min-width: 991px ) and (max-width: 1100px) {
    .Panel {
        padding: 20px 12px;
    }

        .Panel p {
            font-size: 12px;
        }

        .Panel h4 {
            font-size: 16px;
        }

    .move {
        padding: 0px 0px 0px 18px !important;
    }
}



.sideMenu-wrapper {
    height: 100%;
    width: 100%;
    z-index: 3200;
    background-color: rgba(0, 0, 0, 0.22);
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

.logo {
    height: 55px;
    position: absolute;
    margin: 10px 0px;
    left: 15px;
}

input:active,
input:focus {
    outline: 0;
    box-shadow: none !important;
}

.form-control {
    box-shadow: none !important;
    resize: none;
}

    .form-control:active,
    .form-control:focus {
        box-shadow: none;
    }

    .form-control:not(.fc-alt) {
        border-left: 0;
        border-right: 0;
        border-top: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0;
    }

        .form-control:not(.fc-alt).auto-size {
            padding-top: 6px;
        }

.form-group {
    margin-bottom: 25px;
}



/*
 * Input Group Addon
 */

.input-group .input-group-addon {
    font-size: 18px;
    padding: 0;
    min-width: 45px;
}

    .input-group .input-group-addon > .zmdi {
        position: relative;
        top: 3px;
    }

.input-group-lg .input-group-addon {
    font-size: 20px;
}

.input-group-sm .input-group-addon {
    font-size: 16px;
}

.input-group .input-group-addon-edit {
    background-color: #fff;
    border: 0px solid #ccc;
    border-radius: 0px;
    font-size: 18px;
    padding: 0;
    min-width: 45px;
}


/*
 * Input Feilds
 */

.fg-line {
    position: relative;
    vertical-align: top;
}

    .fg-line:not(.form-group) {
        display: inline-block;
        width: 100%;
    }

    .fg-line .form-control:disabled {
        color: #9d9d9d;
        background: transparent;
    }

    .fg-line:not(.disabled):after,
    .fg-line:not(.readonly):after {
        position: absolute;
        z-index: 3;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        content: "";
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all;
        -o-transition: all;
        transition: all;
        -webkit-transition-duration: 300ms;
        transition-duration: 300ms;
    }

    .fg-line:not([class*=has-]):after {
        background: #2196f3;
    }

    .fg-line.readonly .form-control {
        color: #9d9d9d;
        background: transparent;
    }

    .fg-line.fg-toggled:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

.fg-float {
    margin-top: 2px;
    position: relative;
}

    .fg-float .form-control {
        position: relative;
        background: transparent;
        z-index: 1;
    }

        .fg-float .form-control::-moz-placeholder {
            color: #ffffff;
            opacity: 1;
        }

        .fg-float .form-control:-ms-input-placeholder {
            color: #ffffff;
        }

        .fg-float .form-control::-webkit-input-placeholder {
            color: #ffffff;
        }

    .fg-float .fg-label {
        -webkit-transition: all;
        -o-transition: all;
        transition: all;
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
        position: absolute;
        top: 5px;
        font-weight: 400;
        color: #959595;
        pointer-events: none;
        z-index: 0;
        left: 0;
        white-space: nowrap;
    }

    .fg-float .fg-toggled .fg-label {
        top: -20px;
        font-size: 11px;
    }

.control-label {
    font-weight: normal;
}



@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -80%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.3s;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1.8s;
}