/*=========================================================================================
  File Name: app.scss
  Description: Write your custom scss
  ----------------------------------------------------------------------------------------
  Item Name: Vuesax Admin - VueJS Dashboard Admin Template
  Author: Pixinvent
  Author URL: hhttp://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*=========================================================================================
  File Name: main.scss
  Description: Main scss file. Imports other scss partials from 'vuesax' folder
  ----------------------------------------------------------------------------------------
  Item Name: Vuesax Admin - VueJS Dashboard Admin Template
  Author: Pixinvent
  Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*=========================================================================================
    File Name: _variables.scss
    Description: partial- SCSS varibales
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*========================================================
        SPACING
=========================================================*/

/*========================================================
        COLORS
=========================================================*/

/*========================================================
        TYPOGRAPHY
=========================================================*/

/*=========================================================================================
    File Name: _layout.scss
    Description: partial- main layout styles container - imports layout styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*=========================================================================================
    File Name: _layoutCommon.scss
    Description: Common layout styles. This style will apply to all layouts
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

html {
  font-size: 14px;
  height: 100%;
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.01rem;
}

body {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  background: #f8f8f8;
  font-weight: 400;
  overflow-x: hidden;
  max-width: 100%;
  height: 100%;
}

#app {
  min-height: 100%;
}

.layout--main {
  height: 100%;
  min-height: 100%;
}

textarea.vs-textarea {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.the-footer {
  position: relative;
  display: flex;
  align-items: center;
}

li.vs-navbar--item a {
  color: inherit;
}

.vs-content-sidebar.items-no-padding .vs-sidebar--items {
  padding: 0;
}

.app-page .router-view {
  padding-bottom: 0;
}

.app-page.navbar-floating .app-fixed-height {
  height: calc(100vh - 12.1rem);
}

.app-fixed-height {
  height: calc(100vh - 14.1rem);
}

.vs-sidebar .vs-sidebar--items {
  overflow: hidden;
  height: 100%;
}

.vs-alert code.language-markup {
  background: transparent !important;
  color: #636363 !important;
}

@media (max-width: 576px) {
  .router-view {
    padding: 1.2rem !important;
  }
}

/*=========================================================================================
    File Name: _layoutModern.scss
    Description: Default layout styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.vs-navbar.vx-navbar {
  padding: .8rem 1rem;
  width: calc(100% - 280px);
  position: fixed;
  border-radius: .5rem;
  transition: all .5s;
  z-index: 10000;
}

.vs-navbar.vx-navbar.navbar-full {
  width: calc(100% - 4.4rem);
  left: 2.2rem;
}

#content-area {
  position: relative;
  margin-left: 280px;
  height: 100%;
  transition: margin-left 0.5s;
}

#content-area .content-wrapper {
  min-height: calc(100vh - 3.5rem);
}

#content-area.content-area-reduced {
  margin-left: 80px;
}

#content-area.content-area-full {
  margin-left: 0px;
}

.router-view {
  position: relative;
  padding: 2.2rem;
}

.router-view .router-content {
  margin-top: 5.5rem;
}

.router-view .content-area__heading h2 {
  color: #636363;
}

/*=========================================================================================
    File Name: _theNavbar.scss
    Description: The navbar styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
      Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*=========================================================================================
    File Name: _variables.scss
    Description: partial- SCSS varibales
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*========================================================
        SPACING
=========================================================*/

/*========================================================
        COLORS
=========================================================*/

/*========================================================
        TYPOGRAPHY
=========================================================*/

.vx-navbar-wrapper {
  background: linear-gradient(to bottom, rgba(248, 248, 248, 0.95) 44%, rgba(248, 248, 248, 0.46) 73%, rgba(255, 255, 255, 0) 100%);
  padding: 0rem;
  padding-top: 0rem;
  background-repeat-x: repeat;
  z-index: 41000;
  width: calc(100% - 280px);
  height: 103px;
  background-repeat-y: no-repeat;
  position: fixed;
  top: 0;
}

.vx-navbar-wrapper .vx-navbar .vs-con-items {
  width: 100%;
}

.content-area-reduced .vx-navbar-wrapper {
  width: 100%;
}

.content-area-reduced .vs-navbar.vx-navbar {
  width: calc(100% - 80px);
}

.navbar-custom .vs-spacer {
  display: block !important;
}

.navbar-custom .vs-con-items {
  display: flex !important;
  width: 100%;
}

@media (max-width: 1200px) {
  .vx-navbar-wrapper {
    width: 100%;
    padding: 1.5rem 2.2rem;
  }
}

@media (max-width: 576px) {
  .vx-navbar-wrapper {
    padding: 1.2rem;
  }

  .vx-navbar-wrapper .vx-navbar.navbar-full {
    width: calc(100% - 2.4rem);
    left: 1.2rem;
  }
}

/*=========================================================================================
    File Name: _footer.scss
    Description: Footer styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.the-footer {
  padding: 1rem 2.2rem;
}

/*=========================================================================================
    File Name: _typography.scss
    Description: partial- typography styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/* cyrillic-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Light.ttf?881e150ab929e26d1f812c4342c15a7c) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Light.ttf?881e150ab929e26d1f812c4342c15a7c) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Light.ttf?881e150ab929e26d1f812c4342c15a7c) format("ttf");
  unicode-range: U+1F00-1FFF;
}

/* greek */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Light.ttf?881e150ab929e26d1f812c4342c15a7c) format("ttf");
  unicode-range: U+0370-03FF;
}

/* vietnamese */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Light.ttf?881e150ab929e26d1f812c4342c15a7c) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Light.ttf?881e150ab929e26d1f812c4342c15a7c) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Light.ttf?881e150ab929e26d1f812c4342c15a7c) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Regular.ttf?8a36205bd9b83e03af0591a004bc97f4) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Regular.ttf?8a36205bd9b83e03af0591a004bc97f4) format("ttf");
  unicode-range: U+1F00-1FFF;
}

/* greek */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Regular.ttf?8a36205bd9b83e03af0591a004bc97f4) format("ttf");
  unicode-range: U+0370-03FF;
}

/* vietnamese */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Regular.ttf?8a36205bd9b83e03af0591a004bc97f4) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Regular.ttf?8a36205bd9b83e03af0591a004bc97f4) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Regular.ttf?8a36205bd9b83e03af0591a004bc97f4) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Medium.ttf?68ea4734cf86bd544650aee05137d7bb) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+1F00-1FFF;
}

/* greek */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0370-03FF;
}

/* vietnamese */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+1F00-1FFF;
}

/* greek */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0370-03FF;
}

/* vietnamese */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url(/fonts/Roboto-Bold.ttf?b8e42971dec8d49207a8c8e2b919a6ac) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: local("Montserrat"), url(/fonts/Montserrat-Light.ttf?e65ae7ed560da1a63db603bd8584cfdb) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: local("Montserrat"), url(/fonts/Montserrat-Light.ttf?e65ae7ed560da1a63db603bd8584cfdb) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: local("Montserrat"), url(/fonts/Montserrat-Light.ttf?e65ae7ed560da1a63db603bd8584cfdb) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: local("Montserrat"), url(/fonts/Montserrat-Light.ttf?e65ae7ed560da1a63db603bd8584cfdb) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  src: local("Montserrat"), url(/fonts/Montserrat-Light.ttf?e65ae7ed560da1a63db603bd8584cfdb) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat"), url(/fonts/Montserrat-Regular.ttf?3fe868a1a9930b59d94d2c1d79461e3c) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat"), url(/fonts/Montserrat-Regular.ttf?3fe868a1a9930b59d94d2c1d79461e3c) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat"), url(/fonts/Montserrat-Regular.ttf?3fe868a1a9930b59d94d2c1d79461e3c) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat"), url(/fonts/Montserrat-Regular.ttf?3fe868a1a9930b59d94d2c1d79461e3c) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat"), url(/fonts/Montserrat-Regular.ttf?3fe868a1a9930b59d94d2c1d79461e3c) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: local("Montserrat"), url(/fonts/Montserrat-Medium.ttf?b3ba703c591edd4aad57f8f4561a287b) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: local("Montserrat"), url(/fonts/Montserrat-Medium.ttf?b3ba703c591edd4aad57f8f4561a287b) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: local("Montserrat"), url(/fonts/Montserrat-Medium.ttf?b3ba703c591edd4aad57f8f4561a287b) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: local("Montserrat"), url(/fonts/Montserrat-Medium.ttf?b3ba703c591edd4aad57f8f4561a287b) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: local("Montserrat"), url(/fonts/Montserrat-Medium.ttf?b3ba703c591edd4aad57f8f4561a287b) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: local("Montserrat"), url(/fonts/Montserrat-SemiBold.ttf?fb428a00b04d4e93deb4d7180814848b) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: local("Montserrat"), url(/fonts/Montserrat-SemiBold.ttf?fb428a00b04d4e93deb4d7180814848b) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: local("Montserrat"), url(/fonts/Montserrat-SemiBold.ttf?fb428a00b04d4e93deb4d7180814848b) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: local("Montserrat"), url(/fonts/Montserrat-SemiBold.ttf?fb428a00b04d4e93deb4d7180814848b) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: local("Montserrat"), url(/fonts/Montserrat-SemiBold.ttf?fb428a00b04d4e93deb4d7180814848b) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat"), url(/fonts/Montserrat-Bold.ttf?1f023b349af1d79a72740f4cc881a310) format("ttf");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat"), url(/fonts/Montserrat-Bold.ttf?1f023b349af1d79a72740f4cc881a310) format("ttf");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat"), url(/fonts/Montserrat-Bold.ttf?1f023b349af1d79a72740f4cc881a310) format("ttf");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat"), url(/fonts/Montserrat-Bold.ttf?1f023b349af1d79a72740f4cc881a310) format("ttf");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat"), url(/fonts/Montserrat-Bold.ttf?1f023b349af1d79a72740f4cc881a310) format("ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  color: #626262;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2c2c2c;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: #2c2c2c;
}

h1,
.h1 {
  font-size: 28px;
}

h2,
.h2 {
  font-size: 24.36px;
}

h3,
.h3 {
  font-size: 21.14px;
}

h4,
.h4 {
  font-size: 18.48px;
}

h5,
.h5 {
  font-size: 15.96px;
}

h6,
.h6 {
  font-size: 14px;
}

.vs-tooltip h4 {
  color: #fff;
}

a:active,
a:visited,
a:hover,
a {
  color: inherit;
}

u {
  text-decoration: underline;
}

/*=========================================================================================
    File Name: _misc.scss
    Description: partial- misc styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

code {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  background: #eee;
  padding: 0.1rem .3rem;
  border-radius: 3px;
}

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.bg-img {
  background-image: url(/images/vuesax-login-bg.jpg?04351a33eb1f49873e982c8b025d5718);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.full-page-bg-color {
  background-color: #eff2f7;
}

.count-down {
  text-align: center;
}

.single-counter {
  display: inline-block;
  position: relative;
  width: 105px;
  padding: 18px 10px 10px;
}

.single-counter span {
  display: block;
  text-align: center;
}

.single-counter .timer {
  font-size: 3rem;
}

.activity-timeline {
  margin-left: 1.5rem;
  padding-left: 40px;
  border-left: 2px solid #E5E8EB;
}

.activity-timeline li {
  position: relative;
  margin-bottom: 20px;
}

.activity-timeline li .timeline-icon {
  position: absolute;
  top: 0;
  left: -4.3rem;
  border-radius: 50%;
  padding: .75rem;
  padding-bottom: 0.4rem;
}

.activity-timeline li .activity-desc {
  font-size: .9rem;
}

.activity-timeline li .activity-e-time {
  font-size: .8rem;
}

.chat-card-log {
  height: 240px;
}

.vjs-poster {
  background-size: cover !important;
  width: 100% !important;
}

.spinner {
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*=========================================================================================
    File Name: _extraComponents.scss
    Description: partial - imports extra components styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*=========================================================================================
    File Name: _formWizard.scss
    Description: Styles for form wizard externsion.
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.vue-form-wizard.md .wizard-navigation .wizard-progress-with-circle {
  top: 33px;
}

.vue-form-wizard.md .wizard-navigation .wizard-nav .wizard-icon-circle {
  border: 3px solid #cccccc;
  width: 55px;
  height: 55px;
}

.vue-form-wizard.md .wizard-navigation .wizard-nav .wizard-icon-circle .wizard-icon {
  font-size: 1.5rem;
}

.vue-form-wizard.md .wizard-navigation .wizard-nav .stepTitle {
  color: #626262;
}

/*=========================================================================================
    File Name: _charts.scss
    Description: Styles for charts.
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.echarts {
  width: 100% !important;
}

/*=========================================================================================
    File Name: _quillEditor.scss
    Description: Styles for quill editor externsion.
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.quill-editor .ql-tooltip {
  z-index: 51000;
}

/*=========================================================================================
    File Name: _datePicker.scss
    Description: Styles for datepicker component.
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.vdp-datepicker input {
  padding: .7rem;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.tippy-tooltip.light-theme {
  color: #26323d;
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
  background-color: #fff;
}

.tippy-tooltip.light-theme[x-placement^="top"] .tippy-arrow {
  border-top: 8px solid #fff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tippy-tooltip.light-theme[x-placement^="bottom"] .tippy-arrow {
  border-bottom: 8px solid #fff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tippy-tooltip.light-theme[x-placement^="left"] .tippy-arrow {
  border-left: 8px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tippy-tooltip.light-theme[x-placement^="right"] .tippy-arrow {
  border-right: 8px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tippy-tooltip.light-theme .tippy-backdrop {
  background-color: #fff;
}

.tippy-tooltip.light-theme .tippy-roundarrow {
  fill: #fff;
}

.tippy-tooltip.light-theme[data-animatefill] {
  background-color: initial;
}

.multiselect {
  font-family: inherit !important;
  font-size: 13px !important;
  color: #777777 !important;
}

.multiselect:not(.multiselect--active) .multiselect__tags {
  padding-left: 0;
  border: 0;
}

.multiselect .multiselect__tags {
  background-color: transparent;
  border-radius: 6px;
}

.multiselect .multiselect__input {
  padding-left: 0;
  font-size: 13px !important;
  color: inherit;
  border-radius: 0;
}

.multiselect .multiselect__placeholder {
  font-size: 13px;
  color: inherit;
}

.multiselect .multiselect__tag-icon:hover,
.multiselect .multiselect__tag-icon:focus {
  background-color: transparent;
}

.trumbowyg-box ul,
.trumbowyg-editor ul {
  list-style-type: disc !important;
  margin-left: 1.5em !important;
  padding-left: 1.5em !important;
}

.trumbowyg-box ol,
.trumbowyg-editor ol {
  list-style-type: decimal !important;
  margin-left: 1.5em !important;
  padding-left: 1.5em !important;
}

/*=========================================================================================
    File Name: _themes.scss
    Description: partial- themes - imports theme styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*=========================================================================================
    File Name: _routerAnimations.scss
    Description: partial- router animations
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/* ZOOM FADE */

.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition: transform .35s, opacity .28s ease-in-out;
}

.zoom-fade-enter {
  transform: scale(0.97);
  opacity: 0;
}

.zoom-fade-leave-to {
  transform: scale(1.03);
  opacity: 0;
}

/* FADE TRNASITION */

.fade-enter-active,
.fade-leave-active {
  transition: opacity .28s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* PAGE SLIDE */

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity .35s, transform .4s;
}

.slide-fade-enter {
  opacity: 0;
  transform: translateX(-30%);
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(30%);
}

/* ZOOM OUT */

.zoom-out-enter-active,
.zoom-out-leave-active {
  transition: opacity .35s ease-in-out, transform .45s ease-out;
}

.zoom-out-enter,
.zoom-out-leave-to {
  opacity: 0;
  transform: scale(0);
}

/* UNFOLD SLIDE */

.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition: opacity .3s, transform .35s;
}

.fade-bottom-enter {
  opacity: 0;
  transform: translateY(-8%);
}

.fade-bottom-leave-to {
  opacity: 0;
  transform: translateY(8%);
}

/*=========================================================================================
    File Name: _transitions.scss
    Description: Transition styles
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.list-leave-active {
  position: absolute;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.list-enter-up-leave-active {
  transition: none !important;
}

.list-enter-up-enter {
  opacity: 0;
  transform: translateY(30px);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s linear;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/*=========================================================================================
    File Name: _customClasses.scss
    Description: partial- this file containes custom helper classes
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.vx-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.vx-row > .vx-col {
  padding: 0 1rem;
}

.vx-row.match-height > .vx-col {
  display: flex;
}

.vx-row.no-gutter {
  margin: 0;
}

.vx-row.no-gutter > .vx-col {
  padding: 0;
}

.text-primary {
  color: rgba(var(--vs-primary), 1) !important;
}

.text-success {
  color: rgba(var(--vs-success), 1) !important;
}

.text-danger {
  color: rgba(var(--vs-danger), 1) !important;
}

.text-warning {
  color: rgba(var(--vs-warning), 1) !important;
}

.text-dark {
  color: rgba(var(--vs-dark), 1) !important;
}

.bg-primary {
  background-color: rgba(var(--vs-primary), 1) !important;
}

.bg-success {
  background-color: rgba(var(--vs-success), 1) !important;
}

.bg-danger {
  background-color: rgba(var(--vs-danger), 1) !important;
}

.bg-warning {
  background-color: rgba(var(--vs-warning), 1) !important;
}

.bg-dark {
  background-color: rgba(var(--vs-dark), 1) !important;
}

.border-primary {
  border-color: rgba(var(--vs-primary), 1) !important;
}

.border-success {
  border-color: rgba(var(--vs-success), 1) !important;
}

.border-danger {
  border-color: rgba(var(--vs-danger), 1) !important;
}

.border-warning {
  border-color: rgba(var(--vs-warning), 1) !important;
}

.border-dark {
  border-color: rgba(var(--vs-dark), 1) !important;
}

.hover\:bg-primary:hover {
  background-color: rgba(var(--vs-primary), 1) !important;
}

.hover\:bg-success:hover {
  background-color: rgba(var(--vs-success), 1) !important;
}

.hover\:bg-danger:hover {
  background-color: rgba(var(--vs-danger), 1) !important;
}

.hover\:bg-warning:hover {
  background-color: rgba(var(--vs-warning), 1) !important;
}

.hover\:bg-dark:hover {
  background-color: rgba(var(--vs-dark), 1) !important;
}

.hover\:text-primary:hover {
  color: rgba(var(--vs-primary), 1) !important;
}

.hover\:text-success:hover {
  color: rgba(var(--vs-success), 1) !important;
}

.hover\:text-danger:hover {
  color: rgba(var(--vs-danger), 1) !important;
}

.hover\:text-warning:hover {
  color: rgba(var(--vs-warning), 1) !important;
}

.hover\:text-dark:hover {
  color: rgba(var(--vs-dark), 1) !important;
}

.bg-primary-gradient {
  background: linear-gradient(118deg, rgba(var(--vs-primary), 1), rgba(var(--vs-primary), 0.7)) !important;
}

.bg-success-gradient {
  background: linear-gradient(118deg, rgba(var(--vs-success), 1), rgba(var(--vs-success), 0.7)) !important;
}

.bg-danger-gradient {
  background: linear-gradient(118deg, rgba(var(--vs-danger), 1), rgba(var(--vs-danger), 0.7)) !important;
}

.bg-warning-gradient {
  background: linear-gradient(118deg, rgba(var(--vs-warning), 1), rgba(var(--vs-warning), 0.7)) !important;
}

.bg-dark-gradient {
  background: linear-gradient(118deg, rgba(var(--vs-dark), 1), rgba(var(--vs-dark), 0.7)) !important;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-big {
  font-size: 4rem;
}

.text-color-base {
  color: #626262;
}

.blur-1 {
  filter: blur(1px);
}

.blur-2 {
  filter: blur(2px);
}

.blur-3 {
  filter: blur(3px);
}

.sidebar-spacer {
  width: calc(100% - 280px);
  margin-left: 280px;
}

.background-absolute .vs-sidebar--background {
  position: absolute;
}

.sidebar-spacer-with-margin {
  width: calc(100% - 280px - 2.2rem);
  margin-left: calc(280px + 2.2rem);
}

.sidebar-spacer--wide {
  width: calc(100% - 400px);
  margin-left: 400px;
}

.full-vs-sidebar .vs-sidebar {
  max-width: calc(100% - 280px);
  margin-left: 280px;
}

@media only screen and (max-width: 992px) {
  .full-vs-sidebar .vs-sidebar {
    max-width: 100%;
    margin-left: 0;
  }
}

.vs-input-shadow-drop input {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
}

.vs-input-no-border .vs-input--input {
  border: none !important;
}

.vs-input-no-border .vs-input--input:focus {
  border: none !important;
}

.vs-input-no-shdow-focus .vs-input--input:focus {
  box-shadow: none !important;
}

.vs-select-no-border .vs-select--input {
  border: none !important;
}

ul.bordered-items > li:not(:last-of-type):not([class*='shadow']) {
  border-bottom: 1px solid #dae1e7;
}

/*=========================================================================================
  File Name: _fixesVuesax.scss
  Description: Partial - Fixes/Add vuesax styles
  ----------------------------------------------------------------------------------------
  Item Name: Vuesax Admin - VueJS Dashboard Admin Template
  Author: Pixinvent
  Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

.vs-alert {
  font-size: 1rem;
}

.vs-alert code {
  background: #b5b5b5;
  color: #fff;
}

.vs-tooltip {
  z-index: 54000;
}

.con-chips .con-chips--input {
  border: none;
}

.con-chips .con-vs-chip {
  margin: 0.75rem;
}

.con-chips .con-chips--remove-all {
  right: 9px;
}

.con-vs-chip {
  min-height: 26px;
  min-width: 26px;
  font-size: 0.8rem;
}

.vs-collapse-item.open-item .vs-collapse-item--header {
  color: rgba(var(--vs-light), 1);
  background-color: rgba(var(--vs-primary), 1);
}

.vs-collapse-item--header {
  font-size: 1.2rem;
  padding: 1rem;
}

.vs-collapse-item--content {
  cursor: auto;
}

.con-content--item {
  font-size: 1rem;
  padding: 1rem;
}

.vs-collapse.default .open-item .con-content--item,
.vs-collapse.shadow .open-item .con-content--item,
.vs-collapse.border .open-item .con-content--item,
.vs-collapse.margin .open-item .con-content--item {
  opacity: 1;
  padding: 1rem;
}

.vs-collapse.shadow .vs-collapse-item--icon-header {
  transform: translate(-50%, -50%);
}

.vs-collapse.shadow .open-item .vs-collapse-item--icon-header {
  transform: translate(-50%, -50%) rotate(180deg);
}

.con-vs-dialog {
  z-index: 52005;
}

.con-vs-dialog .vs-dialog header h3 {
  padding: 0.8rem;
}

.con-vs-dialog .vs-dialog header span.after {
  width: 0;
}

.con-vs-dialog .vs-dialog .vs-dialog-text {
  padding: 1rem;
  font-size: 1rem;
}

.con-vs-dialog .vs-dialog footer {
  padding: 1rem;
}

.vs-con-dropdown {
  font-size: 1rem;
}

.con-vs-dropdown--menu {
  z-index: 99999;
}

.vs-dropdown--menu {
  padding: 16px 12px !important;
}

.vs-list--item .list-titles .vs-list--subtitle {
  font-size: 0.85rem;
}

.vs-list--item:last-child {
  border-bottom: none;
}

.con-vs-popup {
  z-index: 53000;
}

.con-vs-popup .vs-popup {
  display: flex;
  flex-direction: column;
}

.con-vs-popup .vs-popup--content {
  flex: 1;
  padding: 1rem;
  font-size: 1rem;
}

.vs-tabs--li button {
  font-size: 1rem;
}

.con-select .vs-select--label {
  color: rgba(0, 0, 0, 0.7);
}

.con-select .vs-select--input {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.vs-select--options {
  font-size: 1rem;
}

.vs-select--options span {
  font-size: 1rem;
}

.vs-switch--text {
  font-size: 0.7rem;
}

.vs-con-input .vs-inputx {
  padding: 0.7rem;
  font-size: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.vs-con-input .vx-inputx:not(.input-rounded-full) {
  border-radius: 5px;
}

.vs-input--input.normal {
  padding: 0.7rem;
  font-size: 1rem;
}

.vs-input--input.hasIcon {
  padding: 0.7rem 1rem 0.7rem 3rem;
}

.vs-input--input.hasIcon.icon-after-input {
  padding: 0.7rem 3rem 0.7rem 1rem;
}

.vs-input--placeholder.normal {
  padding: 0.6rem;
  top: 1px;
}

.vs-input--input.large {
  padding: 1rem;
  font-size: 1.2rem;
}

.vs-input--input.large.hasIcon {
  padding: 1rem 0.8rem 1rem 2.5rem;
}

.vs-input--placeholder.large {
  padding: 1rem;
}

.vs-input--input.small {
  padding: 0.4rem;
  font-size: 0.8rem;
}

.vs-input--placeholder.small {
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
}

.vs-input--input.large ~ .vs-input--icon {
  top: 1rem;
  left: 0.8rem;
}

.vs-input--icon {
  top: 13px;
}

.vs-input--icon.feather {
  top: 10px;
}

.input-icon-validate-danger .input-icon-validate {
  display: none;
}

.no-icon-border .vs-input--icon {
  border: none;
}

.vs-textarea {
  font-size: 1rem;
}

.vs-con-textarea {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.vs-checkbox-small .vs-checkbox--input:checked + .vs-checkbox .vs-icon {
  transform: translateY(-3px);
}

.vs-col {
  padding: 0 15px;
}

.con-img-upload {
  overflow: hidden;
  padding: 0.6rem;
}

.con-img-upload .img-upload {
  margin: 15px;
}

.view-upload {
  z-index: 52000;
}

.select-large input.vs-select--input {
  padding: 11px;
}

i.wizard-icon {
  font-style: inherit;
}

.stepTitle {
  margin-top: 0.5rem;
}

i.feather {
  font-weight: 100;
}

.vs-con-table {
  background: transparent;
}

.vs-con-table .vs-table--header > * {
  width: 100%;
}

.vs-con-table .vs-table--header .vs-table--search {
  padding: 1rem 0;
}

.vs-con-table .vs-table--header .vs-table--search .vs-table--search-input {
  padding: 10px 28px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
}

.vs-con-table .vs-table--header .vs-table--search .vs-table--search-input:focus + i {
  left: 10px;
}

.vs-con-table .vs-table--header .vs-table--search i {
  left: 10px;
}

.vs-con-table .vs-con-tbody {
  background: #f8f8f8;
  border: 2px solid #f8f8f8;
  width: 100%;
  overflow: auto;
}

.vs-con-table .vs-con-tbody .vs-table--tbody-table {
  font-size: 1rem;
}

.vs-con-table .vs-con-tbody .vs-table--tbody-table .tr-spacer {
  height: 2px;
}

.vs-con-table .vs-con-tbody .vs-table--tbody-table .tr-table .tr-expand td {
  padding: 0;
}

.vs-con-table .vs-con-tbody .vs-table--tbody-table .tr-table td {
  padding: 1rem;
}

.vs-con-table .vs-con-tbody .vs-table--tbody-table .vs-table--thead th {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.vs-con-table .vs-con-tbody .vs-table--tbody-table .vs-table--thead .con-td-check {
  background: #f8f8f8;
  box-shadow: none;
}

.vs-con-table .vs-table--pagination {
  margin-top: 1rem;
}

.con-vs-checkbox,
.con-vs-radio {
  justify-content: flex-start !important;
}

.con-vs-radio {
  display: inline-flex;
}

.con-vs-checkbox.checkbox-invalid .vs-checkbox {
  border-color: rgba(var(--vs-danger), 1) !important;
}

.con-vs-checkbox .vs-checkbox--input:checked + .vs-checkbox .vs-icon {
  font-size: 18px;
}

.input-rounded-full input {
  border-radius: 20px;
}

.v-select .dropdown-toggle .vs__actions .clear {
  padding-top: 4px;
}

.vs-button {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

.vs-button:not(.vs-radius):not(.includeIconOnly):not(.small):not(.large).vs-button-border {
  padding: 0.679rem 2rem;
}

.vs-button.small:not(.includeIconOnly) {
  padding: 0.5rem 1.5rem;
}

.vs-button.large:not(.includeIconOnly) {
  padding: 1rem 2.5rem;
}

.vs-button.large {
  font-size: 1.25rem;
}

.vs-button.large .vs-button--icon {
  font-size: 1.25rem;
}

.vs-button.round {
  border-radius: 1.5rem;
}

.vs-button.includeIcon {
  float: none;
}

.vs-popup--title h3,
.vs-notifications h3 {
  margin-bottom: 0;
}

.vs-notifications {
  z-index: 200000 !important;
}

.vs-notifications h3 {
  color: #fff;
  font-weight: 600;
  font-size: 15.96px;
}

h3.vs-navbar--title {
  margin-bottom: 0;
}

.vs-con-dropdown {
  color: inherit;
}

.dropdown-button-container .vs-button {
  padding: 0.72rem 1.5rem !important;
}

.dropdown-button-container .vs-button-line {
  padding: 9px 10px !important;
}

.con-vs-loading {
  flex-direction: column-reverse;
}

.vs-alert--title {
  color: inherit;
}

.vs-input.input-rounded-full .vs-input--input.hasIcon {
  padding: 0.8rem 1rem 0.8rem 3rem;
}

.vs-input.input-rounded-full .input-span-placeholder {
  padding-left: 3rem;
  padding-top: 0.7rem;
}

.vs-input.input-rounded-full .vs-icon {
  margin-top: 0.1rem;
  margin-left: 0.6rem;
  font-size: 1rem;
}

.vs-tabs-position-left .vs-tabs--li {
  padding: 0.35rem 0.3rem;
}

.vs-pagination--li.is-current .effect {
  border-radius: 5rem;
}

.vs-pagination--li.is-current {
  border-radius: 5rem;
}

.vs-pagination--ul {
  padding: 0;
}

.vs-select--options {
  border: 1px solid #eee;
  z-index: 530001;
}

.vs-input--icon.feather {
  padding: 0.2rem 0.5rem 0rem 0.4rem;
}

.vs-input--input.hasIcon + .vs-input--placeholder {
  padding-left: 3rem;
}

.vs-input--input.large.hasIcon {
  padding: 1rem 0.8rem 1rem 3rem;
}

.con-vs-alert {
  box-shadow: none !important;
}

.con-vs-alert .vs-alert--close .vs-icon {
  font-size: 16px;
}

.vs-alert {
  font-weight: 500;
}

.vs-checkbox-small .vs-checkbox--input:checked + .vs-checkbox .vs-icon {
  margin-top: 4px;
  margin-left: -1px;
}

.vs-checkbox-small input:checked + .vs-checkbox {
  background-color: rgba(var(--vs-primary), 1) !important;
}

.vs-dialog footer .vs-button:last-of-type {
  margin-left: 0.5rem !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.vs-avatar--text.feather {
  font-size: 1.3rem;
}

/*=========================================================================================
    File Name: _tailwindFixes.scss
    Description: partial- Tailwind Fixes
    ----------------------------------------------------------------------------------------
    Item Name: Vuesax Admin - VueJS Dashboard Admin Template
    Author: Pixinvent
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

button:focus {
  outline: none;
}

/* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) *//* (ignored) */