﻿.collection-members-dialog { }
    .collection-members-dialog  md-progress-circular { margin: auto; margin-top: 200px; }
        
        md-dialog-content .collection-members-control { padding: 10px; }
            md-dialog-content .collection-members-control .container-search input { width: 100%; }
            md-dialog-content .collection-members-control .container_collection_preview { background-color: white; margin-top: 10px; padding-top: 5px; height: 470px; }
                md-dialog-content .collection-members-control .container_collection_preview .k-treeview .k-in { height: 60px; width: -o-calc(100% - 10px); width: calc(100% - 10px); }

                #collectionTreeView { overflow-y: hidden; min-height: 465px; margin-left:10px; }
                #collectionTreeView .item { height: 50px; color: #455A64; padding-left: 50px; display: flex; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
                
                    #collectionTreeView .item.user { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 0; }
                    #collectionTreeView .item.group { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -50px; }
                    #collectionTreeView .item.contact { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -100px; }
                    #collectionTreeView .item.collection { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -150px; }
                    #collectionTreeView .item.allcontacts { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -200px; }
                    #collectionTreeView .item.allmailboxes { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -250px; }
                    #collectionTreeView .item.dynamicdl { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -500px; }
                    #collectionTreeView .item.allguests { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -600px; }
                    #collectionTreeView .item.guest { background: url("../../i/gal-sprite-outlined.svg"); background-repeat: no-repeat; background-size: 50px auto; background-position: 0 -550px; }


                    #collectionTreeView .item .container_info { overflow: hidden; margin-left: 10px; margin-right: 10px; }
                    #collectionTreeView .item .container_info .item_info.main_info { font-weight: bold; }
                    #collectionTreeView .item .container_info .item_info { margin: 3px; white-space: nowrap; display: block; text-overflow: ellipsis; overflow: hidden; }

                    #collectionTreeView .item .actions { float:right; min-width:80px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
                        #collectionTreeView .item .actions div.menu { float: right; display: none; background: url("../../i/_controls-sprite.svg") no-repeat; background-size: 40px auto; background-position: -5px -85px; cursor: pointer; background-repeat: no-repeat; min-height: 30px; min-width: 30px; margin-right: 10px; border-radius: 15px; background-color: #f5f4f4; position: relative;}
                        #collectionTreeView .item .actions div.remove { display: none; float: left; cursor: pointer;  background-repeat: no-repeat; min-height: 30px; min-width: 30px; margin-right: 10px; background: url("../../i/_controls-sprite.svg") no-repeat; background-size: 40px auto; background-position: -5px -1165px; background-repeat: no-repeat; border-radius: 15px; background-color: #f5f4f4; }

                #collectionTreeView .inline_menu { position: absolute; background-color: #FAFAFA; display: none; width: 100px; padding-left: 0px; padding-top: 7px; padding-bottom: 7px; border: 1px solid #EEEEEE; z-index: 10000; right: 0px; top: 25px; }
                    #collectionTreeView .inline_menu ul { list-style-type: none; padding: 0px; margin: 0px;-ms-flex-negative: 1; }
                        #collectionTreeView .inline_menu ul li .menu_item { -ms-flex-negative: 1;height: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; color: #455A64; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding-left: 15px; padding-right: 15px; cursor: pointer; }
                        #collectionTreeView .inline_menu ul li .disabled { color: #BEBEBC; }
                        #collectionTreeView .inline_menu ul li .menu_item:hover { background-color: #EEEEEE; }
                
                #collectionTreeView .k-state-selected { background-color: transparent; color: black; }
                #collectionTreeView .k-state-hover { background-color: transparent !important; }
                #collectionTreeView div.k-top,
                #collectionTreeView div.k-bot,
                #collectionTreeView div.k-mid { height: 60px; }
                    #collectionTreeView div.k-top .item,
                    #collectionTreeView div.k-bot .item,
                    #collectionTreeView div.k-mid .item { background-color: transparent; border-radius: 3px; cursor: pointer; }
                
                #collectionTreeView div.k-top .k-in,
                #collectionTreeView div.k-bot .k-in,
                #collectionTreeView div.k-mid .k-in { height: 60px;  width: -o-calc(100% - 25px); width: calc(100% - 25px); }

                #collectionTreeView .k-in.k-state-focused { border-color: transparent; }
     
#collectionTreeView .item.excluded,
#collectionTreeView .item.excluded,
#collectionTreeView .item.excluded { background-color: #FCE8E1 !important; border-radius: 3px; }

#collectionTreeView ul[role="tree"] .k-mid:hover .item:not(.collection) div.menu,
#collectionTreeView ul[role="tree"] .k-bot:hover .item:not(.collection) div.menu,
#collectionTreeView ul[role="tree"] .k-top:hover .item:not(.collection) div.menu,
#collectionTreeView ul[role="tree"] .k-mid:hover div.remove,
#collectionTreeView ul[role="tree"] .k-bot:hover div.remove,
#collectionTreeView ul[role="tree"] .k-top:hover div.remove { display: block; }

#collectionTreeView ul[role="tree"] ul li .k-mid:hover div.remove,
#collectionTreeView ul[role="tree"] ul li .k-bot:hover div.remove,
#collectionTreeView ul[role="tree"] ul li .k-top:hover div.remove { display: none; }

#collectionTreeView ul[role="tree"] ul li .k-mid:hover div.menu,
#collectionTreeView ul[role="tree"] ul li .k-bot:hover div.menu,
#collectionTreeView ul[role="tree"] ul li .k-top:hover div.menu { display: block; }

#collectionTreeView ul[role="tree"] ul li .k-mid:hover .item.excluded_child div.menu div.action,
#collectionTreeView ul[role="tree"] ul li .k-bot:hover .item.excluded_child div.menu div.action,
#collectionTreeView ul[role="tree"] ul li .k-top:hover .item.excluded_child div.menu div.action { display: none; }

#collectionTreeView ul[role="tree"] ul li .k-mid:hover .item.collection.excluded_child div.menu,
#collectionTreeView ul[role="tree"] ul li .k-bot:hover .item.collection.excluded_child div.menu,
#collectionTreeView ul[role="tree"] ul li .k-top:hover .item.collection.excluded_child div.menu{ display: none; }

#collectionTreeView ul:not([role="group"]) .k-mid:hover div.menu div.action,
#collectionTreeView ul:not([role="group"]) .k-bot:hover div.menu div.action,
#collectionTreeView ul:not([role="group"]) .k-top:hover div.menu div.action { display: none; }

#collectionTreeView ul[role="group"] .k-mid:hover .item:not(.excluded) div.menu div.exclude_action,
#collectionTreeView ul[role="group"] .k-bot:hover .item:not(.excluded) div.menu div.exclude_action,
#collectionTreeView ul[role="group"] .k-top:hover .item:not(.excluded) div.menu div.exclude_action { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

#collectionTreeView ul[role="group"] .k-mid:hover .item:not(.included) div.menu div.include_action,
#collectionTreeView ul[role="group"] .k-bot:hover .item:not(.included) div.menu div.include_action,
#collectionTreeView ul[role="group"] .k-top:hover .item:not(.included) div.menu div.include_action { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

#collectionTreeView .k-mid:hover .item:not(.excluded) ,
#collectionTreeView .k-bot:hover .item:not(.excluded),
#collectionTreeView .k-top:hover .item:not(.excluded) { background-color: #EEEEEE !important; border-radius: 3px; cursor: pointer; }

#collectionTreeView .item.excluded .item_info.main_info { text-decoration: line-through; white-space: nowrap; }

#collectionTreeView .item.excluded .exclude_action { display: none; }
#collectionTreeView .item.included .include_action { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

#collectionTreeView .item.included .exclude_action { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;  }
#collectionTreeView .item.excluded .include_action { display: none; }

#collectionTreeView li.k-last:not(:only-child) .inline_menu[style*="display: block"] {
    top: auto !important;
    bottom: 35px !important;
}