:root{
    --primary:#afa11e;
    --primary-hover:#968815;
    --secondary:#3e3d37;
    --secondary-hover:#353328;

    --white:#ffffff;
    --white-hover:#eeeeee;
    --light:#FBF9F8;
    --light-hover:#efefef;
    --black:#000000;
    --black-hover:#111111;
    --dark:#1d1a35;
    --dark-hover:#1d1a35;
    --head-text:#8b92a9;
    --text:#4F4E51;
    --outline:#4F4E51;
    --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;



    --scroll:#a0a0a0;
    --select:#a0a0a0;
    --body:#e0e1e2;
    --border:#f3f3f3;
    --shadow:rgba(177, 177, 177, 0.77);
    --shadow-inner:rgba(18, 22, 33, .1);

    --input-border:#b9b9b9;
    --disabled:#e8e8e8;
    --disabled-inner:#dcdcdc;
    --font-montserrat:'Montserrat', sans-serif;
    --font-muli:'Muli', sans-serif;
    --right:right;--left:left;--none:none;--percent:100%;--r0:0;--r5:5px;--r10:10px;--r15:15px;--r20:20px;--r30:30px;--r40:40px;--r50:50px;


    --layer:#fff;
}
.font-montserrat{font-family:var(--font-montserrat);}
.font-muli{font-family:var(--font-muli);}
.shadow{box-shadow:0 0px 3px 0px var(--shadow-inner);}

/**
 * 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-secondary {background-color:var(--secondary)!important;}
.bg-secondary-hover:hover {background-color:var(--secondary-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-dark {background-color:var(--dark)!important;}
.bg-dark-hover:hover {background-color:var(--dark-hover)!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:1px 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:1px 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:1px 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:1px 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: 0 5px 15px rgba(0,0,0,.05), 0 4px 10px rgba(233,236,239,.25);}
.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;}
/*
  Budge
*/
.budge-success {background: #DBF8AA;color: #4B6F01;}
.budge-info {background: #add5ff;color: #102693;}
.budge-purple {background: #ebc5ff;color: #4f107b;}
.budge-error {background: #ffabab;color: #86000e;}
.budge-warning {background: #FFF29B;color: #937001;}
/**
* 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: #212529;border-color:var(--light);background-color:var(--light);}
.button-light:hover{color:#212529;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:#212529;}
.button-outline-light:hover {color:#212529;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;zoom: 1;*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;}



.textarea-skin,
textarea.textarea{min-height:140px;padding:13px;resize: vertical;line-height:1.5em;background-color:#fefefe;border:1px solid #e5e5e5;box-shadow:inset 1px 2px 4px rgba(177, 177, 177, 0.09);border-radius:3px;}
.input-skin,
input.input,
select.select option,select.select {height:40px;padding-right:25px;padding-left:13px;line-height:40px;background-color:#fefefe;border:1px solid #e5e5e5;box-shadow:inset 1px 2px 4px rgba(177, 177, 177, 0.09);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 ~ label{position:absolute;left:40px;width:100%;top:16px;color:#aaa;z-index:-1;transition:0.3s;font-size:15px!important;} */
/* input.input:focus ~ label{top:-23px;font-size:12px;transition:0.3s;z-index:9;} */
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 + .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(--input-border)}
select.select {height:40px;line-height:40px;border-radius:3px;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: pointer;background:#fefefe 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:focus,select.select:active {outline:0;}
.input-group {position:relative;zoom:1;}
.input-group:before,.input-group:after {content:"";display:table;}
.input-group:after {clr:both;}
.icon-right input.input,.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 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;}
/* .icon-right .input-icon:after {border-left:1px solid #e5e5e5;right:100%;} */
/* .icon-left .input-icon:after {border-right:1px solid #e5e5e5;left:100%;} */
.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;box-shadow:none;outline:none!important;}
.input-info, .input-info:active, .input-info:focus {border-color:var(--info)!important;box-shadow:none;outline:none!important;}
.input-warning, .input-warning:active, .input-warning:focus {border-color:var(--warning)!important;box-shadow:none;outline:none!important;}
.input-error, .input-error:active, .input-error:focus {border-color:var(--error)!important;box-shadow:none;outline:none!important;}

/* small */
.form-size-small .input-skin,
.form-size-small input.input,
.form-size-small select.select option,.form-size-small select.select {height:28px;line-height:28px;}
.form-size-small .input-icon {width:28px;}

/*
  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;min-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(--background);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: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);}
input.checkbox:disabled:checked,input.radio:disabled:checked {background:var(--disabled-inner);border-color:var(--input-border);}
input.checkbox:not(.switch):after,input.radio:not(.switch):after {opacity:0;}
input.checkbox:not(.switch):checked:after,input.radio:not(.switch):checked:after {opacity:1;}
input.checkbox:not(.switch):after {width:11px;height:21px;border:2px solid var(--light);border-top:0;border-left:0;left:13px;top:5px;-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:checked:after {background:var(--light);-webkit-transform:translateX(29px);transform:translateX(29px);}
input.checkbox.switch:disabled:not(:checked):after {opacity:.6;}
/*radio*/
input.radio {border-radius:50%;}
input.radio:checked:after {background:var(--light);-webkit-transform:scale(0.5);transform:scale(0.5);}
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,
.form-size-small input.radio {width:28px;min-width:28px;height:28px;}
.form-size-small input.checkbox:not(.switch):after {width:7px;height:16px;left:9px;top:1px;}
.form-size-small input.radio:after {width:26px;height:26px;}
.form-size-small input.checkbox.switch {width:45px;border-radius:45px;}
.form-size-small input.checkbox.switch:after {width:22px;height:22px;left:2px;top:2px;}
.form-size-small input.checkbox.switch:checked:after {-webkit-transform:translateX(17px);transform:translateX(17px);}
/* large */
.form-size-large input.checkbox,
.form-size-large input.radio {width:52px;min-width:52px;height:52px;}
.form-size-large input.checkbox:not(.switch):after {width:15px;height:27px;left:18px;top:6px;}
.form-size-large input.radio:after {width:50px;height:50px;}
.form-size-large input.checkbox.switch {width:90px;border-radius:90px;}
.form-size-large input.checkbox.switch:after {width:40px;height:40px;left:5px;top:5px;}
.form-size-large input.checkbox.switch:checked:after {-webkit-transform:translateX(38px);transform:translateX(38px);}
/*
  Inline radio input
*/
.radio-group{border:0 solid var(--outline);display:inline-table;border-radius:3px;font-size:14px;}
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: #9a929e;display: flex;align-items: center;cursor: pointer;font-weight: normal;}
input.inline-radio:checked + label.inline-radio {color:#ccc8ce;background:var(--outline);}
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;}
/* Default */
.radio-group-default{height:40px!important;border-radius:3px!important;line-height:26px!important;font-size:14px!important;}
.radio-group-default label.inline-radio{height:40px;}
/* 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
*/
input.range {display: block;-webkit-appearance: none;background-color:#e5e5e5;width: 100%;height: 5px;border-radius: 5px;margin: 0 auto;outline: 0;}
input.range::-webkit-slider-thumb {-webkit-appearance: none;background-color: var(--light);width: 30px;height: 30px;border-radius: 50%;border: 5px solid var(--primary);cursor: pointer;transition: 0.3s ease-in-out;}
input.range::-webkit-slider-thumb:hover {background-color: white;border: 2px solid var(--primary-hover);}










/****** File input style ******/
.file-select .file-select-name{width:100%;height:50px;padding-right:10px;padding-left:10px;text-overflow:ellipsis;white-space: nowrap;overflow:hidden;line-height:50px;background-color:#f9f9f9;border:1px solid #e5e5e5;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;}
.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;border-radius:5px;}
.swatch:nth-child(5n) {margin-right:0;}
.swatch .swatch-color {width:50%;float:left;padding:6.5em 13px;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;}




/*help*/
/*
    <div class="help"></div>
*/
.help{width:90px;height:90px;border:1px solid var(--info);border-radius:100%;-webkit-animation:rotation 1s ease-in-out infinite;-moz-animation:rotation 1s ease-in-out infinite;animation:rotation 1s ease-in-out infinite;}
.help:after{    width: 7px;
  height: 7px;
  top: 11px;
  left: calc( 50% - 4px );background-color:var(--info);border-radius:100%;position:absolute;content:"";}
@-webkit-keyframes rotation{ 0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);} }
@-moz-keyframes rotation{ 0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);} }
@keyframes rotation{ 0%{transform:rotate(0deg);}100%{transform:rotate(360deg);} }

/*
  <div class="loadingspinner"></div>
*/
.loadingspinner {width: 5vw;height: 5vw;border: 0.3em solid transparent;border-color: #eee;border-top-color: #3E67EC;border-radius: 50%;animation: loadingspin 1s linear infinite;pointer-events: none;}
@-webkit-keyframes rotatloadingspinion{ 100% { transform: rotate(360deg) } }
@-moz-keyframes loadingspin{ 100% { transform: rotate(360deg) } }
@keyframes loadingspin{ 100% { transform: rotate(360deg) } }


.spinner {height: 21px;width: 21px;margin: 20px auto;border-radius: 50%;border: dashed 1px var(--primary);-webkit-animation-name: loader-spin;animation-name: loader-spin;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: linear;animation-timing-function: linear;}
.spinner.large {width: 43px;height: 43px;border-width: 3px;}
@-webkit-keyframes loader-spin { from { -webkit-transform: rotate(0deg);transform: rotate(0deg); } to { -webkit-transform: rotate(360deg);transform: rotate(360deg); } }


/*
  use :  <span tooltip="Slide to the left" flow="left">Left</span>
*/
[tooltip] {
  position: relative;
}
[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-size: 0.75em;
  font-weight: 400;
  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);
  /* font-family: "Segoe UI", Arial, sans-serif; */
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.5em 1em;
  border-radius: 5px;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background:#ff3466;
  color: #fff;
  z-index: 1000;
}
[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: #ff3466;
}
[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: #ff3466;
}
[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: #ff3466;
}
[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:#ff3466;
}
[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:#ff3466;
}
[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:#ff3466;
}
[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:#ff3466;
  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:#ff3466;
  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: 1;
    transform: translate(-50%, 0);
  }
}
@-webkit-keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@-o-keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@-moz-keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@-webkit-keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@-o-keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}





/*
  autocomplete
*/
.autocomplete {width:100%;float:left;position:relative;}
.autocomplete-input:focus {border-color:#ddd;outline:none;box-shadow:0 0 10px #ddd;}
.autocomplete-list {width:100%;height: auto;max-height: 320px;overflow-y: auto;right:0;position:absolute;list-style-type:none;background:#fff;top: calc( 100% + 6px );box-shadow: 0 0 7px 1px #ececec;transition:all 300ms ease-out;transform:scale(1) translateY(0);transform-origin:center center;z-index:999;visibility:visible;}
.autocomplete-list.hide-list {opacity:0;transform: scale(1) translateY(-12px);z-index: -1;visibility: hidden;}
.autocomplete-list .list-item .name,.autocomplete-list .list-item .title {display:block;}
.autocomplete-list .list-item .name {color: var(--info-hover);font-weight: 400;font-size: 12px;letter-spacing: 0.02em;line-height: 17px;}
.autocomplete-list .list-item .title {font-size: 12px;letter-spacing: 0.02em;line-height: 17px;}
.autocomplete-list .list-item img {height:50px;vertical-align:top;float:left;margin:5px 0 0 10px;padding-right:10px;position: absolute;left:0;}
.autocomplete-list .list-item a,.autocomplete-list .list-item p{display:block;padding:5px 10px;color:#999;text-decoration:none;transition:all 100ms ease;border-bottom:1px solid #f1f1f1;}
.autocomplete-list .list-item:hover a, .autocomplete-list .list-item.highlight a {background:#fffada;color:#333;}
.panel {border-radius:0.3rem;padding:.4rem 30px .4rem .7rem;font-size:13px;display: flex;flex-direction: column;justify-content: center;}
.panel .title-text{color:#9894a2;}
.panel.tag-purple {border:1px solid #7F51F4;background-color:#DFCCFF;color:#4915cc;}
.panel.tag-blue {border: 1px solid #0087FF;background-color: #DDEDFF;color: #0087FF;}
.panel.tag-yellow {border: 1px solid #FFBD00;background-color: #FEF0B2;color: #FFBD00;}
.panel.tag-pink {border: 1px solid #F84F7F;background-color: #FAD2E1;color: #F84F7F;}
.panel.tag-green {border: 1px solid #10c133;background-color: #d2fada;color: #10c133;}
/*
  autocomplete
*/


/* Popup */
.PopUpConteiner{width: 100%;max-width:420px;margin: 7vh auto 0;}
.PopUpContent{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;}


/* Barcode okuyucu */
.anim-box-wrap {position:absolute;width:70%;height:30%;top:35%;left:15%;}
.anim-box {position:relative;width:100%;height:100%;padding:25px 30px;transition:transform .6s ease-out;}
.anim-box:before, .anim-box:after, .anim-box>:first-child:before, .anim-box>:first-child:after {position:absolute;width:10%; height:15%;border-color:white; border-style:solid;content:' ';}
.anim-box:before {top:0; left:0;border-width:2px 0 0 2px;}
.anim-box:after {top:0; right:0;border-width:2px 2px 0 0;}
.anim-box>:first-child:before {bottom:0; right:0;border-width:0 2px 2px 0;}
.anim-box>:first-child:after {bottom:0; left:0;border-width:0 0 2px 2px;}
.anim-item {display:inline-block;background-color:white;height:100px;}
.anim-box:hover {transform:scale(1.5, 2);}
.anim-box .scanner {animation-play-state:running;}
.scanner {width:100%;height:1px;background-color:red;opacity:0.7;position:relative;top:50%;animation-name:scan;animation-duration:4s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused;}
@keyframes scan {0% {top:50%;}  25% {top:5px;}75% {top:98%;}}