@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://use.fontawesome.com/releases/v5.12.0/css/all.css");
*,
*::before,
*::after {
    box-sizing: border-box
}
:root {
    --main: #9588E8;
    --main_hover: #7d6de3;
    --gray600: #6C757D;
    --white: #ffffff;
    --body: #212529;
    --black_one: #000;
    --blue: #0848A1;
    --blue-color: rgb(51, 85, 170);
}

html, body {
	height: 100%;/*padding: 0 !important;*/
}
.page-wrap {
	min-height: 100%;
	margin-bottom: 0px;
}
.page-wrap:after {
	content: "";
	display: block;
}
footer, .page-wrap:after {
}
/*--------------General CSS---------*/
img {
	border: 0 none;
	max-width: 100%;
	vertical-align: top;
}
a {
	outline: none;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	text-decoration: none;
	/*color: #3e3e3e;*/
}
a:hover, a:focus {
	/*color: #fe5e3a;*/
	text-decoration: none;
	outline: none;
}
button {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}
p {
	line-height: 27px;
}
p:last-child{
  margin-bottom: 0px;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0px 0px;
}
body {
    margin: 0;
    font-size: 16px;
    font-family: "Inter", serif;
    font-weight: normal;
    line-height: 1.5;
    color: var(--body);
    text-align: left;
}








/* ======================menu css nad Go to top start  ====================== */

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    color: #fff;
    -webkit-transition: all .7s;
    transition: all .7s;
    background: #FFF;
    box-shadow: 0 0px 20px 2px rgb(0 0 0 / 10%);
  }
  
  .progress-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
  }
  
  .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  
  .progress-wrap::after {
    position: absolute;
    content: 'Top';
    text-align: center;
    line-height: 44px;
    font-size: 11px;
    font-weight: normal;
    /*color: #7da966;*/
    color: #000;
    left: 0;
    top: 0;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    font-weight: bold;
  }
  
  .progress-wrap svg path {
    fill: none;
  }
  
  .progress-wrap svg.progress-circle path {
    stroke: #7da966;
    stroke-width: 4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
    fill: #FFF;
  
  }
  
  /* ======================menu css nad Go to top end  ====================== */
  
  
  /*-----------------------TOGGLE STICKY HOME CSS START-----------------------------------------------*/
  
  .navbar-light .navbar-toggler{
    border: none;
    outline: none;
  }
  .nav-toggle-sm {
      transform: scale(.65);
      margin-right: -.3125rem;
  }
  .nav-toggle {
      width: 29px;
      height: 29px;
      display: inline-flex;
      vertical-align: middle;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: auto;
      cursor: pointer;
  }
  .stick {
      width: 35px;
      height: 3px;
      margin-bottom: 5px;
      background-color: #7da966;
      display: inline-block;
  }
  .body-menu-opened .collapsed .stick {
      background-color: #7da966;
  }
  .body-menu-opened .stick-1 {
      animation: stick-1-open .85s ease-out forwards;
  }
  .body-menu-opened .stick-2 {
      animation: stick-2-open .85s linear forwards;
      width: 35px;
      margin-left: 0px;
  }
  .body-menu-opened .stick-3 {
      animation: stick-3-open .85s linear forwards;
  }
  .stick:last-child {
      margin-bottom: 0px;
  }
  @-webkit-keyframes stick-1-open {
    0%   {width: 35px;}
    30%  {width: 3px; transform: translate(14px, 0px);}
    65%  {width: 3px; transform: translate(14px, -35px); animation-timing-function: cubic-bezier(0,1,1,1);}
    100% {width: 2px; transform: translate(9px, 17px);}
  }
  
  @keyframes stick-1-open {
    0%   {width: 35px;}
    30%  {width: 3px; transform: translate(14px, 0px);}
    65%  {width: 3px; transform: translate(14px, -35px); animation-timing-function: cubic-bezier(0,1,1,1);}
    100% {width: 2px; transform: translate(9px, 17px);}
  }
  
  @-webkit-keyframes stick-2-open {
    65%  {width: 35px; transform: translate(0px, 0px) rotate(0deg);}
    100% {width: 35px; transform: translate(0px, 0px) rotate(45deg);}
  }
  
  @keyframes stick-2-open {
    65%  {width: 35px; transform: translate(0px, 0px) rotate(0deg);}
    100% {width: 35px; transform: translate(0px, 0px) rotate(45deg);}
  }
  
  @-webkit-keyframes stick-3-open {
    65%  {transform: translate(0px, 0px) rotate(0deg);}
    100% {transform: translate(0px, -8px) rotate(-45deg);}
  }
  
  @keyframes stick-3-open {
    65%  {transform: translate(0px, 0px) rotate(0deg);}
    100% {transform: translate(0px, -8px) rotate(-45deg);}
  }
  
  .body-menu-close .stick-1 {
    width: 3px; 
    animation: stick-1-close .85s ease-out forwards;
  }
  
  .body-menu-close .stick-2 {
    animation: stick-2-close .85s ease-out forwards;
    margin-left: 0px;
  }
  
  .body-menu-close .stick-3 {
    animation: stick-3-close .85s ease-out forwards;
  }
  
  @-webkit-keyframes stick-1-close {
    0%, 70% {width: 0px; transform: translate(0, 0);}
    100%    {width: 35px; transform: translate(0, 0);}
  }
  
  @keyframes stick-1-close {
    0%, 70% {width: 0px; transform: translate(0, 0);}
    100%    {width: 35px; transform: translate(0, 0);}
  }
  
  @-webkit-keyframes stick-2-close {
    0%   {width: 35px;transform: translate(0px, 0px) rotate(45deg);}
    20%  {width: 3px; transform: translate(0, 0px) rotate(45deg);}
    40%  {width: 0px;}
    65%  {transform: translate(0, -26px); animation-timing-function: cubic-bezier(0,1,1,1);}
    80%  {width: 0px;}
    100% {width: 35px; transform: translate(0, 0px);}
  }
  
  @keyframes stick-2-close {
    0%   {width: 35px;transform: translate(0px, 0px) rotate(45deg);}
    20%  {width: 3px; transform: translate(0, 0px) rotate(45deg);}
    40%  {width: 0px;}
    65%  {transform: translate(0, -26px); animation-timing-function: cubic-bezier(0,1,1,1);}
    80%  {width: 0px;}
    100% {width: 35px; transform: translate(0, 0px);}
  }
  
  @-webkit-keyframes stick-3-close {
    0%   {width: 35px;transform: translate(0px, -8px) rotate(-45deg);}
    20%  {width: 3px; transform: translate(0, -8px) rotate(-45deg);}
    40%  {}
    65%  {transform: translate(0, -35px); animation-timing-function: cubic-bezier(0,1,1,1);}
    90%  {width: 3px;}
    100% {width: 35px; transform: translate(0, 0px);}
  }
  
  @keyframes stick-3-close {
    0%   {width: 35px;transform: translate(0px, -8px) rotate(-45deg);}
    20%  {width: 3px; transform: translate(0, -8px) rotate(-45deg);}
    40%  {}
    65%  {transform: translate(0, -35px); animation-timing-function: cubic-bezier(0,1,1,1);}
    90%  {width: 3px;}
    100% {width: 35px; transform: translate(0, 0px);}
  }
  
  /*-----------------------TOGGLE STICKY HOME CSS end-----------------------------------------------*/
  
  
  /*-----------------------main styles starts here-----------------------------------------------*/
  ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  label {
      color: #001c27;
      font-weight: 400;
      margin-bottom: 10px;
  }
  p:last-child{
      margin-bottom: 0px;
  }
  .text_red {
      color: #dd4b39;
  }
  textarea.form-control {
      resize: none;
  }
  .form-group {
      margin-bottom: 15px;
      position: relative;
      display: inline-block;
      width: 100%;
  }
.form-control, .form-select {
      height: 47px;
      box-shadow: none;
      border: 1px solid #CED4DA;
      border-radius: 100px;
      font-size: 13px;
      color: #747c84;
  }
  .form-control:focus ,.form-select:focus {
      box-shadow: none;
      border-color: #CED4DA;
  }
  
  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
  .font_b {
      font-weight: 700;
  }
  /*=====================================	PLACE HOLDER CSSS START HERE 		====================================*/
  input.form-control::-webkit-input-placeholder {
   color:#747c84;
  }
  input.form-control::-moz-placeholder {
   color:#747c84;
  }
  input.form-control::-ms-placeholder {
   color:#747c84;
  }
  input.textbox::-ms-input-placeholder {
   color:#747c84;
  }
  input.textbox::-ms-input-placeholder {
   color:#747c84;
  }
  
  
  .cf:before, .cf:after {
      content: "";
      display: table
  }
  .cf:after {
      clear: both;
  }
  .container {
      width: 100%;
      max-width: 1170px;
  }
  /*===================================== PLACE HOLDER CSSS END HERE 		====================================*/
  /*===================================== Commen Butons ===================================*/
  
  
  /*------ Button css over ----------------*/
  
  /*======================================================================*/
  
  /*			CUSTOM CHECK BOX AND CUSTOM RADIO CSS START		*/
  .custom-checkbox [type="checkbox"]:not(:checked), .custom-checkbox [type="checkbox"]:checked {
      left: -9999px;
      position: absolute;
  }
  .custom-checkbox [type="checkbox"]:not(:checked) + label:before, .custom-checkbox [type="checkbox"]:checked + label:before {
      border: 1px solid #CED4DA;
      content: "";
      height: 20px;
      left: 0;
      position: absolute;
      top: 3px;
      width: 20px;
      border-radius: 4px;
  }
  .custom-checkbox [type="checkbox"]:not(:checked) + label:after {
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
  }
  .custom-checkbox [type="checkbox"]:not(:checked) + label:after, .custom-checkbox [type="checkbox"]:checked + label:after {
      color: #fff;
      content: "\f00c";
      font-size: 14px;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      top: 3px;
      left: 0px;
      line-height: 1.45;
      padding: 1px 2px 2px 3px;
      transition: all 0.2s ease 0s;
      background-color: var(--main);
      width: 20px;
      height: 20px;
      border-radius: 4px;
  }
  .custom-checkbox [type="checkbox"]:not(:checked) + label, .custom-checkbox [type="checkbox"]:checked + label {
      cursor: pointer;
      padding-left: 30px;
      position: relative;
      font-weight: 400;
      text-transform: capitalize;
  }
  /*	CUSTOM check CSS START	*/
  /*	CUSTOM RADIO CSS START	*/
  .radio-btn-small {
      display: inline-block;
      margin-right: 15px;
      padding: 0;
      position: relative;
      padding-left: 30px;
      margin-top: 3px;
  }
  .radio-btn-small:last-child {
      margin-right: 0;
  }
  input[type="radio"] {
      display: none;
  }
  input[type="radio"] + label {
      font-size: 14px;
      margin-bottom: 0;
      cursor: pointer;
      font-weight: 400;
  }
  input[type="radio"] + label span {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin: 2px 8px 0 0;
      vertical-align: middle;
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0px;
      border: 1px solid #fe5e3a;
      background-color: #fff;
      border-radius: 100px;
  }
  input[type="radio"]:checked + label span:after {
      position: absolute;
      content: '';
      width: 10px;
      height: 10px;
      background-color: #fe5e3a;
      top: 3px;
      left: 3px;
      border-radius: 100px;
  }
  input[type="radio"]:checked + label span {
      background-color: #fff;
  }
  input[type="radio"]:checked + label {
      color: #282828;
  }
  
  
  /*========================================================================
                      bootstrap select box over
  ==========================================================================*/
  .bootstrap-select.open > .dropdown-toggle.btn-default:hover, .bootstrap-select.open > .dropdown-toggle.btn-default:focus {
      background-color: #fff;
  }
  .bootstrap-select > .dropdown-toggle {
      border: 1px solid #ababab;
  }
  .bootstrap-select.btn-group .dropdown-toggle .filter-option, .bootstrap-select.btn-group .dropdown-toggle .fas {
      color: #555;
  }
  
  /*========================================================================
                      bootstrap select box over
  ==========================================================================*/
  
  
  .app-header {
      height: auto;
      display: flex;
      /* align-items: center; */
      align-content: center;
      position: relative;
      z-index: 10;
      transition: all .2s
  }
  
  .app-header.header-shadow {
      /* box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03) */
  }
  
  .app-header .app-header__content {
      display: flex;
      align-items: center;
      align-content: center;
      flex: 1;
      padding: 20px 40px 20px 50px;
      height: auto;
      background-color: #FFF;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  
  .app-header .app-header__content .app-header-left {
      display: flex;
      align-items: center
  }
  
  .app-header .app-header__content .header-menu .nav-link {
      color: #6c757d
  }
  
  .app-header .app-header__content .header-menu .nav-link i {
      color: #adb5bd
  }
  
  .app-header .app-header__content .header-menu .nav-link:hover {
      color: #212529
  }
  
  .app-header .app-header__content .app-header-right {
      align-items: center;
      display: flex;
      margin-left: auto;
      gap: 20px;
  }
  
  .app-header .header-user-info>.widget-heading,
  .app-header .header-user-info>.widget-subheading {
      white-space: nowrap
  }
  
  .app-header .header-user-info>.widget-subheading {
      font-size: .8rem
  }
  
  .app-header__logo {
      padding: 0 1.5rem;
      height: auto;
      width: 320px;
      display: flex;
      align-items: center;
      transition: width .2s;
      justify-content: center;
  }
  
  .app-header__logo .logo-src {
      height: auto;
      width: auto;
      margin-top: 0px;
  }
  
  .app-header__menu,
  .app-header__mobile-menu {
      display: none;
      padding: 0 1.5rem;
      height: auto;
      align-items: center
  }
  
  .fixed-header .app-header {
      position: fixed;
      width: 100%;
      top: 0
  }
  
  .fixed-header .app-header .app-header__logo {
      visibility: visible
  }
  
  .fixed-header .app-main {
      padding-top: 60px;
      background: url(../images/test_bg.png);
      background-repeat: no-repeat;
      background-position: top right;
      background-size: cover;
  }
  
  .fixed-header:not(.fixed-sidebar):not(.closed-sidebar) .app-sidebar .app-header__logo {
      visibility: hidden
  }
  
  .app-header.header-text-light .app-header-left>.nav>li>.nav-link {
      color: rgba(255, 255, 255, .7)
  }
  
  .app-header.header-text-light .app-header-left>.nav>li>.nav-link .nav-link-icon {
      color: rgba(255, 255, 255, .8)
  }
  
  .app-header.header-text-light .app-header-left>.nav>li>.nav-link:hover {
      color: #fff
  }
  
  .app-header.header-text-light .app-header-right .icon-wrapper-alt .fa,
  .app-header.header-text-light .app-header-right .icon-wrapper-alt .icon {
      color: rgba(255, 255, 255, .7) !important;
      transition: all .2s
  }
  
  .app-header.header-text-light .app-header-right .icon-wrapper-alt .icon-wrapper-bg {
      background: rgba(255, 255, 255, .1) !important;
      transition: all .2s;
      opacity: 1
  }
  
  .app-header.header-text-light .app-header-right .icon-wrapper-alt:hover .fa,
  .app-header.header-text-light .app-header-right .icon-wrapper-alt:hover .icon {
      color: rgba(255, 255, 255, .9) !important
  }
  
  .app-header.header-text-light .app-header-right .icon-wrapper-alt:hover .icon-wrapper-bg {
      background: rgba(255, 255, 255, .15) !important
  }
  
  .app-header.header-text-light .app-header-right .icon-wrapper-alt .badge-dot {
      border-color: transparent
  }
  
  .app-header.header-text-light .app-header-right>.header-btn-lg .widget-content-left .btn-group>.btn,
  .app-header.header-text-light .app-header-right>.header-btn-lg .widget-heading,
  .app-header.header-text-light .app-header-right>.header-btn-lg .widget-subheading {
      color: rgba(255, 255, 255, .8)
  }
  
  .app-header.header-text-light .app-header-right>.header-btn-lg .header-user-info>.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(0, 0, 0, .1), 0 .0625rem .125rem rgba(0, 0, 0, .2)
  }
  
  .app-header.header-text-light .header-btn-lg::before {
      background: rgba(255, 255, 255, .2)
  }
  
  .app-header.header-text-light .header-btn-lg .hamburger-inner,
  .app-header.header-text-light .header-btn-lg .hamburger.is-active .hamburger-inner,
  .app-header.header-text-light .header-btn-lg .hamburger-inner::before,
  .app-header.header-text-light .header-btn-lg .hamburger-inner::after,
  .app-header.header-text-light .header__pane .hamburger-inner,
  .app-header.header-text-light .header__pane .hamburger.is-active .hamburger-inner,
  .app-header.header-text-light .header__pane .hamburger-inner::before,
  .app-header.header-text-light .header__pane .hamburger-inner::after {
      background-color: rgba(255, 255, 255, .8) !important
  }
  
  .app-header.header-text-light .search-wrapper .input-holder .search-icon span::after {
      border-color: rgba(255, 255, 255, .8)
  }
  
  .app-header.header-text-light .app-header__logo .logo-src {
      background: url(assets/images/logo.png)
  }
  
  .app-header.header-text-light .app-header__mobile-menu .hamburger-inner,
  .app-header.header-text-light .app-header__mobile-menu .hamburger-inner::before,
  .app-header.header-text-light .app-header__mobile-menu .hamburger-inner::after {
      background: rgba(255, 255, 255, .9)
  }
  
  .app-header.header-text-dark .app-header-left>.nav>li>.nav-link {
      color: rgba(0, 0, 0, .7)
  }
  
  .app-header.header-text-dark .app-header-left>.nav>li>.nav-link .nav-link-icon {
      color: rgba(0, 0, 0, .8)
  }
  
  .app-header.header-text-dark .app-header-left>.nav>li>.nav-link:hover {
      color: #000
  }
  
  .app-header.header-text-dark .app-header-right .icon-wrapper-alt .fa,
  .app-header.header-text-dark .app-header-right .icon-wrapper-alt .icon {
      color: rgba(0, 0, 0, .7) !important;
      transition: all .2s
  }
  
  .app-header.header-text-dark .app-header-right .icon-wrapper-alt .icon-wrapper-bg {
      background: rgba(0, 0, 0, .1) !important;
      transition: all .2s;
      opacity: 1
  }
  
  .app-header.header-text-dark .app-header-right .icon-wrapper-alt:hover .fa,
  .app-header.header-text-dark .app-header-right .icon-wrapper-alt:hover .icon {
      color: rgba(0, 0, 0, .95) !important
  }
  
  .app-header.header-text-dark .app-header-right .icon-wrapper-alt:hover .icon-wrapper-bg {
      background: rgba(0, 0, 0, .15) !important
  }
  
  .app-header.header-text-dark .app-header-right .icon-wrapper-alt .badge-dot {
      border-color: transparent
  }
  
  .app-header.header-text-dark .app-header-right>.header-btn-lg .widget-content-left .btn-group>.btn,
  .app-header.header-text-dark .app-header-right>.header-btn-lg .widget-heading,
  .app-header.header-text-dark .app-header-right>.header-btn-lg .widget-subheading {
      color: rgba(0, 0, 0, .8)
  }
  
  .app-header.header-text-dark .app-header-right>.header-btn-lg .header-user-info>.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(0, 0, 0, .1), 0 .0625rem .125rem rgba(0, 0, 0, .2)
  }
  
  
  .app-header.header-text-dark .header-btn-lg .hamburger-inner,
  .app-header.header-text-dark .header-btn-lg .hamburger.is-active .hamburger-inner,
  .app-header.header-text-dark .header-btn-lg .hamburger-inner::before,
  .app-header.header-text-dark .header-btn-lg .hamburger-inner::after,
  .app-header.header-text-dark .header__pane .hamburger-inner,
  .app-header.header-text-dark .header__pane .hamburger.is-active .hamburger-inner,
  .app-header.header-text-dark .header__pane .hamburger-inner::before,
  .app-header.header-text-dark .header__pane .hamburger-inner::after {
      background-color: rgba(0, 0, 0, .8) !important
  }
  
  
  
  .app-header.header-text-dark .app-header__logo .logo-src {
      background: url(assets/images/logo-inverse.png)
  }
  
  .app-sidebar {
      width: 320px;
      display: flex;
      z-index: 9999;
      overflow: hidden;
      min-width: 320px;
      position: relative;
      flex: 0 0 320px;
      padding-top: 50px;
      transition: all .2s
  }
  
  .app-sidebar .app-sidebar__inner {
      padding: 0px 35px;
  }
  
  .app-sidebar .scrollbar-sidebar {
      z-index: 15;
      width: 100%
  }
  
  .app-sidebar .app-sidebar-bg {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: .05;
      background-size: cover;
      z-index: 10
  }
  
  .app-sidebar .app-header__logo {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      z-index: 11
  }
  
  .app-sidebar.sidebar-shadow {
      /* box-shadow: 7px 0 60px rgba(0, 0, 0, .05) */
  }
  
  .app-sidebar__heading {
    text-transform: uppercase;
    margin: 15px 0px;
    font-weight: normal;
    white-space: nowrap;
    position: relative;
  }
  
  .sidebar-mobile-overlay {
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      background: #333;
      opacity: .6;
      left: 0;
      top: 0;
      z-index: 12
  }
  
  .vertical-nav-menu {
      margin: 0;
      padding: 0;
      position: relative;
      list-style: none
  }
  
  .vertical-nav-menu::after {
      content: " ";
      pointer-events: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0
  }
  
  .vertical-nav-menu .mm-collapse:not(.mm-show) {
      display: none
  }
  
  .vertical-nav-menu .mm-collapsing {
      position: relative;
      height: 0;
      overflow: hidden;
      transition-timing-function: ease;
      transition-duration: .25s;
      transition-property: height, visibility
  }
  
  .vertical-nav-menu ul {
      margin: 0;
      padding: 0;
      position: relative;
      list-style: none
  }
  
  .vertical-nav-menu:before {
      opacity: 0;
      transition: opacity 300ms
  }
  
  .vertical-nav-menu li a {
      line-height: normal;
      height: auto;
      padding: 0;
      position: relative;
      border-radius: 0;
      white-space: nowrap;
      transition: all .2s;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 15px;
      text-transform: capitalize;
      padding: 20px;
      background-color: #F8F9FA;
      color: var(--black_one);
      border-radius: 80px;
      padding-left: 40px;
  }
  
 
  .vertical-nav-menu li a:hover,
  .vertical-nav-menu li .active {
      background-color: var(--main);
      color: var(--white);
  }
  
  .vertical-nav-menu li a:hover .menu_icon,
  .vertical-nav-menu li .active .menu_icon{
    fill:var(--white);
 }

 /* Hover state for the entire anchor */
.vertical-nav-menu li a:hover,
.vertical-nav-menu li .active {
    background-color: var(--main);
    color: var(--white);
}

/* Hover state for the SVG icon's fill color */
.vertical-nav-menu li a:hover .menu_icon_border,
.vertical-nav-menu li .active .menu_icon_border {
    fill: var(--white); /* Change the fill color */
}

/* Change the border color of the SVG icon on hover */
.vertical-nav-menu li a:hover .menu_icon_border,
.vertical-nav-menu li .active .menu_icon_border {
    stroke: var(--white); /* Change the stroke color to white */
    fill: var(--main);
}

  
  .vertical-nav-menu li a:hover i.metismenu-icon {
      opacity: .6
  }
  
  .vertical-nav-menu li a:hover i.metismenu-state-icon {
      opacity: 1
  }
  
  
  .vertical-nav-menu li.mm-active>a i.metismenu-state-icon {
      transform: rotate(-180deg)
  }
  
  .vertical-nav-menu li a.mm-active {
      color: #343a40;
      background: #e0f3ff;
      font-weight: 700
  }
  
  .vertical-nav-menu i.metismenu-state-icon,
  .vertical-nav-menu i.metismenu-icon {
      text-align: center;
      width: 34px;
      height: 34px;
      line-height: 34px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -17px;
      font-size: 1.5rem;
      opacity: .3;
      transition: color 300ms
  }
  
  .vertical-nav-menu i.metismenu-state-icon {
      transition: transform 300ms;
      left: auto;
      right: 0
  }
  
  .vertical-nav-menu ul {
      transition: padding 300ms;
      padding: .5em 0 0 2rem
  }
  
  .vertical-nav-menu ul:before {
      content: '';
      height: 100%;
      opacity: 1;
      width: 3px;
      background: #e0f3ff;
      position: absolute;
      left: 20px;
      top: 0;
      border-radius: 15px
  }
  
  .vertical-nav-menu ul>li>a {
      color: #6c757d;
      height: 2rem;
      line-height: 2rem;
      padding: 0 1.5rem
  }
  
  .vertical-nav-menu ul>li>a:hover {
      color: #3f6ad8
  }
  
  .vertical-nav-menu ul>li>a .metismenu-icon {
      display: none
  }
  
  .vertical-nav-menu ul>li>a.mm-active {
      color: #3f6ad8;
      background: #e0f3ff;
      font-weight: 700
  }
  
  .app-sidebar.sidebar-text-light {
      border-right: 0 !important
  }
  
  .app-sidebar.sidebar-text-light .app-sidebar__heading {
      color: rgba(255, 255, 255, .6)
  }
  
  .app-sidebar.sidebar-text-light .app-sidebar__heading::before {
      background: rgba(255, 255, 255, .5) !important
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu li a {
      color: rgba(255, 255, 255, .7)
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu li a i.metismenu-icon {
      opacity: .5
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu li a i.metismenu-state-icon {
      opacity: .5
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu li a:hover {
      background: rgba(255, 255, 255, .15);
      color: #fff
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu li a:hover i.metismenu-icon {
      opacity: .8
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu li a:hover i.metismenu-state-icon {
      opacity: 1
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu li a.mm-active {
      color: rgba(255, 255, 255, .7);
      background: rgba(255, 255, 255, .15)
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu ul:before {
      background: rgba(255, 255, 255, .1)
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu ul>li>a {
      color: rgba(255, 255, 255, .6)
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu ul>li>a:hover {
      color: #fff
  }
  
  .app-sidebar.sidebar-text-light .vertical-nav-menu ul>li>a.mm-active {
      color: #fff;
      background: rgba(255, 255, 255, .15)
  }
  
  .app-sidebar.sidebar-text-light .ps__thumb-y {
      background: rgba(255, 255, 255, .3)
  }
  
  .app-sidebar.sidebar-text-light .ps__rail-y:hover .ps__thumb-y {
      background: rgba(255, 255, 255, .2)
  }
  
  .app-sidebar.sidebar-text-light .app-header__logo .logo-src {
      background: url(assets/images/logo.png)
  }
  
  .app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner,
  .app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner::before,
  .app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner::after {
      background-color: rgba(255, 255, 255, .8)
  }
  
  .app-sidebar.sidebar-text-dark {
      border-right: 0 !important
  }
  
  .app-sidebar.sidebar-text-dark .app-sidebar__heading {
      color: rgba(0, 0, 0, .6)
  }
  
  .app-sidebar.sidebar-text-dark .app-sidebar__heading::before {
      background: rgba(0, 0, 0, .5) !important
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu li a {
      color: rgba(0, 0, 0, .6)
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu li a i.metismenu-icon {
      opacity: .5
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu li a i.metismenu-state-icon {
      opacity: .5
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu li a:hover {
      background: rgba(0, 0, 0, .15);
      color: rgba(0, 0, 0, .7)
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu li a:hover i.metismenu-icon {
      opacity: .7
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu li a:hover i.metismenu-state-icon {
      opacity: 1
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu li a.mm-active {
      color: rgba(0, 0, 0, .7);
      background: rgba(0, 0, 0, .15)
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu ul:before {
      background: rgba(0, 0, 0, .1)
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu ul>li>a {
      color: rgba(0, 0, 0, .4)
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu ul>li>a:hover {
      color: rgba(0, 0, 0, .7)
  }
  
  .app-sidebar.sidebar-text-dark .vertical-nav-menu ul>li>a.mm-active {
      color: rgba(0, 0, 0, .7);
      background: rgba(0, 0, 0, .15)
  }
  
  .app-sidebar.sidebar-text-dark .ps__thumb-y {
      background: rgba(0, 0, 0, .3)
  }
  
  .app-sidebar.sidebar-text-dark .ps__rail-y:hover .ps__thumb-y {
      background: rgba(0, 0, 0, .2)
  }
  
  .app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner,
  .app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner::before,
  .app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner::after {
      background-color: rgba(0, 0, 0, .8)
  }
  
  .fixed-sidebar .app-sidebar {
      position: fixed;
      height: 100vh
  }
  
  .fixed-sidebar .app-main .app-main__outer {
      z-index: 9;
      padding-left: 320px
  }
  
  .fixed-sidebar.fixed-header .app-sidebar .app-header__logo {
      display: none
  }
  
  .fixed-sidebar:not(.fixed-header) .app-sidebar .app-header__logo {
      display: flex
  }
  
  .fixed-sidebar:not(.fixed-header) .app-header {
      margin-left: 320px
  }
  
  .fixed-sidebar:not(.fixed-header) .app-header .app-header__logo {
      display: none
  }
  
  .fixed-sidebar.closed-sidebar:not(.fixed-header) .app-header {
      margin-left: 80px
  }
  
  .fixed-sidebar.closed-sidebar:not(.fixed-header) .app-sidebar .app-header__logo {
      width: 80px;
      padding: 0
  }
  
  .fixed-sidebar.closed-sidebar:not(.fixed-header) .app-sidebar .app-header__logo .logo-src {
      display: none
  }
  
  .fixed-sidebar.closed-sidebar:not(.fixed-header) .app-sidebar .app-header__logo .header__pane {
      margin-right: auto
  }
  
  .closed-sidebar .app-sidebar {
      transition: all .3s ease;
      width: 80px;
      min-width: 80px;
      flex: 0 0 80px;
      z-index: 13
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner .app-sidebar__heading {
      text-indent: -999em
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner .app-sidebar__heading::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: #e0f3ff;
      text-indent: 1px;
      display: none;
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner ul li a {
      text-indent: -99rem;
      padding: 0
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner .metismenu-icon {
      text-indent: 0;
      left: 50%;
      margin-left: -17px
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner .metismenu-state-icon {
      visibility: hidden
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner ul::before {
      display: none
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner ul.mm-show {
      padding: 0
  }
  
  .closed-sidebar .app-sidebar .app-sidebar__inner ul.mm-show>li>a {
      height: 0
  }
  
  .closed-sidebar .app-sidebar:hover {
      flex: 0 0 320px !important;
      width: 320px !important
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner .app-sidebar__heading {
      text-indent: initial
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner .app-sidebar__heading::before {
      display: none
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner ul::before {
      display: block
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner ul li a {
      text-indent: initial;
      padding: 0 1.5rem 0 45px
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner .metismenu-icon {
      text-indent: initial;
      left: 5px;
      margin-left: 0
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner .metismenu-state-icon {
      visibility: visible
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner ul.mm-show {
      padding: .5em 0 0 2rem
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner ul.mm-show>li>a {
      height: 2.3em
  }
  
  .closed-sidebar .app-sidebar:hover .app-sidebar__inner ul ul li a {
      padding-left: 1em
  }
  
  .closed-sidebar:not(.sidebar-mobile-open) .app-sidebar .scrollbar-sidebar {
      position: static;
      height: auto;
      overflow: initial !important
  }
  
  .closed-sidebar:not(.sidebar-mobile-open) .app-sidebar:hover .scrollbar-sidebar {
      position: absolute;
      height: 100%;
      overflow: hidden !important
  }
  
  .closed-sidebar:not(.closed-sidebar-mobile) .app-header .app-header__logo {
      width: 80px
  }
  
  .closed-sidebar:not(.closed-sidebar-mobile) .app-header .app-header__logo .logo-src {
      display: none
  }
  
  .closed-sidebar:not(.closed-sidebar-mobile) .app-header .app-header__logo .header__pane {
      margin-right: auto
  }
  
  .closed-sidebar.fixed-sidebar .app-main__outer {
      padding-left: 80px
  }
  
  .closed-sidebar.fixed-header:not(.fixed-sidebar) .app-sidebar .app-header__logo {
      visibility: hidden
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo,
  .closed-sidebar.closed-sidebar-mobile .app-header .app-header__logo {
      width: auto;
      display: flex
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo .header__pane,
  .closed-sidebar.closed-sidebar-mobile .app-header .app-header__logo .header__pane {
      display: none
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo {
      display: flex;
      width: 80px;
      padding: 0 1.5rem !important
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo .logo-src {
      display: block !important;
      margin: 0 auto;
      width: 21px
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo .header__pane {
      display: none
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-sidebar:hover .app-header__logo {
      width: 320px
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-sidebar:hover .app-header__logo .logo-src {
      width: 97px;
      margin: 0
  }
  
  .closed-sidebar.closed-sidebar-mobile .app-header {
      margin-left: 0 !important
  }
  
  .closed-sidebar.fixed-footer .app-footer__inner {
      margin-left: 0 !important
  }
  
  .app-main {
      flex: 1;
      display: flex;
      z-index: 8;
      position: relative
  }
  
  .app-main .app-main__outer {
      flex: 1;
      flex-direction: column;
      display: flex;
      z-index: 12
  }
  
  .app-main .app-main__inner {
      padding: 50px 40px 50px 50px;
      flex: 1
  }
  
  .app-theme-white.app-container {
      background: #FFF;
  }
  
  .app-theme-white .app-sidebar {
      background:var(--white);
  }
  
  .app-theme-white .app-page-title {
      background: rgba(255, 255, 255, .45)
  }
  
  .app-theme-white .app-footer .app-footer__inner,
  .app-theme-white .app-header {
      /* background: #fafbfc */
  }
  
  .app-theme-white.fixed-header .app-header__logo {
      /* background: rgba(250, 251, 252, .1) */
  }
  
  .app-footer {
      height: 60px
  }
  
  .app-footer .app-footer__inner {
      padding: 0 1.5rem 0 .75rem;
      height: 60px;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
  }
  
  .app-footer .app-footer__inner .app-footer-left {
      display: flex;
      align-items: center
  }
  
  .app-footer .app-footer__inner .app-footer-right {
      margin-left: auto;
      display: flex
  }
  
  .fixed-footer .app-footer {
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      z-index: 7
  }
  
  .fixed-footer .app-footer .app-footer__inner {
      margin-left: 320px;
      box-shadow: .3rem -.46875rem 2.1875rem rgba(4, 9, 20, .02), .3rem -.9375rem 1.40625rem rgba(4, 9, 20, .02), .3rem -.25rem .53125rem rgba(4, 9, 20, .04), .3rem -.125rem .1875rem rgba(4, 9, 20, .02)
  }
  
  .fixed-footer .app-main .app-main__outer {
      padding-bottom: 60px
  }
  
  .app-page-title {
      padding: 30px;
      margin: -30px -30px 30px;
      position: relative
  }
  
  .app-page-title+.body-tabs-layout {
      margin-top: -30px !important
  }
  
  .app-page-title .page-title-wrapper {
      position: relative;
      display: flex;
      align-items: center
  }
  
  .app-page-title .page-title-heading,
  .app-page-title .page-title-subheading {
      margin: 0;
      padding: 0
  }
  
  .app-page-title .page-title-heading {
      font-size: 1.25rem;
      font-weight: 400;
      display: flex;
      align-content: center;
      align-items: center
  }
  
  .app-page-title .page-title-subheading {
      padding: 3px 0 0;
      font-size: .88rem;
      opacity: .6
  }
  
  .app-page-title .page-title-subheading .breadcrumb {
      padding: 0;
      margin: 3px 0 0;
      background: 0 0
  }
  
  .app-page-title .page-title-actions {
      margin-left: auto
  }
  
  .app-page-title .page-title-actions .breadcrumb {
      margin: 0;
      padding: 0;
      background: 0 0
  }
  
  .app-page-title .page-title-icon {
      font-size: 2rem;
      display: flex;
      align-items: center;
      align-content: center;
      text-align: center;
      padding: .83333rem;
      margin: 0 30px 0 0;
      background: #fff;
      box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03);
      border-radius: .25rem;
      width: 60px;
      height: 60px
  }
  
  .app-page-title .page-title-icon i {
      margin: auto
  }
  
  .app-page-title .page-title-icon.rounded-circle {
      margin: 0 20px 0 0
  }
  
  .app-page-title+.RRT__container {
      margin-top: -23.07692px
  }
  
  .app-page-title.app-page-title-simple {
      margin: 0;
      background: 0 0 !important;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0
  }
  
  .page-title-icon-rounded .page-title-icon {
      border-radius: 50px
  }
  
  .opacity-01 {
      opacity: .01 !important
  }
  
  .opacity-02 {
      opacity: .02 !important
  }
  
  .opacity-03 {
      opacity: .03 !important
  }
  
  .opacity-04 {
      opacity: .04 !important
  }
  
  .opacity-05 {
      opacity: .05 !important
  }
  
  .opacity-06 {
      opacity: .06 !important
  }
  
  .opacity-07 {
      opacity: .07 !important
  }
  
  .opacity-08 {
      opacity: .08 !important
  }
  
  .opacity-09 {
      opacity: .09 !important
  }
  
  .opacity-1 {
      opacity: .1 !important
  }
  
  .opacity-15 {
      opacity: .15 !important
  }
  
  .opacity-2 {
      opacity: .2 !important
  }
  
  .opacity-3 {
      opacity: .3 !important
  }
  
  .opacity-4 {
      opacity: .4 !important
  }
  
  .opacity-5 {
      opacity: .5 !important
  }
  
  .opacity-6 {
      opacity: .6 !important
  }
  
  .opacity-7 {
      opacity: .7 !important
  }
  
  .opacity-8 {
      opacity: .8 !important
  }
  
  .opacity-9 {
      opacity: .9 !important
  }
  
  .opacity-10 {
      opacity: 1 !important
  }
  
  .filter-grayscale-5 {
      filter: grayscale(5%) !important
  }
  
  .filter-grayscale-10 {
      filter: grayscale(10%) !important
  }
  
  .filter-grayscale-20 {
      filter: grayscale(20%) !important
  }
  
  .filter-grayscale-30 {
      filter: grayscale(30%) !important
  }
  
  .filter-grayscale-40 {
      filter: grayscale(40%) !important
  }
  
  .filter-grayscale-50 {
      filter: grayscale(50%) !important
  }
  
  .filter-grayscale-80 {
      filter: grayscale(80%) !important
  }
  
  .filter-grayscale-100 {
      filter: grayscale(100%) !important
  }
  
  .br-tl {
      border-top-left-radius: .25rem !important
  }
  
  .br-tr {
      border-top-right-radius: .25rem !important
  }
  
  .br-bl {
      border-bottom-left-radius: .25rem !important
  }
  
  .br-br {
      border-bottom-right-radius: .25rem !important
  }
  
  .b-radius-0 {
      border-radius: 0 !important
  }
  
  .rm-border {
      border-width: 0 !important
  }
  
  .br-a {
      border-radius: .25rem
  }
  
  .margin-h-center {
      margin-left: auto !important;
      margin-right: auto !important
  }
  
  .center-svg {
      margin: 0 auto
  }
  
  .center-svg svg {
      margin: 0 auto
  }
  
  .apexcharts-canvas {
      margin: 0 auto
  }
  
  .apexcharts-donut {
      display: flex;
      align-items: center;
      align-content: center
  }
  
  .alert-dismissible .close {
      top: 0;
      right: 5px;
      padding: 5px
  }
  
  .icon-gradient {
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent
  }
  
  .font-size-xlg {
      font-size: 1.3rem !important
  }
  
  .font-size-md {
      font-size: .9rem !important
  }
  
  .font-size-lg {
      font-size: 1.1rem !important
  }
  
  .no-shadow {
      box-shadow: 0 0 0 transparent !important
  }
  
  .h-100 {
      height: 100vh !important
  }
  
  .he-auto {
      height: auto !important
  }
  
  .he-100 {
      height: 100%
  }
  
  .h-sm {
      height: 150px
  }
  
  .text-nowrap {
      white-space: nowrap
  }
  
  .fsize-1 {
      font-size: .95rem !important
  }
  
  .fsize-2 {
      font-size: 1.3rem !important
  }
  
  .fsize-3 {
      font-size: 1.6rem !important
  }
  
  .fsize-4 {
      font-size: 2rem !important
  }
  
  .z-index-6 {
      z-index: 6
  }
  
  .line-height-1 {
      line-height: 1
  }
  
  .center-elem {
      display: flex;
      align-items: center;
      align-content: center
  }
  
  .flex2 {
      flex: 2
  }
  
  .divider {
      margin-top: 1rem;
      margin-bottom: 1rem;
      height: 1px;
      overflow: hidden;
      background: #e9ecef
  }
  
  .list-group-item:hover {
      z-index: initial
  }
  
  .no-results {
      padding: 1.5rem;
      text-align: center
  }
  
  .no-results .results-title {
      color: #495057;
      font-size: 1.25rem
  }
  
  .no-results .results-subtitle {
      color: #adb5bd;
      font-size: 1.1rem
  }
  
  .bg-animation {
      animation: bg-pan-left 8s both
  }
  
  @-webkit-keyframes bg-pan-left {
      0% {
          background-position: 100% 50%
      }
  
      100% {
          background-position: 0% 50%
      }
  }
  
  @keyframes bg-pan-left {
      0% {
          background-position: 100% 50%
      }
  
      100% {
          background-position: 0% 50%
      }
  }
  
  .w-100 {
      width: 100%
  }
  
  .mb--2 {
      margin-bottom: -1.5rem
  }
  
  .mbg-3 {
      margin-bottom: 30px
  }
  
  .circle-progress {
      position: relative
  }
  
  .circle-progress small {
      position: absolute;
      height: 100%;
      width: 100%;
      font-weight: 700;
      left: 0;
      top: 0;
      vertical-align: middle;
      text-align: center;
      display: flex;
      align-items: center;
      align-content: center
  }
  
  .circle-progress small span {
      margin: 0 auto
  }
  
  .circle-progress canvas {
      display: block
  }
  
  .bg-warm-flame {
      background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%) !important
  }
  
  .bg-night-fade {
      background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%) !important
  }
  
  .bg-sunny-morning {
      background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%) !important
  }
  
  .bg-tempting-azure {
      background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%) !important
  }
  
  .bg-amy-crisp {
      background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%) !important
  }
  
  .bg-heavy-rain {
      background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%) !important
  }
  
  .bg-mean-fruit {
      background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%) !important
  }
  
  .bg-malibu-beach {
      background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important
  }
  
  .bg-deep-blue {
      background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%) !important
  }
  
  .bg-ripe-malin {
      background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%) !important
  }
  
  .bg-arielle-smile {
      background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%) !important
  }
  
  .bg-plum-plate {
      background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important
  }
  
  .bg-happy-fisher {
      background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%) !important
  }
  
  .bg-happy-itmeo {
      background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%) !important
  }
  
  .bg-mixed-hopes {
      background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%) !important
  }
  
  .bg-strong-bliss {
      background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%) !important
  }
  
  .bg-grow-early {
      background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%) !important
  }
  
  .bg-love-kiss {
      background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%) !important
  }
  
  .bg-premium-dark {
      background-image: linear-gradient(to right, #434343 0%, black 100%) !important
  }
  
  .bg-happy-green {
      background-image: linear-gradient(to bottom, #00b09b, #96c93d) !important
  }
  
  .bg-vicious-stance {
      background-image: linear-gradient(60deg, #29323c 0%, #485563 100%) !important
  }
  
  .bg-midnight-bloom {
      background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important
  }
  
  .bg-night-sky {
      background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%) !important
  }
  
  .bg-slick-carbon {
      background-image: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.25) 200%) !important;
      background-blend-mode: multiply
  }
  
  .bg-royal {
      background-image: linear-gradient(to right, #141e30, #243b55) !important
  }
  
  .bg-asteroid {
      background-image: linear-gradient(to right, #0f2027, #203a43, #2c5364) !important
  }
  
  .bg-transparent {
      background: 0 0 !important
  }
  
  /*!Animate.css - http://daneden.me/animate
  Licensed under the MIT license - http://opensource.org/licenses/MIT
  Copyright (c) 2015 Daniel Eden*/
  body {
      -webkit-backface-visibility: hidden
  }
  
  .animated {
      -webkit-animation-duration: calc(1s);
      animation-duration: calc(1s);
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both
  }
  
  .animated.infinite {
      animation-iteration-count: infinite
  }
  
  .animated.hinge {
      -webkit-animation-duration: calc(1s * 2);
      animation-duration: calc(1s * 2)
  }
  
  .animated.bounceIn,
  .animated.bounceOut {
      -webkit-animation-duration: calc(1s * 0.75);
      animation-duration: calc(1s * 0.75)
  }
  
  .animated.flipOutX,
  .animated.flipOutY {
      -webkit-animation-duration: calc(1s * 0.75);
      animation-duration: calc(1s * 0.75)
  }
  
  @-webkit-keyframes bounce {
  
      0%,
      20%,
      50%,
      80%,
      100% {
          -webkit-transform: translateY(0)
      }
  
      40% {
          -webkit-transform: translateY(-30px)
      }
  
      60% {
          -webkit-transform: translateY(-15px)
      }
  }
  
  @keyframes bounce {
  
      0%,
      20%,
      50%,
      80%,
      100% {
          transform: translateY(0)
      }
  
      40% {
          transform: translateY(-30px)
      }
  
      60% {
          transform: translateY(-15px)
      }
  }
  
  .bounce {
      -webkit-animation-name: bounce;
      animation-name: bounce
  }
  
  @-webkit-keyframes flash {
  
      0%,
      50%,
      100% {
          opacity: 1
      }
  
      25%,
      75% {
          opacity: 0
      }
  }
  
  @keyframes flash {
  
      0%,
      50%,
      100% {
          opacity: 1
      }
  
      25%,
      75% {
          opacity: 0
      }
  }
  
  .flash {
      -webkit-animation-name: flash;
      animation-name: flash
  }
  
  @-webkit-keyframes pulse {
      0% {
          -webkit-transform: scale(1)
      }
  
      50% {
          -webkit-transform: scale(1.1)
      }
  
      100% {
          -webkit-transform: scale(1)
      }
  }
  
  @keyframes pulse {
      0% {
          transform: scale(1)
      }
  
      50% {
          transform: scale(1.1)
      }
  
      100% {
          transform: scale(1)
      }
  }
  
  .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse
  }
  
  @-webkit-keyframes shake {
  
      0%,
      100% {
          -webkit-transform: translateX(0)
      }
  
      10%,
      30%,
      50%,
      70%,
      90% {
          -webkit-transform: translateX(-10px)
      }
  
      20%,
      40%,
      60%,
      80% {
          -webkit-transform: translateX(10px)
      }
  }
  
  @keyframes shake {
  
      0%,
      100% {
          transform: translateX(0)
      }
  
      10%,
      30%,
      50%,
      70%,
      90% {
          transform: translateX(-10px)
      }
  
      20%,
      40%,
      60%,
      80% {
          transform: translateX(10px)
      }
  }
  
  .shake {
      -webkit-animation-name: shake;
      animation-name: shake
  }
  
  @-webkit-keyframes swing {
  
      20%,
      40%,
      60%,
      80%,
      100% {
          -webkit-transform-origin: top center
      }
  
      20% {
          -webkit-transform: rotate(15deg)
      }
  
      40% {
          -webkit-transform: rotate(-10deg)
      }
  
      60% {
          -webkit-transform: rotate(5deg)
      }
  
      80% {
          -webkit-transform: rotate(-5deg)
      }
  
      100% {
          -webkit-transform: rotate(0deg)
      }
  }
  
  @keyframes swing {
      20% {
          transform: rotate(15deg)
      }
  
      40% {
          transform: rotate(-10deg)
      }
  
      60% {
          transform: rotate(5deg)
      }
  
      80% {
          transform: rotate(-5deg)
      }
  
      100% {
          transform: rotate(0deg)
      }
  }
  
  .swing {
      -webkit-transform-origin: top center;
      transform-origin: top center;
      -webkit-animation-name: swing;
      animation-name: swing
  }
  
  @-webkit-keyframes wiggle {
      0% {
          -webkit-transform: skewX(9deg)
      }
  
      10% {
          -webkit-transform: skewX(-8deg)
      }
  
      20% {
          -webkit-transform: skewX(7deg)
      }
  
      30% {
          -webkit-transform: skewX(-6deg)
      }
  
      40% {
          -webkit-transform: skewX(5deg)
      }
  
      50% {
          -webkit-transform: skewX(-4deg)
      }
  
      60% {
          -webkit-transform: skewX(3deg)
      }
  
      70% {
          -webkit-transform: skewX(-2deg)
      }
  
      80% {
          -webkit-transform: skewX(1deg)
      }
  
      90% {
          -webkit-transform: skewX(0deg)
      }
  
      100% {
          -webkit-transform: skewX(0deg)
      }
  }
  
  @keyframes wiggle {
      0% {
          transform: skewX(9deg)
      }
  
      10% {
          transform: skewX(-8deg)
      }
  
      20% {
          transform: skewX(7deg)
      }
  
      30% {
          transform: skewX(-6deg)
      }
  
      40% {
          transform: skewX(5deg)
      }
  
      50% {
          transform: skewX(-4deg)
      }
  
      60% {
          transform: skewX(3deg)
      }
  
      70% {
          transform: skewX(-2deg)
      }
  
      80% {
          transform: skewX(1deg)
      }
  
      90% {
          transform: skewX(0deg)
      }
  
      100% {
          transform: skewX(0deg)
      }
  }
  
  .wiggle {
      -webkit-animation-name: wiggle;
      animation-name: wiggle;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
  }
  
  @-webkit-keyframes wobble {
      0% {
          -webkit-transform: translateX(0%)
      }
  
      15% {
          -webkit-transform: translateX(-25%) rotate(-5deg)
      }
  
      30% {
          -webkit-transform: translateX(20%) rotate(3deg)
      }
  
      45% {
          -webkit-transform: translateX(-15%) rotate(-3deg)
      }
  
      60% {
          -webkit-transform: translateX(10%) rotate(2deg)
      }
  
      75% {
          -webkit-transform: translateX(-5%) rotate(-1deg)
      }
  
      100% {
          -webkit-transform: translateX(0%)
      }
  }
  
  @keyframes wobble {
      0% {
          transform: translateX(0%)
      }
  
      15% {
          transform: translateX(-25%) rotate(-5deg)
      }
  
      30% {
          transform: translateX(20%) rotate(3deg)
      }
  
      45% {
          transform: translateX(-15%) rotate(-3deg)
      }
  
      60% {
          transform: translateX(10%) rotate(2deg)
      }
  
      75% {
          transform: translateX(-5%) rotate(-1deg)
      }
  
      100% {
          transform: translateX(0%)
      }
  }
  
  .wobble {
      -webkit-animation-name: wobble;
      animation-name: wobble
  }
  
  @-webkit-keyframes tada {
      0% {
          -webkit-transform: scale(1)
      }
  
      10%,
      20% {
          -webkit-transform: scale(.9) rotate(-3deg)
      }
  
      30%,
      50%,
      70%,
      90% {
          -webkit-transform: scale(1.1) rotate(3deg)
      }
  
      40%,
      60%,
      80% {
          -webkit-transform: scale(1.1) rotate(-3deg)
      }
  
      100% {
          -webkit-transform: scale(1) rotate(0)
      }
  }
  
  @keyframes tada {
      0% {
          transform: scale(1)
      }
  
      10%,
      20% {
          transform: scale(.9) rotate(-3deg)
      }
  
      30%,
      50%,
      70%,
      90% {
          transform: scale(1.1) rotate(3deg)
      }
  
      40%,
      60%,
      80% {
          transform: scale(1.1) rotate(-3deg)
      }
  
      100% {
          transform: scale(1) rotate(0)
      }
  }
  
  .tada {
      -webkit-animation-name: tada;
      animation-name: tada
  }
  
  @-webkit-keyframes bounceIn {
      0% {
          opacity: 0;
          -webkit-transform: scale(.3)
      }
  
      50% {
          opacity: 1;
          -webkit-transform: scale(1.05)
      }
  
      70% {
          -webkit-transform: scale(.9)
      }
  
      100% {
          -webkit-transform: scale(1)
      }
  }
  
  @keyframes bounceIn {
      0% {
          opacity: 0;
          transform: scale(.3)
      }
  
      50% {
          opacity: 1;
          transform: scale(1.05)
      }
  
      70% {
          transform: scale(.9)
      }
  
      100% {
          transform: scale(1)
      }
  }
  
  .bounceIn {
      -webkit-animation-name: bounceIn;
      animation-name: bounceIn
  }
  
  @-webkit-keyframes bounceInDown {
      0% {
          opacity: 0;
          -webkit-transform: translateY(-2000px)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: translateY(30px)
      }
  
      80% {
          -webkit-transform: translateY(-10px)
      }
  
      100% {
          -webkit-transform: translateY(0)
      }
  }
  
  @keyframes bounceInDown {
      0% {
          opacity: 0;
          transform: translateY(-2000px)
      }
  
      60% {
          opacity: 1;
          transform: translateY(30px)
      }
  
      80% {
          transform: translateY(-10px)
      }
  
      100% {
          transform: translateY(0)
      }
  }
  
  .bounceInDown {
      -webkit-animation-name: bounceInDown;
      animation-name: bounceInDown
  }
  
  @-webkit-keyframes bounceInLeft {
      0% {
          opacity: 0;
          -webkit-transform: translateX(-2000px)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: translateX(30px)
      }
  
      80% {
          -webkit-transform: translateX(-10px)
      }
  
      100% {
          -webkit-transform: translateX(0)
      }
  }
  
  @keyframes bounceInLeft {
      0% {
          opacity: 0;
          transform: translateX(-2000px)
      }
  
      60% {
          opacity: 1;
          transform: translateX(30px)
      }
  
      80% {
          transform: translateX(-10px)
      }
  
      100% {
          transform: translateX(0)
      }
  }
  
  .bounceInLeft {
      -webkit-animation-name: bounceInLeft;
      animation-name: bounceInLeft
  }
  
  @-webkit-keyframes bounceInRight {
      0% {
          opacity: 0;
          -webkit-transform: translateX(2000px)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: translateX(-30px)
      }
  
      80% {
          -webkit-transform: translateX(10px)
      }
  
      100% {
          -webkit-transform: translateX(0)
      }
  }
  
  @keyframes bounceInRight {
      0% {
          opacity: 0;
          transform: translateX(2000px)
      }
  
      60% {
          opacity: 1;
          transform: translateX(-30px)
      }
  
      80% {
          transform: translateX(10px)
      }
  
      100% {
          transform: translateX(0)
      }
  }
  
  .bounceInRight {
      -webkit-animation-name: bounceInRight;
      animation-name: bounceInRight
  }
  
  @-webkit-keyframes bounceInUp {
      0% {
          opacity: 0;
          -webkit-transform: translateY(2000px)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: translateY(-30px)
      }
  
      80% {
          -webkit-transform: translateY(10px)
      }
  
      100% {
          -webkit-transform: translateY(0)
      }
  }
  
  @keyframes bounceInUp {
      0% {
          opacity: 0;
          transform: translateY(2000px)
      }
  
      60% {
          opacity: 1;
          transform: translateY(-30px)
      }
  
      80% {
          transform: translateY(10px)
      }
  
      100% {
          transform: translateY(0)
      }
  }
  
  .bounceInUp {
      -webkit-animation-name: bounceInUp;
      animation-name: bounceInUp
  }
  
  @-webkit-keyframes bounceOut {
      0% {
          -webkit-transform: scale(1)
      }
  
      25% {
          -webkit-transform: scale(.95)
      }
  
      50% {
          opacity: 1;
          -webkit-transform: scale(1.1)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: scale(.3)
      }
  }
  
  @keyframes bounceOut {
      0% {
          transform: scale(1)
      }
  
      25% {
          transform: scale(.95)
      }
  
      50% {
          opacity: 1;
          transform: scale(1.1)
      }
  
      100% {
          opacity: 0;
          transform: scale(.3)
      }
  }
  
  .bounceOut {
      -webkit-animation-name: bounceOut;
      animation-name: bounceOut
  }
  
  @-webkit-keyframes bounceOutDown {
      0% {
          -webkit-transform: translateY(0)
      }
  
      20% {
          opacity: 1;
          -webkit-transform: translateY(-20px)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateY(2000px)
      }
  }
  
  @keyframes bounceOutDown {
      0% {
          transform: translateY(0)
      }
  
      20% {
          opacity: 1;
          transform: translateY(-20px)
      }
  
      100% {
          opacity: 0;
          transform: translateY(2000px)
      }
  }
  
  .bounceOutDown {
      -webkit-animation-name: bounceOutDown;
      animation-name: bounceOutDown
  }
  
  @-webkit-keyframes bounceOutLeft {
      0% {
          -webkit-transform: translateX(0)
      }
  
      20% {
          opacity: 1;
          -webkit-transform: translateX(20px)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateX(-2000px)
      }
  }
  
  @keyframes bounceOutLeft {
      0% {
          transform: translateX(0)
      }
  
      20% {
          opacity: 1;
          transform: translateX(20px)
      }
  
      100% {
          opacity: 0;
          transform: translateX(-2000px)
      }
  }
  
  .bounceOutLeft {
      -webkit-animation-name: bounceOutLeft;
      animation-name: bounceOutLeft
  }
  
  @-webkit-keyframes bounceOutRight {
      0% {
          -webkit-transform: translateX(0)
      }
  
      20% {
          opacity: 1;
          -webkit-transform: translateX(-20px)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateX(2000px)
      }
  }
  
  @keyframes bounceOutRight {
      0% {
          transform: translateX(0)
      }
  
      20% {
          opacity: 1;
          transform: translateX(-20px)
      }
  
      100% {
          opacity: 0;
          transform: translateX(2000px)
      }
  }
  
  .bounceOutRight {
      -webkit-animation-name: bounceOutRight;
      animation-name: bounceOutRight
  }
  
  @-webkit-keyframes bounceOutUp {
      0% {
          -webkit-transform: translateY(0)
      }
  
      20% {
          opacity: 1;
          -webkit-transform: translateY(20px)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateY(-2000px)
      }
  }
  
  @keyframes bounceOutUp {
      0% {
          transform: translateY(0)
      }
  
      20% {
          opacity: 1;
          transform: translateY(20px)
      }
  
      100% {
          opacity: 0;
          transform: translateY(-2000px)
      }
  }
  
  .bounceOutUp {
      -webkit-animation-name: bounceOutUp;
      animation-name: bounceOutUp
  }
  
  @-webkit-keyframes fadeIn {
      0% {
          opacity: 0
      }
  
      100% {
          opacity: 1
      }
  }
  
  @keyframes fadeIn {
      0% {
          opacity: 0
      }
  
      100% {
          opacity: 1
      }
  }
  
  .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn
  }
  
  @-webkit-keyframes fadeInDown {
      0% {
          opacity: 0;
          -webkit-transform: translateY(-20px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  }
  
  @keyframes fadeInDown {
      0% {
          opacity: 0;
          transform: translateY(-20px)
      }
  
      100% {
          opacity: 1;
          transform: translateY(0)
      }
  }
  
  .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown
  }
  
  @-webkit-keyframes fadeInDownBig {
      0% {
          opacity: 0;
          -webkit-transform: translateY(-2000px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  }
  
  @keyframes fadeInDownBig {
      0% {
          opacity: 0;
          transform: translateY(-2000px)
      }
  
      100% {
          opacity: 1;
          transform: translateY(0)
      }
  }
  
  .fadeInDownBig {
      -webkit-animation-name: fadeInDownBig;
      animation-name: fadeInDownBig
  }
  
  @-webkit-keyframes fadeInLeft {
      0% {
          opacity: 0;
          -webkit-transform: translateX(-20px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  }
  
  @keyframes fadeInLeft {
      0% {
          opacity: 0;
          transform: translateX(-20px)
      }
  
      100% {
          opacity: 1;
          transform: translateX(0)
      }
  }
  
  .fadeInLeft {
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft
  }
  
  @-webkit-keyframes fadeInLeftBig {
      0% {
          opacity: 0;
          -webkit-transform: translateX(-2000px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  }
  
  @keyframes fadeInLeftBig {
      0% {
          opacity: 0;
          transform: translateX(-2000px)
      }
  
      100% {
          opacity: 1;
          transform: translateX(0)
      }
  }
  
  .fadeInLeftBig {
      -webkit-animation-name: fadeInLeftBig;
      animation-name: fadeInLeftBig
  }
  
  @-webkit-keyframes fadeInRight {
      0% {
          opacity: 0;
          -webkit-transform: translateX(20px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  }
  
  @keyframes fadeInRight {
      0% {
          opacity: 0;
          transform: translateX(20px)
      }
  
      100% {
          opacity: 1;
          transform: translateX(0)
      }
  }
  
  .fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight
  }
  
  @-webkit-keyframes fadeInRightBig {
      0% {
          opacity: 0;
          -webkit-transform: translateX(2000px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  }
  
  @keyframes fadeInRightBig {
      0% {
          opacity: 0;
          transform: translateX(2000px)
      }
  
      100% {
          opacity: 1;
          transform: translateX(0)
      }
  }
  
  .fadeInRightBig {
      -webkit-animation-name: fadeInRightBig;
      animation-name: fadeInRightBig
  }
  
  @-webkit-keyframes fadeInUp {
      0% {
          opacity: 0;
          -webkit-transform: translateY(20px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  }
  
  @keyframes fadeInUp {
      0% {
          opacity: 0;
          transform: translateY(20px)
      }
  
      100% {
          opacity: 1;
          transform: translateY(0)
      }
  }
  
  .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp
  }
  
  @-webkit-keyframes fadeInUpBig {
      0% {
          opacity: 0;
          -webkit-transform: translateY(2000px)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  }
  
  @keyframes fadeInUpBig {
      0% {
          opacity: 0;
          transform: translateY(2000px)
      }
  
      100% {
          opacity: 1;
          transform: translateY(0)
      }
  }
  
  .fadeInUpBig {
      -webkit-animation-name: fadeInUpBig;
      animation-name: fadeInUpBig
  }
  
  @-webkit-keyframes fadeOut {
      0% {
          opacity: 1
      }
  
      100% {
          opacity: 0
      }
  }
  
  @keyframes fadeOut {
      0% {
          opacity: 1
      }
  
      100% {
          opacity: 0
      }
  }
  
  .fadeOut {
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut
  }
  
  @-webkit-keyframes fadeOutDown {
      0% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateY(20px)
      }
  }
  
  @keyframes fadeOutDown {
      0% {
          opacity: 1;
          transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          transform: translateY(20px)
      }
  }
  
  .fadeOutDown {
      -webkit-animation-name: fadeOutDown;
      animation-name: fadeOutDown
  }
  
  @-webkit-keyframes fadeOutDownBig {
      0% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateY(2000px)
      }
  }
  
  @keyframes fadeOutDownBig {
      0% {
          opacity: 1;
          transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          transform: translateY(2000px)
      }
  }
  
  .fadeOutDownBig {
      -webkit-animation-name: fadeOutDownBig;
      animation-name: fadeOutDownBig
  }
  
  @-webkit-keyframes fadeOutLeft {
      0% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateX(-20px)
      }
  }
  
  @keyframes fadeOutLeft {
      0% {
          opacity: 1;
          transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          transform: translateX(-20px)
      }
  }
  
  .fadeOutLeft {
      -webkit-animation-name: fadeOutLeft;
      animation-name: fadeOutLeft
  }
  
  @-webkit-keyframes fadeOutLeftBig {
      0% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateX(-2000px)
      }
  }
  
  @keyframes fadeOutLeftBig {
      0% {
          opacity: 1;
          transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          transform: translateX(-2000px)
      }
  }
  
  .fadeOutLeftBig {
      -webkit-animation-name: fadeOutLeftBig;
      animation-name: fadeOutLeftBig
  }
  
  @-webkit-keyframes fadeOutRight {
      0% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateX(20px)
      }
  }
  
  @keyframes fadeOutRight {
      0% {
          opacity: 1;
          transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          transform: translateX(20px)
      }
  }
  
  .fadeOutRight {
      -webkit-animation-name: fadeOutRight;
      animation-name: fadeOutRight
  }
  
  @-webkit-keyframes fadeOutRightBig {
      0% {
          opacity: 1;
          -webkit-transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateX(2000px)
      }
  }
  
  @keyframes fadeOutRightBig {
      0% {
          opacity: 1;
          transform: translateX(0)
      }
  
      100% {
          opacity: 0;
          transform: translateX(2000px)
      }
  }
  
  .fadeOutRightBig {
      -webkit-animation-name: fadeOutRightBig;
      animation-name: fadeOutRightBig
  }
  
  @-webkit-keyframes fadeOutUp {
      0% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateY(-20px)
      }
  }
  
  @keyframes fadeOutUp {
      0% {
          opacity: 1;
          transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          transform: translateY(-20px)
      }
  }
  
  .fadeOutUp {
      -webkit-animation-name: fadeOutUp;
      animation-name: fadeOutUp
  }
  
  @-webkit-keyframes fadeOutUpBig {
      0% {
          opacity: 1;
          -webkit-transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateY(-2000px)
      }
  }
  
  @keyframes fadeOutUpBig {
      0% {
          opacity: 1;
          transform: translateY(0)
      }
  
      100% {
          opacity: 0;
          transform: translateY(-2000px)
      }
  }
  
  .fadeOutUpBig {
      -webkit-animation-name: fadeOutUpBig;
      animation-name: fadeOutUpBig
  }
  
  @-webkit-keyframes flip {
      0% {
          -webkit-transform: perspective(400px) rotateY(0);
          -webkit-animation-timing-function: ease-out
      }
  
      40% {
          -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
          -webkit-animation-timing-function: ease-out
      }
  
      50% {
          -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
          -webkit-animation-timing-function: ease-in
      }
  
      80% {
          -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
          -webkit-animation-timing-function: ease-in
      }
  
      100% {
          -webkit-transform: perspective(400px) scale(1);
          -webkit-animation-timing-function: ease-in
      }
  }
  
  @keyframes flip {
      0% {
          transform: perspective(400px) rotateY(0);
          animation-timing-function: ease-out
      }
  
      40% {
          transform: perspective(400px) translateZ(150px) rotateY(170deg);
          animation-timing-function: ease-out
      }
  
      50% {
          transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
          animation-timing-function: ease-in
      }
  
      80% {
          transform: perspective(400px) rotateY(360deg) scale(.95);
          animation-timing-function: ease-in
      }
  
      100% {
          transform: perspective(400px) scale(1);
          animation-timing-function: ease-in
      }
  }
  
  .flip {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flip;
      animation-name: flip
  }
  
  @-webkit-keyframes flipInX {
      0% {
          -webkit-transform: perspective(400px) rotateX(90deg);
          opacity: 0
      }
  
      40% {
          -webkit-transform: perspective(400px) rotateX(-10deg)
      }
  
      70% {
          -webkit-transform: perspective(400px) rotateX(10deg)
      }
  
      100% {
          -webkit-transform: perspective(400px) rotateX(0deg);
          opacity: 1
      }
  }
  
  @keyframes flipInX {
      0% {
          transform: perspective(400px) rotateX(90deg);
          opacity: 0
      }
  
      40% {
          transform: perspective(400px) rotateX(-10deg)
      }
  
      70% {
          transform: perspective(400px) rotateX(10deg)
      }
  
      100% {
          transform: perspective(400px) rotateX(0deg);
          opacity: 1
      }
  }
  
  .flipInX {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInX;
      animation-name: flipInX
  }
  
  @-webkit-keyframes flipInY {
      0% {
          -webkit-transform: perspective(400px) rotateY(90deg);
          opacity: 0
      }
  
      40% {
          -webkit-transform: perspective(400px) rotateY(-10deg)
      }
  
      70% {
          -webkit-transform: perspective(400px) rotateY(10deg)
      }
  
      100% {
          -webkit-transform: perspective(400px) rotateY(0deg);
          opacity: 1
      }
  }
  
  @keyframes flipInY {
      0% {
          transform: perspective(400px) rotateY(90deg);
          opacity: 0
      }
  
      40% {
          transform: perspective(400px) rotateY(-10deg)
      }
  
      70% {
          transform: perspective(400px) rotateY(10deg)
      }
  
      100% {
          transform: perspective(400px) rotateY(0deg);
          opacity: 1
      }
  }
  
  .flipInY {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInY;
      animation-name: flipInY
  }
  
  @-webkit-keyframes flipOutX {
      0% {
          -webkit-transform: perspective(400px) rotateX(0deg);
          opacity: 1
      }
  
      100% {
          -webkit-transform: perspective(400px) rotateX(90deg);
          opacity: 0
      }
  }
  
  @keyframes flipOutX {
      0% {
          transform: perspective(400px) rotateX(0deg);
          opacity: 1
      }
  
      100% {
          transform: perspective(400px) rotateX(90deg);
          opacity: 0
      }
  }
  
  .flipOutX {
      -webkit-animation-name: flipOutX;
      animation-name: flipOutX;
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important
  }
  
  @-webkit-keyframes flipOutY {
      0% {
          -webkit-transform: perspective(400px) rotateY(0deg);
          opacity: 1
      }
  
      100% {
          -webkit-transform: perspective(400px) rotateY(90deg);
          opacity: 0
      }
  }
  
  @keyframes flipOutY {
      0% {
          transform: perspective(400px) rotateY(0deg);
          opacity: 1
      }
  
      100% {
          transform: perspective(400px) rotateY(90deg);
          opacity: 0
      }
  }
  
  .flipOutY {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipOutY;
      animation-name: flipOutY
  }
  
  @-webkit-keyframes lightSpeedIn {
      0% {
          -webkit-transform: translateX(100%) skewX(-30deg);
          opacity: 0
      }
  
      60% {
          -webkit-transform: translateX(-20%) skewX(30deg);
          opacity: 1
      }
  
      80% {
          -webkit-transform: translateX(0%) skewX(-15deg);
          opacity: 1
      }
  
      100% {
          -webkit-transform: translateX(0%) skewX(0deg);
          opacity: 1
      }
  }
  
  @keyframes lightSpeedIn {
      0% {
          transform: translateX(100%) skewX(-30deg);
          opacity: 0
      }
  
      60% {
          transform: translateX(-20%) skewX(30deg);
          opacity: 1
      }
  
      80% {
          transform: translateX(0%) skewX(-15deg);
          opacity: 1
      }
  
      100% {
          transform: translateX(0%) skewX(0deg);
          opacity: 1
      }
  }
  
  .lightSpeedIn {
      -webkit-animation-name: lightSpeedIn;
      animation-name: lightSpeedIn;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out
  }
  
  @-webkit-keyframes lightSpeedOut {
      0% {
          -webkit-transform: translateX(0%) skewX(0deg);
          opacity: 1
      }
  
      100% {
          -webkit-transform: translateX(100%) skewX(-30deg);
          opacity: 0
      }
  }
  
  @keyframes lightSpeedOut {
      0% {
          transform: translateX(0%) skewX(0deg);
          opacity: 1
      }
  
      100% {
          transform: translateX(100%) skewX(-30deg);
          opacity: 0
      }
  }
  
  .lightSpeedOut {
      -webkit-animation-name: lightSpeedOut;
      animation-name: lightSpeedOut;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in
  }
  
  @-webkit-keyframes rotateIn {
      0% {
          -webkit-transform-origin: center center;
          -webkit-transform: rotate(-200deg);
          opacity: 0
      }
  
      100% {
          -webkit-transform-origin: center center;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  }
  
  @keyframes rotateIn {
      0% {
          transform-origin: center center;
          transform: rotate(-200deg);
          opacity: 0
      }
  
      100% {
          transform-origin: center center;
          transform: rotate(0);
          opacity: 1
      }
  }
  
  .rotateIn {
      -webkit-animation-name: rotateIn;
      animation-name: rotateIn
  }
  
  @-webkit-keyframes rotateInDownLeft {
      0% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(-90deg);
          opacity: 0
      }
  
      100% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  }
  
  @keyframes rotateInDownLeft {
      0% {
          transform-origin: left bottom;
          transform: rotate(-90deg);
          opacity: 0
      }
  
      100% {
          transform-origin: left bottom;
          transform: rotate(0);
          opacity: 1
      }
  }
  
  .rotateInDownLeft {
      -webkit-animation-name: rotateInDownLeft;
      animation-name: rotateInDownLeft
  }
  
  @-webkit-keyframes rotateInDownRight {
      0% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(90deg);
          opacity: 0
      }
  
      100% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  }
  
  @keyframes rotateInDownRight {
      0% {
          transform-origin: right bottom;
          transform: rotate(90deg);
          opacity: 0
      }
  
      100% {
          transform-origin: right bottom;
          transform: rotate(0);
          opacity: 1
      }
  }
  
  .rotateInDownRight {
      -webkit-animation-name: rotateInDownRight;
      animation-name: rotateInDownRight
  }
  
  @-webkit-keyframes rotateInUpLeft {
      0% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(90deg);
          opacity: 0
      }
  
      100% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  }
  
  @keyframes rotateInUpLeft {
      0% {
          transform-origin: left bottom;
          transform: rotate(90deg);
          opacity: 0
      }
  
      100% {
          transform-origin: left bottom;
          transform: rotate(0);
          opacity: 1
      }
  }
  
  .rotateInUpLeft {
      -webkit-animation-name: rotateInUpLeft;
      animation-name: rotateInUpLeft
  }
  
  @-webkit-keyframes rotateInUpRight {
      0% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(-90deg);
          opacity: 0
      }
  
      100% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  }
  
  @keyframes rotateInUpRight {
      0% {
          transform-origin: right bottom;
          transform: rotate(-90deg);
          opacity: 0
      }
  
      100% {
          transform-origin: right bottom;
          transform: rotate(0);
          opacity: 1
      }
  }
  
  .rotateInUpRight {
      -webkit-animation-name: rotateInUpRight;
      animation-name: rotateInUpRight
  }
  
  @-webkit-keyframes rotateOut {
      0% {
          -webkit-transform-origin: center center;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  
      100% {
          -webkit-transform-origin: center center;
          -webkit-transform: rotate(200deg);
          opacity: 0
      }
  }
  
  @keyframes rotateOut {
      0% {
          transform-origin: center center;
          transform: rotate(0);
          opacity: 1
      }
  
      100% {
          transform-origin: center center;
          transform: rotate(200deg);
          opacity: 0
      }
  }
  
  .rotateOut {
      -webkit-animation-name: rotateOut;
      animation-name: rotateOut
  }
  
  @-webkit-keyframes rotateOutDownLeft {
      0% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  
      100% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(90deg);
          opacity: 0
      }
  }
  
  @keyframes rotateOutDownLeft {
      0% {
          transform-origin: left bottom;
          transform: rotate(0);
          opacity: 1
      }
  
      100% {
          transform-origin: left bottom;
          transform: rotate(90deg);
          opacity: 0
      }
  }
  
  .rotateOutDownLeft {
      -webkit-animation-name: rotateOutDownLeft;
      animation-name: rotateOutDownLeft
  }
  
  @-webkit-keyframes rotateOutDownRight {
      0% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  
      100% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(-90deg);
          opacity: 0
      }
  }
  
  @keyframes rotateOutDownRight {
      0% {
          transform-origin: right bottom;
          transform: rotate(0);
          opacity: 1
      }
  
      100% {
          transform-origin: right bottom;
          transform: rotate(-90deg);
          opacity: 0
      }
  }
  
  .rotateOutDownRight {
      -webkit-animation-name: rotateOutDownRight;
      animation-name: rotateOutDownRight
  }
  
  @-webkit-keyframes rotateOutUpLeft {
      0% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  
      100% {
          -webkit-transform-origin: left bottom;
          -webkit-transform: rotate(-90deg);
          opacity: 0
      }
  }
  
  @keyframes rotateOutUpLeft {
      0% {
          transform-origin: left bottom;
          transform: rotate(0);
          opacity: 1
      }
  
      100% {
          -transform-origin: left bottom;
          -transform: rotate(-90deg);
          opacity: 0
      }
  }
  
  .rotateOutUpLeft {
      -webkit-animation-name: rotateOutUpLeft;
      animation-name: rotateOutUpLeft
  }
  
  @-webkit-keyframes rotateOutUpRight {
      0% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(0);
          opacity: 1
      }
  
      100% {
          -webkit-transform-origin: right bottom;
          -webkit-transform: rotate(90deg);
          opacity: 0
      }
  }
  
  @keyframes rotateOutUpRight {
      0% {
          transform-origin: right bottom;
          transform: rotate(0);
          opacity: 1
      }
  
      100% {
          transform-origin: right bottom;
          transform: rotate(90deg);
          opacity: 0
      }
  }
  
  .rotateOutUpRight {
      -webkit-animation-name: rotateOutUpRight;
      animation-name: rotateOutUpRight
  }
  
  @-webkit-keyframes slideInDown {
      0% {
          -webkit-transform: translate3d(0, -100%, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(0, 0, 0)
      }
  }
  
  @keyframes slideInDown {
      0% {
          transform: translate3d(0, -100%, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(0, 0, 0)
      }
  }
  
  .slideInDown {
      -webkit-animation-name: slideInDown;
      animation-name: slideInDown
  }
  
  @-webkit-keyframes slideInLeft {
      0% {
          -webkit-transform: translate3d(-100%, 0, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(0, 0, 0)
      }
  }
  
  @keyframes slideInLeft {
      0% {
          transform: translate3d(-100%, 0, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(0, 0, 0)
      }
  }
  
  .slideInLeft {
      -webkit-animation-name: slideInLeft;
      animation-name: slideInLeft
  }
  
  @-webkit-keyframes slideInRight {
      0% {
          -webkit-transform: translate3d(100%, 0, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(0, 0, 0)
      }
  }
  
  @keyframes slideInRight {
      0% {
          transform: translate3d(100%, 0, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(0, 0, 0)
      }
  }
  
  .slideInRight {
      -webkit-animation-name: slideInRight;
      animation-name: slideInRight
  }
  
  @-webkit-keyframes slideInUp {
      0% {
          -webkit-transform: translate3d(0, 100%, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(0, 0, 0)
      }
  }
  
  @keyframes slideInUp {
      0% {
          transform: translate3d(0, 100%, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(0, 0, 0)
      }
  }
  
  .slideInUp {
      -webkit-animation-name: slideInUp;
      animation-name: slideInUp
  }
  
  @-webkit-keyframes slideOutDown {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(0, 100%, 0)
      }
  }
  
  @keyframes slideOutDown {
      0% {
          transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(0, 100%, 0)
      }
  }
  
  .slideOutDown {
      -webkit-animation-name: slideOutDown;
      animation-name: slideOutDown
  }
  
  @-webkit-keyframes slideOutLeft {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(-100%, 0, 0)
      }
  }
  
  @keyframes slideOutLeft {
      0% {
          transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(-100%, 0, 0)
      }
  }
  
  .slideOutLeft {
      -webkit-animation-name: slideOutLeft;
      animation-name: slideOutLeft
  }
  
  @-webkit-keyframes slideOutRight {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(100%, 0, 0)
      }
  }
  
  @keyframes slideOutRight {
      0% {
          transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(100%, 0, 0)
      }
  }
  
  .slideOutRight {
      -webkit-animation-name: slideOutRight;
      animation-name: slideOutRight
  }
  
  @-webkit-keyframes slideOutUp {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          -webkit-transform: translate3d(0, -100%, 0)
      }
  }
  
  @keyframes slideOutUp {
      0% {
          transform: translate3d(0, 0, 0);
          visibility: visible
      }
  
      100% {
          transform: translate3d(0, -100%, 0)
      }
  }
  
  .slideOutUp {
      -webkit-animation-name: slideOutUp;
      animation-name: slideOutUp
  }
  
  @-webkit-keyframes hinge {
      0% {
          -webkit-transform: rotate(0);
          -webkit-transform-origin: top left;
          -webkit-animation-timing-function: ease-in-out
      }
  
      20%,
      60% {
          -webkit-transform: rotate(80deg);
          -webkit-transform-origin: top left;
          -webkit-animation-timing-function: ease-in-out
      }
  
      40% {
          -webkit-transform: rotate(60deg);
          -webkit-transform-origin: top left;
          -webkit-animation-timing-function: ease-in-out
      }
  
      80% {
          -webkit-transform: rotate(60deg) translateY(0);
          opacity: 1;
          -webkit-transform-origin: top left;
          -webkit-animation-timing-function: ease-in-out
      }
  
      100% {
          -webkit-transform: translateY(700px);
          opacity: 0
      }
  }
  
  @keyframes hinge {
      0% {
          transform: rotate(0);
          transform-origin: top left;
          animation-timing-function: ease-in-out
      }
  
      20%,
      60% {
          transform: rotate(80deg);
          transform-origin: top left;
          animation-timing-function: ease-in-out
      }
  
      40% {
          transform: rotate(60deg);
          transform-origin: top left;
          animation-timing-function: ease-in-out
      }
  
      80% {
          transform: rotate(60deg) translateY(0);
          opacity: 1;
          transform-origin: top left;
          animation-timing-function: ease-in-out
      }
  
      100% {
          transform: translateY(700px);
          opacity: 0
      }
  }
  
  .hinge {
      -webkit-animation-name: hinge;
      animation-name: hinge
  }
  
  @-webkit-keyframes rollIn {
      0% {
          opacity: 0;
          -webkit-transform: translateX(-100%) rotate(-120deg)
      }
  
      100% {
          opacity: 1;
          -webkit-transform: translateX(0px) rotate(0deg)
      }
  }
  
  @keyframes rollIn {
      0% {
          opacity: 0;
          transform: translateX(-100%) rotate(-120deg)
      }
  
      100% {
          opacity: 1;
          transform: translateX(0px) rotate(0deg)
      }
  }
  
  .rollIn {
      -webkit-animation-name: rollIn;
      animation-name: rollIn
  }
  
  @-webkit-keyframes rollOut {
      0% {
          opacity: 1;
          -webkit-transform: translateX(0px) rotate(0deg)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: translateX(100%) rotate(120deg)
      }
  }
  
  @keyframes rollOut {
      0% {
          opacity: 1;
          transform: translateX(0px) rotate(0deg)
      }
  
      100% {
          opacity: 0;
          transform: translateX(100%) rotate(120deg)
      }
  }
  
  .rollOut {
      -webkit-animation-name: rollOut;
      animation-name: rollOut
  }
  
  @-webkit-keyframes zoomIn {
      0% {
          opacity: 0;
          -webkit-transform: scale3d(.3, .3, .3)
      }
  
      50% {
          opacity: 1
      }
  }
  
  @keyframes zoomIn {
      0% {
          opacity: 0;
          transform: scale3d(.3, .3, .3)
      }
  
      50% {
          opacity: 1
      }
  }
  
  .zoomIn {
      -webkit-animation-name: zoomIn;
      animation-name: zoomIn
  }
  
  @-webkit-keyframes zoomInDown {
      0% {
          opacity: 0;
          -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
          -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  @keyframes zoomInDown {
      0% {
          opacity: 0;
          transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
          animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  .zoomInDown {
      -webkit-animation-name: zoomInDown;
      animation-name: zoomInDown
  }
  
  @-webkit-keyframes zoomInLeft {
      0% {
          opacity: 0;
          -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
          -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
          -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  @keyframes zoomInLeft {
      0% {
          opacity: 0;
          transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
          animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
          animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  .zoomInLeft {
      -webkit-animation-name: zoomInLeft;
      animation-name: zoomInLeft
  }
  
  @-webkit-keyframes zoomInRight {
      0% {
          opacity: 0;
          -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
          -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
          -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  @keyframes zoomInRight {
      0% {
          opacity: 0;
          transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
          animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
          animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  .zoomInRight {
      -webkit-animation-name: zoomInRight;
      animation-name: zoomInRight
  }
  
  @-webkit-keyframes zoomInUp {
      0% {
          opacity: 0;
          -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
          -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  @keyframes zoomInUp {
      0% {
          opacity: 0;
          transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
          animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      60% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  .zoomInUp {
      -webkit-animation-name: zoomInUp;
      animation-name: zoomInUp
  }
  
  @-webkit-keyframes zoomOut {
      0% {
          opacity: 1
      }
  
      50% {
          opacity: 0;
          -webkit-transform: scale3d(.3, .3, .3)
      }
  
      100% {
          opacity: 0
      }
  }
  
  @keyframes zoomOut {
      0% {
          opacity: 1
      }
  
      50% {
          opacity: 0;
          transform: scale3d(.3, .3, .3)
      }
  
      100% {
          opacity: 0
      }
  }
  
  .zoomOut {
      -webkit-animation-name: zoomOut;
      animation-name: zoomOut
  }
  
  @-webkit-keyframes zoomOutDown {
      40% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
          -webkit-transform-origin: center bottom;
          -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  @keyframes zoomOutDown {
      40% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
          animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      100% {
          opacity: 0;
          transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
          transform-origin: center bottom;
          animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  .zoomOutDown {
      -webkit-animation-name: zoomOutDown;
      animation-name: zoomOutDown
  }
  
  @-webkit-keyframes zoomOutLeft {
      40% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: scale3d(.1) translate3d(-2000px, 0, 0);
          -webkit-transform-origin: left center
      }
  }
  
  @keyframes zoomOutLeft {
      40% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
      }
  
      100% {
          opacity: 0;
          transform: scale3d(.1) translate3d(-2000px, 0, 0);
          transform-origin: left center
      }
  }
  
  .zoomOutLeft {
      -webkit-animation-name: zoomOutLeft;
      animation-name: zoomOutLeft
  }
  
  @-webkit-keyframes zoomOutRight {
      40% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: scale3d(.1) translate3d(2000px, 0, 0);
          -webkit-transform-origin: right center
      }
  }
  
  @keyframes zoomOutRight {
      40% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
      }
  
      100% {
          opacity: 0;
          transform: scale3d(.1) translate3d(2000px, 0, 0);
          transform-origin: right center
      }
  }
  
  .zoomOutRight {
      -webkit-animation-name: zoomOutRight;
      animation-name: zoomOutRight
  }
  
  @-webkit-keyframes zoomOutUp {
      40% {
          opacity: 1;
          -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      100% {
          opacity: 0;
          -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
          -webkit-transform-origin: center bottom;
          -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  @keyframes zoomOutUp {
      40% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
          animation-timing-function: cubic-bezier(.55, .055, .675, .19)
      }
  
      100% {
          opacity: 0;
          transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
          transform-origin: center bottom;
          animation-timing-function: cubic-bezier(.175, .885, .32, 1)
      }
  }
  
  .zoomOutUp {
      -webkit-animation-name: zoomOutUp;
      animation-name: zoomOutUp
  }
  
  .dropdown-menu.show {
      animation: fade-in2 .2s cubic-bezier(.39, .575, .565, 1) both
  }
  
  .popover:not([data-placement^=top]).show {
      animation: fade-in2 .2s cubic-bezier(.39, .575, .565, 1) both
  }
  
  .dropdown-menu[data-placement^=top].show {
      animation: fade-in3 .2s cubic-bezier(.39, .575, .565, 1) both;
      bottom: auto !important;
      top: auto !important
  }
  
  @keyframes fade-in2 {
      0% {
          margin-top: -50px;
          visibility: hidden;
          opacity: 0
      }
  
      100% {
          margin-top: 0;
          visibility: visible;
          opacity: 1
      }
  }
  
  .form-control {
      transition: all .2s
  }
  
  .dropdown-toggle::after {
      position: relative;
      top: 2px;
      opacity: .8
  }
  
  .dropright .dropdown-toggle::after {
      top: 0
  }
  
  .dropdown-toggle-split {
      border-left: rgba(255, 255, 255, .1) solid 1px
  }
  
  .btn-outline-primary {
      color: #3f6ad8;
      border-color: #3f6ad8
  }
  
  .btn-outline-primary:hover {
      color: #fff;
      background-color: #3f6ad8;
      border-color: #3f6ad8
  }
  
  .btn-outline-primary:focus,
  .btn-outline-primary.focus {
      box-shadow: 0 0 0 0 rgba(63, 106, 216, .5)
  }
  
  .btn-outline-primary.disabled,
  .btn-outline-primary:disabled {
      color: #3f6ad8;
      background-color: transparent
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active,
  .btn-outline-primary:not(:disabled):not(.disabled).active,
  .show>.btn-outline-primary.dropdown-toggle {
      color: #fff;
      background-color: #3f6ad8;
      border-color: #3f6ad8
  }
  
  .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
  .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(63, 106, 216, .5)
  }
  
  .btn-outline-primary.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(63, 106, 216, .4), 0 .0625rem .125rem rgba(63, 106, 216, .5)
  }
  
  .btn-outline-primary.btn-shadow.active:hover,
  .btn-outline-primary.btn-shadow.disabled:hover,
  .btn-outline-primary.btn-shadow:active:hover,
  .btn-outline-primary.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(63, 106, 216, .5), 0 .0625rem .125rem rgba(63, 106, 216, .6)
  }
  
  .btn-outline-primary.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(63, 106, 216, .19)
  }
  
  .btn-outline-secondary {
      color: #6c757d;
      border-color: #6c757d
  }
  
  .btn-outline-secondary:hover {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d
  }
  
  .btn-outline-secondary:focus,
  .btn-outline-secondary.focus {
      box-shadow: 0 0 0 0 rgba(108, 117, 125, .5)
  }
  
  .btn-outline-secondary.disabled,
  .btn-outline-secondary:disabled {
      color: #6c757d;
      background-color: transparent
  }
  
  .btn-outline-secondary:not(:disabled):not(.disabled):active,
  .btn-outline-secondary:not(:disabled):not(.disabled).active,
  .show>.btn-outline-secondary.dropdown-toggle {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d
  }
  
  .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
  .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-secondary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(108, 117, 125, .5)
  }
  
  .btn-outline-secondary.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(108, 117, 125, .4), 0 .0625rem .125rem rgba(108, 117, 125, .5)
  }
  
  .btn-outline-secondary.btn-shadow.active:hover,
  .btn-outline-secondary.btn-shadow.disabled:hover,
  .btn-outline-secondary.btn-shadow:active:hover,
  .btn-outline-secondary.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(108, 117, 125, .5), 0 .0625rem .125rem rgba(108, 117, 125, .6)
  }
  
  .btn-outline-secondary.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(108, 117, 125, .19)
  }
  
  .btn-outline-success {
      color: #3ac47d;
      border-color: #3ac47d
  }
  
  .btn-outline-success:hover {
      color: #fff;
      background-color: #3ac47d;
      border-color: #3ac47d
  }
  
  .btn-outline-success:focus,
  .btn-outline-success.focus {
      box-shadow: 0 0 0 0 rgba(58, 196, 125, .5)
  }
  
  .btn-outline-success.disabled,
  .btn-outline-success:disabled {
      color: #3ac47d;
      background-color: transparent
  }
  
  .btn-outline-success:not(:disabled):not(.disabled):active,
  .btn-outline-success:not(:disabled):not(.disabled).active,
  .show>.btn-outline-success.dropdown-toggle {
      color: #fff;
      background-color: #3ac47d;
      border-color: #3ac47d
  }
  
  .btn-outline-success:not(:disabled):not(.disabled):active:focus,
  .btn-outline-success:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-success.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(58, 196, 125, .5)
  }
  
  .btn-outline-success.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(58, 196, 125, .4), 0 .0625rem .125rem rgba(58, 196, 125, .5)
  }
  
  .btn-outline-success.btn-shadow.active:hover,
  .btn-outline-success.btn-shadow.disabled:hover,
  .btn-outline-success.btn-shadow:active:hover,
  .btn-outline-success.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(58, 196, 125, .5), 0 .0625rem .125rem rgba(58, 196, 125, .6)
  }
  
  .btn-outline-success.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(58, 196, 125, .19)
  }
  
  .btn-outline-info {
      color: #16aaff;
      border-color: #16aaff
  }
  
  .btn-outline-info:hover {
      color: #fff;
      background-color: #16aaff;
      border-color: #16aaff
  }
  
  .btn-outline-info:focus,
  .btn-outline-info.focus {
      box-shadow: 0 0 0 0 rgba(22, 170, 255, .5)
  }
  
  .btn-outline-info.disabled,
  .btn-outline-info:disabled {
      color: #16aaff;
      background-color: transparent
  }
  
  .btn-outline-info:not(:disabled):not(.disabled):active,
  .btn-outline-info:not(:disabled):not(.disabled).active,
  .show>.btn-outline-info.dropdown-toggle {
      color: #fff;
      background-color: #16aaff;
      border-color: #16aaff
  }
  
  .btn-outline-info:not(:disabled):not(.disabled):active:focus,
  .btn-outline-info:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-info.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(22, 170, 255, .5)
  }
  
  .btn-outline-info.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(22, 170, 255, .4), 0 .0625rem .125rem rgba(22, 170, 255, .5)
  }
  
  .btn-outline-info.btn-shadow.active:hover,
  .btn-outline-info.btn-shadow.disabled:hover,
  .btn-outline-info.btn-shadow:active:hover,
  .btn-outline-info.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(22, 170, 255, .5), 0 .0625rem .125rem rgba(22, 170, 255, .6)
  }
  
  .btn-outline-info.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(22, 170, 255, .19)
  }
  
  .btn-outline-warning {
      color: #f7b924;
      border-color: #f7b924
  }
  
  .btn-outline-warning:hover {
      color: #212529;
      background-color: #f7b924;
      border-color: #f7b924
  }
  
  .btn-outline-warning:focus,
  .btn-outline-warning.focus {
      box-shadow: 0 0 0 0 rgba(247, 185, 36, .5)
  }
  
  .btn-outline-warning.disabled,
  .btn-outline-warning:disabled {
      color: #f7b924;
      background-color: transparent
  }
  
  .btn-outline-warning:not(:disabled):not(.disabled):active,
  .btn-outline-warning:not(:disabled):not(.disabled).active,
  .show>.btn-outline-warning.dropdown-toggle {
      color: #212529;
      background-color: #f7b924;
      border-color: #f7b924
  }
  
  .btn-outline-warning:not(:disabled):not(.disabled):active:focus,
  .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-warning.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(247, 185, 36, .5)
  }
  
  .btn-outline-warning.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(247, 185, 36, .4), 0 .0625rem .125rem rgba(247, 185, 36, .5)
  }
  
  .btn-outline-warning.btn-shadow.active:hover,
  .btn-outline-warning.btn-shadow.disabled:hover,
  .btn-outline-warning.btn-shadow:active:hover,
  .btn-outline-warning.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(247, 185, 36, .5), 0 .0625rem .125rem rgba(247, 185, 36, .6)
  }
  
  .btn-outline-warning.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(247, 185, 36, .19)
  }
  
  .btn-outline-danger {
      color: #d92550;
      border-color: #d92550
  }
  
  .btn-outline-danger:hover {
      color: #fff;
      background-color: #d92550;
      border-color: #d92550
  }
  
  .btn-outline-danger:focus,
  .btn-outline-danger.focus {
      box-shadow: 0 0 0 0 rgba(217, 37, 80, .5)
  }
  
  .btn-outline-danger.disabled,
  .btn-outline-danger:disabled {
      color: #d92550;
      background-color: transparent
  }
  
  .btn-outline-danger:not(:disabled):not(.disabled):active,
  .btn-outline-danger:not(:disabled):not(.disabled).active,
  .show>.btn-outline-danger.dropdown-toggle {
      color: #fff;
      background-color: #d92550;
      border-color: #d92550
  }
  
  .btn-outline-danger:not(:disabled):not(.disabled):active:focus,
  .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-danger.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(217, 37, 80, .5)
  }
  
  .btn-outline-danger.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(217, 37, 80, .4), 0 .0625rem .125rem rgba(217, 37, 80, .5)
  }
  
  .btn-outline-danger.btn-shadow.active:hover,
  .btn-outline-danger.btn-shadow.disabled:hover,
  .btn-outline-danger.btn-shadow:active:hover,
  .btn-outline-danger.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(217, 37, 80, .5), 0 .0625rem .125rem rgba(217, 37, 80, .6)
  }
  
  .btn-outline-danger.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(217, 37, 80, .19)
  }
  
  .btn-outline-light {
      color: #eee;
      border-color: #eee
  }
  
  .btn-outline-light:hover {
      color: #212529;
      background-color: #eee;
      border-color: #eee
  }
  
  .btn-outline-light:focus,
  .btn-outline-light.focus {
      box-shadow: 0 0 0 0 rgba(238, 238, 238, .5)
  }
  
  .btn-outline-light.disabled,
  .btn-outline-light:disabled {
      color: #eee;
      background-color: transparent
  }
  
  .btn-outline-light:not(:disabled):not(.disabled):active,
  .btn-outline-light:not(:disabled):not(.disabled).active,
  .show>.btn-outline-light.dropdown-toggle {
      color: #212529;
      background-color: #eee;
      border-color: #eee
  }
  
  .btn-outline-light:not(:disabled):not(.disabled):active:focus,
  .btn-outline-light:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-light.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(238, 238, 238, .5)
  }
  
  .btn-outline-light.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(238, 238, 238, .4), 0 .0625rem .125rem rgba(238, 238, 238, .5)
  }
  
  .btn-outline-light.btn-shadow.active:hover,
  .btn-outline-light.btn-shadow.disabled:hover,
  .btn-outline-light.btn-shadow:active:hover,
  .btn-outline-light.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(238, 238, 238, .5), 0 .0625rem .125rem rgba(238, 238, 238, .6)
  }
  
  .btn-outline-light.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(238, 238, 238, .19)
  }
  
  .btn-outline-dark {
      color: #343a40;
      border-color: #343a40
  }
  
  .btn-outline-dark:hover {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40
  }
  
  .btn-outline-dark:focus,
  .btn-outline-dark.focus {
      box-shadow: 0 0 0 0 rgba(52, 58, 64, .5)
  }
  
  .btn-outline-dark.disabled,
  .btn-outline-dark:disabled {
      color: #343a40;
      background-color: transparent
  }
  
  .btn-outline-dark:not(:disabled):not(.disabled):active,
  .btn-outline-dark:not(:disabled):not(.disabled).active,
  .show>.btn-outline-dark.dropdown-toggle {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40
  }
  
  .btn-outline-dark:not(:disabled):not(.disabled):active:focus,
  .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-dark.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(52, 58, 64, .5)
  }
  
  .btn-outline-dark.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(52, 58, 64, .4), 0 .0625rem .125rem rgba(52, 58, 64, .5)
  }
  
  .btn-outline-dark.btn-shadow.active:hover,
  .btn-outline-dark.btn-shadow.disabled:hover,
  .btn-outline-dark.btn-shadow:active:hover,
  .btn-outline-dark.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(52, 58, 64, .5), 0 .0625rem .125rem rgba(52, 58, 64, .6)
  }
  
  .btn-outline-dark.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(52, 58, 64, .19)
  }
  
  .btn-outline-focus {
      color: #444054;
      border-color: #444054
  }
  
  .btn-outline-focus:hover {
      color: #fff;
      background-color: #444054;
      border-color: #444054
  }
  
  .btn-outline-focus:focus,
  .btn-outline-focus.focus {
      box-shadow: 0 0 0 0 rgba(68, 64, 84, .5)
  }
  
  .btn-outline-focus.disabled,
  .btn-outline-focus:disabled {
      color: #444054;
      background-color: transparent
  }
  
  .btn-outline-focus:not(:disabled):not(.disabled):active,
  .btn-outline-focus:not(:disabled):not(.disabled).active,
  .show>.btn-outline-focus.dropdown-toggle {
      color: #fff;
      background-color: #444054;
      border-color: #444054
  }
  
  .btn-outline-focus:not(:disabled):not(.disabled):active:focus,
  .btn-outline-focus:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-focus.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(68, 64, 84, .5)
  }
  
  .btn-outline-focus.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(68, 64, 84, .4), 0 .0625rem .125rem rgba(68, 64, 84, .5)
  }
  
  .btn-outline-focus.btn-shadow.active:hover,
  .btn-outline-focus.btn-shadow.disabled:hover,
  .btn-outline-focus.btn-shadow:active:hover,
  .btn-outline-focus.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(68, 64, 84, .5), 0 .0625rem .125rem rgba(68, 64, 84, .6)
  }
  
  .btn-outline-focus.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(68, 64, 84, .19)
  }
  
  .btn-outline-alternate {
      color: #794c8a;
      border-color: #794c8a
  }
  
  .btn-outline-alternate:hover {
      color: #fff;
      background-color: #794c8a;
      border-color: #794c8a
  }
  
  .btn-outline-alternate:focus,
  .btn-outline-alternate.focus {
      box-shadow: 0 0 0 0 rgba(121, 76, 138, .5)
  }
  
  .btn-outline-alternate.disabled,
  .btn-outline-alternate:disabled {
      color: #794c8a;
      background-color: transparent
  }
  
  .btn-outline-alternate:not(:disabled):not(.disabled):active,
  .btn-outline-alternate:not(:disabled):not(.disabled).active,
  .show>.btn-outline-alternate.dropdown-toggle {
      color: #fff;
      background-color: #794c8a;
      border-color: #794c8a
  }
  
  .btn-outline-alternate:not(:disabled):not(.disabled):active:focus,
  .btn-outline-alternate:not(:disabled):not(.disabled).active:focus,
  .show>.btn-outline-alternate.dropdown-toggle:focus {
      box-shadow: 0 0 0 0 rgba(121, 76, 138, .5)
  }
  
  .btn-outline-alternate.btn-shadow {
      box-shadow: 0 .125rem .625rem rgba(121, 76, 138, .4), 0 .0625rem .125rem rgba(121, 76, 138, .5)
  }
  
  .btn-outline-alternate.btn-shadow.active:hover,
  .btn-outline-alternate.btn-shadow.disabled:hover,
  .btn-outline-alternate.btn-shadow:active:hover,
  .btn-outline-alternate.btn-shadow:disabled:hover {
      box-shadow: 0 .125rem .625rem rgba(121, 76, 138, .5), 0 .0625rem .125rem rgba(121, 76, 138, .6)
  }
  
  .btn-outline-alternate.btn-shadow:hover {
      box-shadow: 0 5px 15px 2px rgba(121, 76, 138, .19)
  }
  
  .btn {
      position: relative;
      transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
      font-size: .8rem
  }
  
  @media screen and (prefers-reduced-motion:reduce) {
      .btn {
          transition: none
      }
  }
  
  .btn-light {
      border-color: #dcdcdc
  }
  
  .btn-outline-light {
      color: #8f8f8f
  }
  
  .dropdown-menu {
      box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03);
      margin: .125rem
  }
  
  .dropdown-menu.dropdown-menu-right {
      right: 0 !important;
      top: 20px !important;
  }
  
  .dropdown-menu .dropdown-header {
      text-transform: uppercase;
      font-size: .73333rem;
      color: #3f6ad8;
      font-weight: 700
  }
  
  .dropdown-menu .dropdown-item {
      font-size: .88rem;
      display: flex;
      align-items: center;
      transition: background-color .3s ease, color .3s ease;
      cursor: pointer;
      z-index: 6;
      position: relative
  }
  
  .dropdown-menu .dropdown-item .dropdown-icon {
      font-size: 1rem;
      margin-right: .325rem;
      width: 30px;
      text-align: center;
      opacity: .3;
      margin-left: -10px
  }
  
  .dropdown-menu .dropdown-item:hover .dropdown-icon {
      opacity: .7
  }
  
  .dropdown-menu.dropdown-menu-shadow {
      box-shadow: 0 .66875rem 2.3875rem rgba(4, 9, 20, .03), 0 1.1375rem 1.60625rem rgba(4, 9, 20, .03), 0 .45rem .73125rem rgba(4, 9, 20, .05), 0 .325rem .3875rem rgba(4, 9, 20, .03)
  }
  
  .dropdown-toggle::after {
      position: relative;
      top: 2px;
      opacity: .8;
      margin-left: 5px
  }
  
  .dropdown-toggle-split::after {
      margin-left: 0
  }
  
  .dropright .dropdown-toggle::after {
      top: 0
  }
  
  .dropdown-toggle-split {
      border-left: rgba(255, 255, 255, .1) solid 2px
  }
  
  .badge-primary {
      color: #fff;
      background-color: #3f6ad8
  }
  
  a.badge-primary:hover,
  a.badge-primary:focus {
      color: #fff;
      background-color: #2651be
  }
  
  .badge-secondary {
      color: #fff;
      background-color: #6c757d
  }
  
  a.badge-secondary:hover,
  a.badge-secondary:focus {
      color: #fff;
      background-color: #545b62
  }
  
  .badge-success {
      color: #fff;
      background-color: #3ac47d
  }
  
  a.badge-success:hover,
  a.badge-success:focus {
      color: #fff;
      background-color: #2e9d64
  }
  
  .badge-info {
      color: #fff;
      background-color: #16aaff
  }
  
  a.badge-info:hover,
  a.badge-info:focus {
      color: #fff;
      background-color: #0090e2
  }
  
  .badge-warning {
      color: #212529;
      background-color: #f7b924
  }
  
  a.badge-warning:hover,
  a.badge-warning:focus {
      color: #212529;
      background-color: #e0a008
  }
  
  .badge-danger {
      color: #fff;
      background-color: #d92550
  }
  
  a.badge-danger:hover,
  a.badge-danger:focus {
      color: #fff;
      background-color: #ad1e40
  }
  
  .badge-light {
      color: #212529;
      background-color: #eee
  }
  
  a.badge-light:hover,
  a.badge-light:focus {
      color: #212529;
      background-color: #d5d5d5
  }
  
  .badge-dark {
      color: #fff;
      background-color: #343a40
  }
  
  a.badge-dark:hover,
  a.badge-dark:focus {
      color: #fff;
      background-color: #1d2124
  }
  
  .badge-focus {
      color: #fff;
      background-color: #444054
  }
  
  a.badge-focus:hover,
  a.badge-focus:focus {
      color: #fff;
      background-color: #2d2a37
  }
  
  .badge-alternate {
      color: #fff;
      background-color: #794c8a
  }
  
  a.badge-alternate:hover,
  a.badge-alternate:focus {
      color: #fff;
      background-color: #5c3a69
  }
  
  .badge {
      font-weight: 700;
      text-transform: uppercase;
      padding: 5px 10px;
      min-width: 19px
  }
  
  .badge-light {
      background: #fff
  }
  
  .btn .badge {
      margin-left: 8px
  }
  
  .btn-sm .badge-pill,
  .btn-group-sm>.btn .badge-pill {
      position: absolute;
      top: -4px;
      right: -4px
  }
  
  .badge-abs {
      position: absolute;
      right: -3px;
      top: -3px
  }
  
  .card {
      box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03);
      border-width: 0;
      transition: all .2s
  }
  
  .card>.dropdown-menu-header {
      margin: 0
  }
  
  .card>.dropdown-menu-header .dropdown-menu-header-inner {
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem
  }
  
  .card.text-dark.text-white .card-footer,
  .card.text-dark.text-white .card-header,
  .card.text-white .card-footer,
  .card.text-white .card-header {
      background: rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .9)
  }
  
  .card.text-dark.text-white .card-footer,
  .card.text-dark.text-white .card-header {
      color: rgba(0, 0, 0, .9)
  }
  
  .card .card-footer {
      display: flex;
      align-items: center
  }
  
  .btn-actions-pane-right {
      margin-left: auto;
      white-space: nowrap
  }
  
  .btn-actions-pane-right a {
      text-transform: none
  }
  
  .btn-actions-pane-left {
      margin-right: auto
  }
  
  .actions-icon-btn .btn-icon-only {
      padding-left: 0;
      padding-right: 0;
      color: #495057
  }
  
  .actions-icon-btn .btn-icon-only .btn-icon-wrapper {
      font-size: 1.3rem;
      width: 30px;
      text-align: center
  }
  
  .actions-icon-btn .btn-icon-only:hover {
      color: #3f6ad8
  }
  
  .card-header,
  .card-title {
      text-transform: uppercase;
      color: rgba(13, 27, 62, .7);
      font-weight: 700;
      font-size: .88rem
  }
  
  .card-header {
      display: flex;
      align-items: center;
      border-bottom-width: 1px;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: .625rem;
      height: 3.5rem
  }
  
  .card-header.no-border {
      border: 0;
      padding: 0;
      height: auto
  }
  
  .card-header .menu-header-subtitle {
      display: block
  }
  
  .card-header.card-header-tab .nav {
      width: auto;
      margin-left: auto
  }
  
  .card-header.card-header-tab .card-header-title {
      display: flex;
      align-items: center;
      white-space: nowrap
  }
  
  .card-header .header-icon {
      font-size: 1.65rem;
      margin-right: .625rem
  }
  
  .card-header>.nav {
      margin-left: -.625rem;
      height: 100%;
      width: 100%
  }
  
  .card-header>.nav .nav-item {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center
  }
  
  .card-header>.nav .nav-link {
      text-transform: none;
      width: 100%;
      display: block;
      color: #495057
  }
  
  .card-header>.nav .nav-link::before {
      content: '';
      border-radius: 15px;
      background: #3f6ad8;
      transition: all .2s;
      height: 4px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: -2px;
      opacity: 0
  }
  
  .card-header>.nav .nav-link:hover {
      color: #3f6ad8
  }
  
  .card-header>.nav .nav-link.active {
      color: #3f6ad8
  }
  
  .card-header>.nav .nav-link.active::before {
      opacity: 1
  }
  
  .card-border {
      box-shadow: 0 0 0 transparent;
      border-width: 1px
  }
  
  .card-subtitle {
      margin-bottom: .75rem;
      font-size: .968rem;
      color: rgba(13, 27, 62, .55)
  }
  
  .card-shadow-primary {
      box-shadow: 0 .46875rem 2.1875rem rgba(63, 106, 216, .03), 0 .9375rem 1.40625rem rgba(63, 106, 216, .03), 0 .25rem .53125rem rgba(63, 106, 216, .05), 0 .125rem .1875rem rgba(63, 106, 216, .03)
  }
  
  .card-shadow-secondary {
      box-shadow: 0 .46875rem 2.1875rem rgba(108, 117, 125, .03), 0 .9375rem 1.40625rem rgba(108, 117, 125, .03), 0 .25rem .53125rem rgba(108, 117, 125, .05), 0 .125rem .1875rem rgba(108, 117, 125, .03)
  }
  
  .card-shadow-success {
      box-shadow: 0 .46875rem 2.1875rem rgba(58, 196, 125, .03), 0 .9375rem 1.40625rem rgba(58, 196, 125, .03), 0 .25rem .53125rem rgba(58, 196, 125, .05), 0 .125rem .1875rem rgba(58, 196, 125, .03)
  }
  
  .card-shadow-info {
      box-shadow: 0 .46875rem 2.1875rem rgba(22, 170, 255, .03), 0 .9375rem 1.40625rem rgba(22, 170, 255, .03), 0 .25rem .53125rem rgba(22, 170, 255, .05), 0 .125rem .1875rem rgba(22, 170, 255, .03)
  }
  
  .card-shadow-warning {
      box-shadow: 0 .46875rem 2.1875rem rgba(247, 185, 36, .03), 0 .9375rem 1.40625rem rgba(247, 185, 36, .03), 0 .25rem .53125rem rgba(247, 185, 36, .05), 0 .125rem .1875rem rgba(247, 185, 36, .03)
  }
  
  .card-shadow-danger {
      box-shadow: 0 .46875rem 2.1875rem rgba(217, 37, 80, .03), 0 .9375rem 1.40625rem rgba(217, 37, 80, .03), 0 .25rem .53125rem rgba(217, 37, 80, .05), 0 .125rem .1875rem rgba(217, 37, 80, .03)
  }
  
  .card-shadow-light {
      box-shadow: 0 .46875rem 2.1875rem rgba(238, 238, 238, .03), 0 .9375rem 1.40625rem rgba(238, 238, 238, .03), 0 .25rem .53125rem rgba(238, 238, 238, .05), 0 .125rem .1875rem rgba(238, 238, 238, .03)
  }
  
  .card-shadow-dark {
      box-shadow: 0 .46875rem 2.1875rem rgba(52, 58, 64, .03), 0 .9375rem 1.40625rem rgba(52, 58, 64, .03), 0 .25rem .53125rem rgba(52, 58, 64, .05), 0 .125rem .1875rem rgba(52, 58, 64, .03)
  }
  
  .card-shadow-focus {
      box-shadow: 0 .46875rem 2.1875rem rgba(68, 64, 84, .03), 0 .9375rem 1.40625rem rgba(68, 64, 84, .03), 0 .25rem .53125rem rgba(68, 64, 84, .05), 0 .125rem .1875rem rgba(68, 64, 84, .03)
  }
  
  .card-shadow-alternate {
      box-shadow: 0 .46875rem 2.1875rem rgba(121, 76, 138, .03), 0 .9375rem 1.40625rem rgba(121, 76, 138, .03), 0 .25rem .53125rem rgba(121, 76, 138, .05), 0 .125rem .1875rem rgba(121, 76, 138, .03)
  }
  
  .card-header-lg {
      padding: 1.5rem 2.5rem;
      height: auto
  }
  
  .nav-pills,
  .nav-tabs {
      margin-bottom: 1rem
  }
  
  .nav-link {
      font-weight: 700
  }
  
  .nav-link:hover {
      cursor: pointer
  }
  
  .nav-tabs .nav-link:hover {
      color: #3f6ad8 !important
  }
  
  .nav-tabs .nav-link.active {
      color: #3f6ad8
  }
  
  .nav-pills .nav-link:hover {
      color: #3f6ad8 !important
  }
  
  .nav-pills .nav-link.active {
      background: #3f6ad8
  }
  
  .nav-pills .nav-link.active:hover {
      color: #fff !important
  }
  
  .tabs-animated .nav-link {
      position: relative;
      padding: 1rem;
      margin: 0 .75rem 0 0;
      color: #495057
  }
  
  .tabs-animated .nav-link::before {
      transform: scale(0);
      opacity: 1;
      width: 100%;
      left: 0;
      bottom: -2px;
      content: "";
      position: absolute;
      display: block;
      border-radius: .25rem;
      background: #3f6ad8;
      transition: all .2s;
      height: 4px
  }
  
  .tabs-animated .nav-link.active,
  .tabs-animated .nav-link:hover {
      color: #3f6ad8
  }
  
  .tabs-animated .nav-link.active::before,
  .tabs-animated .nav-link:hover::before {
      transform: scale(1)
  }
  
  .tabs-animated-shadow .nav-link {
      padding: .5rem .75rem;
      margin-bottom: .75rem
  }
  
  .tabs-animated-shadow .nav-link span {
      position: relative;
      z-index: 5;
      display: inline-block;
      width: 100%
  }
  
  .tabs-animated-shadow .nav-link::before {
      height: 100%;
      top: 0;
      z-index: 4;
      bottom: auto;
      box-shadow: 0 16px 26px -10px rgba(63, 106, 216, .56), 0 4px 25px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(63, 106, 216, .2);
      border-radius: 100%;
      opacity: .5
  }
  
  .tabs-animated-shadow .nav-link.active,
  .tabs-animated-shadow .nav-link:hover {
      color: #fff
  }
  
  .tabs-animated-shadow .nav-link.active::before,
  .tabs-animated-shadow .nav-link:hover::before {
      border-radius: .25rem;
      opacity: 1
  }
  
  .tabs-animated-shadow .nav-item:last-child .nav-link {
      margin-right: 0
  }
  
  .tabs-animated-shadow.tabs-shadow-bordered {
      border-bottom: rgba(26, 54, 126, .125) solid 1px
  }
  
  .tabs-animated-shadow.tabs-shadow-bordered .nav-link {
      margin-bottom: 0
  }
  
  .body-tabs-shadow .body-tabs-animated {
      padding: .75rem 0
  }
  
  .body-tabs-shadow .body-tabs-animated .nav-link span {
      position: relative;
      z-index: 5
  }
  
  .body-tabs-shadow .body-tabs-animated .nav-link::before {
      height: 70%;
      top: 15%;
      z-index: 4;
      bottom: auto;
      box-shadow: 0 16px 26px -10px rgba(63, 106, 216, .56), 0 4px 25px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(63, 106, 216, .2);
      border-radius: 100%;
      opacity: .5
  }
  
  .body-tabs-shadow .body-tabs-animated .nav-link.active,
  .body-tabs-shadow .body-tabs-animated .nav-link:hover {
      color: #fff
  }
  
  .body-tabs-shadow .body-tabs-animated .nav-link.active::before,
  .body-tabs-shadow .body-tabs-animated .nav-link:hover::before {
      border-radius: .25rem;
      opacity: 1
  }
  
  .body-tabs-line .body-tabs-layout {
      margin: 0 -30px;
      padding: 0 30px;
      margin-bottom: 30px;
      border-bottom: #dee2e6 solid 1px
  }
  
  .accordion-wrapper {
      border-radius: .25rem;
      border: #e9ecef solid 1px
  }
  
  .accordion-wrapper>.card {
      box-shadow: 0 0 0 0 transparent
  }
  
  .accordion-wrapper>.card>.card-header {
      padding: 1rem;
      height: auto
  }
  
  .accordion-wrapper>.card>.card-header .btn:active,
  .accordion-wrapper>.card>.card-header .btn:focus,
  .accordion-wrapper>.card>.card-header .btn:hover {
      text-decoration: none
  }
  
  .accordion-wrapper>.card>.card-header .form-heading p {
      margin: 0
  }
  
  .accordion-wrapper>.card .collapse {
      border-bottom: transparent solid 1px
  }
  
  .accordion-wrapper>.card .collapse.show {
      border-bottom-color: #e9ecef
  }
  
  .modal-header,
  .modal-footer {
      /* background: #f8f9fa */
      border: none;
  }
  
  .modal-footer {
      border-bottom-right-radius: .25rem;
      border-bottom-left-radius: .25rem
  }
  
  .modal-dialog {
      box-shadow: 0 .76875rem 2.4875rem rgba(52, 58, 64, .3), 0 1.3375rem 1.70625rem rgba(52, 58, 64, .3), 0 .55rem .53125rem rgba(0, 0, 0, .05), 0 .225rem .4375rem rgba(52, 58, 64, .3);
      border-radius: .25rem
  }
  
  .nav-item .nav-link {
      font-weight: 400
  }
  
  .nav-link {
      display: flex;
      align-items: center;
      transition: background-color .3s ease, color .3s ease;
      cursor: pointer
  }
  
  .nav-link .nav-link-icon {
      color: #3f6ad8;
      font-size: 1rem;
      width: 30px;
      text-align: center;
      opacity: .45;
      margin-left: -10px
  }
  
  .nav-link:hover {
      color: #495057
  }
  
  .nav-link:hover .nav-link-icon {
      opacity: .9;
      color: #3f6ad8
  }
  
  .nav-link:disabled .nav-link-icon,
  .nav-link.disabled .nav-link-icon {
      opacity: .3
  }
  
  .nav-item.nav-item-header {
      text-transform: uppercase;
      font-size: .73333rem;
      color: #6c757d;
      font-weight: 700;
      padding: .5rem 1rem
  }
  
  .nav-item.nav-item-btn {
      padding: .5rem 1rem
  }
  
  .nav-item.nav-item-divider {
      margin: .5rem 0;
      height: 1px;
      overflow: hidden;
      background: #dee2e6
  }
  
  .nav .badge {
      margin-left: 8px
  }
  
  .nav-pills .nav-link.active,
  .nav-pills .nav-link.active:hover {
      color: #fff
  }
  
  .nav-pills .nav-link.active .nav-link-icon,
  .nav-pills .nav-link.active:hover .nav-link-icon {
      color: #fff;
      opacity: .8
  }
  
  .nav-pills .nav-link:hover {
      color: #495057 !important
  }
  
  .nav-justified .nav-link .nav-text {
      display: block;
      width: 100%;
      text-align: center
  }
  
  .list-group-flush+.card-footer {
      border-top: 0
  }
  
  .rm-list-borders .list-group-item {
      border: 0;
      padding: .5rem 0
  }
  
  .rm-list-borders-scroll .list-group-item {
      border: 0;
      padding-right: 1.125rem
  }
  
  legend {
      font-size: .88rem;
      font-weight: 700
  }
  
  .form-heading {
      font-size: 1.1rem;
      margin: 0;
      color: #3f6ad8
  }
  
  .form-heading p {
      color: #6c757d;
      padding: .3rem 0 0;
      font-size: .88rem
  }
  
  .custom-select {
      -webkit-appearance: none;
      -moz-appearance: none
  }
  
  .pagination li a {
      position: relative;
      display: block;
      padding: .5rem .75rem;
      margin-left: -1px;
      line-height: 1.25;
      color: #007bff;
      background-color: #fff;
      border: 1px solid #dee2e6
  }
  
  .pagination li a:hover {
      z-index: 2;
      color: #0056b3;
      text-decoration: none;
      background-color: #e9ecef;
      border-color: #dee2e6
  }
  
  .pagination li a:focus {
      z-index: 2;
      outline: 0;
      box-shadow: none
  }
  
  .pagination li a:not(:disabled):not(.disabled) {
      cursor: pointer
  }
  
  .pagination li:first-child a {
      margin-left: 0;
      border-top-left-radius: .25rem;
      border-bottom-left-radius: .25rem
  }
  
  .pagination li:last-child a {
      border-top-right-radius: .25rem;
      border-bottom-right-radius: .25rem
  }
  
  .pagination li.active a {
      z-index: 1;
      color: #fff;
      background-color: #3f6ad8;
      border-color: #007bff
  }
  
  .pagination li.active a:hover {
      color: #fff
  }
  
  .pagination li.disabled a {
      color: #6c757d;
      pointer-events: none;
      cursor: auto;
      background-color: #fff;
      border-color: #dee2e6
  }
  
  .widget-content {
      padding: 1rem;
      flex-direction: row;
      align-items: center
  }
  
  .widget-content .widget-content-wrapper {
      display: flex;
      flex: 1;
      position: relative;
      align-items: center
  }
  
  .widget-content .widget-content-left .widget-heading {
      font-size: 14px;
      font-weight: 600;
  }
  
  
  
  .widget-content .widget-content-right {
      margin-left: auto
  }
  
  .widget-content .widget-content-right img {
      border-radius: 10px;
  }
  
  .widget-content .widget-numbers {
      font-weight: 700;
      font-size: 1.8rem;
      display: block
  }
  
  .widget-content .widget-content-outer {
      display: flex;
      flex: 1;
      flex-direction: column
  }
  
  .widget-content .widget-progress-wrapper {
      margin-top: 1rem
  }
  
  .widget-content .widget-progress-wrapper .progress-sub-label {
      margin-top: .33333rem;
      opacity: .5;
      display: flex;
      align-content: center;
      align-items: center
  }
  
  .widget-content .widget-progress-wrapper .progress-sub-label .sub-label-right {
      margin-left: auto
  }
  
  .widget-content .widget-content-right.widget-content-actions {
      visibility: hidden;
      opacity: 0;
      transition: opacity .2s
  }
  
  .widget-content:hover .widget-content-right.widget-content-actions {
      visibility: visible;
      opacity: 1
  }
  
  .ps {
      overflow: hidden !important;
      overflow-anchor: none;
      touch-action: auto
  }
  
  .ps__rail-x {
      display: none !important;
      opacity: 0;
      transition: background-color .2s linear, opacity .2s linear;
      height: 15px;
      bottom: 0;
      position: absolute;
      z-index: 7
  }
  
  .ps__rail-y {
      display: none;
      opacity: 0;
      transition: background-color .2s linear, opacity .2s linear;
      width: 15px;
      right: 0;
      position: absolute;
      border-radius: 50px;
      z-index: 7
  }
  
  .ps--active-x>.ps__rail-x,
  .ps--active-y>.ps__rail-y {
      display: block;
      background-color: transparent
  }
  
  .ps:hover>.ps__rail-x,
  .ps:hover>.ps__rail-y,
  .ps--focus>.ps__rail-x,
  .ps--focus>.ps__rail-y,
  .ps--scrolling-x>.ps__rail-x,
  .ps--scrolling-y>.ps__rail-y {
      opacity: .6
  }
  
  .ps__rail-x:hover,
  .ps__rail-y:hover,
  .ps__rail-x:focus,
  .ps__rail-y:focus {
      background-color: rgba(0, 0, 0, .1);
      opacity: .9
  }
  
  .ps__thumb-x {
      background-color: rgba(0, 0, 0, .1);
      border-radius: 6px;
      transition: background-color .2s linear, height .2s ease-in-out;
      height: 6px;
      bottom: 2px;
      position: absolute
  }
  
  .ps__thumb-y {
      background-color: rgba(0, 0, 0, .1);
      border-radius: 6px;
      transition: background-color .2s linear, width .2s ease-in-out;
      width: 6px;
      right: 2px;
      position: absolute
  }
  
  .ps__rail-x:hover>.ps__thumb-x,
  .ps__rail-x:focus>.ps__thumb-x {
      background-color: rgba(0, 0, 0, .12);
      height: 11px
  }
  
  .ps__rail-y:hover>.ps__thumb-y,
  .ps__rail-y:focus>.ps__thumb-y {
      background-color: rgba(0, 0, 0, .12);
      width: 11px
  }
  
  @supports(-ms-overflow-style:none) {
      .ps {
          overflow: auto !important
      }
  }
  
  @media screen and (-ms-high-contrast:active),
  (-ms-high-contrast:none) {
      .ps {
          overflow: auto !important
      }
  }
  
  .scrollbar-sidebar,
  .scrollbar-container {
      position: relative;
      height: 100%
  }
  
  .scroll-area {
      overflow-x: hidden;
      height: 400px
  }
  
  .scroll-area-xs {
      height: 150px;
      overflow-x: hidden
  }
  
  .scroll-area-sm {
      height: 200px;
      overflow-x: hidden
  }
  
  .scroll-area-md {
      height: 320px;
      overflow-x: hidden
  }
  
  .scroll-area-lg {
      height: 400px;
      overflow-x: hidden
  }
  
  .scroll-area-x {
      overflow-x: auto;
      width: 100%;
      max-width: 100%
  }
  
  .hamburger {
      padding: 0;
      display: inline-block;
      cursor: pointer;
      transition-property: opacity, filter;
      transition-duration: .15s;
      transition-timing-function: linear;
      font: inherit;
      color: inherit;
      text-transform: none;
      background-color: transparent;
      border: 0;
      margin: 0;
      overflow: visible
  }
  
  .hamburger:hover {
      opacity: .7
  }
  
  .hamburger.is-active:hover {
      opacity: .7
  }
  
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
      background-color: #3f6ad8
  }
  
  .hamburger-box {
      width: 24px;
      height: 14px;
      display: inline-block;
      position: relative
  }
  
  .hamburger-inner {
      display: block;
      top: 50%;
      margin-top: -1px
  }
  
  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after {
      width: 24px;
      height: 2px;
      background-color: #3f6ad8;
      border-radius: 10px;
      position: absolute;
      transition-property: transform;
      transition-duration: .15s;
      transition-timing-function: ease
  }
  
  .hamburger-inner::before,
  .hamburger-inner::after {
      content: "";
      display: block
  }
  
  .hamburger-inner::before {
      top: -6px
  }
  
  .hamburger-inner::after {
      bottom: -6px
  }
  
  .hamburger--elastic .hamburger-inner {
      top: 1px;
      transition-duration: .275s;
      transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
  }
  
  .hamburger--elastic .hamburger-inner::before {
      top: 6px;
      transition: opacity .125s .275s ease
  }
  
  .hamburger--elastic .hamburger-inner::after {
      top: 12px;
      transition: transform .275s cubic-bezier(.68, -.55, .265, 1.55)
  }
  
  .hamburger--elastic.is-active .hamburger-inner {
      transform: translate3d(0, 6px, 0) rotate(135deg);
      transition-delay: .075s
  }
  
  .hamburger--elastic.is-active .hamburger-inner::before {
      transition-delay: 0s;
      opacity: 0
  }
  
  .hamburger--elastic.is-active .hamburger-inner::after {
      transform: translate3d(0, -12px, 0) rotate(-270deg);
      transition-delay: .075s
  }
  
  .toast-title {
      font-weight: 700
  }
  
  .toast-message {
      -ms-word-wrap: break-word;
      word-wrap: break-word
  }
  
  .toast-message a,
  .toast-message label {
      color: #fff
  }
  
  .toast-message a:hover {
      color: #ccc;
      text-decoration: none
  }
  
  .toast-close-button {
      position: relative;
      right: -.3em;
      top: -.3em;
      float: right;
      font-weight: 700;
      color: #fff;
      opacity: .8
  }
  
  .toast-close-button:hover,
  .toast-close-button:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      opacity: .4
  }
  
  button.toast-close-button {
      padding: 0;
      cursor: pointer;
      background: 0 0;
      border: 0;
      -webkit-appearance: none
  }
  
  .toast-top-center {
      top: 0;
      right: 0;
      width: 100%
  }
  
  .toast-bottom-center {
      bottom: 0;
      right: 0;
      width: 100%
  }
  
  .toast-top-full-width {
      top: 0;
      right: 0;
      width: 100%
  }
  
  .toast-bottom-full-width {
      bottom: 0;
      right: 0;
      width: 100%
  }
  
  .toast-top-left {
      top: 12px;
      left: 12px
  }
  
  .toast-top-right {
      top: 12px;
      right: 12px
  }
  
  .toast-bottom-right {
      right: 12px;
      bottom: 12px
  }
  
  .toast-bottom-left {
      bottom: 12px;
      left: 12px
  }
  
  #toast-container {
      position: fixed;
      z-index: 999999
  }
  
  #toast-container * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box
  }
  
  #toast-container>div {
      position: relative;
      overflow: hidden;
      margin: 0 0 .6rem;
      padding: .6rem .6rem .6rem 50px;
      width: 320px;
      border-radius: .25rem;
      background-position: 15px center;
      background-repeat: no-repeat;
      box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03);
      color: #fff;
      opacity: .9
  }
  
  #toast-container>div:hover {
      opacity: 1;
      cursor: pointer
  }
  
  #toast-container>.toast-info {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=) !important;
      box-shadow: 0 .66875rem 2.3875rem rgba(22, 170, 255, .03), 0 1.1375rem 1.60625rem rgba(22, 170, 255, .03), 0 .45rem .73125rem rgba(22, 170, 255, .05), 0 .325rem .3875rem rgba(22, 170, 255, .03)
  }
  
  #toast-container>.toast-error {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=) !important;
      box-shadow: 0 .66875rem 2.3875rem rgba(217, 37, 80, .03), 0 1.1375rem 1.60625rem rgba(217, 37, 80, .03), 0 .45rem .73125rem rgba(217, 37, 80, .05), 0 .325rem .3875rem rgba(217, 37, 80, .03)
  }
  
  #toast-container>.toast-success {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==) !important;
      box-shadow: 0 .66875rem 2.3875rem rgba(58, 196, 125, .03), 0 1.1375rem 1.60625rem rgba(58, 196, 125, .03), 0 .45rem .73125rem rgba(58, 196, 125, .05), 0 .325rem .3875rem rgba(58, 196, 125, .03)
  }
  
  #toast-container>.toast-warning {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=) !important;
      box-shadow: 0 .66875rem 2.3875rem rgba(247, 185, 36, .03), 0 1.1375rem 1.60625rem rgba(247, 185, 36, .03), 0 .45rem .73125rem rgba(247, 185, 36, .05), 0 .325rem .3875rem rgba(247, 185, 36, .03);
      color: #212529
  }
  
  #toast-container.toast-top-center>div,
  #toast-container.toast-bottom-center>div {
      width: 320px;
      margin-left: auto;
      margin-right: auto
  }
  
  #toast-container.toast-top-full-width>div,
  #toast-container.toast-bottom-full-width>div {
      width: 96%;
      margin-left: auto;
      margin-right: auto
  }
  
  .toast {
      background-color: #343a40
  }
  
  .toast-success {
      background-color: #3ac47d
  }
  
  .toast-error {
      background-color: #d92550
  }
  
  .toast-info {
      background-color: #16aaff
  }
  
  .toast-warning {
      background-color: #f7b924
  }
  
  .toast-progress {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 4px;
      background-color: #000;
      opacity: .4
  }
  
  @media all and (max-width:240px) {
      #toast-container>div {
          padding: 8px 8px 8px 50px;
          width: 11em
      }
  
      #toast-container .toast-close-button {
          right: -.2em;
          top: -.2em
      }
  }
  
  @media all and (min-width:241px) and (max-width:480px) {
      #toast-container>div {
          padding: 8px 8px 8px 50px;
          width: 18em
      }
  
      #toast-container .toast-close-button {
          right: -.2em;
          top: -.2em
      }
  }
  
  @media all and (min-width:481px) and (max-width:768px) {
      #toast-container>div {
          padding: 15px 15px 15px 50px;
          width: 25em
      }
  }
  
  .popover,
  .tooltip {
      opacity: 0;
      transition: opacity .2s ease
  }
  
  .popover.show,
  .tooltip.show {
      opacity: 1
  }
  
  .popover {
      box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03)
  }
  
  .rm-pointers .popover .arrow {
      display: none !important
  }
  
  
  
  @media only screen and (max-width:1320px) {
      .header-user-info {
          display: none
      }
  }
  
  @media(max-width:991.98px) {
      .app-main {
          display: block
      }
  
      .dropdown-menu::before,
      .dropdown-menu::after {
          display: none
      }
  
      .app-sidebar {
          flex: 0 0 320px !important;
          width: 320px !important;
          transform: translateX(-320px);
          position: fixed
      }
  
      .app-sidebar .app-header__logo {
          display: none
      }
  
      .sidebar-mobile-open .app-sidebar {
          transform: translateX(0)
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner .app-sidebar__heading {
          text-indent: initial
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner .app-sidebar__heading::before {
          display: none
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner ul li a {
          text-indent: initial;
          padding: 0 1.5rem 0 45px
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner .metismenu-icon {
          text-indent: initial;
          left: 5px;
          margin-left: 0
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner .metismenu-state-icon {
          visibility: visible
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner ul::before {
          display: block
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner ul ul li a {
          padding-left: 1em
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner ul.mm-show {
          padding: .5em 0 0 2rem
      }
  
      .sidebar-mobile-open .app-sidebar .app-sidebar__inner ul.mm-show>li>a {
          height: 2rem;
          line-height: 2rem
      }
  
      .sidebar-mobile-open .app-sidebar .app-header__logo {
          width: auto !important
      }
  
      .sidebar-mobile-open .app-sidebar .app-header__logo .logo-src {
          width: 97px !important;
          margin-left: auto;
          margin-right: 0
      }
  
      .sidebar-mobile-open .fixed-sidebar .app-sidebar {
          height: 100%
      }
  
      .sidebar-mobile-open .sidebar-mobile-overlay {
          display: block
      }
  
      .app-main .app-main__outer {
          padding-left: 0 !important
      }
  
      .app-header {
          justify-content: space-between
      }
  
      .app-header .app-header__logo {
          display: none;
          order: 2;
          background: 0 0 !important;
          border: 0 !important
      }
  
      .app-header .app-header__content {
          visibility: hidden;
          opacity: 0;
          box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03), 0 .9375rem 1.40625rem rgba(4, 9, 20, .03), 0 .25rem .53125rem rgba(4, 9, 20, .05), 0 .125rem .1875rem rgba(4, 9, 20, .03);
          position: absolute;
          left: 5%;
          width: 90%;
          top: 0;
          transition: all .2s;
          background: #fff;
          border-radius: 50px;
          padding: 0 10px;
          overflow: hidden
      }
  
      .app-header .app-header__content .header-btn-lg {
          margin-left: .5rem;
          padding: 0 .5rem
      }
  
      .app-header .app-header__content .app-header-left .nav {
          display: none
      }
  
      .app-header .app-header__content.header-mobile-open {
          visibility: visible;
          opacity: 1;
          top: 80px
      }
  
      .app-header .app-header__mobile-menu {
          display: flex;
          order: 1
      }
  
      .app-header .app-header__menu {
          display: flex;
          order: 3
      }
  
      .app-header.header-text-light .app-header__menu>span .btn,
      .app-header.header-text-light .app-header__menu>.btn {
          background: rgba(255, 255, 255, .1);
          border-color: rgba(255, 255, 255, .1)
      }
  
      .app-header.header-text-light .header-mobile-open {
          background: #343a40
      }
  
      .popover,
      .dropdown-menu {
          position: fixed !important;
          z-index: 50;
          left: 5% !important;
          top: 50% !important;
          width: 90% !important;
          transform: translateY(-50%) !important;
          min-width: 10px !important
      }
  
      .popover .btn-icon-vertical .btn-icon-wrapper,
      .dropdown-menu .btn-icon-vertical .btn-icon-wrapper {
          display: none
      }
  
      .popover {
          max-width: initial
      }
  
      .popover .arrow {
          display: none !important
      }
  
      .app-page-title {
          text-align: center
      }
  
      .app-page-title .page-title-heading,
      .app-page-title .page-title-wrapper {
          margin: 0 auto;
          display: block
      }
  
      .app-page-title .page-title-actions {
          margin: 15px auto 0
      }
  
      .app-page-title .page-title-actions .breadcrumb-item,
      .app-page-title .page-title-actions .breadcrumb,
      .app-page-title .page-title-subheading .breadcrumb-item,
      .app-page-title .page-title-subheading .breadcrumb {
          display: inline-block
      }
  
      .app-footer .app-footer__inner .app-footer-right {
          display: none
      }
  
      .app-footer .app-footer__inner .app-footer-left {
          width: 100%
      }
  
      .app-footer .app-footer__inner .app-footer-left .footer-dots {
          margin: 0 auto
      }
  
      .widget-content .widget-numbers {
          font-size: 1.6rem;
          line-height: 1
      }
  
      .slick-slider-sm .slick-slider {
          max-width: 650px !important
      }
  
      .bg-transparent.list-group-item {
          border-color: transparent
      }
  
      .tabs-lg-alternate.card-header>.nav .nav-item .widget-number {
          font-size: 1.5rem
      }
  
      .page-title-head {
          display: block
      }
  }
  
  @media(max-width:991.98px) {
  
      .app-page-title .page-title-icon,
      .ui-theme-settings {
          display: none
      }
  
      .card-header.responsive-center {
          display: block;
          text-align: center;
          height: auto;
          padding: 1.5rem
      }
  
      .card-header.responsive-center .nav,
      .card-header.responsive-center .btn-actions-pane-right {
          margin: .75rem 0 0
      }
  
      .card-header.responsive-center .nav .d-inline-block.ml-2,
      .card-header.responsive-center .btn-actions-pane-right .d-inline-block.ml-2 {
          width: 100% !important;
          text-align: left;
          margin: 0 !important
      }
  
      .slick-slider-sm .slick-slider {
          max-width: 650px !important
      }
  }
  
  @media(min-width:992px) {
      .slick-slider-sm .slick-slider {
          max-width: 850px !important
      }
  }
  
  @media(max-width:1199.98px) {
      .-hide-paging .-pagination .-center {
          display: none
      }
  }
  
  @media(max-width:767.98px) {
      .app-main .app-main__inner {
          padding: 15px 15px 0
      }
  
      .mbg-3,
      body .card.mb-3 {
          margin-bottom: 15px !important
      }
  
      .app-page-title {
          padding: 15px;
          margin: -15px -15px 15px
      }
  
      .app-page-title+.body-tabs-layout {
          margin-top: -15px !important
      }
  
      .body-tabs-line .body-tabs-layout {
          margin-bottom: 15px;
          margin-left: -15px;
          margin-right: -15px;
          padding: 0 15px
      }
  
      .body-tabs {
          padding: 0 15px;
          display: block
      }
  
      .body-tabs .nav-item .nav-link {
          margin: 0
      }
  
      .popover,
      .dropdown-menu {
          width: 80%;
          left: 10%
      }
  
      body .card-header {
          height: auto;
          display: block;
          padding: .75rem 1.5rem;
          text-align: center
      }
  
      body .card-header .btn-actions-pane-right {
          padding: .75rem 0 0
      }
  
      body .card-header .actions-icon-btn {
          padding: 0
      }
  
      .card-header.card-header-tab .card-header-title {
          display: inline-flex !important;
          line-height: 1
      }
  
      .card-header.card-header-tab>.nav {
          margin: .75rem 0 -.75rem;
          display: table !important;
          width: 100%
      }
  
      .card-header.card-header-tab>.nav .nav-item {
          display: table-cell
      }
  
      .header-icon {
          display: none
      }
  
      .profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right,
      .profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right {
          display: block;
          text-align: center
      }
  
      .profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper,
      .profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper {
          margin-right: 0 !important
      }
  
      .profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane,
      .profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane {
          margin-top: 1rem
      }
  
      .slick-slider-sm .slick-slider .slick-prev {
          left: 15px
      }
  
      .slick-slider-sm .slick-slider .slick-next {
          right: 15px
      }
  }
  
  @media only screen and (min-width:1200px) and (max-width:1500px) {
      .profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right {
          display: block;
          text-align: center
      }
  
      .profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper {
          margin-right: 0 !important
      }
  
      .profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane {
          margin-top: 1rem
      }
  }
  
  
  .nav-pills .nav-link {
      color: #fff;
      font-size: 16px;
      border: none;
      min-width: 174px;
      text-align: center;
      align-items: center;
      justify-content: center;
      padding: 13px 00px;
  }
  
  .nav-link:hover,
  .nav-link:focus {
      border: none;
      background: linear-gradient(to right, rgba(50, 48, 193, 1) 0%, rgba(10, 10, 24, 1) 99%);
      color: #fff !important;
      border-radius: 100px;
  }
  
  .nav-pills .nav-link.active,
  .nav-pills .show>.nav-link {
      border: none;
      background: linear-gradient(to right, rgba(50, 48, 193, 1) 0%, rgba(10, 10, 24, 1) 99%);
      color: #fff !important;
      border-radius: 100px;
  }
  
  .nav-pills .nav-link:hover {
      color: #fff !important;
  }
  
  .page_data_main_in {
      display: flex;
      margin-top: 30px;
  }
  
  .test_blog_main {
      margin-bottom: 30px;
      background-color: rgba(15, 15, 15, 0.30);
      padding: 30px;
      border: 1px solid rgba(255, 255, 255, 0.20);
      border-radius: 30px;
  }
  
  .test_blog_main h2 {
      font-size: 28px;
      font-weight: 600;
      color: #D9ECFF;
      line-height: 40px;
  }
  
  .test_blog_main p {
      font-size: 16px;
      line-height: 29px;
      color: #FFF;
      margin: 20px 0px 15px;
  }
  
  .test_blog_main .lbl {
      background-color: #3230C1;
      padding: 8px 12px;
      border-radius: 6px;
      color: #FFF;
      font-size: 14px;
      font-weight: 500;
      display: inline-block;
  }
  
  .test_blog_main .lbl_two {
      background-color: #FFFFFF;
      color: #000;
  }
  
  .test_blog_main .lbl_three {
      background: linear-gradient(90deg, rgba(77, 201, 215, 1) -30%, rgba(27, 68, 72, 1) 100%);
      color: #FFF;
  }
  
  .test_blog_main h3 {
      font-size: 32px;
      font-weight: bold;
      color: #FFF;
      margin: 30px 0px 20px;
  }
  
  .main_btn a {
      background: linear-gradient(to right, rgba(50, 48, 193, 1) 0%, rgba(10, 10, 24, 1) 99%);
      color: #fff !important;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 500;
      line-height: 46px;
      padding: 0px 40px;
      display: inline-block;
  }
  
  .main_btn a:hover {
      background: linear-gradient(to right, rgba(30, 29, 116, 1) 0%, rgba(50, 48, 193, 1) 100%);
      text-decoration: none;
  }
  
  .app-wrapper-footer {
      background-color: #000;
  }
  
  .app-footer__inner {
      font-size: 14px;
      font-weight: 500;
  }
  
  .btn-close {
      background: none;
      opacity: 1;
  }
  
  .modal-dialog {
      max-width: 632px;
  }
  
  .modal-header {
      padding: 0px 15px;
  }
  
  .modal-content {
      position: relative;
  }
  
  .btn-close {
      opacity: 1;
      position: absolute;
      right: 20px;
      top: 10px;
      z-index: 1;
  }
  
  .modal-body h2 {
      font-size: 24px;
      font-weight: 600;
      color: #FFF;
  }
  
  .modal-body h5 {
      font-size: 16px;
      color: #FFF;
      margin: 25px 0px 20px;
      font-weight: 500;
      text-transform: capitalize;
  }
  
  .modal-body h1 {
      font-size: 48px;
      font-weight: bold;
      color: #FFF;
  }
  
  .modal-body p {
      font-weight: 300;
      font-size: 15px;
  }
  
  .main_btn_popup {
      border: none;
      box-shadow: none;
      padding: 10px 15px;
      color: #FFF;
      font-size: 14px;
      font-weight: 500;
      background-color: #363636;
      border-radius: 40px;
      min-width: 120px;
      margin: 15px 0px 20px;
      border: 1px solid #363636;
  
  }
  
  .main_btn_popup:hover {
      color: #FFF;
      border: 1px solid #363636;
      background-color: transparent;
  }
  
  .btn-close:focus {
      box-shadow: none;
  }
  
  .main_btn_popup_two {
      background: linear-gradient(90deg, rgba(77, 201, 215, 1) -30%, rgba(27, 68, 72, 1) 100%);
  }
  
  .main_btn_popup_two:hover {
      color: #FFF;
      border: 1px solid #3b9aa5;
      background: transparent;
  }
  
  .dropdown-menu {
      background-color: #21263b;
  }
  
  .dropdown-item {
      color: #FFF;
  }
  
  .dropdown-item:hover,
  .dropdown-item:focus {
      color: #c3c3c3;
      text-decoration: none;
      background-color: transparent;
  }
  










/* signup_css_start */

.signup_img {
    padding: 30px 15px;
}
.signup_img img {
    border-radius: 20px;
    width: 100%;
}
.signup_form {
    width: 425px;
    text-align: center;
    display: inline-block;
}
.signup_title {
    text-align: center;
    width: 100%;
    display: inline-block;
}
.signup_title h2 {
    font-size: 20px;
    font-weight: bold;
}
.signup_title p {
    color: var(--gray600);
    margin-top: 5px;
}
.signup_title_mb_40 {
    margin-bottom: 40px;
}
.signup_form .form-group {
    text-align: left;
}
.input_icon {
    position: absolute;
    top: 44px;
    right: 15px;
}
.form_relative {
    position: relative;
}
.form_relative .form-control {
    padding-right: 40px;
}
.main_btn {
    border-radius: 100px;
    color: var(--white);
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
    touch-action: manipulation;
    transition: all .3s ease-in-out;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    background: var(--main);
    width: 100%;
    line-height: 48px;
    border: none;
}
.main_btn:hover {
    background-color: var(--main_hover);
    color: var(--white);

}
.or_info_form {
    margin-top: 30px;
}
.or_info_form_top {
    position: relative;
}
.or_info_form_top::after {
    width: 30%;
    height: 1px;
    background-color: #dcdcdc;
    position: absolute;
    top: 15px;
    left: 0px;
    content: "";
}
.or_info_form_top::before {
    width: 30%;
    height: 1px;
    background-color: #dcdcdc;
    position: absolute;
    top: 15px;
    right: 0px;
    content: "";
}
.register_media {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.register_media_btn {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.register_media_btn a {
    font-size: 16px;
    color: var(--body);
    border: 1px solid var(--body);
    border-radius: 100px;
    width: 100%;
    line-height: 38px;
    display: inline-block;
}
.register_media_btn svg {
    fill: red;
    margin-right: 5px;
}
.already_link {
    font-size: 16px;
    color: var(--gray600);
    margin-top: 30px;
}
.already_link a {
    color: var(--main);
    text-decoration: underline;
}
.already_link a:hover {
    color: var(--main_hover);
}

/* signup_css_end */

/* otp_verification_css_start */
.form_relative_no_lbl .input_icon {
    top: 12px;
}

.otp_verification_main .main_btn {
    margin-top: 20px;
}
.verification_icon {
    width: 72px;
    height: 72px;
    border: 1px solid #CED4DA;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px auto 25px auto;
}
/* otp_verification_css_end */

/* ----------------------------- login_css_start ---------------------------- */
.forgot_link{
    position: absolute;
    top: 0px;
    right: 0;
}
.forgot_link a {
    font-size: 16px;
    color: var(--main);
    text-decoration: underline;
}
.forgot_link a:hover {
    color: var(--main_hover);
}
.login_main .signup_title h2 {
    font-size: 35px;
    margin-bottom: 10px;
}

.back_login {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.back_login a{
    font-size: 14px;
    color: var(--gray600);
}
.back_login a svg{
    margin-right: 5px;
}
.back_login a:hover{
    color: var(--main);
}
.back_login a:hover .slick_next_arrow {
    fill:var(--main);
 }
/* ----------------------------- login_css_end ---------------------------- */

/* ----------------------------- account_details_css_start ---------------------------- */
.account_hed{
    background-color: #DEE2E6;
}
.account_hed_bg{
    background-color: var(--white);
    padding: 20px 20px;
}
.hed_user_blog{
    background-color: #E9ECEF;
    border-radius: 100px;
    padding: 8px;
    position: relative;
    width: 86%;
    float: right;
}
.hed_user_img img{
    border-radius: 100px;
}
.hed_user_name{
    position: absolute;
    top: 5px;
    left: 60px;
}
.hed_user_name h6{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0px;
}
.hed_user_name p{
    color: var(--gray600);
}

.progress_main{
    background-color: var(--white);
    margin-top: 30px;
    height: 100%;
    border-radius: 30px 30px 0px 0px;
    padding-top: 40px;
    position: relative;

}
.progress_close{
    position: absolute;
    right: 0px;
    top: 20px;
    right: 22px;
}


/* Form */

.form {
    background-color: white;
    /* width: clamp(320px, 50%, 958px); */
    margin: 0 auto;
    z-index: 1;
    /* height: 100vh; */
}

.input-group {
    margin: 0.5rem 0;
}

.form-step {
    display: none;
    width: clamp(320px, 50%, 958px);
    margin: 0px auto;
}

.form-step.active {
    display: block;
    transform-origin: top;
    animation: animate .5s;
}


/* Button */
.btn-group {
    display: flex;
    justify-content: space-between;
}

.btn {
    padding: 0.75rem;
    display: block;
    text-decoration: none;
    width: min-content;
    border-radius: 5px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-next {
    background-color: var(--main);
    color: white;
    float: right;
    border-radius: 100px;
}

.btn-prev {
    /* background-color: #777; */
    color: #fff;
}

.btn:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--main);
}

textarea {
    resize: vertical;
}

/* Prefixes */

.input-box {
    display: flex;
    align-items: center;
    /* max-width: 320px; */
    background: #fff;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
    padding-left: 0.5rem;
    overflow: hidden;
    font-family: sans-serif;
}

.input-box .prefix {
    font-weight: 300;
    font-size: 14px;
    color: rgb(117, 114, 114);
}

.input-box input {
    border: none;
    outline: none;
}

.input-box:focus-within {
    border-color: #777;
}



.progress-bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin-bottom: 30px;
    flex-direction: row;
    background-color: transparent;
    overflow: inherit;
    width: clamp(320px, 50%, 958px);
    margin: 0px auto;
}

.progress-bar::before,
.progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #E9ECEF;
    z-index: 0;
}

.progress {
    background-color: var(--main);
    width: 0;
    transition: .5s;
}

.progress-step {
    width: 35px;
    height: 35px;
    background-color: #E9ECEF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    color: #6C757D;
}

.progress-step::before {
    counter-increment: step;
    content: counter(step);
}

.progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 5px);
    font-size: 16px;
    color: var(--body);
}

.progress-step.active {
    background-color: var(--main);
    color: white;
}

@keyframes animate {
    from {
        transform: scale(1, 0);
        opacity: 0;
    }

    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}



.add-experience {
   opacity: 0;
}
.add-exp-btn{
    display: none
}


.form_wid{
    width:736px;
    margin: 80px  auto 0px;
    display: block;
}
.form_title h2{
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 30px;
}
.step_one_main{
    width: 360px;
    margin: 0px auto;
    display: block;
}
.upload_btn{
    width: 100%;
    border: 1px solid var(--main);
    color: var(--main);
    line-height: 42px;
    text-align: center;
    display: inline-block;
    border-radius: 100px;
}
.upload_btn:hover{
    color: var(--white);
    background-color: var(--main);
}

.upload_btn:hover svg path {
    fill:white;
  }

.form_wid .main_btn{
    margin-top: 20px;
}

.left_right_btn{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0px 50px;
    /* position: absolute;
    bottom:80px; */
    margin: 30px 0px;
}
.form_wid_step_two{
    width: 100%;
}
.step_two_main{width: 100%;}

.information_checkbox .info_lbl, .info_document_blog label{
    width: 100%;
}
.info_document_blog{
    margin-bottom: 30px;
}

.information_checkbox .form-group{
    width: auto;
    margin-right: 15px;
}
.upload_box a{
    border: 1px dashed #ADB5BD;
    background: #F8F9FA;
    text-align: center;
    padding: 47px 20px;
    display: inline-block;
    width: 100%;
}
.upload_box h4{
    color: #6C757D;
    font-size: 16px;
}
.upload_box_view{
    border: 1px solid #CED4DA;
    padding: 7px 8px;
    position: relative;
    min-height: 64px;
    margin-bottom: 7px;
}
.upload_box_img{
    position: absolute;
}
.upload_box_img img{
    border-radius: 2px;
}
.upload_box_data{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 58px;
    margin-top: 10px;
}
.upload_box_data h5{
    color: var(--main);
    font-size: 16px;
}
.upload_box_data a:hover svg .icon{
    fill: red;
}


.switch_main input {
    display: block;
    opacity: 0;
  }
  
.switch_main label {
    position: relative;
    width: 60px;
    height: 30px;
    display: inline-block;
    background: transparent;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    border: 1px solid #D9D9D9;
}
  
.switch_main label:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 24px;
    height: 24px;
    background: #BFBFBF;
    border-radius: 50%;
  }
  
.switch_main input:checked + label {
    background: var(--main);
  }
  
.switch_main input:checked + label:after {
    left: auto;
    right: 2px;
    background: #FFF;
  }

  .switch_inner{
    position: relative;
  }
  .switch_inner p{
    position: absolute;
    top: 15px;
    left: 75px;
    font-weight: bold;
    font-size: 16px;
    color: #6C757D;
  }
.business_times_blog{
    border: 1px solid #DEE2E6;
    background-color: #F8F9FA;
    border-radius: 10px;
    height: 400px;
    margin-bottom: 30px; 
}
.business_times_title{
    border-bottom: 1px solid #D9D9D9;
    padding: 14px 20px 10px;
    margin-bottom: 10px;
}
.business_times_info{
    padding: 0px 20px;
}

.business_times_box .input_icon{
    top: 10px;
}

.form_wid_step_two .main_btn{
    width: 360px;
    margin: 0px auto 30px;
}
.verify_lbl{
    padding: 11px 20px;
    background: #E9ECEF;
    position: absolute;
    top: 34px;
    right: 0px;
    border-radius: 0px 30px 30px 0px;
    border-left: 1px solid #ced4da;
}
.verify_main .input_icon{
    right: 95px;
}
.verify_main .form_relative .form-control{
    padding-right: 120px;
}

.step_terms{
    width: clamp(320px, 97%, 1920px);
}
.terms_blog h2{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}
.terms_blog p{
    color: #6C757D;
    margin-bottom: 10px;
}
.terms_blog{
    margin-bottom: 10px;
}

.step_terms  .btn-next{
    width: 285px;
    margin: 0px auto;
}
.accept_terms{
    margin-top: 20px;
}
.step_plans_main .form_title h2{
    margin-bottom: 15px;
    font-weight: bold;

}
.step_plans_main .form_title p{
  color:#6C757D ;
  margin-bottom: 40px;
}
.step_plans_main {
    width: clamp(320px, 60%, 1160px);
}
.plan_box{
    border: 1px solid #DEE2E6;
    border-radius: 20px;
    padding: 30px;
}
.plan_box_title{
    text-align: center;
}
.plan_box_title h2{
    font-weight: bold;
    font-size: 20px;
    display: inline-block;
}
.primary_lbl{
    font-size: 12px;
    font-weight: bold;
    color: var(--white);
    background-color: var(--main);
    display: inline-block;
    padding: 4px 8px;
    border-radius: 100px;
    margin-left: 8px;
}
.plan_box_title p{
    color: #6C757D;
    line-height: 22px;
    margin-top: 20px;
    margin-bottom: 30px;
}
.plan_box_item ul li{
    border-bottom:1px solid #DFDFDF;
    text-align: center;
    padding-bottom: 7px;
    margin-bottom: 7px;
    color: #212529;

}
.plan_box_item h3{
    font-size: 20px;
    font-weight: 500;
    color: var(--main);
    text-align: center;
    margin: 15px 0px;
}

.plan_box_active .plan_box_title p, .plan_box_active .plan_box_item h3, .plan_box_active .plan_box_item ul li{
    color: #212529;
}
.plan_box_active .plan_box_item ul li{
    border-bottom: 1px solid #BCBEBF;
}

.form_wid_step_two .plan_box_active .main_btn, .plan_box .upload_btn{
    width: 100%;
    margin-bottom: 0px;
}
.btn-complete{
    opacity: 0;
}

/* ----------------------------- account_details_css_end ---------------------------- */

/* ----------------------------- booking_css_start ---------------------------- */
.hamburger {
    display: none;
}
.header-menu .nav-item h2{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 0px;
}
.header-menu .nav-item p{
    color: var(--gray600);
    font-size: 16px;
}
.header_right_in ul{
    display: flex;
}
.header_right_in ul li{
    margin-left: 25px;
    display: inline-block;
}
.header_right_in ul li>a{
    border-radius: 100px;
    background-color: #F8F9FA;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header_right_in ul li>a:hover{
    background-color: var(--main);
}
.header_right_in ul li a:hover .icon_hover{
    fill: var(--white);
}

.right_hed_login .main_btn{
    padding: 20px 40px;
    line-height: normal;
}
.booking_dt_btn .main_btn{
    padding: 8px 60px;
    width: auto;
}
.booking_dt_btn .main_btn img{
    vertical-align: sub;
    margin-right: 6px;
}
.staff_main_btn{
    margin: 25px 0px 40px;
}
.staff_btn_inner>ul>li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 40px;
}
.staff_btn_inner ul li:last-child {
    margin-right: 0px;
}

.staff_btn_inner >ul li>a{
    background-color: #EAE7FA;
    border-radius: 100px;
    width: 163px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.staff_btn_inner>ul>li>a h3{
    font-weight: 500;
    font-size: 16px;
    color: var(--body);
}
.staff_btn_inner ul li>a img{
    border-radius: 100px;
}
.staff_btn_inner>ul>li>a.active{
    background-color: #ADB5BD;
}
.staff_btn_inner>ul>li>a.active h3{
    color: var(--white);
}

.staff_btn_inner>ul>li>a.add_staff_btn{
    padding: 14px 10px;
}
.staff_slot_time{
    position: relative;
    margin-top: -12px;
}
.staff_slot_time p{
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0px;
    background-color: #FFF;
    padding-right: 15px;
    position: relative;
    z-index: 1;
    line-height: normal;
    
}
.staff_slot_line{
    width: 100%;
    height: 2px;
    background-color: #9588E8;
    position: absolute;
    top: 13px;
}
.staff_slot_line_red{
    background-color: #DC3545;
}
.staff_slot_view{
    padding-left: 75px;
    display: flex;
    gap: 18px;


}
.staff_slot_view ul{
    width: 187px;
    position: relative;
}
.staff_slot_view>ul>li {
    width: 100%;
}
.staff_slot_view>ul>li> .staff_slot_box{
    width: 100%;
    height: 19px;
    border-radius: 100px;
    /* margin-bottom: 2px; */
    background-color: #ECE4FB;
    display: inline-block;
}
.staff_slot_view>ul>li> .staff_slot_box_color_1{
    background-color: #C7C1F1;
}
.staff_slot_view>ul>li> .staff_slot_box_color_2{
    background-color: #DEE2E6;
}

.staff_slot_view>ul>li> .staff_slot_box_color_3{
    background-color: #EBEEF0;
}
.spa_box{
    background-color: var(--white);
    border: 2px solid var(--main);
    border-radius: 15px;
    padding: 7px 9px;
    position: absolute;
    top: 0;
    z-index: 1;
    width: 220px;
}

.paid_sts{
    color: var(--black_one);
    font-size: 10px;
    font-weight: bold;
    background-color: #67E63A;
    padding: 4.2px 7.8px;
    display: inline;
    border-radius: 50px;
    position: absolute;
    right: 8px;
    top: 4px;
}
.spa_box_line_one{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 50px;
}
.spa_box_line_one h2, .spa_box_line_one h4{
    font-weight: bold;
    font-size: 14px;
    color: var(--main);
}
.spa_box_line_two{
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 5px 0px;
}
.spa_box_line_two p{
    font-weight: bold;
    font-size: 12px;
    color: var(--main);
    margin-bottom: 0;
}
.spa_box_line_two span{
    font-weight: bold;
    font-size: 10px;
    color: var(--main);
}
.spa_box_line_three{
    display: flex;
    gap: 10px;
    width: 100%;
}
.spa_box_line_three .time_dt{
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: #6C757D;
}

.spa_box_line_four {
    display: flex;
    width: 100%;
}
.spa_box_line_four a{
    width: 100%;
    display: inline-block;
    color: var(--white);
    background: var(--main);
    font-size: 12px;
    padding:6px 10px;
    border-radius: 100px;
    border: 1px solid #F2EEFF;
    text-align: center;
    margin-top: 8px;
}
.spa_box_line_four a svg{
    margin-left: 5px;
}
.spa_box_line_four a:hover{
    background-color: var(--main_hover);
}
.start_lbl .spa_box{
    background-color: var(--main);
}

.start_lbl .spa_box_line_two p ,.start_lbl .spa_box_line_two span{
    color: var(--white);
}
.spa_box_line_two_one{
    display: flex;
    align-items: center;
    gap: 5px;
}
.spa_box_line_two_start{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 8px 0px 0px;

}
.spa_box_line_two_two{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5px;
    
}
.spa_box_line_two_two   h4{
    color: var(--white);
    font-weight: bold;
    font-size: 14px;
}

.spa_box_line_two_two .paid_sts{
    position: relative;
    right: auto;
    top: 0;
}
.body_spa{
    background-color: #EAE7FA;
    border-radius: 100px;
    padding: 2px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.body_spa_title{
    display: flex;
    gap: 2px;
    align-items: center;
    padding-left: 5px;
}
.body_spa_title h2{
    font-weight: bold;
    font-size: 12px;
    color: var(--main);
}
.body_spa_title span{
    color: #6C757D;
    font-size: 9px;
}
.body_spa_drop a{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.body_spa_drop{
    display: flex;
    background-color: var(--white);
    border: 0.5px solid #CED4DA;
    width: 56px;
    padding: 5px;
    gap: 10px;
    border-radius: 100px;
}
.body_spa_drop p{
    margin-bottom: 0px;
    color: #6C757D;
    font-size: 10px;
    line-height: normal;
}

.body_spa_drop_end{
    margin-top: -110px;
    position: relative;
}

.body_spa_drop_end .body_spa_drop{
    background-color: #FF5862;
}
.body_spa_drop_end .body_spa_drop p{
    color: var(--white);
}
.body_spa_drop_end.body_spa_drop_start_green{
    margin-top: 0px;
    position: initial;
}
.body_spa_drop_start_green .body_spa_drop{
    background-color: #67E63A;
}
.body_spa_drop_start_green .body_spa_drop p{
    color: #212529;
}
.add_web_icon a{
    position: fixed;
    right: 30px;
    bottom: 20px;
    z-index: 9999;
}
.side_user_profile{
    background-color: #E9ECEF;
    border-radius: 100px;
    padding: 10px;
    position: absolute;
    bottom: 100px;
    width: 90%;
}
/* ----------------------------- booking_css_end ---------------------------- */