.relationships-table-view .search-td-title .item-img {
    border-top: none;
}

.related-items-section-name {
    color: #444;
    font-size: 16px;
    font-weight:bold;
    margin-bottom: 8px;
    background: #f8f8f8; /* default for browsers w/o gradients */
    background: -webkit-linear-gradient(to right, #d7d7d7, #e2e2e2, #e2e2e2, #f8f8f8, #ffffff);
    background: -moz-linear-gradient(to right, #d7d7d7, #e2e2e2, #e2e2e2, #f8f8f8, #ffffff);
    background: -o-linear-gradient(to right, #d7d7d7, #e2e2e2, #e2e2e2, #f8f8f8, #ffffff);
    background: linear-gradient(to right, #d7d7d7, #e2e2e2, #e2e2e2, #f8f8f8, #ffffff);
    margin-left: -24px;
    padding: 8px 0 8px 24px;
    border-bottom-style: none;
}

.related-items-main-section .related-items-section-name {
    border-radius: 10px;
    margin-left: -35px;
    padding-left: 45px;
}

.related-items-subsection-header {
    background: linear-gradient(to right, #e2e2e2, #e2e2e2, #f8f8f8, #ffffff);
    color: #777;
    margin-bottom: 24px;
    padding-left: 30px;
    position: relative;
}

.related-items-subsection-header::after {
    display: block;
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    bottom: -10px;
    left: 11%;
    margin-left: -55px;
    background-color: #e2e2e2;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}

.related-items-subsection .item-preview li {
    margin-right: 12px;
    width: 120px;
}

.related-items-subsection {
    padding-left: 0;
}

.related-items-subsection p {
    background: linear-gradient(to right, #e2e2e2, #e2e2e2, #f8f8f8, #ffffff);
    color: #777;
    font-size: 14px;
    padding: 6px 0 6px 20px;
    margin-left:-4px;;
    border-bottom-style: none;
}

/* These two specifiers control the size of images displayed in Relationships View search results. */
.related-items-subsection .item-preview .item-img {
    max-height: 130px;
    width: 120px;
}

.related-items-subsection .item-preview .item-img img {
    max-height: 120px;
}

/* Display larger thumbnails on the admin show page */
section.seven.columns.alpha .related-items-main-section .item-preview .item-img img,
section.seven.columns.alpha .related-items-subsection .item-preview .item-img img {
    width: 120px;
}


#related-items-graph h2 {
    margin-bottom: 0;
}

#related-items {
    clear: both;
	background-color: #fff;
}

.related-items-see-all a {
    background-color:#fff;
}

.related-items-show-more a {
    background-color:#fff;
	border: 1px solid #111;

	font-size: 14px;
	
}

.related-items-show-more a:link {

    text-decoration-color: currentcolor;
    text-decoration-line: none;
    text-decoration-style: solid;
}

.related-items-see-all a,
.related-items-show-more a {
   
	padding: 4px 15px 4px 15px;
}

.related-items-see-all,
.related-items-show-more {
    margin-left: 0;
    clear: both;
}

#related-items ul {
    padding-left:0;
    margin-left:0;
    list-style-type:none;
}

.relationship-rule {
    margin-top: 8px;
}

.relationship-rule span {
    font-weight: bold;
}

.relationship-rule div {
    font-family: "Courier New";
    background-color: #eee;
}

#relationship-items-list li {
    margin-bottom: 6px;
}

#relationship-items-list .sortable-item {
    padding: 4px 10px 4px 10px;
}

#relationship-items-list .drawer-contents td {
    border: none;
    padding: 4px 4px 4px 4px;
}

#relationship-items-list .drawer-contents select {
    padding-bottom: 4px;
    margin-bottom: 8px;
}

#relationship-items-list .drawer-contents label {
    padding-bottom: 2px;
}

.relationship-rule-title {
    font-weight: bold;
    width: 700px;
    display: inline-block;
}

.relationship-type-id,
.relationship-type-title {
    font-weight: bold;
    width: 160px;
    display: inline-block;
}

#relationships-table {
    table-layout: fixed;
}

#relationships-table tr td:first-child {
    width: 30px;
}

#relationships-table tr td {
    word-wrap: break-word;
}

#relationships-table tr:first-child {
    font-weight: bold;
}

.relationship-editor-popup {
    position: relative;
    background: #FFF;
    padding: 10px 50px 10px 10px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
    border: 2px solid #c41130;
    font-size: 16px;
}

.relationship-table-relationship {
    width: 140px;
}

.relationship-table-related-item {
    width: 70px;
}

.relationship-table-action {
    width: 70px;
}

.not-sortable {
    cursor: auto !important;
}

/* === CSS for Width less than 844px ===
--------------------------------------------------------- */
@media screen and (max-width: 844px) {

    .related-items-section-name {
        margin-left: 6px;
        padding-left: 12px;
    }

    .related-items-main-section .related-items-section-name {
        margin-left: 0;
        padding-left: 12px;
    }

    .related-items-subsection {
        margin-left: 8px;
    }

    .related-items-subsection-header::after {
        display: none;
    }

    #related-items ul {
        max-width: 100%;
    }

}

/* === CSS for Width less than 768px ===
--------------------------------------------------------- */
@media screen and (max-width: 768px) {

}


/* Styling for the visualization */

.cy-popup-link:link {
    font-size: 14px;

}

.cy-popup-link:hover {

}

#cyPreview {
    width: 100%;
    height:  100%;
}

#cyPopup {
    width: 100%;
    height: 100%;
}

.cyPreviewBox {       /* 관계그래프 미리보기 박스 */
    position: relative;
    background: #fff;
    /* border: 1px solid #eee !important; */
    padding: 4px;
    width: 100%;
    max-width: 1170px;
    height: 500px;

}




/*
The height of the full size graph (cyPopupBox) should not exceed 700 so that it fits an iPad.
The aspect ration of the preview and full size graphs should be the same.
 */
.cyPopupBox {        /* 미리보기 박스 클릭 시 뜨는 팝업창 */
    position: relative;
    background: #fff;
    border: 3px solid #666;
    padding: 4px;
    width:auto;
    max-width: 1400px;
    height: 800px;
    margin: 0px auto;
}



.mfp-bg {
    background-color: #000;
    opacity: 0.4;
}

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.fa-expand::before {
    content: "\f065";
}
.fa-plus::before {
    content: "\f067";
}
.fa-minus::before {
    content: "\f068";
}

.fa:hover {
    color: #333;
}