/* 
    Desktop Screen Resolution 2017
    1366x768 30%
    1920x1080 17%
    1440x900 7%

    All Platform
    360x640 22%
    1366x768 13%
    1920x1080 8%
*/
body {
    /*padding: 12px 5px 12px 5px;*/
    /*padding: 0px 12px 0px 12px;*/
    cursor: default;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

    body.loading, body.loading * {
        cursor: progress !important;
    }


.Heading, .LoginHeading {
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    color: #fff;
    display: inline-block;
    width: 100%;
    padding: 10px 16px;
    /*font-size: 18px;*/
    font-size: 130%;
    line-height: 1.3333333;
    border-radius: 6px;
}

.LoginHeading {
    max-width: 1210px;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .LoginHeading {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
}

.MobileHeading {
    /*margin-top: -12px;*/
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    color: #fff;
    /*display: inline-block;*/
    display: flex;
    align-items: center;
    width: 100%;
    /*padding: 10px 16px;*/
    padding: 0;
    /*font-size: 18px;*/
    font-size: 130%;
    line-height: 1.3333333;
    /*border-radius: 6px;*/
    /*max-width: 1210px;*/
    height: 32px;
}

.MobileMenu {
    width: 80%;
    max-width: 288px;  /* 360x80% */
    margin-top: 5px;
    margin-left: 0;
    border-radius: 0;
}

.WholeDiv {
    margin: 0 auto;
    /*max-width: 960px;*/
    max-width: 1210px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .WholeDiv {
        margin-left: 12px;
        margin-right: 12px;
    }
}


@media (max-width: 992px) {
    .RightPane {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}

.WholePage {
    margin: 0 auto;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    /*text-align: center;*/
}

.WholeTable {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-width: 0;
    max-width: 960px;
}


.centered {
    text-align: center;
}

    .centered table {
        margin: 0 auto;
        text-align: left;
    }


.ErrorMessage {
    font-size: small;
    font-weight: 600;
    color: #FF0033;
    vertical-align: middle;
    padding: 2px;
    height: 26px;
    margin: 0;
    margin-left: 14px;
}


.BlueLine {
    border-top: solid 1px #6699CC;
    margin: 0 auto;
    max-width: 960px;
}


.Header1 {
    font-size: large;
    max-width: 1024px;
    padding: 10px 0 0 0;
    text-align: center;
    color: #212121;
    margin: 0 auto;
}

.Header2 {
    font-size: large;
    max-width: 1024px;
    padding: 10px 0 0 0;
    text-align: center;
    /*color: #5F5F5F;*/
    margin: 0 auto;
}


.btn-space {
    margin-right: 5px;
}

.btn-margin-bottom {
    margin-bottom: 5px;
}


/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext {
    font-size: x-small;
    color: #212121;
    padding: 2px 0 0 0;
    text-align: center;
    margin: 0 auto;
}

.leftsmalltext {
    font-size: x-small;
    color: #212121;
    text-align: left;
    margin-left: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .leftsmalltext {
        font-size: 100%;
        color: #212121;
        text-align: left;
        margin: 0 auto;
    }
}

.rightsmalltext {
    font-size: x-small;
    color: #212121;
    text-align: right;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .rightsmalltext {
        font-size: 100%;
        color: #212121;
        text-align: right;
        margin: 0 auto;
    }
}

/*.middletext {
    font-size: 90%;
}*/

.LoginPageMessage {
    font-size: small;
    min-height: 150px;
}


.smallCalendarDiv {
    text-align: left;
    padding: 0;
    display: block;
    visibility: visible;
    float: none;
    margin-top: 10px;
}

.smallCalendar {
    border-width: 1px;
    border-style: solid;
    /*border-color: #6699CC;*/
    border-collapse: collapse;
    background-color: #fdfdfd;
}

    .smallCalendar a {
        text-decoration: none;
    }

    .smallCalendar .cTitle {
        /*font-size: 8pt;*/
        font-weight: 600;
        /*background-color: #6699CC;*/
        height: 30px;
        font-size: 130%;
    }

    .smallCalendar .cDayHeader {
        background-color: #B7CEE2;
        font-weight: 600;
        font-size: 120%;
        height: 30px;
        text-align: center;
    }

    .smallCalendar .cDay {
        height: 30px;
        font-size: 120%;
    }


.EventCalendar a {
    text-decoration: none;
}

.EventCalendar .EventCalendarDayHeader {
    height: 30px;
    text-align: center;
    background-color: #B7CEE2;
}


.EventCalendar .EventCalendarTitle {
    color: #fdfdfd;
    border-width: 1px;
    font-size: 120%;
    height: 50px;
    line-height: 50px;
}

.EventCalendar .EventCalendarNextPrev {
    font-size: 250%;
    height: 50px;
    line-height: 50px;
    padding: 5px 5px;
}

.EventCalendar .EventCalendarDay {
    height: 90px;
    /*padding: 4px 4px;*/
    /*padding: 1px 1px;*/
    padding: 0;
}


#ddblueblockmenu {
    border-style: solid;
    border-width: 2px;
    border-bottom-width: 1px;
    text-align: left;
    border-radius: 4px;
}

    #ddblueblockmenu .menutitle {
        color: #fdfdfd;
        padding: 15px 0;
        padding-left: 10px;
        font: bold 90%;
    }

    #ddblueblockmenu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        line-height: 120%;
    }

@media (max-width: 992px) {
    #ddblueblockmenu ul {
        line-height: 200%;
    }
}


#ddblueblockmenu li a {
    display: block;
    padding: 4px 0;
    padding-left: 7px;
    text-decoration: none;
    color: #555555;
    background-color: #fdfdfd;
}



@media (max-width: 992px) {
    #ddblueblockmenu {
        border-radius: 0;
    }
}


.Calendar_Cell_Red, .Calendar_Cell_Green, .Calendar_Cell_Blue, .Calendar_Cell_Cyan, .Calendar_Cell_Teal, .Calendar_Cell_Megenta, .Calendar_Cell_Orange, .Calendar_Cell_Mauve, .Calendar_Cell_Olive, .Calendar_Cell_Brown {
    color: #fdfdfd;
    /*border: 1px solid #fdfdfd;*/
    border: none;
    padding: 5px;
    /*font-size: 12px;*/
    font-size: 100%;
    /*line-height: 16px;*/
    line-height: 1.3333333;
    overflow: auto;
    border-radius: 4px;
    margin: 2px 2px 0 2px;
}
/* 992px */
@media (max-width: 992px) {
    .Calendar_Cell_Red, .Calendar_Cell_Green, .Calendar_Cell_Blue, .Calendar_Cell_Cyan, .Calendar_Cell_Teal, .Calendar_Cell_Megenta, .Calendar_Cell_Orange, .Calendar_Cell_Mauve, .Calendar_Cell_Olive, .Calendar_Cell_Brown {
        padding: 2px;
        /*font-size: 8px;*/
        font-size: 80%;
        /*line-height: 12px;*/
        margin: 1px 1px 1px 1px;
        word-wrap: break-word;
        border-radius: 2px;
    }
}


.Calendar_Cell_Red {
    background-color: #ff4444;  /*#FF4081;*/
}

.Calendar_Cell_Green {
    background-color: #4CAF50;
}

.Calendar_Cell_Blue {
    background-color: #3F51B5;
}


    .Calendar_Cell_Blue a, .Calendar_Cell_Cyan a, .Calendar_Cell_Teal a, .Calendar_Cell_Megenta a, .Calendar_Cell_Orange a {
        text-decoration: underline;
        text-decoration-color: #fdfdfd;
        color: #fdfdfd !important;
    }

        .Calendar_Cell_Blue a:hover, .Calendar_Cell_Cyan a:hover, .Calendar_Cell_Teal a:hover, .Calendar_Cell_Megenta a:hover, .Calendar_Cell_Orange a:hover {
            color: #DEDEDE !important;
        }


.Calendar_Cell_Cyan {
    background-color: #1BA1E2;
}


.Calendar_Cell_Teal {
    background-color: #00ABA9;
}


.Calendar_Cell_Megenta {
    background-color: #D80073;
}


.Calendar_Cell_Orange {
    background-color: #FA6800;
}


.Calendar_Cell_Mauve {
    background-color: #76608A;
}

.Calendar_Cell_Olive {
    background-color: #6D8764;
}

.Calendar_Cell_Brown {
    background-color: #825A2C;
}


.WrappedText {
    word-break: break-all;
    word-wrap: break-word;
    min-width: 100px;
    max-width: 300px;
}


.form-horizontal .control-label.text-left {
    text-align: left;
}

.form-horizontal .control-label.text-center {
    text-align: center;
}

.form-horizontal .control-label.bold {
    font-weight: 600;
    color: #414141 !important;
}

.form-horizontal .control-label.red {
    font-weight: 600;
    color: #d9534f;
}

.maxwidth400 {
    max-width: 400px;
}

.centered {
    position: fixed;
    left: 50%;
    margin-left: -500px;
}

.ui-datepicker {
    z-index: 99 !important;
}

/* JL20150226 - for From Time and In Time Inline */
.form-inline .form-control {
    display: inline;
    /*width: auto;*/
}

.form-inline .control-label {
    display: inline;
    /*width: auto;*/
    vertical-align: bottom;
    color: red !important;
}


.form-inline .button {
    display: inline;
    /*width: 30%;*/
}

.form-inline .button2 {
    display: inline;
    /*width: 30%;*/
}

.gridpager, .gridpager td {
    text-align: center !important;
}


    .gridpager a, .gridpager span {
        color: #fdfdfd !important;
        font-size: 150%;
        padding: 4px 4px;
        margin: 2% auto;
    }

    .gridpager span {
        font-size: 180%;
        font-weight: bold;
    }

    .gridpager a:hover, .gridpager a:active {
        /*font-weight: bold;*/
        color: #DEDEDE !important;
    }

.gridpagerX, .gridpagerX tr {
    height: 12px;
}

    .gridpagerX a, .gridpagerX span {
        color: #fdfdfd !important;
        font-size: 150%;
        padding: 4px 4px;
        margin: 2% auto;
    }

    .gridpagerX span {
        font-size: 180%;
        font-weight: bold;
    }

    .gridpagerX a:hover, .gridpagerX a:active {
        /*font-weight: bold;*/
        color: #DEDEDE !important;
    }


.table-condensed {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

    .table-condensed th {
        font-weight: normal;
    }

/* For Animated button start */
.glyphicon-refresh-animate {
    -webkit-animation: spin2 .7s infinite linear;
    -moz-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

/* For Animated button end */

/* remove href values when printing  */

@media print {
    a[href]:after {
        content: none !important;
    }
}

.hideGridColumn {
    display: none;
}

/* JL20160928 by creating a class to make a particular header to be aligned right and ensure that HorizontalAlign attribute is also set for headers. For GridView */
th[align="right"] {
    text-align: right;
}

/* JL20160928 center checkbox on table header. For GridView */
td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}

.RedText {
    color: #d9534f;
}

.GridRowStyle {
    height: 50px;
}

.HeaderStyle {
    height: 50px;
}


.StatusStyle {
    color: #428bca;
    font-weight: bold;
}

.Gray-Line-Grid, .Gray-Line-Grid th, .Gray-Line-Grid td {
    border-color: #eee !important;
}

.ui-datepicker-trigger {
    background: none;
    height: 34px;
}

.No-Margin {
    margin-left: -4px;
}

#LeaveTypeAbbr {
    padding: 10px;
    border: 0;
    border-collapse: collapse;
}

#LeaveTypeAbbr td {
    padding: 0 20px 0 0;
}




.WrapIfMobile {
    /*width: 100%;*/
    width: auto;
    white-space: nowrap;
    word-wrap: normal;
}

@media (max-width: 992px) {
    .WrapIfMobile {
        white-space: normal;
        word-wrap: break-word;
    }
}

.GridFooterButton {
    display: inline-block;
    width: 40%;
    min-width: 80px;
    border-color: #e5e5e5 !important;
}

.navbar-toggle .button-bar {
    display: block;
    width: 42px;
    height: 2px;
    border-radius: 1px;
}

@media (max-width: 992px) {
    .Heading {
        /*visibility: hidden;*/
        height: 0;
        display: none;
    }
}

.badge {
    margin-top: -4px !important;
    margin-left: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-weight: bold;
}


.text-bold {
    font-weight: bold;
}


.largetext {
    font-size: large;
    text-align: left;
    padding: 0;
    height: 30px;
}

.my-btn {
    color: #ffffff !important;
}

.hideText {
    opacity: 0;
}

.vcenter {
    /*display: inline-block;
    vertical-align: middle;
    float: none;*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.align_center {
    align-items: center;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
/*body.loading {
    overflow: hidden;
}*/

.spin {
    display: none;
    position: absolute;
    z-index: 9999 !important;
    width: 60px; /*image width */
    height: 60px; /*image height */
    left: 50%;
    top: 50%;
    margin-left: -30px; /*image width/2 */
    margin-top: -30px; /*image height/2 */
}

.navbarButton {
    margin-left: 0;
    display: block;
    height: 42px;
    width: 42px;
    border: none;
}


.navbar-default .navbar-toggle .icon-bar {
    background-color: white !important;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}

@media (max-width: 992px) {
    .rounded-corners {
        margin-left: -10px !important;
        margin-right: -10px !important;
        border-radius: 0;
    }
}

.DateClass {
    width: 150px;
}

.DisplayNone {
    display: none;
}

textarea{
    resize:none;
    overflow-x: hidden;
}