/*
==========================================================================
    User Access Prpperty Level
==========================================================================
*/
.useraccess-pl {
    .useraccess-content {
        margin: 6px 0 0 0 !important;
        padding: 4px 15px !important;
        .btn-list,
        .btn-administrator,
        .btn-deactivated {
            display: block;
            height: 30px;
            line-height: 30px;
            background: $c-white4;
            float: left;
        }
        .btn-list { background: $c-grayblue; }
        .btn-blue { background: color('light blue') !important;
            color: $c-black;}
        .btn-administrator {
            position: relative;
            background: $c-white4;
            color: $c-black;
            i {
                position: absolute;
                left: 10px;
                top: 0;
            }
        }
        .btn-deactivated {
            background-image: url(../images/icon-deactivateduser.png);
            background-repeat: no-repeat;
            background-position: 10px 1px;
            padding-left: 50px;
            color: $c-black;
        }
        .useraccess-top {
            .btn-administrator {
                padding-left: 44px;
                margin-left: 10px;
            }
            .btn-deactivated { float: right; }
            @media (max-width: 640px) {
                text-align: center;
                .btn-list,
                .btn-administrator,
                .btn-deactivated {
                    float: none;
                    margin: 5px 5px 5px;
                    display: inline-block;
                }
            }
        }
    }
    .table-responsive { max-height: inherit; }
    .userAccessTable {
        table-layout: fixed;
        .btn-save,
        .btn-edit,
        .btn-deactive,
        .btn-restore,
        .btn-trash,
        .btn-delete {
            background: none;
            width: 26px;
            height: 26px;
            cursor: pointer;
            i {
                width: 100%;
                height: 100%;
            }
        }
        tr {
            td {
                padding: 2px 1px !important;
                table-layout: fixed;
                & > span { padding: 0 10px; display: block; }
            }
            .col-number {
                width: 30px;
                text-align: center;
            }
            .col-firstname {
                width: 15%;
                @media (max-width: 1200px) { width: 150px; }
            }
            .col-lastname {
                width: 15%;
                @media (max-width: 1200px) { width: 160px; }
            }
            .col-title {
                width: 15%;
                @media (max-width: 1200px) { width: 150px; }
            }
            .col-Location {
                width: 18%;
                @media (max-width: 1200px) { width: 160px; }
            }
            .col-email {
                width: 15%;
                @media (max-width: 1200px) { width: 150px; }
            }
            .col-displayname {
                width: 18%;
                @media (max-width: 1200px) { width: 180px; }
            }
            .col-discoverAccess {
                span {
                    display: none;
                }
                div{
                    display: flex;
                    justify-content: center;
                }
                width: 8%;
                @media (max-width: 1200px) { width: 80px; }
            }
            .col-supportAccess {
                span {
                    display: none;
                }
                div{
                    display: flex;
                    justify-content: center;
                }
                width: 8%;
                @media (max-width: 1200px) { width: 80px; }
            }
            .col-access,
            .col-assign {
                width: 170px;
                overflow: visible;
            }
            .col-access {
                span i { margin: 0 auto; }
            }
            .commonselect {
                padding-left: 0 !important;
                padding-right: 0 !important;
                .multiselect {
                    border: 1px solid $c-border;
                    background: $c-white;
                    padding-right: 112px;
                }
                .multiselect-selected-text{
                    width:45px;
                    overflow: unset !important;
                }
            }
            td.col-access {
                span {
                    @include flexbox();
                    justify-content: flex-start;
                    i { margin: 0 auto; }
                }
                small {
                    display: inline-block;
                    padding: 0 10px;
                    margin: 0 5px;
                    height: 24px;
                    line-height: 24px;
                    @include border-radius(5px);
                    cursor: pointer;
                    &.itag { background: #65d7ff; color: #152c35; }
                    &.ptag { background: #cc99ff; color: #022262; }
                    &.mtag { background: #66ff99; color: #006600;}
                }
                display: flex;
                justify-content: center;
            }
            .col-action {
                width: 130px;
                .action {
                    padding: 0 10px;
                    @include flexbox();
                    justify-content: flex-start;
                    span { margin: 0 5px; }
                }
            }
            .checksection {
                width: 26px;
                height: 26px;
                margin: 0 5px;
                float: left;
                display: block;
                .icon-medium {
                    width: 26px;
                }
            }
            .checksection .ncheck {
                width: 26px ;
                height: 26px ;
                display: block;
                left: 0;
                right: 0;
                margin: 0 auto;
            }
            .checksection .ncheck .checkmark {
                width: 26px !important;
                height: 26px !important;
                display: block;
                border: none;
                margin: 0 auto;
                border-width: 0;
                background: url(../images/chi-unchecked-checkbox.svg) no-repeat center center;
                -webkit-background-size: 24px auto !important;
                background-size: 24px auto !important;
            }
            .checksection .ncheck .checkmark.active {
                background: url(../images/chi-checked-checkbox.svg) no-repeat center center;
                -webkit-background-size: 24px auto !important;
                background-size: 24px auto !important;
            }
            .checksection .ncheck input:checked ~ .checkmark:after {
                left: 10px;
                top: 8px;
                display: none;
            }
        }
    }
    .commonTable tr td div{
        overflow: visible !important;
    }
}


/*
==========================================================================
    Popup
==========================================================================
*/
.useraccess-popup {
    padding-top: 10px !important;
    .uap-content {
        h3.item-title {
            font-size: $medium;
            margin: 0;
            padding: 0 0 0 34px;
            position: relative;
            height: 26px;
            line-height: 26px;
            width: 185px;
            float: left;
            background: $c-white;
            i {
                position: absolute;
                left: 10px;
                top: 3px;
            }
        }
        .item-right {
            margin-left: 187px;
            min-height: 26px;
            background: $c-white;
            overflow: hidden;
        }
        .noaccess { float: right; }
        .row-item {
            overflow: hidden;
            margin-top: 2px;
            .radio {
                width: 33.33%;
                &:hover,
                &.active { background: none !important; }
            }
        }
        .item-content {
            display: none;
            h3.item-title {
                text-align: right;
                padding: 0 10px;
            }
            .common-row .cr.color3,
            .common-row .cr.color4,
            .common-row .cr.color6 {
                background: #e9e8e8;
            }
        }
    }
}

.dialog-useraccess-popup {
    top: 200px !important;
    .ui-dialog-titlebar {
        position: relative;
        .btn-edit,
        .btn-save {
            position: absolute;
            right: 30px;
            top: 4px;
            width: 30px;
            height: 26px;
            display: block;
            margin-right: 15px;
        }
    }
    .useraccess-popup {
        max-height: 200px !important;
    }
}

/* common radio button start */
.common-row .radio label {
    height: 26px;
    line-height: 26px;
    cursor: pointer;
    padding-left: 10px;
    display: block;
    font-size: 14px;
    color: #131111;
    float: left;
    display: block;
}
.common-row .radio label:after {
    content: '';
    display: table;
    clear: both;
}
.common-row .radio .cr {
    position: relative;
    display: block;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    line-height: 26px;
    float: left;
    margin: 5px 5px 0 0;
}
.common-row .radio .cr i {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 100%;
    background: #000;
    opacity: .55;
}
.common-row .radio label input[type="radio"] { display: none; }
.common-row .radio label input[type="radio"] + .cr > i { opacity: 0; transition: all .3s ease-in; }
.common-row .radio.active label input[type="radio"] + .cr > i { opacity: .55; }
.common-row .radio label input[type="radio"]:checked + .cr > i { opacity: .55; }
.common-row .radio label input[type="radio"]:disabled + .cr { opacity: .5; }
.common-row .cr.color1 { background: #37c5ab; }
.common-row .cr.color2 { background: #5c6bc0; }
.common-row .cr.color3 { background: #ffd600; }
.common-row .cr.color4 { background: #ba68c8; }
.common-row .cr.color5 { background: #ef5350; }
.common-row .cr.color6 { background: #26c6da; }
.common-row .cr.color7 { background: #78909c; }
.common-row .cr.color8 { background: #fc91ad; }
.common-row .cr.color9 { background: #fb8c00; }
.common-row .cr.color10 { background: #80cbc4; }
.common-row .cr.color11 { background: #c0ca33; }
.common-row .cr.color12 { background: #ff7043; }
.common-row .cr.color13 { background: #3d5afe; }
.common-row .cr.color14 { background: #ff66cc; }
.common-row .cr.color15 { background: #69f0ae; }
.common-row .cr.color16 { background: #ffccbc; }
.common-row .radio.active,
.common-row .radio:hover {
    background: -moz-linear-gradient(top, #ebebeb 0%,  #d1d1d1 100%) !important;
    background: -webkit-linear-gradient(top, #ebebeb 0%, #d1d1d1 100%) !important;
    background: linear-gradient(to bottom, #ebebeb 0%, #d1d1d1 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#d1d1d1',GradientType=0 ) !important;
}
/* common radio button end */

.ui-dialog .ui-icon-closethick {
    background: url(../images/chi-close2.svg) center center;
    -webkit-background-size: 16px auto;
    background-size: 16px auto;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    margin: 0;
}