/*====================== components.css =======================*/
/* 01. :ROOT color
/* 02. Placeholder
/* 03. Error required invalid
/* 04. Selection
/* 05. Count pulsar
/* 06. Rounded
/* 07. Shadow
/* 08. Click effect (ripple)
/* 09. Input type: (text, password, email) 
/* 10. Input type: (submit, reset, button)
/* 11. Textarea
/* 12. Button, a.btn 
/* 13. Clearfix
/* 14. Caret
/* 15. [role="button"]
/* 16. Mobile IE8 viewport fix
/* 17. Swipe Effect
/* 18. Select
/* 19 :FOCUS LINE
/*=============================================================*/

/*============================= 01 ============================*/
/* :ROOT color
/*=============================================================*/
:root {
    --white: #ffffff;
    --red: #ff0000;
    --dark: #253241;
    --grey-light: #cccccc;
    --light: #eceff2;
    --text-light: #7c848d;
    --placeholder: #121212;
    --shadow: rgba(0,0,0,0.05);
    --box-shadow: rgba(129, 129, 129, 0.1) 0 0 20px;
}

/*============================= 02 ============================*/
/* placeholder
/*=============================================================*/
::-webkit-input-placeholder {color: #576071 !important; opacity:1;}
::-moz-placeholder          {color: #576071 !important; opacity:1;}/* Firefox 19+ */
:-moz-placeholder           {color: #576071 !important; opacity:1;}/* Firefox 18- */
:-ms-input-placeholder      {color: #576071 !important; opacity:1;}
input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;} 
:focus::-webkit-input-placeholder {color: transparent !important;}
:focus::-moz-placeholder          {color: transparent !important;}
:focus:-moz-placeholder           {color: transparent !important;}
:focus:-ms-input-placeholder      {color: transparent !important;}
:focus {outline: none;}

/*============================= 03 ============================*/
/* error required invalid
/*=============================================================*/
body input:focus:required:invalid,
body textarea:focus:required:invalid {}
body input:required:valid,
body textarea:required:valid {}


/*============================= 04 ============================*/
/* selection
/*=============================================================*/
/* ::selection {background: #ff0000; color: var(--white);} */ /* Safari */
/* ::-moz-selection {background: #ff0000; color: var(--white);} */ /* Firefox */


/*============================= 05 ============================*/
/* count pulsar
/*=============================================================*/
.count {background: #ff0000; color: var(--white); display:inline-block;font-size:14px;border-radius:3px;font-weight:600;padding:3px 8px 2px;animation:opacity-badge .6s infinite;-webkit-animation:opacity-badge .6s infinite}
.count:hover{animation:none;-webkit-animation:none}
@keyframes opacity-badge{0%{transform:scale(0.5)}
    100%{transform:scale(1.2)}
}
@-webkit-keyframes opacity-badge{0%{transform:scale(0.5)}
    100%{transform:scale(1.2)}
}


/*============================= 06 ============================*/
/* rounded
/*=============================================================*/
.rounded {-webkit-border-radius:3px!important;-moz-border-radius:3px!important;border-radius:3px!important;overflow:hidden}
.rounded:after,.rounded:before {-webkit-border-radius:3px!important;-moz-border-radius:3px!important;border-radius:3px!important}


/*============================= 07 ============================*/
/* shadow
/*=============================================================*/
.shadow{-webkit-box-shadow:0 1px 1px var(--shadow) !important;-moz-box-shadow:0 1px 1px var(--shadow) !important;box-shadow:0 1px 1px var(--shadow) !important;}


/*============================= 08 ============================*/
/* click effect ripple
/*=============================================================*/
.ripple {width: 0;height: 0;border-radius: 50%;background: rgba(255, 255, 255, 0.5);transform: scale(0);position: absolute;opacity: .7;}
.rippleEffect {animation: rippleDrop .3s linear;}
@keyframes rippleDrop {100% {transform: scale(2);opacity: 0;}}


/*============================= 09 ============================*/
/* select, textarea, input (type: text, password, email) 
/*=============================================================*/
select, textarea, input[type="text"], input[type="password"], input[type="email"] {
  color: #9aa4bf;
  border-radius: 10px;
  border: 1px solid #d5d5d5 !important;
  background-color: #101420;
  padding: 10px 20px;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {box-shadow:0 0 10px var(--shadow) !important; outline: none;}


/*============================= 10 ============================*/
/* input type: submit, reset, button 
/*=============================================================*/
input[type="submit"],
input[type="reset"],
input[type="button"] {
    color:  var(--white) !important;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    padding: 7px 15px;
    border-radius: 0px;
    border: 0;
    /*background: #35c535;*/
}
input[type="submit"]:hover, 
input[type="reset"]:hover, 
input[type="button"]:hover {
    /*background: #35c535;*/
}
input[type="submit"]:focus, 
input[type="reset"]:focus, 
input[type="button"]:focus {outline: none;}


/*============================= 11 ============================*/
/* textarea 
/*=============================================================*/
textarea {border: 1px solid #d5d5d5 !important; transition: all 0.3s ease 0s;}
textarea:focus {box-shadow:0 0 10px rgba(0,0,0,0.05) !important; outline: none; transition: all 0.3s ease 0s;}
textarea {width: 100%;}


/*============================= 12 ============================*/
/* button, a.btn 
/*=============================================================*/
a.btn, 
button {
    cursor: pointer;
    transition: all 0.3s ease 0s;
    color: var(--white);
    font-weight: normal;
    display: inline-block;
    padding: 7px 15px;
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    border: 0;
    /*background: #35c535;*/
}
a.btn:hover, button:hover {
    /*background: #35c535;*/
    border-bottom: 0;
}
button:focus {outline: none !important;}


/*============================= 13 ============================*/
/* clearfix
/*=============================================================*/
.clearfix {content: ''; clear: both; position: relative; display: table; width: 100%;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}


/*============================= 14 ============================*/
/* caret
/*=============================================================*/
.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px dashed;border-top: 4px solid \9;border-right: 4px solid transparent;border-left: 4px solid transparent;}


/*============================= 15 ============================*/
/* [role="button"]
/*=============================================================*/
[role="button"] {cursor: pointer;}


/*============================= 16 ============================*/
/* Mobile IE8 viewport fix
/*=============================================================*/
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }


/*============================= 17 ============================*/
/* Swipe Effect
/*=============================================================*/
.swipe_effect {position: relative;}
.swipe_effect:before {position: absolute;content: "";top: 0;left: 0;width: 0%;height: 100%;background-color: rgba(255, 255, 255, 0.15);transition: width 0.35s;z-index: 0;}
.swipe_effect:hover:before {width: 100%;}


/*============================= 18 ============================*/
/* Select
/*=============================================================*/
/* select {border: 1px solid #ccc; padding: 6px 10px 8px;} */


/*============================= 19 ============================*/
/* :FOCUS LINE
/*=============================================================*/
.focus_line {background: no-repeat center bottom, center calc(100% - 0px); background-size: 0 100%, 100% 100%; border: 0; transition: background 0s ease-out; background-image: linear-gradient(to top, #ffaa00 2px, rgba(0, 150, 136, 0) 3px), linear-gradient(to top, rgba(0, 0, 0, 0) 0px, transparent 0px);}
.focus_line:focus {background-size: 100% 100%, 100% 100%; transition-duration: 0.3s;}