/*do not wrap notification texts when in mobile view*/
@media (max-width: 991px) {
    .dropdown-menu > li > a {
        white-space: normal !important;
    }
}

/*stop solve unwanted appearance color-profile vertical scroll bar content thead main window*/
.sidebar .sidebar-wrapper, .off-canvas-sidebar .sidebar-wrapper {
    height: calc(100vh - 115px); /*was calc(100vh - 75)*/
}

/*hide thead generic vertial scrollbar*/
body {
    overflow-y: hidden;
}

/*for update progress bar*/
@keyframes showFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.update-progress-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(64,64,64,0.8);
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
}

.update-progress-dialog {
    text-align: center;
    background-color: white;
    width: 80%;
    position: fixed;
    margin-left: 10%;
    margin-top: 30vh;
    border-radius: 6px;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    animation: showFadeIn 500ms ease-in-out both;
}

    .update-progress-dialog .modal-header {
        border-bottom: none;
        font-size: 2vmin;
    }

/*page title font sizebigger*/
.navbar-brand {
    font-size: 24px; /*was 18px*/
}

/*top action buttons too far from page title*/
.main-panel > .content {
    padding: 0px 15px 30px 15px; /*was 30px 15px*/
}

/*supplement gridview skin*/
.tim-table-th > th {
    border-top: none !important;
}

.tim-tbl-pager > td > table > tbody > tr > td > span {
    background-color: #999999;
    border-color: #999999;
    color: white;
    box-shadow: 0 4px 5px 0 rgba(153, 153, 153, 0.14), 0 1px 10px 0 rgba(153, 153, 153, 0.12), 0 2px 4px -1px rgba(153, 153, 153, 0.2);
    text-align: center;
    border: 0;
    border-radius: 30px !important;
    transition: all .3s;
    padding: 0px 11px;
    margin: 0 3px;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    float: left;
    text-decoration: none;
}

.tim-tbl-pager > td > table > tbody > tr > td > a {
    padding: 0px 11px;
    color: #999999;
    border-radius: 30px !important;
    transition: all .3s;
    margin: 0 3px;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    float: left;
    text-decoration: none;
}

    .tim-tbl-pager > td > table > tbody > tr > td > a:hover {
        color: #999999;
        background-color: #e5e4e4;
        border-color: #e5e4e4;
        transition: all .3s;
    }

/*makes form entry easier to read*/
.form-control, .form-group .form-control {
    font-weight: 500;
    font-size: 1.8em;
    height: auto;
}

.form-control-sm, .form-group .form-control-sm {
    font-weight: 400;
    font-size: 1.2em;
}

.form-control-xs, .form-group .form-control-xs {
    font-weight: 300;
    font-size: 1em;
}

/*boostrap v4 feature https://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/*/
@media (max-width: 767px) {
    .text-xs-left {
        text-align: left;
    }

    .text-xs-right {
        text-align: right;
    }

    .text-xs-center {
        text-align: center;
    }

    .text-xs-justify {
        text-align: justify;
    }
}

@media (max-width: 991px) {
    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-justify {
        text-align: justify;
    }
}

@media (max-width: 1199px ) {
    .text-md-left {
        text-align: left;
    }

    .text-md-right {
        text-align: right;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-justify {
        text-align: justify;
    }
}

@media (min-width: 1200px ) {
    .text-lg-left {
        text-align: left;
    }

    .text-lg-right {
        text-align: right;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-justify {
        text-align: justify;
    }
}

/*tim material checkbox styling not working content asp net*/
.checkBox input[type=checkbox] {
    width: 1.5em;
    height: 1.5em;
    position: relative;
    top: 5px;
}

.checkBox label {
    position: relative;
    left: 5px;
    color: #999 !important; /*not working, instead, commented out line 8196 of file material-dashboard.css*/
}

/*new action behavoiur gridview*/
.tim-act-grid tr td:first-child {
    padding: 10px 0px 10px 10px;
}

.tim-act-grid tr td {
    padding: 10px 0px;
}

    .tim-act-grid tr td:last-child {
        padding: 10px 10px 10px 0px;
    }
/*.tim-act-checkbox input[type=checkbox] 
{ 
width: 1.2em;
height: 1.2em;
}*/

/*navigation menu header item for Action Behaviour (now called Option)*/
.nav-tabs > li > span.act-nav-title {
    color: #FFFFFF !important;
    line-height: 24px;
    font-size: 1.2em;
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.nav-tabs-act-grid > li > a {
    font-size: 1.2em !important;
    text-transform: none !important;
    cursor: pointer !important;
}

.card-header-tabs-act-grid {
    margin: 10px 0px 0px 0px !important;
    padding: 5px 15px !important;
}

/*time table header align not working with gridview's style setting*/
th.th-right {
    text-align: right;
}

th.th-center {
    text-align: center;
}

/*clear button placement fixing*/
.input-group-btn-calendar {
    position: absolute;
    right: 20px;
    bottom: 10px;
}

.bootstrap-datetimepicker-widget table td.day > div {
    margin: 0 auto;
    z-index: -1;
    position: relative;
}

.input-group-btn-txt {
    position: relative;
    right: 25px;
    top: 8px;
}

/*icon placement fixing*/
.input-group-ico-txt {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

/*ADJUST ALIGNMENT OF THE SEARCH PANEL ON MAIN LISTING PAGES SO THAT IT ALIGNS HORIZONTALLY WITH ITS PARALLEL CONTROLS I.E. DDLPAGESIZE & DDLMAXHIT*/
/*.pnlSearch {
position: relative; 
bottom: 15px;
}*/
#ctl00_cphBody_ddlPageSize {
    margin-top: 20px;
}

#ctl00_cphBody_ddlMaxHit {
    margin-top: 20px;
}

/*FORCE AUTO FILL UP ROW COLUMN CELL*/
.input-group {
    width: 100%;
}

/*FORCE TO HAVE WIDER MODAL DIALOG*/
.modal-dialog {
    width: 90% !important;
}

/*RADIO BUTTON LIST TOO FAR FROM LEFT*/
.radio-inline {
    padding-left: 0px !important;
}

/*SMALLER FONT SIZE FOR THE RECORD COUNT LABEL LOCATED BELOW PAGE TITLE*/
#ctl00_cphTitle_lblRecordCount {
    font-size: 0.6em;
}

/*BETTER FITTING FOR BUTTONS ON MAIN LISTING HEADER SECTION*/
.card-header-icon-btn {
    padding: 8px !important;
    margin-top: -10px !important;
    margin-left: 0px !important;
    margin-right: 10px !important;
}

select.form-control {
    top: 6px;
}

.btn-clear {
    left: 5px !important;
    bottom: 2px !important;
    height: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
    padding: unset !important;
}

/*REMOVE GAP AMONG FORM CONTROLS*/
.form-group {
    padding-bottom: 0px !important;
    margin: 0 0 0 0 !important;
    margin-bottom: 0px !important;
}

.label-floating {
    margin: 20px 0 0 0 !important;
}

.form-group label.control-label {
    margin: 12px 0 0 0 !important;
}

.card .nav-pills, .card .tab-content {
    margin-top: 0px !important;
}

.nav-pills > li > a {
    line-height: 15px !important;
    padding-top: 0px !important;
}
/*MORE READABLE CONTROL LABEL*/
.form-group label.control-label {
    font-size: 14px !important;
    color: #999 !important;
    font-weight: 600 !important;
}

.form-group.label-static label.control-label, .form-group.label-floating.is-focused label.control-label, .form-group.label-floating:not(.is-empty) label.control-label {
    font-size: 14px !important;
}

.form-group .checkbox label, .form-group .radio label, .form-group label, .form-group .label-on-left, .form-group .label-on-right {
    font-size: 14px !important;
    color: #999 !important;
    font-weight: 600 !important;
}

/*TIGHTER GRIDVIEW DATA ROW*/
.table > tbody > tr > td {
    padding: 4px 8px;
}

    .table > tbody > tr > td > .btn,
    .table > tbody > tr > td > div > div > .btn {
        padding: 6px 12px;
        margin: 3px 3px;
    }

.table-no-btn > tbody > tr > td {
    padding: 12px 8px;
}

/*TO AUTO HIDE THE TEXTBOX LINE BELOW THE TAGS INPUT*/
.bootstrap-tagsinput > input {
    display: none;
}

.btn.btn-fab.btn-fab-mini .material-icons {
    font-size: 14px;
}