@charset "UTF-8";
@import url("../plugins/fontawesome-free/css/all.min.css");
:root {
 --colorA: #673ab7; --tag-text: #FFF; --tag-back: hsl(250deg 100% 18.58% / 74%); --tag-front: hsl(250deg 100% 18.58% / 74%);
}
body {-webkit-font-smoothing: antialiased;}
img { max-width: 100%; height: auto; transition: opacity 0.3s ease-in;}
.wrapper .sidebar-wrapper .sidebar-header .toggle-btn {display:none;}
.wrapper.toggled .sidebar-wrapper .sidebar-header .toggle-btn {display:block;}
.hiddeni {display:none !important;} .dirltr {direction:ltr;} .dirrtl {direction:rtl;}
.btn-switcher {top:85%;}
.btn:hover i.bx-spinH {-webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
.flip-me i {transition: transform .5s ease;}
.flip-me:active i, .flip-me:hover i {transform: scaleX(-1);}
.m-05 {margin: 0 0.5em !important;}
.w64 {width:64px;}
.catcrumb a:hover .fa-folder:before {content: '\f07c';}
.btn-group-xs>.btn, .btn-xs {font-size: .70rem;}

.aniline {position: relative;}
.aniline::after {content: ''; position: absolute; width: 100%; height: 1px; background: var(--colorA); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease-out;}
.aniline:hover::after {transform: scaleX(1);}

.csstooltip {position:relative; border-bottom:1px dashed #eeeeee; transition:.5s;}
.csstooltip:hover {background:#EEEEEE;}
.csstooltip::before {content: attr(data-text); position:absolute; top:50%; transform:translateY(-50%); left:100%; margin-left:15px; width:100px; padding:5px; border-radius:10px; background: #000000; color: #ffffff; text-shadow: 0px 0px 1px rgba(0,0,0,0.8); text-align:center; opacity:0; transition:.5s opacity;}
.csstooltip.left::before {left:initial; margin:initial; right:100%; margin-right:15px;}
.csstooltip.bottom::before {left:0%; margin:0px; top:170%;}
.csstooltip::after {content: ''; position:absolute; left:100%; margin-left:-5px; top:50%; transform:translateY(-50%); border:10px solid #000000; border-color: transparent #000000 transparent transparent; opacity:0; transition:.5s opacity;}
.csstooltip:hover::before, .csstooltip:hover::after {opacity:1; z-index:9;}
.csstooltip.bottom::after {border-color:transparent transparent #000000 transparent; left: 50%; top:100%; margin-left: -18px;}

.color666 {color:#666666;}
.color666:hover {color:#333333;}
.csstooltip.color666::before {background: #666666;}
.csstooltip.color666.bottom::after {border-bottom-color:#666666;}

.image-container {display: flex; flex-direction: column; align-items: center;}
img.lazyload {background-color: #f0f0f0; min-height: 200px; width: auto; display: block;}


.wasfat table tr td img {width:200px; max-height:140px; float:right;}
.wasfat table tr td img.ph {max-width:140px; max-height:100px;}
h4.title {font-family: "Playwrite GB S", cursive; font-optical-sizing: auto; font-weight: 400; font-style: normal; color:#000000; white-space: break-spaces; text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;}



.keywords ul {list-style:none;}
.keywords ul li {float:left; margin: 0.1em;}
.keywords ul li a {position: relative; display: inline-block; padding: 0.25em 1em 0.25em 2em; margin: 0.1em; font-weight: 600; font-size:0.85em; color: var(--tag-text); background: var(--tag-front); border: 1px solid var(--tag-front); border-radius: 6px; clip-path: polygon(20px 0px, 100% 0px, 100% 100%, 0% 100%, 0% 20px); transition: clip-path 500ms;}
.keywords ul li a.active {background: var(--tag-text); color: var(--tag-front);}
.keywords ul li a:after {content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: var(--tag-back); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);  border-radius: 0 0 6px 0; transition: transform 500ms;}
.keywords ul li a:hover {clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0% 100%, 0% 0px);}
.keywords ul li a:hover:after {transform: translate(-100%, -100%);}
.keywords ul li a.active {}
.keywordsL ul li a {font-size:1.5em; margin: 0.25em;}
/*
margin:0; padding:0; width: 64px; height: 32px; line-height: 32px; background-color: #FFFFFF; font-size:1em; border: 1px solid #2E2E2E; border-radius:  0 1em 1em 0;  text-align: center; 
display: inline-block; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
*/
.radiotoggle {}
.radiotoggle label {}
.radiotoggle label:hover { background-color: #B4B4B4;}
.radiotoggle input[type="radio"] {display:none}
.radiotoggle input[type="radio"]:checked+label { background-color: #DAA521;}
.radiotoggle label.r1 {border-radius:  1em 0 0 1em;}