/*For displaying disabled elements*/
.grid-form input[type="text"]:disabled, .grid-form input[type="email"]:disabled, .grid-form textarea:disabled{
    box-sizing: border-box;
    border-width: 2px;
    border-style: inset;
    background-color: rgb(235, 235, 228);
}

[data-field-span] {
    min-height: 68px!important;
   
}

.grid-form select:disabled {
    box-sizing: border-box;
    background-color: rgb(235, 235, 228);
}

.grid-form label {
    margin-bottom: 0px !important;
}
.jstree-node {
    margin-left: 9px !important;
}

/* Set color for validation elements*/
.ng-invalid.ng-dirty {
    border-color: red;
}
.ng-valid.ng-dirty{
    border-color: green;
}

.help-block{
    color: red;
}

/* Arrow display for smart-table sorting.*/
.st-sort-ascent:before{
    content: '\25B2';
}

.st-sort-descent:before{
    content: '\25BC';
}

/* Row selected display for smart-table selecting.*/
.st-selected{
  background-color:lightblue;
}

.thumb {
    width: 60px;
    height: 60px;
    float: none;
    position: relative;
    top: 2px;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.file {
  visibility: hidden;
  position: absolute;
}

.file-input.form-control[disabled] {
    border: 1px solid #e0e0e0!important;
    padding-left: 10px;
}

/** fix cater dropdown icon duplicated issue*/
.caret:before {
    content: '';
}

/**Mobile friendly form updated*/
.grid-form fieldset legend {font-size: 13px !important;  }
.grid-form select,.grid-form input,.grid-form input[type="text"], .grid-form input[type="email"], .grid-form textarea, .grid-form select,.multiSelect > button {
    font-size: 120%!important;
    border: 1px solid #666!important;
    padding: 0 5px!important;
    width: 80%!important;
    min-height: 46px;
}

input[st-search]{
    width: 100%!important;
    padding: 0 5px!important;
    color: #616161;
    font-size: 120%;
    border: 1px solid #666!important;
}

input[st-search]::-webkit-input-placeholder { font-weight: 100; color: #595959; }

.multiSelect > button,input[st-search] {
    min-height: 46px!important;
}

.grid-form [data-row-span] [data-field-span] {
    padding: 3px !important;
}
.grid-form [data-field-span] {
    height: 66px;
}

form, td, th {
    font-size: 20px;
}
td{
    line-height: 60px!important;
}
.multiSelect > button {
    border-radius: 0!important;
}
.multiSelect .buttonLabel {
    text-align: left;
    width: 100%;
}

.multiSelect .caret {
    position: absolute;
    top: 40%;
    right: 10px;
    border-top: 16px solid #333!important;
    border-right: 9px solid transparent!important;
    border-left: 9px solid transparent!important;
}

.grid-form select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 5px!important;
}

button.btn{
    min-height: 46px;
    font-size: 20px;
    margin-top: 8px;
}

.btn-default.btn {
    min-height: 46px;
    font-size: 20px;
}

input[value="Upload"] {
    margin: 0!important;
}

[st-search] ~ button {
    min-height: 40px;
}

form input ~ button.btn {
    margin-top: 8px;
}

.grid-form [data-row-span] [data-field-span] label:first-child ,.grid-form fieldset legend{
    font-size: 20px!important;
}

input.form-control.input-lg.file-input,.btn.browse {
    height: 54px;
    margin: 0;
}

[date-picker-wrapper] {
  min-width: 300px;
}

[date-picker] td,
[date-picker] th{
    width: 60px;
}

@media (max-width: 1024px) {
    form button.btn {
        display: block;
        min-width: 50%;
        float: right;
    }

    form .pt-md button.btn{
        float:left;
        margin: 0;
    }

    form .pt-md .pull-right {
        float: none!important;
    }
    form .pull-right > button ~ button {
        float: left!important;
        display: inline-block!important;
        width: 50%;
    }

    .grid-form input[type="text"] {
        width: 100%!important;
    }
}

/* Responsive table*/

@media (max-width: 1024px) {
    .responsive-table-card {
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    .pt-md {
        margin-bottom: 10px;
    }

    .responsive-table-card button,.pt-md button,.pt-md [type=submit] {
        margin-right: 5px;
        margin-top: 5px;
    }

    [data-thead] {
        display: none;
    }

    [data-row] {
        counter-increment: rowNumber;
    }

    [data-row]:not(first-child) {
        border-top: 1px solid #ddd;
    }

    [data-th],.responsive-table-card th {
        display: block;
        max-width:100%;
        width: 100%;
        text-align:left;
        border-top: 0!important;
        white-space: normal!important;
    }

    [data-row] button.btn {
        min-width: 30%;
        display: inline-block;
    }
}

@media (min-width: 769px) and (max-width: 1024px){
    [data-th]:before{
        content: attr(data-th) ": ";
        font-weight: bold;
        width: 30%;
        display: inline-block;
    }

    [data-th]:last-child:before{
        content:"";
    }

    input[value="Upload"],input[value="Upload"] + a {
        width: 49.6%!important;
    }
}

@media (max-width: 768px) {
    [data-th]:before{
        content: attr(data-th) ": ";
        font-weight: bold;
        width: 55%;
        display: inline-block;
    }

    [data-th]:last-child:before {
        width: 0;
        content: '';
    }

    input[value="Upload"],input[value="Upload"] + a {
        width: 49%!important;
    }
}

@media (min-width: 1025px) {
    .yamm.navbar-collapse.collapse {
        display: block!important;
    }

    #navbar-links-toggle {
        display: none;
    }

    [enctype="multipart/form-data"] .pt-md > .pull-right {
        display: inline-flex;
    }
}