:root{
--primary:#516fe0;
--primary-hover:#3B54C0;
--secondary:#6f396d;
--secondary-hover:#5C295F;
--white:#ffffff;
--white-hover:#eeeeee;
--black:#000000;
--black-hover:#111111;
--light:#FBF9F8;
--light-hover:#efefef;
--dark:#1d1a35;
--dark-hover:#15132D;
--outline:#211c2b;
--success:#35BF47;
--success-hover:#5C9F13;
--info:#558AF4;
--info-hover:#017DDB;
--warning:#FFCD38;
--warning-hover:#f7b200;
--error:#F3214E;
--error-hover:#D01851;
--box-success-layer:#d4edda;
--box-success-border:#93c79f;
--box-success-color:#155724;
--box-info-layer:#cce5ff;
--box-info-border:#a2c9f3;
--box-info-color:#004085;
--box-warning-layer:#fff3cd;
--box-warning-border:#f1dda2;
--box-warning-color:#856404;
--box-error-layer:#f8d7da;
--box-error-border:#f5b5bc;
--box-error-color:#721c24;
/* --body:#FBF9F8; */
/* --body:#f9f7f6; */
--body:#eee;
--layer:#fff;
--scroll:#a0a0a0;
--select:#a0a0a0;
--border:#f3f3f3;
--shadow:rgba(177, 177, 177, 0.77);
--shadow-button:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(233,236,239,.25);
--shadow-inner:rgba(18, 22, 33, .1);
--head-text:#6b6e77;
--sub-text:#6b6e77;
--text:#212529;
--placeholder:#ededed;
--input-bg:#FEFEFE;
--input-border:#ddd;
--input-shadow:inset 1px 2px 4px rgba(177, 177, 177, 0.09);
--disabled-input-border:#b9b9b9;
--disabled:#e8e8e8;
--disabled-inner:#dcdcdc;
--select-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
[data-theme="dark"] {
/* --body:#1A2035; */
--body:#1A2035;
--layer:#202940;
--scroll:#3a4354;
--select:#a0a0a0;
--border:#25334c;
--shadow:rgb(0 0 0 / 77%);
--shadow-button:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgb(17 30 43 / 25%);
--shadow-inner:rgba(18, 22, 33, .1);
--head-text:#c2c4cc;
--sub-text:#c2c4cc;
--text:#d4d4dc;
--input-bg:#1b2331;
--input-border:#45546f;
--input-shadow:inset 2px 4px 7px -1px rgb(0 0 0 / 23%);
--disabled-input-border:#b9b9b9;
/* --disabled:#3b4354; */
--disabled:#9095a0;
--disabled-inner:#383e4a;
--outline:#354767;
--select-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23d4d4dc' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
--pr-bg:#232220;
--pr-border:#44413c;
--pr-color:#dccfac;
}
.font-montserrat{font-family:var(--font-montserrat);}
.font-muli{font-family:var(--font-muli);}
.shadow{box-shadow:0 0px 3px 0px var(--shadow-inner);}
body{background:var(--body);}
/**
* Element Sizes
* 28px
* 40px
* 50px
* --------------------------------------------------
*/
/**************************************************************************/
/**************************************************************************/
/* Background Colors */
/**************************************************************************/
/**************************************************************************/
.bg-primary {background-color:var(--primary)!important;}
.bg-primary-hover:hover {background-color:var(--primary-hover)!important;}
.bg-info {background-color:var(--info)!important;}
.bg-info-hover:hover {background-color:var(--info-hover)!important;}
.bg-warning {background-color:var(--warning)!important;}
.bg-warning-hover:hover {background-color:var(--warning-hover)!important;}
.bg-success {background-color:var(--success)!important;}
.bg-success-hover:hover {background-color:var(--success-hover)!important;}
.bg-error {background-color:var(--error)!important;}
.bg-error-hover:hover {background-color:var(--error-hover)!important;}
.bg-secondary {background-color:var(--secondary)!important;}
.bg-secondary-hover:hover {background-color:var(--secondary-hover)!important;}
.bg-dark {background-color:var(--dark)!important;}
.bg-dark-hover:hover {background-color:var(--dark-hover)!important;}
.bg-gray {background-color:#a0a0a0!important;}
.bg-dark-hover:hover {background-color:#aaa!important;}
.bg-light {background-color:var(--light)!important;}
.bg-light-hover:hover {background-color:var(--light-hover)!important;}
.bg-black {background-color:var(--black)!important;}
.bg-black-hover:hover {background-color:var(--black-hover)!important;}
.bg-white {background-color:var(--white)!important;}
.bg-white-hover:hover {background-color:var(--white-hover)!important;}
/**************************************************************************/
/**************************************************************************/
/* Typography */
/**************************************************************************/
/**************************************************************************/
/* Text Color */
.text-primary {color:var(--primary)!important;}
.text-primary-hover:hover {color:var(--primary-hover)!important;}
.text-secondary {color:var(--secondary)!important;}
.text-secondary-hover:hover {color:var(--secondary-hover)!important;}
.text-light {color:var(--light)!important;}
.text-light-hover:hover {color:var(--light-hover)!important;}
.text-dark {color:var(--dark)!important;}
.text-dark-hover:hover {color:var(--dark-hover)!important;}
.text-white {color:var(--white)!important;}
.text-white-hover:hover {color:var(--white-hover)!important;}
.text-black {color:var(--black)!important;}
.text-black-hover:hover {color:var(--black-hover)!important;}
.text-info {color:var(--info)!important;}
.text-info-hover:hover {color:var(--info-hover)!important;}
.box-info {background-color:var(--box-info-layer)!important;color:var(--box-info-color)!important;border:0 solid var(--box-info-border);}
.text-warning {color:var(--warning)!important;}
.text-warning-hover:hover {color:var(--warning-hover)!important;}
.box-warning {background-color:var(--box-warning-layer)!important;color:var(--box-warning-color)!important;border:0 solid var(--box-warning-border);}
.text-success {color:var(--success)!important;}
.text-success-hover:hover {color:var(--success-hover)!important;}
.box-success {background-color:var(--box-success-layer)!important;color:var(--box-success-color)!important;border:0 solid var(--box-success-border);}
.text-error {color:var(--error)!important;}
.text-error-hover:hover {color:var(--error-hover)!important;}
.box-error {background-color:var(--box-error-layer)!important;color:var(--box-error-color)!important;border:0 solid var(--box-error-border);}
.text-head {color:var(--text-head)!important;}
/* Blockquotes */
blockquote {padding:20px 20px;background-color:var(--c-background-blockquote)!important;border:1px solid var(--c-border-blockquote);}
.blockquote-primary {border-left:5px solid var(--primary);}
.blockquote-primary-hover {border-left:5px solid var(--primary-hover);}
.blockquote-info {border-left:5px solid var(--info);}
.blockquote-info-hover {border-left:5px solid var(--info-hover);}
.blockquote-warning {border-left:5px solid var(--warning);}
.blockquote-warning-hover {border-left:5px solid var(--warning-hover);}
.blockquote-error {border-left:5px solid var(--error);}
.blockquote-error-hover {border-left:5px solid var(--error-hover);}
.blockquote-success {border-left:5px solid var(--success);}
.blockquote-success-hover {border-left:5px solid var(--success-hover);}
.blockquote-secondary {border-left:5px solid var(--secondary);}
.blockquote-secondary-hover {border-left:5px solid var(--secondary-hover);}
.blockquote-light {border-left:5px solid var(--light);}
.blockquote-light-hover {border-left:5px solid var(--light-hover);}
.blockquote-dark {border-left:5px solid var(--dark);}
.blockquote-dark-hover {border-left:5px solid var(--dark-hover);}
/**
* Component:Button
* --------------------------------------------------
*/
.button{position:relative;display:inline-block;box-sizing:border-box;cursor:pointer;user-select:none;transition:background-color .25s ease, border-color .25s ease, color .25s ease;text-align:center;vertical-align:middle;white-space:normal;text-decoration:none;color:#fff;border:1px solid var(--outline);background:var(--outline);-webkit-appearance:none;}
.button:hover{border-color:var(--outline);background-color:var(--outline);box-shadow:var(--shadow-button);}
.button::-moz-focus-inner{margin:0;padding:0;}
.button:focus{outline:1px dotted;outline:3px auto -webkit-focus-ring-color;}
.button:hover,.button:focus,.button:active{text-decoration:none;}
.button:disabled,.button.is-disabled{cursor:not-allowed;opacity:.65;}
/* Makes link non-clickable:*/
.button:disabled:active,.button.is-disabled:active{pointer-events:none;}
.button.button-squared{border-radius:0!important;}
.button.button-pill {border-radius:50px!important;}
/*
badge
*/
/* [class*=badge-] {padding:0.25em 0.4em;font-size:75%;} */
.badge-success {background:#DBF8AA;color:#4B6F01!important;}
.badge-info {background:#add5ff;color:#102693!important;}
.badge-purple {background:#ebc5ff;color:#4f107b!important;}
.badge-error {background:#ffabab;color:#86000e!important;}
.badge-warning {background:#FFF29B;color:#937001!important;}
.badge-dark {background: #DFDFDF;color: #6C6C6C !important;}
/**
* Component:Button
* Modifier:Size
* --------------------------------------------------
*/
.button{min-height:40px;padding:6px 1.25rem;border-radius:3px;line-height:26px;font-size:14px;}
.form-size-small .button,
.form-button-small{min-height:28px;padding:4px 1.25rem;border-radius:2px;line-height:18px;font-size:12px;}
.form-size-large .button,
.form-button-large{min-height:50px;padding:8px 1.25rem;border-radius:4px;line-height:32px;font-size:16px;}
/**
* Component:Button
* Modifier:Variation
* --------------------------------------------------
*/
.button-primary{color:#fff;border-color:var(--primary);background-color:var(--primary);}
.button-primary:hover{color:#fff;border-color:var(--primary-hover);background-color:var(--primary-hover);}
.button-secondary{color:#fff;border-color:var(--secondary);background-color:var(--secondary);}
.button-secondary:hover{color:#fff;border-color:var(--secondary-hover);background-color:var(--secondary-hover);}
.button-outline{color:var(--text);border-color:var(--outline);background-color:transparent;}
.button-outline:hover{color:#fff;border-color:var(--outline);background-color:var(--outline);}
.button-link{color:var(--secondary);border-color:transparent;background-color:transparent;}
.button-link:hover{color:var(--secondary-hover);border-color:transparent;background-color:transparent;}
.button-success{color:#fff;border-color:var(--success);background-color:var(--success);}
.button-success:hover{color:#fff;border-color:var(--success-hover);background-color:var(--success-hover);}
.button-info{color:#fff;border-color:var(--info);background-color:var(--info);}
.button-info:hover{color:#fff;border-color:var(--info-hover);background-color:var(--info-hover);}
.button-warning{color:#212529;border-color:var(--warning);background-color:var(--warning);}
.button-warning:hover{color:#212529;border-color:var(--warning-hover);background-color:var(--warning-hover);}
.button-error{color:#fff;border-color:var(--error);background-color:var(--error);}
.button-error:hover{color:#fff;border-color:var(--error-hover);background-color:var(--error-hover);}
.button-light{color:var(--text);border-color:var(--light);background-color:var(--light);}
.button-light:hover{color:var(--text);border-color:var(--light-hover);background-color:var(--light-hover);}
.button-dark{color:#fff;border-color:var(--dark);background-color:var(--dark);}
.button-dark:hover{color:#fff;border-color:var(--dark-hover);background-color:var(--dark-hover);}
.button-outline-primary {background-color:transparent;border-color:var(--primary);color:var(--primary);}
.button-outline-primary:hover {color:var(--white);background-color:var(--primary);border-color:var(--primary);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(81,111,224,.25);}
.button-outline-secondary {background-color:transparent;border-color:var(--secondary);color:var(--secondary);}
.button-outline-secondary:hover {color:var(--white);background-color:var(--secondary);border-color:var(--secondary);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(111,57,109,.25);}
.button-outline-success {background-color:transparent;border-color:var(--success);color:var(--success);}
.button-outline-success:hover {color:var(--white);background-color:var(--success);border-color:var(--success);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(23,198,113,.25);}
.button-outline-error {background-color:transparent;border-color:var(--error);color:var(--error);}
.button-outline-error:hover {color:var(--white);background-color:var(--error);border-color:var(--error);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(196,24,60,.25);}
.button-outline-warning {background-color:transparent;border-color:var(--warning);color:var(--warning);}
.button-outline-warning:hover {color:#212529;background-color:var(--warning);border-color:var(--warning);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(255,180,0,.25);}
.button-outline-info {background-color:transparent;border-color:var(--info);color:var(--info);}
.button-outline-info:hover {color:var(--white);background-color:var(--info);border-color:var(--info);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(0,184,216,.25);}
.button-outline-light {background-color:transparent;border-color:var(--light);color:var(--text);}
.button-outline-light:hover {color:var(--text);background-color:var(--light);border-color:var(--light);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(233,236,239,.25);}
.button-outline-dark {background-color:transparent;border-color:var(--dark);color:var(--text);}
.button-outline-dark:hover {color:var(--white);background-color:var(--dark);border-color:var(--dark);box-shadow:0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(29,26,53,.25);}
/**
* Component:Button Group
* --------------------------------------------------
*/
.button-group {display:inline-block;list-style:none;padding:0;margin:0;*display:inline;}
/* .button + .button,.button + .button-group,.button-group + .button,.button-group + .button-group {margin-left:15px;} */
.button-group li {float:left;padding:0;margin:0;}
.button-group .button {float:left;margin-left:-1px;}
.button-group > .button:not(:first-child):not(:last-child),.button-group li:not(:first-child):not(:last-child) .button {border-radius:0;}
.button-group > .button:first-child,.button-group li:first-child .button {margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.button-group > .button:last-child,.button-group li:last-child .button {border-top-left-radius:0;border-bottom-left-radius:0;}
.button-group-vertical .button{float:inherit;display:block;margin-top:-1px;margin-left:-1px!important;border-radius:0;}
.button-group-vertical .button:first-child:not(:only-child){margin-top:0;}
.button-group-vertical .button:first-child{border-radius:3px 3px 0 0;}
.button-group-vertical .button:last-child{border-radius:0 0 3px 3px;}
.input-skin,
input.input,
select.select option,select.select,
.textarea-skin,
textarea.textarea{background-color:var(--input-bg);border:1px solid var(--input-border);box-shadow:var(--input-shadow);border-radius:3px;}
select:disabled {color:var(--disabled-input-border)!important;background:var(--disabled)!important;cursor:not-allowed!important;}
select option:disabled {color: #aaa!important;}
.textarea-skin,
textarea.textarea{min-height:140px;padding:13px;resize:vertical;line-height:1.5em;}
.input-skin,
input.input,
select.select option,select.select {height:40px;padding-right:13px;padding-left:13px;line-height:40px;background-color:var(--input-bg);border:1px solid var(--input-border);box-shadow:var(--input-shadow);border-radius:3px;-webkit-transition:0.35s ease-in-out;-moz-transition:0.35s ease-in-out;-o-transition:0.35s ease-in-out;transition:0.35s ease-in-out;transition:all 0.35s ease-in-out;}
/* input.input:focus,textarea.textarea:focus,select.select:focus {outline:0;border-color:var(--primary)!important;box-shadow:inset 1px 1px 7px rgba(177, 177, 177, 0.09), 0px 0px 3px -1px var(--primary)!important;} */
input.input:focus,textarea.textarea:focus,select.select:focus {outline:0;border-color:var(--primary)!important;box-shadow:inset 3px 5px 5px rgb(177 177 177 / 26%), 0px 0px 3px -1px var(--primary)!important;}
input.input:focus + .input-icon i {color:var(--primary);}
input.input:focus + .input-icon:after {border-right-color:var(--primary);}
input.input:disabled{cursor:not-allowed;background-color:var(--disabled);border-color:var(--disabled-input-border)}
/* select.select {width:100%;height:40px;line-height:40px;border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 10px center/10px 10px;} */
select.select {width:100%;height:40px;line-height:40px;border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:var(--select-bg) no-repeat right 10px center/10px 15px;}
select.select,select.select option {color:var(--text);}
select.select:focus,select.select:active {outline:0;}
.input-group {position:relative;}
.input-group:before,.input-group:after {content:"";display:table;}
.input-group:after {clear:both;}
.icon-right input.input,.icon-right textarea.textarea,.icon-right select.select,.icon-right .input-skin,.icon-right-solo {padding-right:40px!important;}
.icon-right select.select option{padding-right:0!important;}
.icon-left input.input,.icon-left textarea.textarea,.icon-left select.select,.icon-left .input-skin,.icon-left-solo {padding-left:40px!important;}
.icon-left select.select option{padding-left:0!important;}
.input-icon {position:absolute;top:0;width:40px;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.icon-right .input-icon{right:0;}
.icon-left .input-icon{left:0;}
label.label{width:100%;float:left;padding:5px 10px 1px;transition:0.3s;font-size:13px!important;font-weight:400;}
/* Required */
/* .required:after{content:'*';width:8px;height:8px;position:absolute;top:calc( 50% - 4px );right:5px;color:var(--error);font-size: 25px;font-weight: 400;z-index:1;border-radius:9px;} */
.required:after{content: '*';width: 8px;height: 100%;position: absolute;top: 0;right: 5px;color: var(--error);font-size: 25px;font-weight: 400;z-index: 1;border-radius: 9px;display: flex;align-items: center;padding-top: 5px;}
.flash {-webkit-animation-name:flash;animation-name:flash;}
@-webkit-keyframes flash {from, 50%, to { opacity:1; }25%, 75% { opacity:0; }}
@keyframes flash {from, 50%, to { opacity:1; }25%, 75% { opacity:0; }}
/*
input.input ~ label,textarea.textarea ~ label,select.select ~ label{width:100%;height:100%;position:absolute;left:10px;color:#aaa;z-index:-1;font-size:14px!important;font-weight:400;transition:0.3s;}
input.input:focus ~ label,input.input:focus ~ label,select.select:focus ~ label{transform:translateY(-100%);}
.icon-right input.input ~ label,.icon-right textarea.textarea ~ label,.icon-right select.select ~ label{right:40px;}
.icon-left input.input ~ label,.icon-left textarea.textarea ~ label,.icon-left select.select ~ label{left:40px;}
*/
/* .icon-left input.input:focus ~ label{top:-23px;font-size:12px;transition:0.3s;z-index:9;} */
.input-icon:after {position:absolute;top:0.6em;bottom:0.6em;display:block;content:"";-webkit-transition:0.35s ease-in-out;-moz-transition:0.35s ease-in-out;-o-transition:0.35s ease-in-out;transition:0.35s ease-in-out;transition:all 0.35s ease-in-out;}
.input-icon i {font-size:20px;}
/* Notification Input */
.input-success, .input-success:active, .input-success:focus {border-color:var(--success)!important;}
.input-info, .input-info:active, .input-info:focus {border-color:var(--info)!important;}
.input-warning, .input-warning:active, .input-warning:focus {border-color:var(--warning)!important;}
.input-error, .input-error:active, .input-error:focus {border-color:var(--error)!important;}
/*
Inline group
*/
.inline-group-input *{ border-radius:0!important;}
.inline-group-input *:first-child{ border-radius:3px 0 0 3px!important;}
.inline-group-input *:last-child{ border-radius:0 3px 3px 0!important;}
.inline-group-input *:last-child{ border-left:none!important;}
/*
Checkbox - Radio
*/
input.checkbox,input.radio {width:40px;height:40px;outline:none;position:relative;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;cursor:pointer;border:1px solid var(--input-border);background:var(--input-bg);border-radius:4px;-webkit-transition:background .3s ease, border-color .3s ease;transition:background .3s ease, border-color .3s ease;}
input.checkbox:after,input.radio:before ,input.radio:after {content:'';display:block;left:0;top:0;position:absolute;-webkit-transition:opacity .2s ease, -webkit-transform .3s ease, -webkit-filter .3s ease;transition:transform .3s ease, opacity .2s ease, filter .3s ease, -webkit-transform .3s ease, -webkit-filter .3s ease;}
input.checkbox:checked,input.radio:checked {background:var(--primary);border-color:var(--primary);}
input.checkbox:disabled,input.radio:disabled {cursor:not-allowed;opacity:.9;background:var(--disabled);border-color:var(--disabled-input-border);}
input.checkbox:disabled:checked,input.radio:disabled:checked {background:var(--disabled-inner);border-color:var(--disabled-inner);}
input.checkbox:not(.switch):after,input.radio:not(.switch):after {opacity:0;}
input.checkbox:not(.switch):checked:after,input.radio:not(.switch):checked:before,input.radio:not(.switch):checked:after {opacity:1;}
input.checkbox:not(.switch):after {width:11px;height:21px;border:3px solid var(--light);border-top:0;border-left:0;left:12px;top:3px;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
input.checkbox:not(.switch):checked:after {-webkit-transform:rotate(43deg);transform:rotate(43deg);}
/* switch */
input.checkbox.switch {width:68px;border-radius:68px;}
input.checkbox.switch:after {width:30px;height:30px;left:4px;top:4px;border-radius:50%;background:var(--input-border);}
/* input.checkbox.switch:after {} */
input.checkbox.switch:checked:after {background:var(--light);-webkit-transform:translateX(29px);transform:translateX(29px);}
input.checkbox.switch:disabled:not(:checked):after {opacity:.6;background:var(--disabled-input-border);}
/*radio*/
input.radio {border-radius:50%;}
input.radio:disabled:checked:before {background:var(--disabled-input-border);}
input.radio:checked:before {background:var(--primary);-webkit-transform:scale(0.4);transform:scale(0.4);z-index:1;}
input.radio:checked:after {background:var(--light);-webkit-transform:scale(0.7);transform:scale(0.7);}
input.radio:before {width:38px;height:38px;border-radius:50%;background:var(--light);opacity:0;-webkit-transform:scale(0.7);transform:scale(0.7);}
input.radio:after {width:38px;height:38px;border-radius:50%;background:var(--light);opacity:0;-webkit-transform:scale(0.7);transform:scale(0.7);}
/* small */
.form-size-small input.checkbox,input.checkbox.form-xs,
.form-size-small input.radio,input.radio.form-xs {width:28px;height:28px;}
.form-size-small input.checkbox:not(.switch):after,input.checkbox.form-xs:not(.switch):after{width:7px;height:16px;left:8px;top:1px;}
.form-size-small input.radio:before,.form-size-small input.radio:after,
input.radio.form-xs:before,input.radio.form-xs:after{width:26px;height:26px;}
.form-size-small input.checkbox.switch,
input.checkbox.form-xs.switch {width:50px;border-radius:45px;}
.form-size-small input.checkbox.switch:after,
input.checkbox.switch.form-xs:after{width:22px;height:22px;left:2px;top:2px;}
.form-size-small input.checkbox.switch:checked:after,
input.checkbox.switch.form-xs:checked:after {-webkit-transform:translateX(22px);transform:translateX(22px);}
/* large */
.form-size-large input.checkbox,input.checkbox.form-lg,
.form-size-large input.radio, input.radio.form-lg{width:52px;height:52px;}
.form-size-large input.checkbox:not(.switch):after,input.checkbox.form-lg:not(.switch):after{width:15px;height:27px;left:16px;top:5px;}
.form-size-large input.radio:before,.form-size-large input.radio:after,
input.radio.form-lg:before,input.radio.form-lg:after{width:50px;height:50px;}
.form-size-large input.checkbox.switch,
input.checkbox.switch.form-lg{width:90px;border-radius:90px;}
.form-size-large input.checkbox.switch:after,
input.checkbox.switch.form-lg:after{width:40px;height:40px;left:5px;top:5px;}
.form-size-large input.checkbox.switch:checked:after,
input.checkbox.switch.form-lg:checked:after{-webkit-transform:translateX(38px);transform:translateX(38px);}
/*
Inline radio input
*/
.radio-group{height:40px;line-height:100%;border:0 solid var(--outline);display:inline-table;border-radius:3px;font-size:14px;}
.radio-group label.inline-radio{height:40px;}
input.inline-radio {position:absolute;visibility:hidden;display:none;}
label.inline-radio:first-of-type{border-radius:3px 0 0 3px;}
label.inline-radio:last-of-type{border-radius:0 3px 3px 0;}
label.inline-radio {height:40px;float:left;margin-right:-1px;padding:5px 20px;border:1px solid var(--outline);color:var(--text);display:flex;align-items:center;cursor:pointer;font-weight:normal;}
input.inline-radio:checked + label.inline-radio {color:#f9f9f9!important;background:var(--outline);}
input.inline-radio:disabled + label.inline-radio {color:#f9f9f9!important;background:var(--disabled);cursor:not-allowed;}
label.inline-radio + input.inline-radio + label.inline-radio {border-left:1px solid var(--outline);}
/* SIZE */
/* small */
.radio-group-small{height:28px!important;border-radius:2px!important;line-height:18px!important;font-size:12px!important;}
.radio-group-small label.inline-radio{font-size:12px!important;}
.form-size-small .radio-group{height:28px;border-radius:2px;line-height:18px;font-size:12px;}
.form-size-small label.inline-radio{height:28px;}
/* large */
.radio-group-large{height:50px!important;border-radius:4px!important;line-height:32px!important;font-size:16px!important;}
.radio-group-large label.inline-radio{font-size:16px!important;}
.form-size-large .radio-group{height:50px;max-height:50px;border-radius:4px;font-size:16px;}
.form-size-large label.inline-radio{height:50px;}
/*
Range input
*/
.range-wrap{width:100%;float:left;position:relative;}
input.range {-webkit-appearance:none;width:100%;height:6px;margin:20px 0;border-radius:25px;}
input.range:focus {outline:none;}
input.range::-webkit-slider-runnable-track {width:100%;height:4px;cursor:pointer;}
input.range::-webkit-slider-thumb {width:20px;height:20px;border-radius:20px;background:var(--primary);cursor:pointer;-webkit-appearance:none;margin-top:-8px; -webkit-transition:background .15s ease-in-out;transition:background .15s ease-in-out;}
.range-bubble{width:30px;height:24px;line-height:24px;text-align:center;background:#f1f1f1;color:var(--dark);font-size:12px;display:block;position:absolute;margin-top:-21px;left:50%;transform:translate(-50%, 0);border-radius:6px;}
.range-bubble:before{content:"";position:absolute;width:0;height:0;border-top:7px solid #f1f1f1;border-left:3px solid transparent;border-right:3px solid transparent;top:100%;left:50%;margin-left:-3px;margin-top:-1px;}
/****** File input style ******/
.file-select .file-select-name{width:100%;float:left;padding-right:40px;font-size:12px!important;display:flex;align-items:center;justify-content:var(--left);}
.file-select:hover{border-color:var(--primary);transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-select.active{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
.file-select.file-select-disabled{opacity:0.65;}
.file-select.file-select-disabled:hover{cursor:default;display:block;border:2px solid #dce4ec;color:var(--primary);cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.swatch {width:100%;float:left;margin-bottom:15px;overflow:hidden;}
.swatch:nth-child(5n) {margin-right:0;}
.swatch .swatch-color {width:50%;float:left;padding:50% 13px 0;position:relative;display:block;}
.swatch .swatch-info {width:50%;float:left;padding:13px;position:relative;color:#808080!important;text-align:center;}
.swatch .swatch-info p {font-size:0.85rem;margin-bottom:5px;}
.DDmenu {position:relative;}
.DDmenu.DDcenter {display:flex;justify-content:center;}
.DDmenu.DDright{float:right;}
.DDmenu.DDleft{float:left;}
.DDmenu .DDtetik{cursor:pointer;text-decoration:none;outline:none;font-size:14px;position: relative;}
.DDmenu .DDkabuk {opacity:0;visibility:hidden;z-index:-1;transform:translateY(50%);transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;position:absolute;top:calc(100% + 9px);border-radius:3px;border:1px solid var(--input-border);background-color:var(--layer);box-shadow:0 0px 1px -6px rgba(0,0,0,.14), 0 1px 10px -2px rgba(0,0,0,.12);}
.DDmenu .DDkabuk.DDactive{visibility:visible;z-index:999;transform:translateY(0);opacity:1;}
.DDmenu .DDkabuk:before {width:0;height:0;top:-16px;position:absolute;content:"";pointer-events:none;border:solid transparent;border-bottom-color:var(--input-border);border-width:8px;}
.DDmenu .DDkabuk:after {width:0;height:0;top:-14px;position:absolute;content:"";pointer-events:none;border:solid transparent;border-bottom-color:var(--layer);border-width:7px;}
.DDmenu.DDright .DDkabuk {right:0px;}
.DDmenu.DDright .DDkabuk:before {right:14px;}
.DDmenu.DDright .DDkabuk:after {right:15px;}
.DDmenu.DDcenter .DDkabuk {margin:auto;right:0px;left:0px;}
.DDmenu.DDcenter .DDkabuk:before {left:50%;margin-left:-4px;}
.DDmenu.DDcenter .DDkabuk:after {left:50%;margin-left:-3px;}
.DDmenu.DDleft .DDkabuk {left:0px;}
.DDmenu.DDleft .DDkabuk:before {left:14px;}
.DDmenu.DDleft .DDkabuk:after {left:15px;}
/*
Alert
*/
.confirmOverlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999;}
.confirmOverlay:before{width:100%;height:100%;content:'';position:fixed;top:0;left:0;background:var(--layer);opacity:.75;}
.confirmButtons{width:100%;float:left;margin-bottom:15px;display:flex;align-items:center;justify-content:center;;}
.confirmBox{width:100%;max-width:460px;padding:10px;position:fixed;margin:auto;top:63px;right:0;left:0;}
.confirmWrap{padding:35px 7%;background:var(--layer);border:1px solid var(--border);box-shadow:0 7px 25px -15px var(--shadow);border-radius:5px;}
.confirmBox h1{margin-bottom:9px;padding:7px 0 17px;font-size:19px;font-weight:bold;position:relative;;}
.confirmBox h1:before{content:'';width:25%;position:absolute;bottom:0;border-bottom:1px solid var(--border);}
.confirmBox .confirmContent{
width: 100%;
max-height:350px;
float: left;
margin:15px 0 30px;font-size:14px;color:#83868C;text-align:center;overflow: auto;}
.confirmBox .AlertButton{height:40px;float:left;margin:0 5px;padding:0 10px;border-radius:5px;color:#fff;position:relative;text-decoration:none;line-height:40px;font-weight:400;cursor:pointer;}
.confirmBox .AlertButton:hover{opacity:0.8;}
/*
Alert
*/
/* kullanımı = */
.gradient-border {--borderWidth:5px;border-radius:3px;}
.gradient-border:after {content:'';position:absolute;top:calc(-1 * var(--borderWidth));left:calc(-1 * var(--borderWidth));height:calc(100% + var(--borderWidth) * 2);width:calc(100% + var(--borderWidth) * 2);background:linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);border-radius:3px;z-index:-1;-webkit-animation:animatedgradient 3s ease alternate infinite;animation:animatedgradient 3s ease alternate infinite;background-size:300% 300%;}
@-webkit-keyframes animatedgradient { 0% {background-position:0% 50%;} 50% {background-position:100% 50%;} 100% {background-position:0% 50%;} }
@keyframes animatedgradient { 0% {background-position:0% 50%;} 50% {background-position:100% 50%;} 100% {background-position:0% 50%;} }
.Ani_Wawe{width:calc( 100% - 10px );
height:calc( 100% - 10px );
top:5px;
left:5px;position:absolute;background-color:var(--info);opacity:0;border-radius:6px;transform-origin:50%;z-index:-1;animation:dalga 1.9s linear infinite;animation-direction:forwards;}
@-webkit-keyframes dalga {0%, 35% {transform:scale(1);opacity:0.55;}40% {transform:scale(1.01,1.02);opacity:0.55;}80% {transform:scale(1.03,1.04);opacity:0;}100% {transform:scale(1);opacity:0;}}
@keyframes dalga {0%, 35% {transform:scale(1);opacity:0.55;}40% {transform:scale(1.01,1.02);opacity:0.55;}80% {transform:scale(1.03,1.04);opacity:0;}100% {transform:scale(1);opacity:0;}}
/* Popup */
.PopUpOverlay{width:100%;height:100%;top:0;left:0;z-index:9999;background:rgb(159 171 170 / 50%);position:fixed;}
.PopUpConteiner{width:100%;max-width:420px;margin:7vh auto 0;}
.PopUpWrap{width:100%;float:left;padding:10px;position:relative;}
.PopUpContent{width:100%;float:left;padding:30px 20px;position:relative;background:#fff;border-radius:3px;box-shadow:0 3px 7px -5px rgba(0,0,0,0.3);border:1px solid #ddd;}
/*
Kenar pencere
*/
.ModelWin {width:100vh;max-width:622px;min-width:280px;height:100%;position:fixed;top:0;text-align:center;background:var(--layer);z-index:99999;box-shadow:0px 0 25px -2px var(--shadow);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.ModelWin.Wright{right:0;-webkit-animation:left-slide-up 0.3s ease-in;-moz-animation:right-slide-up 0.3s ease-in;-o-animation:right-slide-up 0.3s ease-in;animation:right-slide-up 0.3s ease-in;}
.ModelWin.Wleft{left:0;-webkit-animation:right-slide-up 0.3s ease-in;-moz-animation:left-slide-up 0.3s ease-in;-o-animation:left-slide-up 0.3s ease-in;animation:left-slide-up 0.3s ease-in;}
.ModelWin.Wright.Wclose {-webkit-animation:right-slide-close 0.3s ease-in;-moz-animation:right-slide-close 0.3s ease-in;-o-animation:right-slide-close 0.3s ease-in;animation:right-slide-close 0.3s ease-in;transform:translateX(1000%);}
.ModelWin.Wleft.Wclose {-webkit-animation:left-slide-close 0.3s ease-in;-moz-animation:left-slide-close 0.3s ease-in;-o-animation:left-slide-close 0.3s ease-in;animation:left-slide-close 0.3s ease-in;transform:translateX(-1000%);}
@keyframes right-slide-up { 0% {transform:translateX(100%);} 100% {transform:translateX(0);} }
@keyframes right-slide-close { 0% {transform:translateX(0);} 100% {transform:translateX(100%);} }
@keyframes left-slide-up { 0% {transform:translateX(-100%);} 100% {transform:translateX(0);} }
@keyframes left-slide-close { 0% {transform:translateX(0);} 100% {transform:translateX(-100%);} }
/*
Kenar pencere
*/
/*
Accordion
*/
.acnav {width:100%;float:left;background:var(--layer);border:1px solid var(--border);border-bottom:0;}
.acnav__list {padding:0;margin:0;list-style:none;}
.has-children > .acnav__label::before {width:8px;height:8px;border-right:1px solid var(--text);border-bottom:1px solid var(--text);position:relative;float:left;margin-right:10px;content:" ";margin-top:6px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.has-children.is-open > .acnav__label::before {-webkit-transform:rotate(-135deg);transform:rotate(-135deg);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.acnav__link, .acnav__label {display:block;padding:1em .7em;margin:0;cursor:pointer;background:var(--layer);position:relative;box-shadow:inset 0 -1px var(--border);transition:color .25s ease-in, background-color .25s ease-in;-webkit-touch-callout:var(--none);-webkit-user-select:var(--none);-khtml-user-select:var(--none);-moz-user-select:var(--none);-ms-user-select:var(--none);user-select:var(--none);}
.acnav > .acnav__list {padding-left:0;}.acnav__list {padding-left:5px;}
.has-children.is-open,.acnav__link:focus, .acnav__link:hover, .acnav__label:focus, .acnav__label:hover {background:var(--border);}
.is-open > .acnav__label{background:var(--border);}
.acnav_sub{display:none;}
.is-open > .acnav_sub{display:block;}
/*
Accordion
*/
/*
Tab
*/
.tab{border:1px solid var(--border);}
.tab__list {display:flex;background:var(--layer);border-bottom:1px solid var(--border);}
.tab__item {padding:10px 15px;letter-spacing:.02rem;z-index:1;transition:0.2s;position:relative;overflow:hidden;cursor:pointer;color:var(--text);-webkit-touch-callout:var(--none);-webkit-user-select:var(--none);-khtml-user-select:var(--none);-moz-user-select:var(--none);-ms-user-select:var(--none);user-select:var(--none);}
.tab__item:before {content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:var(--border);transition:0.2s;visibility:hidden;opacity:0;z-index:-1;}
.tab__item.is--active:before {visibility:visible;opacity:1;}
.tab__content {padding:0 20px;background:var(--layer);border-radius:0 10px 10px;}
.tab__content-item {display:none;}
.tab__content-item.is--active {display:block;}
.tab__content-title {padding:24px 24px 24px 0;}
/* .tab__content-item {position:absolute;opacity:0;visibility:hidden;z-index:-1;transform:translateY(50%);transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;} */
/* .tab__content-item.is--active {position:relative;visibility:visible;z-index:999;transform:translateY(0);opacity:1;} */
/*
Tab
*/
/*
DARK & LIGHT THEME
*/
#DarkLightTheme{width:54px;height:26px;margin:0 auto;position:relative;border-radius:40px;}
#DarkLightTheme input[type="checkbox"]{width:100%;height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px;margin:0px;cursor:pointer;opacity:0;z-index:2;}
#DarkLightTheme span{position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;opacity:1;background-color:#fff;border:2px solid #FFB200;border-radius:40px;transition:0.2s ease background-color, 0.2s ease opacity;}
#DarkLightTheme span:before,#DarkLightTheme span:after{content:'';position:absolute;top:2px;width:18px;height:18px;border-radius:50%;transition:0.5s ease transform, 0.2s ease background-color;}
#DarkLightTheme span:before{background-color:#fff;transform:translate(-30px,0px);z-index:1;}
#DarkLightTheme span:after{background-color:#FFB200;transform:translate(3px,0px);z-index:0;}
#DarkLightTheme input[type="checkbox"]:checked + span{background-color:#310c7f;border:2px solid #151843;}
#DarkLightTheme input[type="checkbox"]:checked + span:before{background-color:#310c7f;transform:translate(25px,-5px);}
#DarkLightTheme input[type="checkbox"]:checked + span:after{background-color:#fff;transform:translate(30px,0px);}
/*
DARK & LIGHT THEME
*/
/*------- Yükleniyor simge | İşlem neticesi ---------*/
/*
Kullanımı
*/
[class*=ripple-], [class*=ripple_], [class~=ripple]{display:flex;align-items:center;justify-items:center;}
[class*=ripple-]::before, [class*=ripple_]::before, [class~=ripple]::before,
[class*=ripple-]::after, [class*=ripple_]::after, [class~=ripple]::after
{content:'';position:absolute;width:50px;height:50px;border-width:3px;margin:auto;right:0;left:0;animation:pulse 2s linear infinite;border-color:var(--primary);border-style:solid;border-radius:50%;box-sizing:border-box;transform:scale(0.5);z-index:1;opacity:1;}
/* Size */
[class*=ripple-]::after, [class*=ripple_]::after, [class~=ripple]::after{animation-delay:1s;}
[class*=ripple-][class*=-md]::before,[class*=ripple-][class*=-md]::after{width:80px!important;height:80px!important;border-width:5px!important;}
[class*=ripple-][class*=-lg]::before,[class*=ripple-][class*=-lg]::after{width:120px;height:120px;border-width:7px;}
[class*=ripple-][class*=-xl]::before,[class*=ripple-][class*=-xl]::after{width:150px;height:150px;border-width:9px;}
/* Color */
[class*=ripple-][class*=-success]::before,[class*=ripple-][class*=-success]::after{border-color:var(--success)!important;}
[class*=ripple-][class*=-info]::before,[class*=ripple-][class*=-info]::after{border-color:var(--info)!important;}
[class*=ripple-][class*=-warning]::before,[class*=ripple-][class*=-warning]::after{border-color:var(--warning)!important;}
[class*=ripple-][class*=-error]::before,[class*=ripple-][class*=-error]::after{border-color:var(--error)!important;}
@keyframes pulse { to { opacity:0; transform:scale(1); } }
/*
Kullanımı
*/
[class*=loader-], [class*=loader_], [class~=loader]{display:flex;align-items:center;justify-items:center;text-indent:-9999999px;}
[class*=loader-]::after, [class*=loader_]::after, [class~=loader]::after{content:"";position:absolute;width:20px;height:20px;margin:auto;right:0;left:0;border-radius:50%;border:3px solid var(--border);border-left-color:var(--white);animation:loader .8s linear infinite;}
/* Size */
[class*=loader-][class*=-md]::after{width:40px;height:40px;}
[class*=loader-][class*=-lg]::after{width:60px;height:60px;}
[class*=loader-][class*=-xl]::after{width:80px;height:80px;}
/* Color */
[class*=loader-][class*=-success]::before,[class*=loader-][class*=-success]::after{border-left-color:var(--success)!important;}
[class*=loader-][class*=-info]::before,[class*=loader-][class*=-info]::after{border-left-color:var(--info)!important;}
[class*=loader-][class*=-warning]::before,[class*=loader-][class*=-warning]::after{border-left-color:var(--warning)!important;}
[class*=loader-][class*=-error]::before,[class*=loader-][class*=-error]::after{border-left-color:var(--error)!important;}
@keyframes loader { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
/*
Kullanımı
*/
[class*=runner-], [class*=runner_], [class~=runner]{display:flex;align-items:center;justify-items:center;position:relative;}
[class*=runner-]::before, [class*=runner_]::before, [class~=runner]::before,
[class*=runner-]::after, [class*=runner_]::after, [class~=runner]::after{content:'';position:absolute;width:20px;height:20px;left:0;background:var(--primary);}
[class*=runner-]::before, [class*=runner_]::before, [class~=runner]::before{opacity:.5;animation:runner 0.6s infinite 0.06s;}
[class*=runner-]::after, [class*=runner_]::after, [class~=runner]::after{animation:runner 0.6s infinite;}
/* Size */
[class*=runner-][class*=-md]::before,
[class*=runner-][class*=-md]::after{width:40px;height:40px;}
[class*=runner-][class*=-lg]::before,
[class*=runner-][class*=-lg]::after{width:60px;height:60px;}
[class*=runner-][class*=-xl]::before,
[class*=runner-][class*=-xl]::after{width:80px;height:80px;}
/* Color */
[class*=runner-][class*=-success]::before,[class*=runner-][class*=-success]::after{background:var(--success)!important;}
[class*=runner-][class*=-info]::before,[class*=runner-][class*=-info]::after{background:var(--info)!important;}
[class*=runner-][class*=-warning]::before,[class*=runner-][class*=-warning]::after{background:var(--warning)!important;}
[class*=runner-][class*=-error]::before,[class*=runner-][class*=-error]::after{background:var(--error)!important;}
@keyframes runner { 0% { left:63%; } 50% { left:10%; } 100% { left:63%; } }
/*
Tooltip
use :Left
*/
[tooltip] {position:relative;}
[tooltip]::before,[tooltip]::after {text-transform:none;font-size:13px;line-height:1;user-select:none;pointer-events:none;position:absolute;display:none;opacity:0;}
[tooltip]::before {content:"";border:5px solid transparent;z-index:1001;}
[tooltip]::after {content:attr(tooltip);text-align:center;min-width:3em;max-width:21em;white-space:nowrap;line-height: 18px;font-size: 12px;overflow:hidden;text-overflow:ellipsis;padding:.7em 1em;border-radius:5px;box-shadow:0 0.7em .9em -0.7em rgba(0, 0, 0, 0.35);background:var(--outline);color:#fff;z-index:1000;}
.tablolama [tooltip]::after {white-space:pre-wrap!important;}
[tooltip]:hover::before,[tooltip]:hover::after {display:block;}
[tooltip=""]::before,[tooltip=""]::after {display:none !important;}
[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before {bottom:100%;border-bottom-width:0;border-top-color:var(--outline);}
[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after {bottom:calc(100% + 5px);}
[tooltip]:not([flow])::before,[tooltip]:not([flow])::after,[tooltip][flow^="up"]::before,[tooltip][flow^="up"]::after {left:50%;transform:translate(-50%, -0.5em);}
[tooltip]:not([flow])::before,[tooltip][flow^="up-left"]::before {bottom:100%;border-bottom-width:0;border-top-color:var(--outline);}
[tooltip]:not([flow])::after,[tooltip][flow^="up-left"]::after {bottom:calc(100% + 5px);}
[tooltip]:not([flow])::before,[tooltip][flow^="up-left"]::before {left:25%;}
[tooltip]:not([flow])::after,[tooltip][flow^="up-left"]::after {left:50%;}
[tooltip]:not([flow])::before,[tooltip][flow^="up-right"]::before {bottom:100%;border-bottom-width:0;border-top-color:var(--outline);}
[tooltip]:not([flow])::after,[tooltip][flow^="up-right"]::after {bottom:calc(100% + 5px);}
[tooltip]:not([flow])::before,[tooltip][flow^="up-right"]::before {left:75%;transform:translate(-50%, -0.5em);}
[tooltip]:not([flow])::after,[tooltip][flow^="up-right"]::after {left:50%;transform:translate(-50%, -0.5em);}
[tooltip][flow^="down"]::before {top:100%;border-top-width:0;border-bottom-color:var(--outline);}
[tooltip][flow^="down"]::after {top:calc(100% + 5px);}
[tooltip][flow^="down"]::before,[tooltip][flow^="down"]::after {left:50%;transform:translate(-50%, 0.5em);}
[tooltip][flow^="down-left"]::before {top:100%;border-top-width:0;border-bottom-color:var(--outline);}
[tooltip][flow^="down-left"]::after {top:calc(100% + 5px);}
[tooltip][flow^="down-left"]::before {left:30%;}
[tooltip][flow^="down-left"]::after {left:50%;}
[tooltip][flow^="down-right"]::before {top:100%;border-top-width:0;border-bottom-color:var(--outline);}
[tooltip][flow^="down-right"]::after {top:calc(100% + 5px);}
[tooltip][flow^="down-right"]::before {left:70%;transform:translate(-85%, 0.5em);}
[tooltip][flow^="down-right"]::after {left:50%;transform:translate(-50%, 0.5em);}
[tooltip][flow^="left"]::before {top:50%;border-right-width:0;border-left-color:var(--outline);left:calc(0em - 5px);transform:translate(-0.5em, -50%);}
[tooltip][flow^="left"]::after {top:50%;right:calc(100% + 5px);transform:translate(-0.5em, -50%);}
[tooltip][flow^="right"]::before {top:50%;border-left-width:0;border-right-color:var(--outline);right:calc(0em - 5px);transform:translate(0.5em, -50%);}
[tooltip][flow^="right"]::after {top:50%;left:calc(100% + 5px);transform:translate(0.5em, -50%);}
[tooltip]:not([flow]):hover::before,[tooltip]:not([flow]):hover::after,[tooltip][flow^="up"]:hover::before,[tooltip][flow^="up"]:hover::after,[tooltip][flow^="up-left"]:hover::before,[tooltip][flow^="up-left"]:hover::after,[tooltip][flow^="up-right"]:hover::before,[tooltip][flow^="up-right"]:hover::after,[tooltip][flow^="down"]:hover::before,[tooltip][flow^="down"]:hover::after,[tooltip][flow^="down-left"]:hover::before,[tooltip][flow^="down-left"]:hover::after,[tooltip][flow^="down-right"]:hover::before,[tooltip][flow^="down-right"]:hover::after {animation:tooltips-vert 300ms ease-out forwards;}
[tooltip][flow^="left"]:hover::before,[tooltip][flow^="left"]:hover::after,[tooltip][flow^="right"]:hover::before,[tooltip][flow^="right"]:hover::after {animation:tooltips-horz 300ms ease-out forwards;}
@-moz-keyframes tooltips-vert {to {opacity:0.9;transform:translate(-50%, 0);}}
@-webkit-keyframes tooltips-vert {to {opacity:0.9;transform:translate(-50%, 0);}}
@-o-keyframes tooltips-vert {to {opacity:0.9;transform:translate(-50%, 0);}}
@keyframes tooltips-vert {to {opacity:0.9;transform:translate(-50%, 0);}}
@-moz-keyframes tooltips-horz {to {opacity:0.9;transform:translate(0, -50%);}}
@-webkit-keyframes tooltips-horz {to {opacity:0.9;transform:translate(0, -50%);}}
@-o-keyframes tooltips-horz {to {opacity:0.9;transform:translate(0, -50%);}}
@keyframes tooltips-horz {to {opacity:0.9;transform:translate(0, -50%);}}
/*
Tooltip
*/