/*  ****************************************************************  */
/*                                CONTENT                             */
/*  ****************************************************************  */

		.col-1 { width:60%; }
		.col-2 { width:30%; }
		.col-3 { width:20%; }
		.col-4 { width:15%; }
		.col-5 { width:12%; }
		.col-6 { width:10%; }

		.card.user-creator{border-top: 0px solid red !important; }



	/* ======  CHECKBOX  =======  */

		.item-content-check{
			position:absolute;
			display: inline-block;
			top: -5px;
			right: -5px;
		}

		.item-content-check input[type=checkbox]{
			display: none;
		}

		.item-content-check input[type=checkbox]:checked + label {
			background: #090;
			border: 2px solid #090;
		} 
		.item-content-check input[type=checkbox]:checked + label:after {
			font-family: 'icons';
			font-weight: normal;
			font-size: 1.25em;
			content: "\E802";
			color: #fff;
			line-height: 1.15em;
			padding-left: 2px;
			text-shadow: 1px 1px 6px #2d352a;
		}

		.item-content-check label{
			cursor: pointer;
			display: block;
			width: 24px;
			height: 24px;
			background: #fff;
			border: 2px solid #fff;
			-webkit-box-shadow:  0px 2px 3px rgba(0,0,0, 0.5);
			-moz-box-shadow:    0px 2px 3px rgba(0,0,0, 0.5);
			box-shadow:         0px 2px 3px rgba(0,0,0, 0.5);
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%; /* future proofing */
			-khtml-border-radius: 50%; /* for old Konqueror browsers */
		}

		select.filter-selection {
			border:0;
			background: transparent;
			outline: none;
			-webkit-appearance: button;
			-webkit-user-select: none;
			-moz-appearance: none;
			padding: 2px 8px;
		}



	/*  ======  ITEM TOOLS  ====== */
		
		.item-relation-tools{
			padding: .5em 0 .25em 0;
			margin-top: .8em;
			border-top: 1px solid #ddd;
			position: relative;
		}

		.item-relation-tools a:before{
			font-family: 'icons';
			font-weight: normal !important;
			font-size: 1em;
			color: #ccc;
			display: inline;
			vertical-align: top;
			margin-right: 8px;
			display: inline-block;
		}

		.item-relation-tools a.selected:before,
		.item-relation-tools a:hover:before{
			color: #444 !important;
		}

		.item-relation-tools a.relation-time span,
		.item-relation-tools a.relation-position span,
		.item-relation-tools a.relation-order span,
		.item-relation-tools a.relation-delete span{ display: none;}

		.item-relation-tools a.relation-time:before{content: "\E82D"; }
		.item-relation-tools a.relation-position:before{content: "\E82B"; font-size: .9em;  }
		.item-relation-tools a.relation-order:before{content: "\E845"; font-size: .95em;     margin-right: 0px !important;}
		.item-relation-tools a.relation-order{color: #444; font-weight: normal !important;}

		.item-relation-tools a.relation-delete:hover:before{color: #b44; }
		.item-relation-tools a.relation-delete:before{
			position: absolute; 
			right:0; bottom: 30%;
			content: "\E830"; 
			font-size: 1.4em; 
			margin-top: -20px;
			margin-right: 0 !important;
			line-height: .2em
		}

		.item-relation-tools .item-relation-tools-right{
			display: inline-block;
			position: absolute;
			right: 0;
			white-space: nowrap;
		}

		.item-relation-tools .item-relation-tools-right .shiro-btn{
			padding: 0;
			margin: 0 0 0 1.5em;
			font-size: 1em;
		}
		.view-cards .item-relation-tools .item-relation-tools-right .shiro-btn{ display: none; }


	/*  -------  TOTAL RELATIONS  ------- */

		.item-content-total{

			padding-left: 10px;
			display: inline-block;
		}

		.item-content-total:hover .item-content-total-tooltip{
			display: block;
			z-index: 999;
		}

		.item-content-total > a{color: #999; position: relative; }
		.item-content-total > a:hover{color: #000; }
		.item-content-total > a:before{ 
			font-family: 'icons';
			font-size: .9em;
			content: '\E828';
			line-height: 80%;
    		vertical-align: bottom;
    		margin-right: 3px;
    		color: #ccc;
		}

/*		.item-content-total > div{
			position: relative;
			display: inline-block;
		}*/

		.item-content-total-tooltip{
			display: none;
			padding: 5px 9px;
			position: absolute;
			background: #000;
/*			left: -10px;
			top: -10px;*/
    left: 2px;
    top: 8px;
			-webkit-transform: translate(-100%,-50%);
			-ms-transform: translate(-100%,-50%);
			transform: translate(-100%,-50%);
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px; /* future proofing */
			-khtml-border-radius: 5px; /* for old Konqueror browsers */	
		}

		.item-content-total-tooltip:before {
			left: 98%;
			top: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-left-color: #000;
			border-width: 7px;
			margin-top: -5px;
		}

		.arrow_box:before {
			border-color: rgba(194, 225, 245, 0);
			border-right-color: #c2e1f5;
			border-width: 31px;
			margin-top: -31px;
			margin-top: 50%;
		}

		.item-content-total-tooltip a{
			display: block;
			font-weight: normal !important;
			white-space: nowrap;
			color: #ccc;
		}

		.item-content-total-tooltip a:hover{ color: #fff !important; }
		
		.item-content-total-tooltip a span.total{ font-weight: bold !important; }

		.item-content-total-tooltip:before a{
			display: block;
			color: #ccc !important;
			font-weight: normal !important;
			font-size: .9rem !important;
			line-height: 1rem;
			max-width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-content-total-tooltip:before a span{
			font-weight: bold;
			display: inline-block !important;
		} 

		.item-content-total-tooltip:before a:hover {
			color: #fff !important;
		}

	/*  ======  ITEM CONTENT  ====== */

		.item-content {
			background-color: #fff;
			margin-bottom: 1em;
			-webkit-box-shadow:  0px 2px 3px rgba(0,0,0, 0.2);
			-moz-box-shadow:    0px 2px 3px rgba(0,0,0, 0.2);
			box-shadow:         0px 2px 3px rgba(0,0,0, 0.2);
			position: relative;
		}

		.item-content-title a {
		    color: #444;
		    font-size: 1.1em;
		    font-weight: bold;
		    display: block;
		    width: 100% !important;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}

		.item-content-type {
		    text-transform: uppercase;
		    font-size: .7em;
		    color: #2da4a8;
		    letter-spacing: 1px;
		    font-weight: bold;
		}

		.item-content-prop-title {
			text-transform: uppercase;
		    font-size: .7em;
		    font-weight: bold;
		    color: #ccc;
		    letter-spacing: 1px;
		}

		.item-content-prop-value {
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-content-image {
			display: block;
			width: 100%;
			height: 120px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		.item-content-image img {
			display: none;
		}

		.item-content-block {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			display: block;
			position: relative;
		}


	/*  ------------------  */
	/*      CARD LIST       */
	/*  ------------------  */

		.view-list .card-item {
			width: 100% !important;
			height: auto !important;
		}

		.view-list .item-content-image-box {
			width: 20%;
			display: inline-block;
			padding: .5em .5%;
			display: none;
		}

		.view-list .item-content-block {
			width: 100%;
			padding: .75em 15px .5em 50px;
			display: inline-block;
			vertical-align: top;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		.view-list .item-content-check {
			left: 12px;
			top: 12px;
			z-index: 998;
			display: inline-block;
			width: 30px;
		}

		.view-list .item-content-title {
			width: 35%;
			display: inline-block;
		}

		.view-list .item-content-prop {
			display: inline-block;
			vertical-align: top;
			padding-right: 10px;
		}

	/*  ------------------  */
	/*      CARD VIEW       */
	/*  ------------------  */



		.view-cards .cards-shy{
			display: none;
		}

		.view-cards .item-content-prop {
			/*padding: .75em 0 0 0;*/
		}
		
		.view-cards .item-content-block{
			padding: .75em 8% .75em 8%;
		}

		.view-cards .item-content-select{
			position:absolute;
			top: -5px;
			right: -5px;
		}

		.view-cards .item-content-title a {
		    font-size: 1.25em;
		    font-weight: bold;
		}

		.view-cards .item-content-select label{
			cursor: pointer;
			display: block;
			width: 24px;
			height: 24px;
			background: #fff;
			border: 2px solid #fff;
			-webkit-box-shadow:  0px 2px 3px rgba(0,0,0, 0.5);
			-moz-box-shadow:    0px 2px 3px rgba(0,0,0, 0.5);
			box-shadow:         0px 2px 3px rgba(0,0,0, 0.5);

			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%; /* future proofing */
			-khtml-border-radius: 50%; /* for old Konqueror browsers */
		}

		.view-cards .item-content-button:hover {
			background-color: #444;
			color: #fff;
		}



/*  ****************************************************************  */
/*                                RELATIONS                           */
/*                          .shiro-relation-items                     */
/*  ****************************************************************  */

		.item-relation-title{
			font-size: .85em;
			line-height: 1.3;
		}

		.item-relation-label {
			text-transform: uppercase;
			font-size: .6em;
			letter-spacing: 1px;
			font-weight: 900;
			color: #2da4a8;
			margin-bottom: 1em;
		}
		.item-relation-title {
			font-weight: 900;
			letter-spacing: .5px;
			font-size: .9em;
			line-height: 1.2em;
		}
		.item-relation-title a {
			color: #444;
			font-size: 1.1em;
			display: block;
			width: 100% !important;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-relation-subtitle h6{
			text-transform: uppercase;
			font-style: normal;
			color: #a7a97e;
			letter-spacing: 1px;
			font-size: .6em;
			margin: 1.1em 0 .2em 0;
			line-height: 1;
		}

		.item-relation-subtitle {
			font-style: italic;
			font-size: .85em;
			line-height: 1.3em;
			margin-top: 8px;
		}
		.item-relation-subtitle span {
			color: #999;
		}
		.item-relation-relations {
			margin-top: 1em;
		}
		.item-relation-button {
			display: inline-block;
			background: #eee;
			font-size: .6em;
			padding: 1px 6px 2px 6px;
			margin-right: 3px;
		}
		.view-cards .item-relation-button:hover {
			background-color: #444;
			color: #fff;
		}

		.item-relation-relations{
			display: none;
		}

		.contents-relation{
			display: block;
			height: 20px;
			border-color: #ddd;
			outline: none;
		}

	/*  ------------------  */
	/*      VIEW LIST       */
	/*  ------------------  */
		
	/*  ------------------  */
	/*      VIEW CARD       */
	/*  ------------------  */

		.view-cards .card {
			background-color: #fff;
			margin-bottom: 1em;
			-webkit-box-shadow:  0px 2px 3px rgba(0,0,0, 0.2);
			-moz-box-shadow:    0px 2px 3px rgba(0,0,0, 0.2);
			box-shadow:         0px 2px 3px rgba(0,0,0, 0.2);
			position: relative;
		}

		.view-cards .item-relation-image {
			display: block;
			width: 100%;
			height: 120px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		.view-cards .item-relation-image.blank {
			background-color: #b1b1a7;
			background-position: center center;
			background-size: cover;
		}

		.view-cards .item-relation-image img {
			display: none
		}

		.view-cards .item-relation-block {
			padding: .5em 8% .5em 8%;
			display: block;
			position: relative;
		}
		
		.view-cards .item-relation-type {
			text-transform: uppercase;
			font-size: .7em;
			color: #2da4a8;
			/*margin-bottom: 5px;*/
			letter-spacing: 1px
		}
		.view-cards .item-relation-property {
			color: #999;
			font-weight: normal;
			font-size: .9em;
		}



/*  ****************************************************************  */
/*  ****************************************************************  */
		a.content-selection{
			display: inline-block;
			padding: 2px;
		}

		.item-relation-selection{
			position:absolute;
			top: 6px;
			right: 8px;
		}

		.chronical-item .item-relation-selection{
			top: -12px;
			right: 10px;
		}

		.chronical .item-relation-selection > a {display: none; }
		.chronical .item-relation-selection > a.checked {display: block; }
		.chronical:hover .item-relation-selection > a{
			display: block;
			/*opacity: 1;*/
		}

		.mobile .chronical .item-relation-selection > a{display: block; }

		a.content-collection-remove,
		a.content-selection-toggle,
		a.content-collection-toggle,
		.item-relation-selection > a{
			display: block;
			padding: 3px;
			width: 16px;
			font-family: 'icons';
			font-weight: normal;
			font-size: 1.1em;
			text-align: right;
			display: inline-block;
			color: #888;
			cursor: pointer;
			z-index: 998;
		}

		a.content-selection-toggle:before,
		.item-relation-selection > a:before
		{content: "\E805"; font-weight: normal; display: inline-block; }

		a.content-collection-toggle:before
		{content: "\E82A"; font-weight: normal; display: inline-block;}

		a.content-selection-toggle span,
		.item-relation-selection > a span { display: none; ;}
		
		
		a.content-selection-toggle:hover:before,
		a.content-selection-toggle.checked:before,		
		.item-relation-selection > a:hover:before,
		.item-relation-selection > a.checked:before
		{content: "\E804"; }

		a.content-collection-toggle:hover:before,
		a.content-collection-toggle.checked:before
		{
	font-family: 'icons';
	content: "\E857";
	color: var(--main-color);
		}

		a.content-selection-toggle.checked:before {
			color: #aa0b0c;
		}

		a.content-collection-remove::before{
			content: "\E830";
			font-size: 1.6em;
			color: #ccc;
		}
		a.content-collection-remove:hover::before{
			content: "\E830";
			color: #222;
		}

/*  ****************************************************************  */

		.content-collection-box{
			position: absolute;
			z-index: 999;
			text-align: left;
			top: 0;
			right: 0;
			display: block;
			width: 200px;
			background: #000;
		}

		.content-collection-box h3 {
			padding: .5em 0;
			font-size: .8em;
			border-bottom: 1px solid #666;	
			color: #999;
		}

		.content-collection-box a {
			color: #fff;
		}

		.content-collection-box ul {
			list-style-type: none; 
			padding: .5em .75em .25em .75em;
			max-height: 120px;
			overflow-y: auto;
		}

		.content-collection-box ::-webkit-scrollbar { width: 8px; }
		.content-collection-box ::-webkit-scrollbar-track {background: #222; }
		.content-collection-box ::-webkit-scrollbar-thumb {background: #444; }
		.content-collection-box ::-webkit-scrollbar-thumb:hover {background: #999; }

		.content-collection-box ul li { margin-left: 0px; }

		.content-collection-relation{
			display: inline-block;
			width: 95%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;			
			cursor: pointer;
		}

		.content-collection-relation:before{
			font-family: 'icons';
			font-weight: normal;
			font-size: .9em;
			display: inline-block; 
			color: #ddd;
			cursor: pointer;
			content: "\F096";
			margin-right: 8px;
		}

		.content-collection-relation.checked{}
		.content-collection-relation.checked:before{
			content: "\E84E";
		}

		.content-collection-box .content-collection-add-container{
			width: 100%;
			padding: .5em .75em .75em .75em;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.content-collection-box .content-collection-add{
			width: 100%;
			border: 1px solid #666;
			background: transparent;
			font-family: inherit;
			font-size: 1em;
			color: #fff; 
			padding: 1px 6px 3px 6px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			display: block;
			outline: 0;
		}


/*  ****************************************************************  */
/*  ****************************************************************  */