/*
	To change this license header, choose License Headers in Project Properties.
	To change this template file, choose Tools | Templates
	and open the template in the editor.
*/
/* 
	Created on : 01/09/2022, 06:27:56 PM
	Author     : izumaya
*/

/*	.tooltip {
*/		.tooltipx, 
		.tooltipx-link,
		.tooltipx-insideTooltip {
			position : relative;
		}
		.tooltipx-link:hover {
			cursor: pointer;
		}
		.tooltipx:after,
		.tooltipx-insideTooltip:after {
			visibility: hidden;
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top:0px;
			background-color:  rgba(0,0,0,0.2);
		}
		.tooltipx:hover:after,
		.tooltipx-insideTooltip:hover:after {
			cursor: help;
			visibility: visible;
		}
		.tooltiptext, 
		.tooltiptext-insideTooltiptext {
			visibility: hidden;
			width: auto;
			background-color: white;
			box-shadow : 0px 3px 10px rgba(0,0,0,0.8);
			color:  black;
			text-align: left;
			border-radius: 6px;
			padding: 5px;		
			position: absolute;
			z-index: 2;
			left: calc(100% + 3px);
			opacity: 0;
			transition: opacity 0.3s;
		}
		.tooltiptext-left,
		.tooltiptext-insideTooltiptext-left {
			visibility: hidden;
			width: auto;
			background-color: white;
			box-shadow : 0px 3px 10px rgba(0,0,0,0.8);
			color:  black;
			text-align: left;
			border-radius: 6px;
			padding: 5px;		
			position: absolute;
			z-index: 2;
			right: calc(100% + 3px);
			opacity: 0;
			transition: opacity 0.3s;
		}
		.tooltiptext ul,
		.tooltiptext-left ul,
		.tooltiptext-insideTooltiptext ul,
		.tooltiptext-insideTooltiptext-left ul {
			width: 100%;
			padding: 0px 0px 0px 15px;
			display: compact
		}
		.tooltiptext li,
		.tooltiptext-left li,
		.tooltiptext-insideTooltiptext li, 
		.tooltiptext-insideTooltiptext-left li {
			margin-right: 20px;
			white-space: nowrap;
		}
		.tooltipBigContent {
			visibility: hidden;
			width: auto;
			background-color: white;
			box-shadow : 0px 3px 10px rgba(0,0,0,0.8);
			color:  black;
			text-align: left;
			border-radius: 6px;
			padding: 5px;		
			position: absolute;
			z-index: 2;
			top: 0;
			right: 100%;
			opacity: 0;
			transition: opacity 0.3s;
		}
		.tooltiptext::after,
		.tooltiptext-insideTooltiptext::after {
			content: "";
			position: absolute;
			top: 5px;
			right: 100%;
			border-width: 5px;
			border-style: solid;
			border-color: white white transparent transparent;
		}
		.tooltiptext-left::after,
		.tooltiptext-insideTooltiptext-left::after {
			content: "";
			position: absolute;
			top: 5px;
			left: 100%;
			border-width: 5px;
			border-style: solid;
			border-color: white transparent transparent white;
		}
		.tooltipx:hover .tooltiptext,
		.tooltipx:hover .tooltiptext-left,
		.tooltipx-link:hover .tooltiptext,
		.tooltipx-link:hover .tooltiptext-left,
		.tooltipx-link:hover .tooltiptext-insideTooltiptext,
		.tooltipx-link:hover .tooltiptext-insideTooltiptext-left,
		.tooltipx-insideTooltip:hover .tooltiptext-insideTooltiptext,
		.tooltipx-insideTooltip:hover .tooltiptext-insideTooltiptext-left,
		.tooltipx:hover .tooltipBigContent {
			visibility : visible;
			opacity : 1;
			background-color: white;
		}
/**/
	
/*	.conScroll {
*/		.conScroll { 
			overflow: auto; 
			scrollbar-width : thin;	
			scrollbar-color : rgb(33,51,110) rgb(125,125,125);
		}
/**/
	
/*	.z {
*/		.z-Container {
			margin-right : 50px; 
			margin-left : 10px;
			z-index: 1;
		}
		.z-Table { 
			width : 1100px; 
			background-color: transparent;
		}
		.z-Table-insideTooltip { 
			width : 520px; 
			max-width: 520px;
			background-color: transparent;
		}
		.z-TdDiv { 
			width : 100%;	
			height: 100%;
			text-align : left;
			overflow-x: hidden;
			overflow-y: auto;
		}
		.z-Tbody,
		.z-Thead {
			display: table;
			width:100%;
			background-color: transparent;
		}
		.z-enfasis {
			color: rgb(1,124,183);
		}
		.z-BorderText-container {
			position: relative;
			padding-top: 10px;
		}
		.z-BorderText-text {
			position: absolute;
			background-color: white;
			color: rgb(1,124,183);
			font-size: 10px;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
			top: -7px;
			left: 3px;
		}
		.z-box-rightSeparator {
			margin-right: 5px;
		}
		.z-box-topSeparator {
			margin-top: 5px;
		}
		.z-box-leftSeparator {
			margin-right: 5px;
		}
		.z-box-bottomSeparator {
			margin-bottom: 5px;
		}
		.z-box-rightPaddingSeparator {
			padding-right:  5px;
		}
		.z-box-leftPaddingSeparator {
			padding-left: 5px;
		}
		.z-box-topPaddingSeparator {
			padding-top: 5px;
		}
		.z-box-bottomPaddingSeparator {
			padding-bottom: 5px;
		}
		.z-box-rightSeparatorLine {
			padding-right: 5px;
			border-right: #D4E0EE solid 1px;
		}
		.z-box-leftSeparatorLine {
			padding-left: 5px;
			border-left: #D4E0EE solid 1px;
		}
		.z-tooltipWrap {
			white-space: nowrap;
		}
		.z-spaceRow {
			margin: 5px 0px;
			height: 10px;
		}
		.z-invalidInput {
			background-color: #ff6666;
			color: white;
		}
/**/

/*	.beauty {
*/		.beauty-title {
			margin-bottom: 10px;
		}
		.beauty-subtitle {
			font-size: 13px;
			text-align: left
		}
		.beauty-alertText {
			font-size: 11px;
			font-weight: bold;
			text-align: center;
			color: #d08719;
			margin-bottom: 10px;
		}
		.beauty-enfasisText {
			font-size: 11px;
			font-weight: bold;
			text-align: center;
			color: rgb(1,124,183);
			margin-bottom: 10px;
		}
		.beauty-filter-element {
			justify-content: center;
			width: auto;
			text-align: left
		}
		.beauty-filter-label {
			text-align: left
		}
		.beauty-border {
			border: 1px solid #D4E0EE;
			border-radius: 5px;
		}
		.beauty-subcontainer {
			width: auto;
			display: inline-flex;
			justify-content: center;
			padding: 5px 5px;
			margin-bottom: 15px;
			float: left
		}
		.beauty-subcontainer-elementsCenter {
			width: 100%;
			height: 200px;
			padding: 5px 5px;
			margin-bottom: 15px;
			white-space: nowrap;
		}
		.beauty-subcontainer-flexible-right{
			width: auto;
			display: inline-flex;
			padding: 5px 5px;
			margin-bottom: 15px;
			float: right;
		}
		.beauty-subcontainer-flexible-left{
			width: auto;
			display: inline-flex;
			padding: 5px 5px;
			margin-bottom: 15px;
			float: left;
		}
		.beauty-flex-generalElement {
			display: flex;
			width: auto;
		}
		.beauty-iframe {
			width: 100%;
			height: 350px;
			display: inline-flex;
			justify-content: center;
			float: left;
		}
		.beauty-select {
			padding: 0px;
		}
		.beauty-invisibleSelect {
			padding: 0px;
			margin: 0px;
			width: 100%;
			background-color: transparent;
			border-color: transparent;
			border: none;
		}
		.beauty-invisibleTextArea {
			padding: 2px;
			margin: 2px;
			width: 100%;
			height: 100%;
			background-color: transparent;
			border-color: transparent;
			border: none;
			box-sizing: border-box;
			color: #000000;
			font-style: normal;
			font-size: 10px;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
			-webkit-box-sizing: border-box; 
			-moz-box-sizing: border-box;
			text-indent: 0.01px; 
			text-overflow: '';
			resize: none;
			scrollbar-width : thin;	
			scrollbar-color : rgb(33,51,110) rgb(125,125,125);
		}
		.beauty-td-align-right {
			margin: 0px 5px;
			text-align: right;
		}
		.beauty-td-align-left {
			margin: 0px 5px;
			text-align: left;
		}
		.beauty-select-allwidth {
			width: 100%;
		}
		.beauty-button {
			padding: 0px 5px;
		}
		.beauty-invisibleButton {
			padding: 0px;
			margin: 0px;
			width: 100%;
			height: 100%;
			background-color: transparent;
			border-style: none;
			border-color: transparent;
		}
		.beauty-tbody {
			display : block;
			height: 250px;
			width: 1100px;	
			scrollbar-width : thin;	
			scrollbar-color : rgb(33,51,110) rgb(125,125,125);
			overflow-x: hidden;
			overflow-y: scroll;
		}
		.beauty-tbody-2 {
			display : block;
			height: auto;
			width: 650px;
			min-height: 80px;
			max-height: 400px;
			scrollbar-width : thin;	
			scrollbar-color : rgb(33,51,110) rgb(125,125,125);
			overflow-x: hidden;
			overflow-y: scroll;
		}
		.beauty-tbody .insideTooltip {
			height: auto;
			max-height: 180px;
			width: 800px;
		}
		.beauty-tbody-2 .tr-color1,
		.beauty-tbody .tr-color1 { 
			background-color: #DDDDDD
		}
		.beauty-tbody-2 .tr-color2,
		.beauty-tbody .tr-color2 { 
			background-color: #DEEBF7
		}
		.beauty-tbody-2 .tr-color3,
		.beauty-tbody .tr-color3 { 
			background-color: #ccffcc
		}
		.beauty-tbody-2 td,
		.beauty-tbody td { 
			padding-top : 3px;
			padding-bottom : 3px;
			padding-left : 5px;
			padding-right : 5px;
			box-sizing: border-box;
		}	
		.beauty-thead {
			width: calc(100% - 8px);
			margin-bottom: 3px;
			box-shadow : 0px 1px 3px grey;
		}
		.beauty-thead-insideTooltip {
			width: calc(100% - 1em);
			margin-left: calc(0% + 2px);
			margin-bottom: 3px;
			box-shadow : 0px 1px 3px grey;
		}
		.beauty-thead td,
		.beauty-thead-insideTooltip td{ 
			background-color :  rgb(33,51,110);
			padding-top : 3px;
			padding-bottom : 3px;
			padding-left : 5px;
			padding-right : 5px;
		}
/**/

/*      .zanimation {
            @keyframes {
*/              @keyframes text-emphasis-1 {
                    0% {
                        background: linear-gradient(to right,
                            rgba(0, 120, 182, 1) 0%,
                            rgba(0, 120, 182, 1) 40%,
                            transparent 40.1%,
                            transparent 100%);
                        background-size: 200% 100%;
                        background-position: -100% 0%;
                        color: inherit;
                    }   
                    
                    20% {
                        color: rgba(0, 120, 182, 1);
                    }                    
                    
                    70% {
                        background-position: 140% 0%;
                    }

                    100% {
                        background-position: 140% 0%;
                        background: none;
                    }
                }
/*          }

            .tags {
*/              .zanimation-text-emphasis {
                    animation: text-emphasis-1 1s ease;
                }     
/*          }
        }
*/