.full-flex{
    flex: 0 0 100% !important;
    margin-bottom: 10px;
}
.flex-center{
    justify-content: center;
    align-items: center;
}
.d-flex{
    display: flex;
}
.text-right{
    text-align: right;
}
.justify-content-between{
    justify-content: space-between;
}
.k-toolbar button.k-button, #user-membership button.k-info{
    color: #FFF;
    background-color: #196aaa;
}
.ml-30{
    margin-left: 30px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-10{
    margin-bottom: 10px;
}
.mt-10{
    margin-top: 10px;
}
.pull-left{
    float: left;
}
.pull-right{
    float: right;
}
.width-50{
    width: 49.99%;
}


#main-wrapper{
    padding: 20px 0;
}
#main-wrapper .k-content{
    padding: 0;
    margin: 0;
}
#treelist{
    padding: 0 20px;
    background-color: transparent;
}
.k-toolbar.k-grid-toolbar{
    background: none;
}
.k-grid-header th.k-header{
    vertical-align: middle;
    text-align: center;
    white-space: normal;
}
#treelist .k-toolbar{
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: 100%;
}
#treelist .k-toolbar:before{
    content: none;
}
#treelist .k-grid-header, #treelist .k-grid-content, #treelist .k-pager-wrap{
    /*border-left: solid 1px #efefef;*/
    border-right: solid 1px #c5c5c5;
    box-sizing: border-box;
}
#treelist .k-filter-row>th:first-child, .k-grid tbody td:first-child, #treelist .k-grid tfoot td:first-child, #treelist .k-grid-header th.k-header:first-child{
    border-left-width: 1px;
}
#treelist button[data-command="create"].k-button{
    color: #FFF;
    background-color: #196aaa;
}
.k-grid-header-wrap table thead tr:last-child>th{
    background-color: #0991cb85;
}
.k-grid-header-wrap table thead tr:first-child>th{
    background-color: #008dc9;
    color: #FFF;
}
.k-grid-header-wrap table thead tr:first-child>th>a{
    color: #FFF !important;
}
#main-wrapper #tabstrip.k-tabstrip-top>.k-tabstrip-items>.k-state-active{
    border: none;
    margin-bottom: 0;
    border-top: solid 1px #3b8fc8;
}
.k-loading.k-complete{
    border: none;
}
#tabstrip.k-tabstrip-top>.k-tabstrip-items>.k-item{
    margin: 0;
    border: none;
    font-size: 14px;
}
#tabstrip.k-tabstrip-top>.k-tabstrip-items>.k-item>.k-link{
    color: #3b8Fc8;
    font-weight: 600;
}
#tabstrip.k-tabstrip-top>.k-tabstrip-items{
    display: flex;
    justify-content: center;
}
#main-wrapper #tabstrip.k-header{
    border: none;
    background: none;
    box-shadow: none;
}
.blue-bar{
    color: #FFF;
    background-color: #008dc9;
    font-size: 16px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
}
.createTemplate{
    height: 475px;
    padding: 20px 0;
    overflow: auto;
}
.popNone{
    display: none;
}
.popNone.show{
    display: block;
}
.popPartNone{
    display: none;
}
.popPartNone.show{
    display: block;
}

/************************* System Permission Style *******************/
#system-permission, #document-permission, #user-membership-grid {
    padding: 0 20px;
}
.sys-permission-popup-template, .doc-permission-popup-template, .group-membership-popup-template{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
    max-height: 500px;
    overflow: auto;
}
.sys-pop-edit-label{
    flex: 0 0 30%;
    max-width: 40%;
    margin-bottom: 10px;
    text-align: left;
}
.sys-pop-edit-field{
    flex: 0 0 70%;
    margin-bottom: 10px;
    text-align: left;
}
.k-widget.k-dropdown+.k-dropdown{
    margin-left: 10px;
}
.if-delete{
    color: #f56e21;
    cursor: pointer;
}
#add-if-condition{
    color: #546dab;
    cursor: pointer;
}
#ifCondition-wrap{
    width: 100%;
}
#ifCondition-wrap>div>*{
    flex: 0 0 32%;
    max-width: 32%;
}
#ifCondition-wrap>div>span:first-child{
    flex: 0 0 28%;
    max-width: 28%;
}
#ifCondition-wrap>div>span:last-child{
    flex: 0 0 4%;
    max-width: 4%;
}
#ifCondition-wrap>div:first-child>span:last-child{
    flex: 0 0 32%;
    max-width: 32%;
}
#ifCondition-wrap>div{
    justify-content: flex-start;
}
.k-widget .k-dropdown{
    width: 250px;
}
.sys-permission-popup-template hr, .doc-permission-popup-template hr{
    margin:10px 0;
    width: 100%;
}
.k-edit-buttons{
    padding: .6em;
    text-align: right;
}
#lastupdate{
    margin-right: 15px;
}

#doc-metadata-wrap, #user-metadata-wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100%;
    width: 100%;
}
#user-simulation{
    padding: 20px;
}
#simul-filter-wrap{
    width: 100%;
}
#simul-filter-wrap button[aria-label='Apply']{
    float: right;
}
.k-widget.k-combobox{
    min-width: 300px;
}
span.k-datetimepicker{
    border: none;
}
.k-datetimepicker .k-picker-wrap .k-icon{
    position: relative;
}

#loader-wrap{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    opacity: 1;
    transition: .5s;
}
#loader-wrap.hide{
    opacity: 0;
    pointer-events: none;
}
#loader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.k-edit-buttons{
    position: relative;
}
.k-error-msg{
    position: absolute;
    top: 50%;
    right: 150px;
    left: 10px;
    transform: translateY(-50%);
    font-size: 12px;
    color: red;
    text-align: left;
}
.k-edit-field .k-widget, .k-edit-field textarea, .k-edit-field input[type=text], .k-edit-field input[type=number], .k-edit-field input[type=datetime-local], .sys-pop-edit-field .k-widget, .sys-pop-edit-field textarea, .sys-pop-edit-field input[type=text], .sys-pop-edit-field input[type=number], .sys-pop-edit-field input[type=datetime-local]{
    width: 90%;
}
.k-edit-field .k-widget.k-switch, .sys-pop-edit-field .k-widget.k-switch{
    width: 65px;
}
.ifCountry.k-textbox{
    margin-left: 10px;
}
#user-membership{
    text-align: center;
    padding: 0 20px;
}
#user-membership>div{
    text-align: center;
}
.detailTabstrip>.k-tabstrip-items{
    text-align: left;
}
.detailTabstrip>.k-tabstrip-items>.k-item{
    text-align: center;
}

.group-membership-user-add-input, .group-membership-user-add-btn{
    float: right;
}

.group-membership-user-add-input{
    margin: .16em;
    width: 350px;
    margin-right: 10px;
}

.detailTabstrip .k-tabstrip-items .k-link{
    padding: .8em .92em;
}

.input-error {
    border: red 1px solid;
}

.k-grid-filter.k-state-active {
    background-color: #d2691e; 
}

#group-membership-add-btn button{
    float: right;
}