.cmgmt-view {width: 100%; height: 100%; display: flex; }

.cmgmt-nav {width: 300px; min-width: 300px; border-right: 1px solid #ccc; display: flex; flex-direction: column;}

.cmgmt-nav .nav {overflow: auto; width: 100%; flex-grow: 1; user-select: none;}
.cmgmt-nav .nav .letter {width: 100%; height: 30px; display: flex; align-items: center; cursor: pointer; padding: 0 10px 0 30px; background: url('../../dir.graphics/icons/customer_sidebar_plus.svg') 10px center/9px no-repeat; font-size: 15px; position: relative; border-bottom: 1px solid #ededed;}
.cmgmt-nav .nav .letter.open {background-image: url('../../dir.graphics/icons/customer_sidebar_minus.svg');}
.cmgmt-nav .nav .letter:hover { background-color:aliceblue;}
.cmgmt-nav .nav .list {font-size: 13px; display: none;}
.cmgmt-nav .nav .list.open {display: block;}
.cmgmt-nav .nav .item {width: 100%; min-height: 30px; display: flex; align-items: center; cursor: pointer; padding: 5px 10px; position: relative; border-bottom: 1px solid #ededed;}
.cmgmt-nav .nav .item:hover,
.cmgmt-nav .nav .item.active,
.cmgmt-nav .nav .letter.active {background-color: aliceblue;}
.cmgmt-nav .nav .item.active:after,
.cmgmt-nav .nav .letter.active:after {width: 5px; height: 100%; background: var(--main-color-2); position: absolute; top:0; right: 0; content:'\00a0';}
.cmgmt-nav .nav .item.deactivated {opacity: 0.5;}
.cmgmt-nav .search {width: 100%;border-bottom: 1px solid #ccc; }
.cmgmt-nav .search input {width: 100%; border:0; height: 30px; padding: 0 10px 0 34px; background: url('../../dir.graphics/icons/icon_search.svg') 10px center/14px no-repeat;}

.cmgmt-content {flex-grow: 1; display: flex; flex-direction: column;}

.cmgmt-search-highlight {background: yellow;}


.cmgmt-content-nav { height: 80px;}
.cmgmt-content-nav .nav {display: flex; border-bottom: 1px solid var(--main-color-border); height: 80px;}
.cmgmt-content-nav .item {width: 160px; position: relative; border-right: 1px solid var(--main-color-border); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 13px; user-select: none; cursor: pointer;}
.cmgmt-content-nav .item:hover,
.cmgmt-content-nav .item.active {background-color:aliceblue;}
.cmgmt-content-nav .item.active:after {width: 100%; height: 2px; background: var(--main-color-2); position: absolute; bottom:0; left: 0; content:'\00a0';}
.cmgmt-content-nav .icon { width: 35px;height: 35px;background-position: center;background-size: contain;background-repeat: no-repeat;margin-bottom: 5px;}

.cmgmt-content-page {flex-grow: 1; overflow: auto;}


.cmgmt-form {display: flex; flex-direction: column; width: 450px; gap: 10px; background-color: #fbfbfb; border: 1px solid #e9e9e9; padding: 15px 20px;}
.cmgmt-form .line {display: flex; align-items: center;min-height: 30px;}
.cmgmt-form .label {width: 130px; min-width: 130px; font-size: 14px;}
.cmgmt-form .input {flex-grow: 1; display: flex; gap: 10px;}
.cmgmt-form .input.short-r *:last-child {width: 75px;}
.cmgmt-form .input.short-l *:first-child {width: 75px;}
.cmgmt-form .input input,
.cmgmt-form .input select {width: 100%; height: 30px; border: 1px solid #ccc;}
.cmgmt-form .input input[type="checkbox"] {width: 16px; height: 16px;}
.cmgmt-form .input input {padding: 0 8px;}
.cmgmt-form .input select {padding: 0 4px;}

.cmgmt-padding {padding: 15px 20px;}

.cmgmt-horizontal {display: flex; gap: 20px;}
.cmgmt-vertical {display: flex; flex-direction: column; gap: 20px;}
.cmgmt-horizontal.no-gap,
.cmgmt-vertical.no-gap {gap: initial;}

.cmgmt-button {background-color: var(--main-color-2); cursor: pointer; border: 0; color: #fff; font-size: 13px; height: 35px; padding: 0 20px; display: flex; align-items: center; justify-content: center; opacity: 0.8;}
.cmgmt-button:hover {opacity: 1;}
.cmgmt-button.hidden {pointer-events: none; opacity: 0.3;}

.cmgmt-delete { width:16px;height:16px;background:url('../../dir.graphics/legacy_icons/icon_trash.svg') center/contain no-repeat;cursor: pointer; opacity: 0.2;}
.cmgmt-delete:hover { opacity: 1;}

.cmgmt-article-calc-box {margin-top: 15px;}