/*====================== 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: #a8bbd2;
  border-radius: 10px;
  border: 1px solid #131720 !important;
  background-color: #181e2b;
  padding: 7px 15px !important;
}

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"],
button {
  color: #131720 !important;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  padding: 7px 15px;
  border-radius: 10px;
  border: 0;
  background: #fa0;
}

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,
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 1px, 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;
}