/*
Author: Ansonika
Author URI: http://themeforest.net/user/Ansonika/

[Table of contents] 

- 1.1 Bs Icons css
- 1.2 Round slider css
- 1.3 Animate css

/*-------- 1.1 Bs Icons css --------*/
@import url("bs-icon-font/bootstrap-icons.min.css");
/*
   Animation example, for spinners
*/
.animate-spin {
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  display: inline-block;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}


/*-------- 1.2 Round slider css--------*/
/*!
 * roundSlider v1.6.1 | (c) 2015-2020, Soundar
 * MIT license | http://roundsliderui.com/licence.html
 */

.rs-ie, .rs-edge, .rs-handle {
    -ms-touch-action: none;
    touch-action: none;
}
.rs-control { position: relative; outline: 0 none; }
.rs-container { position: relative; }
.rs-control *, .rs-control *:before, .rs-control *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.rs-animation .rs-transition
{
    transition: all 0.5s linear 0s;
}
.rs-bar
{
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.rs-control .rs-split .rs-path,
.rs-control .rs-overlay1,
.rs-control .rs-overlay2
{
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.rs-control .rs-overlay
{
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.rs-rounded .rs-seperator, .rs-split .rs-path {
    -webkit-background-clip: padding-box; 
    background-clip: padding-box;
}
.rs-disabled {
    opacity: 0.35;
}
.rs-inner-container
{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    overflow: hidden;
}
.rs-control .rs-quarter div.rs-block { height: 200%; width: 200%; }
.rs-control .rs-half.rs-top div.rs-block,
.rs-control .rs-half.rs-bottom div.rs-block { height: 200%; width: 100%; }
.rs-control .rs-half.rs-left div.rs-block,
.rs-control .rs-half.rs-right div.rs-block { height: 100%; width: 200%; }
.rs-control .rs-bottom .rs-block { top: auto; bottom: 0; }
.rs-control .rs-right .rs-block { right: 0; }
.rs-block.rs-outer { border-radius: 1000px; }
.rs-block
{
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 3;
}
.rs-block .rs-inner
{
    border-radius: 1000px;
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}
.rs-overlay { width: 50%; }
.rs-overlay1, .rs-overlay2 { width: 100%; }
.rs-overlay, .rs-overlay1, .rs-overlay2
{
    position: absolute;
    background-color: white;
    z-index: 3;
    top: 0;
    height: 50%;
}
.rs-bar
{
    display: block;
    position: absolute;
    bottom: 0;
    height: 0;
    z-index: 10;
}
.rs-bar.rs-rounded {
    z-index: 5;
}
.rs-bar .rs-seperator {
    height: 0px;
    display: block;
    float: left;
}
.rs-bar:not(.rs-rounded) .rs-seperator {
    border-left: none;
    border-right: none;
}
.rs-bar.rs-start  .rs-seperator { border-top: none; }
.rs-bar.rs-end  .rs-seperator { border-bottom: none; }
.rs-bar.rs-start.rs-rounded .rs-seperator { border-radius: 0 0 1000px 1000px; }
.rs-bar.rs-end.rs-rounded .rs-seperator { border-radius: 1000px 1000px 0 0; }
.rs-full .rs-bar, .rs-half .rs-bar { width: 50%; }
.rs-half.rs-left .rs-bar, .rs-half.rs-right .rs-bar, .rs-quarter .rs-bar { width: 100%; }
.rs-full .rs-bar, .rs-half.rs-left .rs-bar, .rs-half.rs-right .rs-bar { top: 50%; }
.rs-bottom .rs-bar { top: 0; }
.rs-half.rs-right .rs-bar, .rs-quarter.rs-right .rs-bar { right: 100%; }

.rs-handle.rs-move { cursor: move; }
.rs-readonly .rs-handle.rs-move { cursor: default; }
.rs-classic-mode .rs-path { display: block; height: 100%; width: 100%; }
.rs-split .rs-path
{
    border-radius: 1000px 1000px 0 0;
    overflow: hidden;
    height: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

/*** SVG mode related styles ***/
.rs-control .rs-svg-container {
    display: block;
    position: absolute;
    top: 0;
}
.rs-control .rs-bottom .rs-svg-container {
    top: auto;
    bottom: 0;
}
.rs-control .rs-right .rs-svg-container {
    right: 0;
}

/*** tooltip styles ***/
.rs-tooltip
{
    position: absolute;
    cursor: default;
    border: 1px solid transparent;
    z-index: 10;
}
.rs-full .rs-tooltip { top: 50%; left: 50%; }
.rs-bottom .rs-tooltip { top: 0; } 
.rs-top .rs-tooltip { bottom: 0; }
.rs-right .rs-tooltip { left: 0; }
.rs-left .rs-tooltip { right: 0; }
.rs-half.rs-top .rs-tooltip, .rs-half.rs-bottom .rs-tooltip { left: 50%; }
.rs-half.rs-left .rs-tooltip, .rs-half.rs-right .rs-tooltip { top: 50%; }
.rs-tooltip .rs-input { outline: 0 none; border: none; background: transparent; }
.rs-tooltip-text { font-family: verdana; font-size: 13px; border-radius: 7px; text-align: center; color: inherit; }
.rs-tooltip.rs-edit { padding: 5px 8px; }
.rs-tooltip.rs-hover, .rs-tooltip.rs-edit:hover { border: 1px solid #AAAAAA; cursor: pointer; }
.rs-readonly .rs-tooltip.rs-edit:hover { border-color: transparent; cursor: default; }

/*** Fix for tooltip positioning when element in hidden state ***/
/*** maybe in future we can consider this as the default way ***/
.rs-tooltip.rs-center { margin: 0px !important; }
.rs-half.rs-top .rs-tooltip.rs-center,
.rs-half.rs-bottom .rs-tooltip.rs-center {
    transform: translate(-50%, 0px);
}
.rs-half.rs-left .rs-tooltip.rs-center,
.rs-half.rs-right .rs-tooltip.rs-center {
    transform: translate(0px, -50%);
}
.rs-full .rs-tooltip.rs-center {
    transform: translate(-50%, -50%);
}
.rs-tooltip.rs-reset { margin: 0px !important; top: 0px !important; left: 0px !important; }

/*** handle types ***/
.rs-handle { border-radius: 1000px; outline: 0 none; float: left; }
.rs-handle.rs-handle-square { border-radius: 0px; }
.rs-handle-dot { border: 1px solid #AAAAAA; padding: 6px; }
.rs-handle-dot:after {
    display: block;
    content: "";
    border: 1px solid #AAAAAA;
    height: 100%;
    width: 100%;
    border-radius: 1000px;
}

/*** theming - colors ***/
.rs-seperator { border: 1px solid #AAAAAA; }
.rs-border { border: 1px solid #AAAAAA; }
.rs-path-color { background-color: #FFFFFF; }
.rs-range-color { background-color: #54BBE0; }
.rs-bg-color { background-color: #FFFFFF; }
.rs-handle { background-color: #838383; }
.rs-handle-dot { background-color: #FFFFFF; }
.rs-handle-dot:after { background-color: #838383; }

/*** SVG mode - theming - colors ***/
.rs-path-inherited .rs-path {
    opacity: 0.2;
}
.rs-svg-mode .rs-path {
    /*  this will change the slider's path color
        this can be also done via the property -> 'pathColor'  */
    stroke: #FFFFFF;
}
.rs-svg-mode .rs-range {
    /*  this will change the slider's range color
        this can be also done via the property -> 'rangeColor'  */
    stroke: #54BBE0;
}
.rs-svg-mode .rs-border {
    /*  this will change the slider's border color
        this can be also done via the property -> 'borderColor'
        the border width can be changed via the property -> 'borderWidth'  */
    stroke: #AAAAAA;
}

/*-------- 1.3 Animate css--------*/
/**  ---------------
     fadeIn
*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**  ---------------
     slideInLeft
*/
@keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/**  ---------------
     slideInRight
*/
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/**  ---------------
     slideInDown
*/
@keyframes slideInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**  ---------------
     slideInUp
*/
@keyframes slideInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/**  ---------------
     zoomIn
*/
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**  ---------------
     zoomOut
*/
@keyframes zoomOut {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**  ---------------
     rotateIn
*/
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotateZ(-15deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

/**  ---------------
     bounceIn
*/
@keyframes bounceIn {
  0% {
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/**  ---------------
     bounceInLeft
*/
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**  ---------------
     bounceInRight
*/
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**  ---------------
     bounceInDown
*/
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**  ---------------
     bounceInUp
*/
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**  ---------------
     flipInX
*/
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px);
  }
}

/**  ---------------
     flipInY
*/
@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px);
  }
}