.campian_btn {
	margin-top: 10px
}
table#tblOp {
	border: 0
}
table.data-list-view.dataTable thead th:first-child, table.data-thumb-view.dataTable thead th:first-child {
	padding-left: 30px!important
}
.header-navbar .navbar-container ul.nav li a.dropdown-user-link {
	padding: 1.5rem 0.5rem !important;
	display: flex;
	align-items: center
}
.color-green {
	color: green!important;
}
#DataTables_Table_0_filter {
	float: right;
}
.modal-footer button span {
	color: #fff!important;
	font-weight: 700;
	cursor: pointer
}
.margin0 {
	margin: 0!important
}
.social-footer {
	float: right;
}
section#validation {
	margin-bottom: 100px
}
.action {
	width: 160px!important
}
.item-rating {
	float: left
}
h6.item-price {
	float: right
}
.clearfix {
	clear: both
}
.text_white {
	color: #fff
}
.top-header-icon {
	color: #022f40!important;
	font-size: 18px
}
.table-height {
	max-height: 460px;
	overflow-y: scroll
}
.loader-gif {
	width: 100%
}
.action-btn {
	background: #7367f0;
	color: #fff;
	line-height: 35px;
	border: 0;
	padding: 0 8px 0 8px
}
.font16 {
	font-size: 16px!important
}
.zoom:hover {
	transform: scale(1.5)
}
.step4-box {
	text-align: center;
	font-weight: 500;
	background-color: #f7f7f7;
	padding: 1.5rem;
	cursor: pointer
}
.delete-btn {
padding:.9rem 1.2rem!important
}
.bg-grey {
	background: #f8f8f8;
	margin-bottom: 20px;
	padding-top: 1.25rem!important
}
.step4-img {
	width: 400px;
	height: 600px
}
.ques_icon {
	display: inline-block;
	position: absolute;
	top: 00px
}
.camp_icon {
	display: inline-block;
	top: 0
}
.f20 {
	font-size: 20px
}
.minus_5 {
	margin-top: -5px
}
.minus_15 {
	margin-top: -15px
}
#forgotPwd span, .password, button span, h2 span {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.forgot button span, .forgot h2 span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%)
}
.forgot .password {
	margin-top: -43px
}
.forgot .password {
	opacity: 0;
	z-index: -1
}
.forgot .username {
	border-radius: 3px
}
#forgotPwd, #forgotPwd span, h2 span {
	display: block;
	overflow: hidden
}
#forgotPwd span {
	font-size: 16px;
	color: #053040;
	padding-bottom: 5px;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%)
}
.forgot #forgotPwd span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%)
}
.new_button {
	display: block;
	/*height: 40px;*/
    line-height: 1.45;
	overflow: hidden
}
.new_button span {
	display: block;
	height: 30px
}
.h-213 {
	height: 213px!important
}
.chk-circle {
	border-radius: 15px!important
}
.modal_new {
	display: none
}
.modal_new.active .modal-content1 {
	-webkit-transform: rotateX(0)!important;
	transform: rotateX(0)!important
}
.modal_new .modal-wrapper {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-perspective: 2000px;
	perspective: 2000px
}
.modal_new .modal-wrapper .modal-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: all .4s;
	z-index: 5
}
.modal_new .modal-wrapper .modal-content1 {
	position: relative;
	z-index: 10;
	width: 500px;
	max-width: 90%;
	background-color: #7367f0;
	color: #fff;
	border-radius: 4px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(-70deg);
	transform: rotateX(-70deg);
	transition: -webkit-transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s
}
.modal_new .modal-wrapper .modal-content1 .modal-header {
	background-color: rgba(0,0,0,.2);
	padding: 20px 30px;
	border-radius: 4px 4px 0 0;
	position: relative;
	cursor: all-scroll
}
.modal_new .modal-wrapper .modal-content1 .modal-header .modal-title {
	font-size: 30px
}
.modal .modal-wrapper .modal-content1 .modal-header .modal-close {
	position: absolute;
	top: 50%;
	right: 20px;
	padding: 10px;
	font-size: 40px;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-transform: translateY(-50%) translateY(-5px);
	transform: translateY(-50%) translateY(-5px);
	transition: all .4s
}
.modal_new .modal-wrapper .modal-content1 .modal-header .modal-close:hover {
	color: #5fc6da
}
.modal_new .modal-wrapper .modal-content1 .modal-body {
	padding: 20px 30px;
	font-size: 17px;
	line-height: 25px
}
.modal_new .modal-wrapper .modal-content1 .modal-action {
	padding: 10px 30px 20px
}
.modal_new .modal-wrapper .modal-content1 .modal-action .close {
	background-color: #d0098d;
	color: #fff;
	display: block;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	font-size: 18px;
	font-weight: 700;
	border-radius: 2px;
	transition: all .4s
}
.modal_new .modal-wrapper .modal-content1 .modal-action .close:hover {
	background-color: #af0576
}
a.show {
	background-color: #7367f0;
	padding: 10px 15px;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	transition: all .4s
}
.paypal-label {
	font-size: 20px
}
.sticky_footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0
}
.font-20 {
	font-size: 20px!important
}
.font-36 {
	font-size: 36px!important
}
.thankyou_table {
	color: #fff;
	background-color: #042d3f !important;
padding: .75rem;
	border-color: #fff;
	text-align: center;
}
tr.th-bg th {
	background-color: #042d3f !important;
	font-size: 14px
}
.thankyou_block {
	margin-top: 175px!important;
	width: 100%;
	margin: auto
}
.pd-0 {
	padding: 0!important
}
.margin-center {
	margin: auto;
	margin-top: 0
}
.add-row {
	margin-top: -55px
}
.mt22 {
	margin-top: 22px
}
.remove_scroll {
	margin-left: 0;
	margin-right: 0
}
.mt30 {
	margin-top: 30px
}
.new_box {
	display: block;
	margin-top: 175px!important;
	margin-bottom: 400px!important;
	height: 400px;
	width: 600px;
	background: #fff;
	border: 1px solid grey;
	border-radius: 10px;
	margin: auto;
	box-shadow: 0 2px 25px #000
}
.paypal_checkbox {
	zoom: 1.5
}
.col-xs-5.highlight {
	border: solid 1px #00f
}
.text {
	font-size: 15px!important
}
.remove_action_btn .action-btns {
	visibility: hidden!important
}
.table_header table thead tr th {
	text-transform: uppercase
}
.pt0 {
	padding-top: 0!important
}
.paid_btn {
	padding: 5px 10px
}
.step4-bg {
	background: #fff;
	margin-bottom: 2.2rem;
	border: none;
    border-radius:0 0 .5rem .5rem;
	box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
	transition: all .3s ease-in-out;
	width: 50%;
	margin: auto;
	padding: 0!important;
	margin-top: 50px
}
.upload-logo-box {
	background: #fff;
	margin-bottom: 2.2rem;
	border: none;
    border-radius:0 0 .5rem .5rem;
	box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
	transition: all .3s ease-in-out;
	margin: auto;
	padding-top: 25px;
	padding-bottom: 25px;
	min-height: 520px
}
.red_border {
	border: 2px solid #f66;
	padding: 15px
}
.upload-logo-box h1 {
	font-size: 35px;
	font-weight: 600
}
.upload-logo-box h3 {
	color: #7367f0
}
div#dpz_remove_thumb {
	border: 2px dashed #7367f0
}
.step4-bg-dynamic {
	background: #fff;
	margin-bottom: 2.2rem;
	border: none;
    border-radius:.5rem;
	box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
	transition: all .3s ease-in-out
}
.step4-bg-dynamic:last-child {
	margin-bottom: 0
}
#btnAddQuestion {
	padding: 13px 40px!important
}
.br {
	border-right: 2px solid #f3eeee
}
ul#ui-id-1 {
	top: 42%;
	height: 200px;
	overflow-y: scroll;
	left: 3.5%
}
.count {
	position: relative;
	display: flex;
	height: 265px;
	flex-direction: column;
	min-width: 0;
	margin-top: 30px;
	word-wrap: break-word;
	background-color: #fff;
border-radius:.5rem;
	margin-bottom: 2.2rem;
	border: none;
	padding-top: 20px;
border-radius:.5rem;
	box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
	transition: all .3s ease-in-out
}
.remove-btn {
	margin-bottom: 15px!important
}
.chk_box {
	display: block!important;
	text-align: center
}

.modal .modal-header {
	padding: 20px 20px!important
}
.modal .cust-modal-header-m {
    background: #fff !important;
    padding: 0px 20px !important;
}
.horizontal-menu footer {
	background-color: #fff!important
}
.pt25 {
	padding-top: 25px
}
.mb20 {
	margin-bottom: 20px!important
}
.new-dropzone {
	border: none
}
.upload-box {
	background: #e5e5e5;
	margin-bottom: 2.2rem;
	border: none;
	padding: 80px;
	font-size: 25px;
	transition: all .3s ease-in-out;
	font-weight: 500;
	text-transform: uppercase
}
div#animate3 {
	margin-top: -100px
}
.ptb15 {
	padding-top: 15px;
	padding-bottom: 15px;
	border: 1px solid #000
}
.remove_right_br {
	border-right: none
}
.current_box {
	background: #fff;
	margin-bottom: 2.2rem;
	border: none;
border-radius:.5rem;
	box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
	padding: 24px;
	transition: all .3s ease-in-out
}
.h-190 {
	height: 190px
}
.upload_para {
	font-size: 16px
}
.dropzone {
	min-height: 180px!important
}
button.close {
	margin-top: 5px
}
.dropzone .dz-message {
	top: 25%!important;
	height: 150px!important;
	opacity: 1!important
}
.eye-icon {
	float: right;
	margin-right: 20px;
	margin-top: -29px;
	position: relative;
	z-index: 2
}
.main-menu .navbar-header .navbar-brand .brand-logo {
	background: url(../../../../../app-assets/images/logo/logo.png) no-repeat;
	height: 50px;
	width: 70px
}
@media(max-width:1200px){
    .main-menu .navbar-header .navbar-brand .brand-logo {
        background: url(../../../../../app-assets/images/logo/logo_symbol.png) no-repeat !important;
    }
}
.pd15 {
	padding-top: 15px
}
.left-align {
	text-align: left;
	display: block
}
.mt60 {
	margin-top: 35px
}
.ques_icon_1 {
	top: 12px;
	display: inline-block;
	position: absolute
}
.text1 {
	font-size: 15px!important;
	padding: 5px 0
}
.pb20 {
	padding-bottom: 20px
}
.f30 {
	font-size: 30px
}
.new_border {
	border: 2px solid #ddd;
	border-radius: 25px;
	padding: 10px;
	margin-top: 0;
	margin-bottom: 0
}
.text-box-radius {
	border-radius: 25px!important;
	border: none;
	padding: 15px!important;
	height: 45px!important;
	margin-top: -5px
}
.text-box-radius::placeholder {
font-size:15px;
color:#bcbcbc
}
.add-que {
}
.add_ques_icon {
	top: -35px!important
}
.good_luck_icon {
	top: 12px!important
}
.good_luck_icon i {
	color: #f66
}
.right62 {
	right: 62px
}
.mandatory-tool-tip {
	right: 17px;
	top: 17px
}
.social-footer ul {
	margin: 0;
	padding: 0;
}
.social-footer ul li {
	display: contents;
	padding: 7px
}
.social-footer ul li i:hover {
	color: #f66
}
.fa {
	font-family: "Font Awesome 5 Pro";
	font: normal normal normal 20px/1 FontAwesome!important
}
.fa-linkedin:before {
	content: "\f08c"!important
}
.pl10 {
	padding-left: 10px
}
.email_camp_btn {
	text-decoration: none;
	font-size: 20px;
	color: #fff!important;
	border-style: solid;
	border-color: #e54b4b;
	border-width: 15px 0;
	display: block;
	background: #e54b4b
}
.email_btn_span {
	border-style: solid;
	border-color: #e54b4b;
	background: #e54b4b;
	border-width: 1px;
	display: inline-block;
	border-radius: 15px;
	padding: 0 20px
}
.company-name {
	text-align: center;
	background-color: #f66;
	padding: 15px;
	margin: 0;
border-radius:.5rem .5rem 0 0;
	color: #fff;
	font-weight: 600;
	font-size: 30px
}
.good-luck {
	padding: 20px 0;
	color: #f66;
	font-weight: 700
}
.text_label {
	color: #bcbcbc;
	font-size: 15px
}
.email-box {
	border: 2px solid #ddd;
	border-right: none;
	border-radius: 25px 0 0 25px;
	margin: 16px 0
}
.mendatory-box {
	border: 2px solid #ddd;
	margin: 16px 0;
	border-radius: 0 25px 24px 0
}
.form-builder {
	background: #fff;
	margin-bottom: 2.2rem;
	border: none;
border-radius:0 0 .5rem .5rem;
	box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
	transition: all .3s ease-in-out;
	margin: auto;
	padding-top: 25px;
	padding-bottom: 25px
}
.mtb {
	margin-top: 10px;
	margin-bottom: 10px
}
.logo_label {
	width: 100%;
	padding: 5px 0
}
.logo_img {
	margin: auto;
	border: 2px dashed #e54b4b;
}

#profile-info .btn {
    padding: .9rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 500;
}

@media (min-width:992px) and (max-width:1199px) {
    #profile-info .btn {
        font-size: 0.9rem;
    }
}

@media (max-width:991px) {
    #profile-info .btn {
        font-size: 0.7rem;
    }
}


    @media(min-width:1500px) {
        .step4-bg {
            width: 33%;
            padding: 0 !important;
            margin-top: 50px;
        }
    }

    @media(max-width:1600px) {
        .logo_img {
            width: inherit
        }
    }

    @media(min-width:1600px) {
        .current-compaign {
            margin: 30px 0 30px 0 !important
        }

        .add-que {
            margin-top: -35px;
            margin-left: -90% !important
        }
    }

    @media(max-width:480px) {
        button#btnTestCam {
        }

        .d_block_mobile {
            display: block !important
        }
        
    }

    @media(max-width:767px) {
        div#dvAddNewQues1 {
            margin-right: 0;
        }
        .mobile-view-sample {
            margin-top: 15px;
        }
        .side_menu-odd {
            display: flex;
            padding: 0;
        }
        .step-img {
            width: 100% !important;
        }

        .side_menu-odd .tbs_btn {
            padding: 10px 5px;
            margin-right: 5px;
            font-size: 10px;
            border: 1px solid #e54b4b;
        }
        .activecls {
            border-color: #e54b4b;
            background-color: #e54b4b;
            color: #fff !important;
        }
        .activecls:hover {
            border-color: #e54b4b;
            background-color: #e54b4b;
            color: #fff !important;
        }
        a.window_close {
            width: 100px !important;
        }

        .mendatory-box {
            border: 2px solid #ddd;
            margin: 16px 0;
            border-top: none;
            border-radius: 0 0 25px 25px
        }

        .mob-clearfix {
            clear: both !important;
        }

        .add-ques-sec {
            margin-left: 0px !important;
            margin-top: 30px !important;
        }

        .mt-30 {
            margin-top: -30px !important;
        }

        .email-marketing-sec {
            margin-top: 0px !important
        }

        .credit-card {
            margin-left: 0 !important
        }

        .upload-logo-box {
            margin-bottom: 30px
        }

        .platforms a:nth-child(1) {
            left: 0px
        }

        .platforms:target a {
            top: 40px !important
        }

        fieldset .content .content-wrapper {
            padding: 0 !important
        }

        #dashboard-analytics .bg-analytics {
            margin-top: 80px !important
        }

        .dropzone .dz-message {
            font-size: 1rem !important
        }

        .modal-dialog-scrollable .modal-body {
            overflow-x: hidden
        }

        .form-control {
            font-size: .8rem !important
        }

        .demo__colored-blocks {
            left: 75% !important
        }

        .demo__numbers {
            left: 77% !important
        }

        .vs-button-primary.vs-button-line {
            font-size: 14px !important
        }

        .mb-4, .my-4 {
            margin-bottom: 1rem !important
        }

        .pt-5, .py-5 {
            padding-top: 0 !important
        }

        body.horizontal-layout .content .content-wrapper {
            margin-top: 0 !important
        }

        .btn {
            width: auto
        }

        #question {
            z-index: 9999;
        }

        .modal-body .btn {
            padding: .6rem 1rem !important; /*width:100%!important*/
        }

        .modal-body .installer .btn {
            padding: .9rem 1rem !important;
            width: auto !important
        }

        .footer {
            text-align: center
        }

        .social-footer {
            float: none !important;
            text-align: center;
            margin-top: 30px
        }

        .social-icon {
            margin-bottom: 10px
        }

        .email-box {
            border: 2px solid #ddd;
            border-radius: 25px 25px 0 0;
            margin: 16px 0 -16px
        }

        .step4-bg {
            
            margin-bottom: 20px;
            margin-top: 15px;
        }

        .pd-mobile {
            padding: 0 25px !important
        }

        .new-chk {
            width: 30px !important;
            margin-top: 5px
        }

        .add-que {
            margin-left: 0 !important
        }

        .rt-container{
            display: none;
        }

        .liveslider{
            display: none;
        }
    }

    @media(max-width:1024px) {

        .pt-5, .py-5 {
            padding-top: 0 !important
        }

        .step2 .text-cross {
            right: 0 !important
        }

        #ecommerce-searchbar {
            margin-top: 0 !important
        }

        html body .content .content-wrapper {
            padding: calc(.2rem - .4rem) 2.2rem 0
        }

        .app-ecommerce-details .card.ecommerce-card {
            margin: 0
        }

        img#avatar {
            width: inherit
        }
    }

    @media(max-width:768px) {
        .hide-mobile {
            display: none !important
        }

        .text {
            font-size: 13px !important
        }

        div#ecommerce-sidebar-toggler {
            display: none
        }

        .step4-bg {
            width: 100% !important;
        }

        .add-que {
            margin-left: 0 !important
        }

        .mb1 {
            margin-bottom: 1px
        }
    }

    @media(max-width:1299px) {
        .pt-5, .py-5 {
            padding-top: 0 !important
        }
    }

    @media(min-width:769px) and (max-width:1200px) {
        .step4-bg {
            width: 65% !important
        }

        .add-que {
            margin-left: -26% !important
        }
    }

    @media(min-width:1025px) and (max-width:1200px) {
        .upload-logo-box {
            min-height: 552px
        }
    }

    @media(max-width:1200px) {
        .hide-mobile {
            display: none !important
        }

        .card {
            margin-top: 40px
        }
    }


    #content {
        position: relative !important
    }

    .card_block {
        min-height: 300px;
        height: 300px;
        overflow: auto
    }

    @media(max-width:480px) {
        .m-hidden {
            display: none
        }
    }

    @media(min-width:481px) {
        img.login-logo.d-hidden {
            display: none
        }
    }


@media(min-width:992px) and (max-width:1199px) {
    body.horizontal-layout .content .content-wrapper.notification_high {
        margin-top: 6rem !important;
    }
    .platforms a:nth-child(2) {
        left: 130px !important;
    }
    .platforms a{
        width: 90px !important;
    }
    .platforms{
        left: -10px !important;
    }
}


@media(min-width:1600px) {
    .platforms a:nth-child(2) {
        left: 230px !important;
    }
}


@media(max-width:767px) {
    body.horizontal-layout .content .content-wrapper.notification_high {
        margin-bottom: 3rem !important;
        margin-top: -3rem !important;
    }
}



    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 300;
        src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3gTD_u50.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 300;
        src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3g3D_u50.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 300;
        src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3gbD_u50.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 300;
        src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3gfD_u50.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 300;
        src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_cJD3gnD_g.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gTD_u50.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3g3D_u50.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gbD_u50.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gfD_u50.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_ZpC3gnD_g.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gTD_u50.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3g3D_u50.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gbD_u50.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2');
        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
    }

    @font-face {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
        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
    }

    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        margin: 40px 0
    }

    #sidebar {
        width: 250px;
        position: fixed;
        top: 0;
        left: -250px;
        height: 100vh;
        z-index: 999;
        background: #fff;
        color: #fff;
        transition: all .3s;
        overflow-y: visible;
        box-shadow: 3px 3px 3px rgba(0,0,0,.2)
    }

        #sidebar.active {
            left: 0
        }

    .overlay {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.7);
        z-index: 998;
        opacity: 0;
        transition: all .5s ease-in-out
    }

        .overlay.active {
            display: block;
            opacity: 1
        }

    #sidebar .sidebar-header {
        padding: 20px;
        background: #fff;
        margin-bottom: 30px
    }

    #sidebar ul.components {
        padding: 20px 0;
        border-bottom: 1px solid #47748b
    }

    #sidebar ul p {
        color: #fff;
        padding: 10px
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block
    }

        #sidebar ul li a:hover {
            color: #7386d5;
            background: #fff
        }

    #content {
        width: 100%;
        padding: 20px;
        min-height: inherit !important;
        transition: all .3s;
        position: absolute;
        top: 0;
        right: 0
    }

    .vs-avatar--con-img {
        overflow: hidden;
        text-align: center;
        margin-top: 25px
    }

        .vs-avatar--con-img i {
            color: #000;
            margin-top: 31px;
            font-size: 50px;
        }

    .help_section {
        color: #000;
        text-align: center;
    }

    .mCS_img_loaded {
        border-radius: 50%;
        height: 70px;
    }

    .border_top {
        border-top: 1px solid #e4e4e4;
    }

    .mt70 {
        margin-top: 70px;
    }

    :root {
        --sk-size: 40px;
        --sk-color: #333;
    }

    .sk-center {
        margin: auto;
    }

    .sk-plane {
        width: var(--sk-size);
        height: var(--sk-size);
        background-color: var(--sk-color);
        animation: sk-plane 1.2s infinite ease-in-out
    }

    @keyframes sk-plane {
        0% {
            transform: perspective(120px) rotateX(0) rotateY(0)
        }

        50% {
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
        }

        100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
        }
    }

    .sk-chase {
        width: var(--sk-size);
        height: var(--sk-size);
        position: relative;
        animation: sk-chase 2.5s infinite linear both
    }

    .sk-chase-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        animation: sk-chase-dot 2s infinite ease-in-out both
    }

        .sk-chase-dot:before {
            content: '';
            display: block;
            width: 25%;
            height: 25%;
            background-color: var(--sk-color);
            border-radius: 100%;
            animation: sk-chase-dot-before 2s infinite ease-in-out both
        }

        .sk-chase-dot:nth-child(1) {
            animation-delay: -1.1s
        }

        .sk-chase-dot:nth-child(2) {
            animation-delay: -1s
        }

        .sk-chase-dot:nth-child(3) {
            animation-delay: -.9s
        }

        .sk-chase-dot:nth-child(4) {
            animation-delay: -.8s
        }

        .sk-chase-dot:nth-child(5) {
            animation-delay: -.7s
        }

        .sk-chase-dot:nth-child(6) {
            animation-delay: -.6s
        }

        .sk-chase-dot:nth-child(1):before {
            animation-delay: -1.1s
        }

        .sk-chase-dot:nth-child(2):before {
            animation-delay: -1s
        }

        .sk-chase-dot:nth-child(3):before {
            animation-delay: -.9s
        }

        .sk-chase-dot:nth-child(4):before {
            animation-delay: -.8s
        }

        .sk-chase-dot:nth-child(5):before {
            animation-delay: -.7s
        }

        .sk-chase-dot:nth-child(6):before {
            animation-delay: -.6s
        }

    @keyframes sk-chase {
        100% {
            transform: rotate(360deg)
        }
    }

    @keyframes sk-chase-dot {
        100%, 80% {
            transform: rotate(360deg)
        }
    }

    @keyframes sk-chase-dot-before {
        50% {
            transform: scale(.4)
        }

        0%, 100% {
            transform: scale(1)
        }
    }

    .sk-bounce {
        width: var(--sk-size);
        height: var(--sk-size);
        position: relative;
        margin: auto;
        top: 0;
        position: fixed;
        overflow: visible;
        left: 0;
        bottom: 0;
        right: 0
    }

    .sk-bounce-dot {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--sk-color);
        opacity: .6;
        position: absolute;
        top: 0;
        left: 0;
        animation: sk-bounce 2s infinite cubic-bezier(.455, .03, .515, .955)
    }

        .sk-bounce-dot:nth-child(2) {
            animation-delay: -1s
        }

    @keyframes sk-bounce {
        0%, 100% {
            transform: scale(0)
        }

        45%, 55% {
            transform: scale(1)
        }
    }

    .sk-wave {
        width: var(--sk-size);
        height: var(--sk-size);
        display: flex;
        justify-content: space-between
    }

    .sk-wave-rect {
        background-color: var(--sk-color);
        height: 100%;
        width: 15%;
        animation: sk-wave 1.2s infinite ease-in-out
    }

        .sk-wave-rect:nth-child(1) {
            animation-delay: -1.2s
        }

        .sk-wave-rect:nth-child(2) {
            animation-delay: -1.1s
        }

        .sk-wave-rect:nth-child(3) {
            animation-delay: -1s
        }

        .sk-wave-rect:nth-child(4) {
            animation-delay: -.9s
        }

        .sk-wave-rect:nth-child(5) {
            animation-delay: -.8s
        }

    @keyframes sk-wave {
        0%, 100%, 40% {
            transform: scaleY(.4)
        }

        20% {
            transform: scaleY(1)
        }
    }

    .sk-pulse {
        width: var(--sk-size);
        height: var(--sk-size);
        background-color: var(--sk-color);
        border-radius: 100%;
        animation: sk-pulse 1.2s infinite cubic-bezier(.455, .03, .515, .955)
    }

    @keyframes sk-pulse {
        0% {
            transform: scale(0)
        }

        100% {
            transform: scale(1);
            opacity: 0
        }
    }

    .sk-flow {
        width: calc(var(--sk-size) * 1.3);
        height: calc(var(--sk-size) * 1.3);
        display: flex;
        justify-content: space-between
    }

    .sk-flow-dot {
        width: 25%;
        height: 25%;
        background-color: var(--sk-color);
        border-radius: 50%;
        animation: sk-flow 1.4s cubic-bezier(.455, .03, .515, .955) 0s infinite both
    }

        .sk-flow-dot:nth-child(1) {
            animation-delay: -.3s
        }

        .sk-flow-dot:nth-child(2) {
            animation-delay: -.15s
        }

    @keyframes sk-flow {
        0%, 100%, 80% {
            transform: scale(.3)
        }

        40% {
            transform: scale(1)
        }
    }

    .sk-swing {
        width: var(--sk-size);
        height: var(--sk-size);
        position: relative;
        animation: sk-swing 1.8s infinite linear
    }

    .sk-swing-dot {
        width: 45%;
        height: 45%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: var(--sk-color);
        border-radius: 100%;
        animation: sk-swing-dot 2s infinite ease-in-out
    }

        .sk-swing-dot:nth-child(2) {
            top: auto;
            bottom: 0;
            animation-delay: -1s
        }

    @keyframes sk-swing {
        100% {
            transform: rotate(360deg)
        }
    }

    @keyframes sk-swing-dot {
        0%, 100% {
            transform: scale(.2)
        }

        50% {
            transform: scale(1)
        }
    }

    .sk-circle {
        width: var(--sk-size);
        height: var(--sk-size);
        position: relative
    }

    .sk-circle-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0
    }

        .sk-circle-dot:before {
            content: '';
            display: block;
            width: 15%;
            height: 15%;
            background-color: var(--sk-color);
            border-radius: 100%;
            
            animation: sk-circle 1.2s infinite ease-in-out both
        }

        .sk-circle-dot:nth-child(1) {
            transform: rotate(30deg)
        }

        .sk-circle-dot:nth-child(2) {
            transform: rotate(60deg)
        }

        .sk-circle-dot:nth-child(3) {
            transform: rotate(90deg)
        }

        .sk-circle-dot:nth-child(4) {
            transform: rotate(120deg)
        }

        .sk-circle-dot:nth-child(5) {
            transform: rotate(150deg)
        }

        .sk-circle-dot:nth-child(6) {
            transform: rotate(180deg)
        }

        .sk-circle-dot:nth-child(7) {
            transform: rotate(210deg)
        }

        .sk-circle-dot:nth-child(8) {
            transform: rotate(240deg)
        }

        .sk-circle-dot:nth-child(9) {
            transform: rotate(270deg)
        }

        .sk-circle-dot:nth-child(10) {
            transform: rotate(300deg)
        }

        .sk-circle-dot:nth-child(11) {
            transform: rotate(330deg)
        }

        .sk-circle-dot:nth-child(1):before {
            animation-delay: -1.1s
        }

        .sk-circle-dot:nth-child(2):before {
            animation-delay: -1s
        }

        .sk-circle-dot:nth-child(3):before {
            animation-delay: -.9s
        }

        .sk-circle-dot:nth-child(4):before {
            animation-delay: -.8s
        }

        .sk-circle-dot:nth-child(5):before {
            animation-delay: -.7s
        }

        .sk-circle-dot:nth-child(6):before {
            animation-delay: -.6s
        }

        .sk-circle-dot:nth-child(7):before {
            animation-delay: -.5s
        }

        .sk-circle-dot:nth-child(8):before {
            animation-delay: -.4s
        }

        .sk-circle-dot:nth-child(9):before {
            animation-delay: -.3s
        }

        .sk-circle-dot:nth-child(10):before {
            animation-delay: -.2s
        }

        .sk-circle-dot:nth-child(11):before {
            animation-delay: -.1s
        }

    @keyframes sk-circle {
        0%, 100%, 80% {
            transform: scale(0)
        }

        40% {
            transform: scale(1)
        }
    }

    .sk-circle-fade {
        width: var(--sk-size);
        height: var(--sk-size);
        position: relative
    }

    .sk-circle-fade-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0
    }

        .sk-circle-fade-dot:before {
            content: '';
            display: block;
            width: 15%;
            height: 15%;
            background-color: var(--sk-color);
            border-radius: 100%;
            animation: sk-circle-fade 1.2s infinite ease-in-out both
        }

        .sk-circle-fade-dot:nth-child(1) {
            transform: rotate(30deg)
        }

        .sk-circle-fade-dot:nth-child(2) {
            transform: rotate(60deg)
        }

        .sk-circle-fade-dot:nth-child(3) {
            transform: rotate(90deg)
        }

        .sk-circle-fade-dot:nth-child(4) {
            transform: rotate(120deg)
        }

        .sk-circle-fade-dot:nth-child(5) {
            transform: rotate(150deg)
        }

        .sk-circle-fade-dot:nth-child(6) {
            transform: rotate(180deg)
        }

        .sk-circle-fade-dot:nth-child(7) {
            transform: rotate(210deg)
        }

        .sk-circle-fade-dot:nth-child(8) {
            transform: rotate(240deg)
        }

        .sk-circle-fade-dot:nth-child(9) {
            transform: rotate(270deg)
        }

        .sk-circle-fade-dot:nth-child(10) {
            transform: rotate(300deg)
        }

        .sk-circle-fade-dot:nth-child(11) {
            transform: rotate(330deg)
        }

        .sk-circle-fade-dot:nth-child(1):before {
            animation-delay: -1.1s
        }

        .sk-circle-fade-dot:nth-child(2):before {
            animation-delay: -1s
        }

        .sk-circle-fade-dot:nth-child(3):before {
            animation-delay: -.9s
        }

        .sk-circle-fade-dot:nth-child(4):before {
            animation-delay: -.8s
        }

        .sk-circle-fade-dot:nth-child(5):before {
            animation-delay: -.7s
        }

        .sk-circle-fade-dot:nth-child(6):before {
            animation-delay: -.6s
        }

        .sk-circle-fade-dot:nth-child(7):before {
            animation-delay: -.5s
        }

        .sk-circle-fade-dot:nth-child(8):before {
            animation-delay: -.4s
        }

        .sk-circle-fade-dot:nth-child(9):before {
            animation-delay: -.3s
        }

        .sk-circle-fade-dot:nth-child(10):before {
            animation-delay: -.2s
        }

        .sk-circle-fade-dot:nth-child(11):before {
            animation-delay: -.1s
        }

    @keyframes sk-circle-fade {
        0%, 100%, 39% {
            opacity: 0;
            transform: scale(.6)
        }

        40% {
            opacity: 1;
            transform: scale(1)
        }
    }

    .sk-grid {
        width: var(--sk-size);
        height: var(--sk-size)
    }

    .sk-grid-cube {
        width: 33.33%;
        height: 33.33%;
        background-color: var(--sk-color);
        float: left;
        animation: sk-grid 1.3s infinite ease-in-out
    }

        .sk-grid-cube:nth-child(1) {
            animation-delay: .2s
        }

        .sk-grid-cube:nth-child(2) {
            animation-delay: .3s
        }

        .sk-grid-cube:nth-child(3) {
            animation-delay: .4s
        }

        .sk-grid-cube:nth-child(4) {
            animation-delay: .1s
        }

        .sk-grid-cube:nth-child(5) {
            animation-delay: .2s
        }

        .sk-grid-cube:nth-child(6) {
            animation-delay: .3s
        }

        .sk-grid-cube:nth-child(7) {
            animation-delay: 0s
        }

        .sk-grid-cube:nth-child(8) {
            animation-delay: .1s
        }

        .sk-grid-cube:nth-child(9) {
            animation-delay: .2s
        }

    @keyframes sk-grid {
        0%, 100%, 70% {
            transform: scale3D(1, 1, 1)
        }

        35% {
            transform: scale3D(0, 0, 1)
        }
    }

    .sk-fold {
        width: var(--sk-size);
        height: var(--sk-size);
        position: relative;
        transform: rotateZ(45deg)
    }

    .sk-fold-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        transform: scale(1.1)
    }

        .sk-fold-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--sk-color);
            animation: sk-fold 2.4s infinite linear both;
            transform-origin: 100% 100%
        }

        .sk-fold-cube:nth-child(2) {
            transform: scale(1.1) rotateZ(90deg)
        }

        .sk-fold-cube:nth-child(4) {
            transform: scale(1.1) rotateZ(180deg)
        }

        .sk-fold-cube:nth-child(3) {
            transform: scale(1.1) rotateZ(270deg)
        }

        .sk-fold-cube:nth-child(2):before {
            animation-delay: .3s
        }

        .sk-fold-cube:nth-child(4):before {
            animation-delay: .6s
        }

        .sk-fold-cube:nth-child(3):before {
            animation-delay: .9s
        }

    @keyframes sk-fold {
        0%, 10% {
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0
        }

        25%, 75% {
            transform: perspective(140px) rotateX(0);
            opacity: 1
        }

        100%, 90% {
            transform: perspective(140px) rotateY(180deg);
            opacity: 0
        }
    }

    .sk-wander {
        width: var(--sk-size);
        height: var(--sk-size);
        position: relative
    }

    .sk-wander-cube {
        background-color: var(--sk-color);
        width: 20%;
        height: 20%;
        position: absolute;
        top: 0;
        left: 0;
        --sk-wander-distance: calc(var(--sk-size) * 0.75);
        animation: sk-wander 2s ease-in-out -2s infinite both
    }

        .sk-wander-cube:nth-child(2) {
            animation-delay: -.5s
        }

        .sk-wander-cube:nth-child(3) {
            animation-delay: -1s
        }

    @keyframes sk-wander {
        0% {
            transform: rotate(0)
        }

        25% {
            transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(.6)
        }

        50% {
            transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)
        }

        50.1% {
            transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)
        }

        75% {
            transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(.6)
        }

        100% {
            transform: rotate(-360deg)
        }
    }

    @font-face {
        font-family: Material Icons;
        font-style: normal;
        font-weight: 400;
        src: url(../fonts/MaterialIcons-Regular.96c47680.eot);
        src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.0509ab09.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.29b882f0.woff) format("woff"), url(../fonts/MaterialIcons-Regular.d120c85b.ttf) format("truetype")
    }

    .material-icons {
        font-family: Material Icons;
        font-weight: 400;
        font-style: normal;
        font-size: 24px;
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-feature-settings: "liga";
        font-feature-settings: "liga"
    }

    [dir=ltr] .material-icons {
        direction: ltr
    }

    [dir=rtl] .material-icons {
        direction: rtl
    }

    .vs-row {
        clear: both;
        -ms-flex-flow: wrap;
        flex-flow: wrap
    }

    .vs-col {
        float: left
    }

    .vs-lg-12 {
        width: 100% !important
    }

    .vs-lg-11 {
        width: 91.66666666666667% !important
    }

    .vs-lg-10 {
        width: 83.33333333333333% !important
    }

    .vs-lg-9 {
        width: 75% !important
    }

    .vs-lg-8 {
        width: 66.66666666666667% !important
    }

    .vs-lg-7 {
        width: 58.33333333333333% !important
    }

    .vs-lg-6 {
        width: 50% !important
    }

    .vs-lg-5 {
        width: 41.66666666666667% !important
    }

    .vs-lg-4 {
        width: 33.33333333333333% !important
    }

    .vs-lg-3 {
        width: 25% !important
    }

    .vs-lg-2 {
        width: 16.66666666666667% !important
    }

    .vs-lg-1 {
        width: 8.333333333333332% !important
    }

    .vs-lg-0 {
        display: none !important
    }

    @media only screen and (max-width:900px) {
        .vs-sm-12 {
            width: 100% !important
        }

        .vs-sm-11 {
            width: 91.66666666666667% !important
        }

        .vs-sm-10 {
            width: 83.33333333333333% !important
        }

        .vs-sm-9 {
            width: 75% !important
        }

        .vs-sm-8 {
            width: 66.66666666666667% !important
        }

        .vs-sm-7 {
            width: 58.33333333333333% !important
        }

        .vs-sm-6 {
            width: 50% !important
        }

        .vs-sm-5 {
            width: 41.66666666666667% !important
        }

        .vs-sm-4 {
            width: 33.33333333333333% !important
        }

        .vs-sm-3 {
            width: 25% !important
        }

        .vs-sm-2 {
            width: 16.66666666666667% !important
        }

        .vs-sm-1 {
            width: 8.333333333333332% !important
        }

        .vs-sm-0 {
            display: none !important
        }
    }

    @media only screen and (max-width:600px) {
        .vs-xs-12 {
            width: 100% !important
        }

        .vs-xs-11 {
            width: 91.66666666666667% !important
        }

        .vs-xs-10 {
            width: 83.33333333333333% !important
        }

        .vs-xs-9 {
            width: 75% !important
        }

        .vs-xs-8 {
            width: 66.66666666666667% !important
        }

        .vs-xs-7 {
            width: 58.33333333333333% !important
        }

        .vs-xs-6 {
            width: 50% !important
        }

        .vs-xs-5 {
            width: 41.66666666666667% !important
        }

        .vs-xs-4 {
            width: 33.33333333333333% !important
        }

        .vs-xs-3 {
            width: 25% !important
        }

        .vs-xs-2 {
            width: 16.66666666666667% !important
        }

        .vs-xs-1 {
            width: 8.333333333333332% !important
        }

        .vs-xs-0 {
            display: none !important
        }
    }

    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        text-transform: none;
        text-decoration: none
    }

    .vuesax-app-is-rtl {
        direction: rtl
    }

    .vuesax-app-is-ltr {
        direction: ltr
    }

    :root {
        --vs-primary: 31, 116, 255;
        --vs-danger: 255, 71, 87;
        --vs-success: 70, 201, 58;
        --vs-dark: 30, 30, 30;
        --vs-warning: 255, 186, 0;
        --vs-light: 245, 245, 245
    }

    .con-vs-alert {
        border-radius: 6px;
        color: #fff;
        width: 100%;
        position: relative;
        font-size: .8rem;
        cursor: default;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        overflow: hidden
    }

    .icon-alert {
        height: 100%;
        position: absolute;
        padding: 10px;
        top: 0;
        font-size: 1.1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .vuesax-app-is-rtl .icon-alert {
        right: 0
    }

    .vuesax-app-is-ltr .icon-alert {
        left: 0
    }

    .vs-alert {
        padding: 10px;
        overflow: hidden;
        position: relative
    }

    .vuesax-app-is-rtl .vs-alert.con-icon {
        padding-right: 40px
    }

    .vuesax-app-is-ltr .vs-alert.con-icon {
        padding-left: 40px
    }

    .vs-alert--title {
        font-size: .9rem;
        font-weight: 700;
        padding: 8px 10px
    }

    .vs-alert--close {
        position: relative;
        margin-top: 4px;
        display: inline-block;
        padding: 4px;
        border-radius: 6px;
        padding-bottom: 1px;
        cursor: pointer;
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

    .vuesax-app-is-rtl .vs-alert--close {
        margin-left: 4px
    }

    .vuesax-app-is-ltr .vs-alert--close {
        margin-right: 4px
    }

    .vuesax-app-is-rtl .vs-alert--close {
        float: left
    }

    .vuesax-app-is-ltr .vs-alert--close {
        float: right
    }

    .vs-alert--close:hover {
        -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,.1);
        box-shadow: 0 5px 15px 0 rgba(0,0,0,.1)
    }

    .con-vs-alert-primary {
        background: rgba(var(--vs-primary), .15);
        -webkit-box-shadow: 0 0 25px 0 rgba(var(--vs-primary), .15);
        box-shadow: 0 0 25px 0 rgba(var(--vs-primary), .15);
        color: rgba(var(--vs-primary), 1)
    }

        .con-vs-alert-primary h4 {
            -webkit-box-shadow: 0 6px 15px -7px rgba(var(--vs-primary), .4);
            box-shadow: 0 6px 15px -7px rgba(var(--vs-primary), .4)
        }

        .con-vs-alert-primary .con-x {
            background: rgba(var(--vs-primary), 1);
            color: #fff
        }

    .con-vs-alert-secondary {
        background: rgba(var(--vs-secondary), .15);
        -webkit-box-shadow: 0 0 25px 0 rgba(var(--vs-secondary), .15);
        box-shadow: 0 0 25px 0 rgba(var(--vs-secondary), .15);
        color: rgba(var(--vs-secondary), 1)
    }

        .con-vs-alert-secondary h4 {
            -webkit-box-shadow: 0 6px 15px -7px rgba(var(--vs-secondary), .4);
            box-shadow: 0 6px 15px -7px rgba(var(--vs-secondary), .4)
        }

        .con-vs-alert-secondary .con-x {
            background: rgba(var(--vs-secondary), 1);
            color: #fff
        }

    .con-vs-alert-danger {
        background: rgba(var(--vs-danger), .15);
        -webkit-box-shadow: 0 0 25px 0 rgba(var(--vs-danger), .15);
        box-shadow: 0 0 25px 0 rgba(var(--vs-danger), .15);
        color: rgba(var(--vs-danger), 1)
    }

        .con-vs-alert-danger h4 {
            -webkit-box-shadow: 0 6px 15px -7px rgba(var(--vs-danger), .4);
            box-shadow: 0 6px 15px -7px rgba(var(--vs-danger), .4)
        }

        .con-vs-alert-danger .con-x {
            background: rgba(var(--vs-danger), 1);
            color: #fff
        }

    .con-vs-alert-success {
        background: rgba(var(--vs-success), .15);
        -webkit-box-shadow: 0 0 25px 0 rgba(var(--vs-success), .15);
        box-shadow: 0 0 25px 0 rgba(var(--vs-success), .15);
        color: rgba(var(--vs-success), 1)
    }

        .con-vs-alert-success h4 {
            -webkit-box-shadow: 0 6px 15px -7px rgba(var(--vs-success), .4);
            box-shadow: 0 6px 15px -7px rgba(var(--vs-success), .4)
        }

        .con-vs-alert-success .con-x {
            background: rgba(var(--vs-success), 1);
            color: #fff
        }

    .con-vs-alert-warning {
        background: rgba(var(--vs-warning), .15);
        -webkit-box-shadow: 0 0 25px 0 rgba(var(--vs-warning), .15);
        box-shadow: 0 0 25px 0 rgba(var(--vs-warning), .15);
        color: rgba(var(--vs-warning), 1)
    }

        .con-vs-alert-warning h4 {
            -webkit-box-shadow: 0 6px 15px -7px rgba(var(--vs-warning), .4);
            box-shadow: 0 6px 15px -7px rgba(var(--vs-warning), .4)
        }

        .con-vs-alert-warning .con-x {
            background: rgba(var(--vs-warning), 1);
            color: #fff
        }

    .con-vs-alert-dark {
        background: rgba(var(--vs-dark), .15);
        -webkit-box-shadow: 0 0 25px 0 rgba(var(--vs-dark), .15);
        box-shadow: 0 0 25px 0 rgba(var(--vs-dark), .15);
        color: rgba(var(--vs-dark), 1)
    }

        .con-vs-alert-dark h4 {
            -webkit-box-shadow: 0 6px 15px -7px rgba(var(--vs-dark), .4);
            box-shadow: 0 6px 15px -7px rgba(var(--vs-dark), .4)
        }

        .con-vs-alert-dark .con-x {
            background: rgba(var(--vs-dark), 1);
            color: #fff
        }

    .con-vs-alert-light {
        background: rgba(var(--vs-light), .15);
        -webkit-box-shadow: 0 0 25px 0 rgba(var(--vs-light), .15);
        box-shadow: 0 0 25px 0 rgba(var(--vs-light), .15);
        color: rgba(var(--vs-light), 1)
    }

        .con-vs-alert-light h4 {
            -webkit-box-shadow: 0 6px 15px -7px rgba(var(--vs-light), .4);
            box-shadow: 0 6px 15px -7px rgba(var(--vs-light), .4)
        }

        .con-vs-alert-light .con-x {
            background: rgba(var(--vs-light), 1);
            color: #fff
        }

    .con-vs-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        display: inline-block;
        margin: 5px
    }

        .con-vs-avatar.large {
            width: 50px;
            height: 50px
        }

        .con-vs-avatar.small {
            width: 24px;
            height: 24px
        }

            .con-vs-avatar.small .vs-avatar-text {
                font-size: .9375em
            }

    .vs-avatar--count {
        position: absolute;
        top: 1px;
        right: 1px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        z-index: 100
    }

        .vs-avatar--count.badgeNumber {
            width: auto;
            height: auto;
            top: -3px;
            right: 0;
            border-radius: 4px;
            padding-left: 3px;
            padding-right: 3px;
            font-size: .625em;
            color: #fff
        }

    .vs-avatar--text {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .vs-avatar--con-img {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 50%
    }

        .vs-avatar--con-img img {
            width: 100%
        }

    .con-vs-avatar-primary {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-avatar-text-primary {
        color: rgba(var(--vs-primary), 1)
    }

    .con-vs-avatar-secondary {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-avatar-text-secondary {
        color: rgba(var(--vs-secondary), 1)
    }

    .con-vs-avatar-danger {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-avatar-text-danger {
        color: rgba(var(--vs-danger), 1)
    }

    .con-vs-avatar-success {
        background: rgba(var(--vs-success), 1)
    }

    .vs-avatar-text-success {
        color: rgba(var(--vs-success), 1)
    }

    .con-vs-avatar-warning {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-avatar-text-warning {
        color: rgba(var(--vs-warning), 1)
    }

    .con-vs-avatar-dark {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-avatar-text-dark {
        color: rgba(var(--vs-dark), 1)
    }

    .con-vs-avatar-light {
        background: rgba(var(--vs-light), 1)
    }

    .vs-avatar-text-light {
        color: rgba(var(--vs-light), 1)
    }

    .vs-breadcrumb {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

        .vs-breadcrumb.vs-align-left {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start
        }

        .vs-breadcrumb.vs-align-center {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .vs-breadcrumb.vs-align-right {
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end
        }

        .vs-breadcrumb .disabled-link {
            opacity: .5;
            pointer-events: none
        }

    .vs-breadcrumb--ol {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: .75rem 1rem;
        list-style-type: none
    }

        .vs-breadcrumb--ol li.vs-active {
            cursor: default
        }

        .vs-breadcrumb--ol a {
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            color: rgba(0,0,0,.4)
        }

            .vs-breadcrumb--ol a:focus, .vs-breadcrumb--ol a:hover {
                color: rgba(0,0,0,.7);
                text-decoration: none
            }

    .vs-breadcrum--separator {
        color: rgba(0,0,0,.4);
        padding: 0 .5rem 0 .5rem
    }

        .vs-breadcrum--separator.material-icons {
            vertical-align: middle;
            font-size: inherit
        }

    .vs-breadcrumb-text-primary {
        color: rgba(var(--vs-primary), 1)
    }

    .vs-breadcrumb-text-secondary {
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-breadcrumb-text-danger {
        color: rgba(var(--vs-danger), 1)
    }

    .vs-breadcrumb-text-success {
        color: rgba(var(--vs-success), 1)
    }

    .vs-breadcrumb-text-warning {
        color: rgba(var(--vs-warning), 1)
    }

    .vs-breadcrumb-text-dark {
        color: rgba(var(--vs-dark), 1)
    }

    .vs-breadcrumb-text-light {
        color: rgba(var(--vs-light), 1)
    }

    .vs-button {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        padding: 10px;
        border: 0;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: 0 0
    }

        .vs-button.vs-radius {
            border-radius: 50%
        }

        .vs-button.large {
            padding: 12px;
            font-size: 1em
        }

        .vs-button.small {
            padding: 7px;
            font-size: .7em
        }

        .vs-button:disabled {
            opacity: .5;
            cursor: default;
            pointer-events: none
        }

    .vs-button--icon {
        z-index: 100;
        display: block;
        position: relative;
        font-size: 1.125em;
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

    .vs-button--background {
        border-radius: 50%;
        width: 10px;
        position: absolute;
        height: 10px;
        z-index: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-box-shadow: inset 0 0 60px 0 hsla(0,0%,100%,.5);
        box-shadow: inset 0 0 60px 0 hsla(0,0%,100%,.5)
    }

    .vs-button--text {
        position: relative;
        color: inherit;
        display: inline-block;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .vs-button-border {
        padding: 9px
    }

        .vs-button-border.isActive .vs-button--icon, .vs-button-border.isActive .vs-button--text, .vs-button-flat.isActive .vs-button--icon, .vs-button-flat.isActive .vs-button--text {
            color: #fff !important
        }

    .vs-button-filled:hover {
        -webkit-box-shadow: 0 9px 28px -9px;
        box-shadow: 0 9px 28px -9px
    }

    .vs-button-line {
        padding: 9px 10px;
        border-radius: 0;
        overflow: visible;
        border-style: solid
    }

        .vs-button-line .vs-button-linex {
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            width: 0;
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 2px
        }

        .vs-button-line:hover .vs-button--icon, .vs-button-line:hover .vs-button--text {
            -webkit-transform: translateY(2px);
            transform: translateY(2px)
        }

        .vs-button-line:hover .vs-button-linex {
            width: 100% !important
        }

    .vs-button-gradient:hover {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        -webkit-box-shadow: 0 8px 25px -8px #aaa;
        box-shadow: 0 8px 25px -8px #aaa
    }

    .vs-button-gradient:active {
        -webkit-transform: translate(0);
        transform: translate(0);
        -webkit-box-shadow: 0 8px 0 -8px #aaa;
        box-shadow: 0 8px 0 -8px #aaa
    }

    .vs-button-relief {
        padding: 10px
    }

        .vs-button-relief:active {
            -webkit-transform: translateY(3px);
            transform: translateY(3px);
            -webkit-box-shadow: none !important;
            box-shadow: none !important
        }

    .includeIcon {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .vuesax-app-is-rtl .includeIcon {
        float: right
    }

    .vuesax-app-is-ltr .includeIcon {
        float: left
    }

    .includeIconOnly {
        width: 38px !important;
        height: 38px !important
    }

        .includeIconOnly.large {
            width: 44px !important;
            height: 44px !important;
            font-size: .7em
        }

        .includeIconOnly.small {
            width: 28px !important;
            height: 28px !important
        }

            .includeIconOnly.small .vs-icon {
                font-size: .85rem
            }

    .vs-button-primary.vs-button-filled {
        background: rgba(var(--vs-primary), 1) !important
    }

        .vs-button-primary.vs-button-filled:hover {
            -webkit-box-shadow: 0 8px 25px -8px rgba(var(--vs-primary), 1);
            box-shadow: 0 8px 25px -8px rgba(var(--vs-primary), 1)
        }

    .vs-button-primary.vs-button-border, .vs-button-primary.vs-button-flat {
        border: 1px solid rgba(var(--vs-primary), 1);
        background: 0 0 !important;
        color: rgba(var(--vs-primary), 1)
    }

        .vs-button-primary.vs-button-border .vs-button--text.isActive, .vs-button-primary.vs-button-flat .vs-button--text.isActive {
            color: #fff !important
        }

        .vs-button-primary.vs-button-border:hover, .vs-button-primary.vs-button-flat:hover {
            background: rgba(var(--vs-primary), .08) !important
        }

        .vs-button-primary.vs-button-border .vs-button-backgroundx, .vs-button-primary.vs-button-flat .vs-button-backgroundx {
            background: rgba(var(--vs-primary), 1);
            -webkit-box-shadow: inset 0 0 60px 0 rgba(var(--vs-primary), 1);
            box-shadow: inset 0 0 60px 0 rgba(var(--vs-primary), 1)
        }

    .vs-button-primary.vs-button-flat {
        border: none !important
    }
    /*.vs-button-primary.vs-button-line{color:rgba(var(--vs-primary),1);border-color:rgba(var(--vs-primary),.2)}*/
    .vs-button-primary.vs-button-line .vs-button-linex {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-button-primary.vs-button-gradient {
        background: #640064;
        background-image: linear-gradient(30deg, rgba(var(--vs-primary), 1), rgba(var(--vs-primary), .5)) !important;
        text-shadow: 1px 2px 4px rgba(0,0,0,.3)
    }

    .vs-button-primary.vs-button-relief {
        background: rgba(var(--vs-primary), 1);
        -webkit-box-shadow: 0 -3px 0 0 rgba(0,0,0,.2) inset;
        box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.2)
    }

    .vs-button-secondary.vs-button-filled {
        background: rgba(var(--vs-secondary), 1) !important
    }

        .vs-button-secondary.vs-button-filled:hover {
            -webkit-box-shadow: 0 8px 25px -8px rgba(var(--vs-secondary), 1);
            box-shadow: 0 8px 25px -8px rgba(var(--vs-secondary), 1)
        }

    .vs-button-secondary.vs-button-border, .vs-button-secondary.vs-button-flat {
        border: 1px solid rgba(var(--vs-secondary), 1);
        background: 0 0 !important;
        color: rgba(var(--vs-secondary), 1)
    }

        .vs-button-secondary.vs-button-border .vs-button--text.isActive, .vs-button-secondary.vs-button-flat .vs-button--text.isActive {
            color: #fff !important
        }

        .vs-button-secondary.vs-button-border:hover, .vs-button-secondary.vs-button-flat:hover {
            background: rgba(var(--vs-secondary), .08) !important
        }

        .vs-button-secondary.vs-button-border .vs-button-backgroundx, .vs-button-secondary.vs-button-flat .vs-button-backgroundx {
            background: rgba(var(--vs-secondary), 1);
            -webkit-box-shadow: inset 0 0 60px 0 rgba(var(--vs-secondary), 1);
            box-shadow: inset 0 0 60px 0 rgba(var(--vs-secondary), 1)
        }

    .vs-button-secondary.vs-button-flat {
        border: none !important
    }

    .vs-button-secondary.vs-button-line {
        color: rgba(var(--vs-secondary), 1);
        border-color: rgba(var(--vs-secondary), .2)
    }

        .vs-button-secondary.vs-button-line .vs-button-linex {
            background: rgba(var(--vs-secondary), 1)
        }

    .vs-button-secondary.vs-button-gradient {
        background: #640064;
        background-image: linear-gradient(30deg, rgba(var(--vs-secondary), 1), rgba(var(--vs-secondary), .5)) !important;
        text-shadow: 1px 2px 4px rgba(0,0,0,.3)
    }

    .vs-button-secondary.vs-button-relief {
        background: rgba(var(--vs-secondary), 1);
        -webkit-box-shadow: 0 -3px 0 0 rgba(0,0,0,.2) inset;
        box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.2)
    }

    .vs-button-danger.vs-button-filled {
        background: rgba(var(--vs-danger), 1) !important
    }

        .vs-button-danger.vs-button-filled:hover {
            -webkit-box-shadow: 0 8px 25px -8px rgba(var(--vs-danger), 1);
            box-shadow: 0 8px 25px -8px rgba(var(--vs-danger), 1)
        }

    .vs-button-danger.vs-button-border, .vs-button-danger.vs-button-flat {
        border: 1px solid rgba(var(--vs-danger), 1);
        background: 0 0 !important;
        color: rgba(var(--vs-danger), 1)
    }

        .vs-button-danger.vs-button-border .vs-button--text.isActive, .vs-button-danger.vs-button-flat .vs-button--text.isActive {
            color: #fff !important
        }

        .vs-button-danger.vs-button-border:hover, .vs-button-danger.vs-button-flat:hover {
            background: rgba(var(--vs-danger), .08) !important
        }

        .vs-button-danger.vs-button-border .vs-button-backgroundx, .vs-button-danger.vs-button-flat .vs-button-backgroundx {
            background: rgba(var(--vs-danger), 1);
            -webkit-box-shadow: inset 0 0 60px 0 rgba(var(--vs-danger), 1);
            box-shadow: inset 0 0 60px 0 rgba(var(--vs-danger), 1)
        }

    .vs-button-danger.vs-button-flat {
        border: none !important
    }

    .vs-button-danger.vs-button-line {
        color: rgba(var(--vs-danger), 1);
        border-color: rgba(var(--vs-danger), .2)
    }

        .vs-button-danger.vs-button-line .vs-button-linex {
            background: rgba(var(--vs-danger), 1)
        }

    .vs-button-danger.vs-button-gradient {
        background: #640064;
        background-image: linear-gradient(30deg, rgba(var(--vs-danger), 1), rgba(var(--vs-danger), .5)) !important;
        text-shadow: 1px 2px 4px rgba(0,0,0,.3)
    }

    .vs-button-danger.vs-button-relief {
        background: rgba(var(--vs-danger), 1);
        -webkit-box-shadow: 0 -3px 0 0 rgba(0,0,0,.2) inset;
        box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.2)
    }

    .vs-button-success.vs-button-filled {
        background: rgba(var(--vs-success), 1) !important
    }

        .vs-button-success.vs-button-filled:hover {
            -webkit-box-shadow: 0 8px 25px -8px rgba(var(--vs-success), 1);
            box-shadow: 0 8px 25px -8px rgba(var(--vs-success), 1)
        }

    .vs-button-success.vs-button-border, .vs-button-success.vs-button-flat {
        border: 1px solid rgba(var(--vs-success), 1);
        background: 0 0 !important;
        color: rgba(var(--vs-success), 1)
    }

        .vs-button-success.vs-button-border .vs-button--text.isActive, .vs-button-success.vs-button-flat .vs-button--text.isActive {
            color: #fff !important
        }

        .vs-button-success.vs-button-border:hover, .vs-button-success.vs-button-flat:hover {
            background: rgba(var(--vs-success), .08) !important
        }

        .vs-button-success.vs-button-border .vs-button-backgroundx, .vs-button-success.vs-button-flat .vs-button-backgroundx {
            background: rgba(var(--vs-success), 1);
            -webkit-box-shadow: inset 0 0 60px 0 rgba(var(--vs-success), 1);
            box-shadow: inset 0 0 60px 0 rgba(var(--vs-success), 1)
        }

    .vs-button-success.vs-button-flat {
        border: none !important
    }

    .vs-button-success.vs-button-line {
        color: rgba(var(--vs-success), 1);
        border-color: rgba(var(--vs-success), .2)
    }

        .vs-button-success.vs-button-line .vs-button-linex {
            background: rgba(var(--vs-success), 1)
        }

    .vs-button-success.vs-button-gradient {
        background: #0064fa;
        background-image: linear-gradient(30deg, rgba(var(--vs-success), 1), rgba(var(--vs-success), .6)) !important;
        text-shadow: 1px 2px 4px rgba(0,0,0,.3)
    }

    .vs-button-success.vs-button-relief {
        background: rgba(var(--vs-success), 1);
        -webkit-box-shadow: 0 -3px 0 0 rgba(0,0,0,.2) inset;
        box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.2)
    }

    .vs-button-warning.vs-button-filled {
        background: rgba(var(--vs-warning), 1) !important
    }

        .vs-button-warning.vs-button-filled:hover {
            -webkit-box-shadow: 0 8px 25px -8px rgba(var(--vs-warning), 1);
            box-shadow: 0 8px 25px -8px rgba(var(--vs-warning), 1)
        }

    .vs-button-warning.vs-button-border, .vs-button-warning.vs-button-flat {
        border: 1px solid rgba(var(--vs-warning), 1);
        background: 0 0 !important;
        color: rgba(var(--vs-warning), 1)
    }

        .vs-button-warning.vs-button-border .vs-button--text.isActive, .vs-button-warning.vs-button-flat .vs-button--text.isActive {
            color: #fff !important
        }

        .vs-button-warning.vs-button-border:hover, .vs-button-warning.vs-button-flat:hover {
            background: rgba(var(--vs-warning), .08) !important
        }

        .vs-button-warning.vs-button-border .vs-button-backgroundx, .vs-button-warning.vs-button-flat .vs-button-backgroundx {
            background: rgba(var(--vs-warning), 1);
            -webkit-box-shadow: inset 0 0 60px 0 rgba(var(--vs-warning), 1);
            box-shadow: inset 0 0 60px 0 rgba(var(--vs-warning), 1)
        }

    .vs-button-warning.vs-button-flat {
        border: none !important
    }

    .vs-button-warning.vs-button-line {
        color: rgba(var(--vs-warning), 1);
        border-color: rgba(var(--vs-warning), .2)
    }

        .vs-button-warning.vs-button-line .vs-button-linex {
            background: rgba(var(--vs-warning), 1)
        }

    .vs-button-warning.vs-button-gradient {
        background: #fafafa;
        background-image: linear-gradient(30deg, rgba(var(--vs-warning), 1), rgba(var(--vs-warning), .5)) !important;
        text-shadow: 1px 2px 4px rgba(0,0,0,.3)
    }

    .vs-button-warning.vs-button-relief {
        background: rgba(var(--vs-warning), 1);
        -webkit-box-shadow: 0 -3px 0 0 rgba(0,0,0,.2) inset;
        box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.2)
    }

    .vs-button-dark.vs-button-filled {
        background: rgba(var(--vs-dark), 1) !important
    }

        .vs-button-dark.vs-button-filled:hover {
            -webkit-box-shadow: 0 8px 25px -8px rgba(var(--vs-dark), 1);
            box-shadow: 0 8px 25px -8px rgba(var(--vs-dark), 1)
        }

    .vs-button-dark.vs-button-border, .vs-button-dark.vs-button-flat {
        border: 1px solid rgba(var(--vs-dark), 1);
        background: 0 0 !important;
        color: rgba(var(--vs-dark), 1)
    }

        .vs-button-dark.vs-button-border .vs-button--text.isActive, .vs-button-dark.vs-button-flat .vs-button--text.isActive {
            color: #fff !important
        }

        .vs-button-dark.vs-button-border:hover, .vs-button-dark.vs-button-flat:hover {
            background: rgba(var(--vs-dark), .08) !important
        }

        .vs-button-dark.vs-button-border .vs-button-backgroundx, .vs-button-dark.vs-button-flat .vs-button-backgroundx {
            background: rgba(var(--vs-dark), 1);
            -webkit-box-shadow: inset 0 0 60px 0 rgba(var(--vs-dark), 1);
            box-shadow: inset 0 0 60px 0 rgba(var(--vs-dark), 1)
        }

    .vs-button-dark.vs-button-flat {
        border: none !important
    }

    .vs-button-dark.vs-button-line {
        color: rgba(var(--vs-dark), 1);
        border-color: rgba(var(--vs-dark), .2)
    }

        .vs-button-dark.vs-button-line .vs-button-linex {
            background: rgba(var(--vs-dark), 1)
        }

    .vs-button-dark.vs-button-gradient {
        background: #640064;
        background-image: linear-gradient(30deg, rgba(var(--vs-dark), 1), rgba(var(--vs-dark), .5)) !important;
        text-shadow: 1px 2px 4px rgba(0,0,0,.3)
    }

    .vs-button-dark.vs-button-relief {
        background: rgba(var(--vs-dark), 1);
        -webkit-box-shadow: 0 -3px 0 0 hsla(0,0%,100%,.1) inset;
        box-shadow: inset 0 -3px 0 0 hsla(0,0%,100%,.1)
    }

    .vs-button-light.vs-button-filled {
        background: rgba(var(--vs-light), 1) !important
    }

        .vs-button-light.vs-button-filled:hover {
            -webkit-box-shadow: 0 8px 25px -8px rgba(var(--vs-light), 1);
            box-shadow: 0 8px 25px -8px rgba(var(--vs-light), 1)
        }

    .vs-button-light.vs-button-border, .vs-button-light.vs-button-flat {
        border: 1px solid rgba(var(--vs-light), 1);
        background: 0 0 !important;
        color: rgba(var(--vs-light), 1)
    }

        .vs-button-light.vs-button-border .vs-button--text.isActive, .vs-button-light.vs-button-flat .vs-button--text.isActive {
            color: #fff !important
        }

        .vs-button-light.vs-button-border:hover, .vs-button-light.vs-button-flat:hover {
            background: rgba(var(--vs-light), .08) !important
        }

        .vs-button-light.vs-button-border .vs-button-backgroundx, .vs-button-light.vs-button-flat .vs-button-backgroundx {
            background: rgba(var(--vs-light), 1);
            -webkit-box-shadow: inset 0 0 60px 0 rgba(var(--vs-light), 1);
            box-shadow: inset 0 0 60px 0 rgba(var(--vs-light), 1)
        }

    .vs-button-light.vs-button-flat {
        border: none !important
    }

    .vs-button-light.vs-button-line {
        color: rgba(var(--vs-light), 1);
        border-color: rgba(var(--vs-light), .2)
    }

        .vs-button-light.vs-button-line .vs-button-linex {
            background: rgba(var(--vs-light), 1)
        }

    .vs-button-light.vs-button-gradient {
        background: #640064;
        background-image: linear-gradient(30deg, rgba(var(--vs-light), 1), rgba(var(--vs-light), .5)) !important;
        text-shadow: 1px 2px 4px rgba(0,0,0,.3)
    }

    .vs-button-light.vs-button-relief {
        background: rgba(var(--vs-light), 1);
        -webkit-box-shadow: 0 -3px 0 0 rgba(0,0,0,.2) inset;
        box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.2)
    }

    .con-vs-card {
        width: 100%;
        height: auto;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 20px;
        display: block;
        -webkit-box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
        box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

        .con-vs-card.withHover {
            cursor: pointer
        }

            .con-vs-card.withHover:hover {
                -webkit-transform: translateY(4px);
                transform: translateY(4px);
                -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
                box-shadow: 0 0 5px 0 rgba(0,0,0,.1)
            }

                .con-vs-card.withHover:hover img {
                    -webkit-transform: scale(1.1);
                    transform: scale(1.1)
                }

        .con-vs-card.fixedHeight {
            height: 100%;
            position: relative
        }

    .vs-card--header {
        padding: 10px;
        -webkit-box-shadow: 0 10px 15px -10px rgba(0,0,0,.05);
        box-shadow: 0 10px 15px -10px rgba(0,0,0,.05)
    }

        .vs-card--header h3 {
            padding: 0
        }

    .vs-card--footer {
        position: relative;
        padding: 10px;
        -webkit-transform: translateY(40%);
        transform: translateY(40%);
        margin-top: -5%;
        padding-top: 0
    }

        .vs-card--footer.fixedHeight {
            position: absolute;
            bottom: 0;
            right: 0;
            margin-top: 0;
            -webkit-transform: translate(0);
            transform: translate(0)
        }

    .vs-card--content {
        padding: 10px;
        font-size: .8rem;
        margin-bottom: 15px
    }

        .vs-card--content.fixedHeight {
            margin-bottom: 20px
        }

    .vs-card--media {
        width: 100%;
        overflow: hidden
    }

        .vs-card--media img {
            width: 100%;
            -webkit-transition: all .25s ease;
            transition: all .25s ease;
            display: block
        }

    .con-vs-checkbox {
        position: relative;
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: 5px;
        margin-right: 5px
    }

        .con-vs-checkbox.vs-checkbox-small .vs-checkbox {
            width: 15px;
            height: 15px
        }

            .con-vs-checkbox.vs-checkbox-small .vs-checkbox .vs-icon {
                font-size: .7rem
            }

        .con-vs-checkbox.vs-checkbox-large .vs-checkbox {
            width: 24px;
            height: 24px
        }

    .vs-checkbox--input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 200;
        cursor: pointer;
        background: #55d775
    }

        .vs-checkbox--input:disabled {
            cursor: default;
            pointer-events: none
        }

            .vs-checkbox--input:disabled + .vs-checkbox {
                opacity: .5;
                cursor: default;
                pointer-events: none
            }

                .vs-checkbox--input:disabled + .vs-checkbox .vs-checkbox--check {
                    cursor: default;
                    pointer-events: none
                }

        .vs-checkbox--input:active:checked + .vs-checkbox .vs-checkbox--check {
            -webkit-transform: translate(3px);
            transform: translate(3px)
        }

        .vs-checkbox--input:active:checked + .vs-checkbox .vs-icon {
            -webkit-transform: translate(6px);
            transform: translate(6px)
        }

        .vs-checkbox--input:checked + .vs-checkbox {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

            .vs-checkbox--input:checked + .vs-checkbox .vs-checkbox--check, .vs-checkbox--input:checked + .vs-checkbox .vs-icon {
                -webkit-transform: translate(0);
                transform: translate(0)
            }

            .vs-checkbox--input:checked + .vs-checkbox .vs-icon {
                opacity: 1;
                color: #fff;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex
            }

            .vs-checkbox, .vs-checkbox--input:checked + .vs-checkbox .vs-icon {
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center
            }

    .vs-checkbox {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        cursor: pointer;
        position: relative;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        overflow: hidden;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    .vuesax-app-is-rtl .vs-checkbox {
        margin-left: 5px
    }

    .vuesax-app-is-ltr .vs-checkbox {
        margin-right: 5px
    }

    .vs-checkbox--check {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        -webkit-transform: translate(100%);
        transform: translate(100%);
        -webkit-transform-origin: right;
        transform-origin: right;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        z-index: 10
    }

    .vs-checkbox--icon {
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out;
        z-index: 100;
        font-size: 1.125em;
        opacity: 0;
        -webkit-transform: translate(30px);
        transform: translate(30px);
        -webkit-transform-origin: center;
        transform-origin: center
    }

    .vs-checkbox-primary .vs-checkbox {
        border: 2px solid #b4b4b4
    }

    .vs-checkbox-primary input:checked + .vs-checkbox {
        border: 2px solid rgba(var(--vs-primary), 1) !important;
        background: rgba(var(--vs-primary), 1)
    }

    .vs-checkbox-secondary .vs-checkbox {
        border: 2px solid #b4b4b4
    }

    .vs-checkbox-secondary input:checked + .vs-checkbox {
        border: 2px solid rgba(var(--vs-secondary), 1) !important;
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-checkbox-danger .vs-checkbox {
        border: 2px solid #b4b4b4
    }

    .vs-checkbox-danger input:checked + .vs-checkbox {
        border: 2px solid rgba(var(--vs-danger), 1) !important;
        background: rgba(var(--vs-danger), 1)
    }

    .vs-checkbox-success .vs-checkbox {
        border: 2px solid #b4b4b4
    }

    .vs-checkbox-success input:checked + .vs-checkbox {
        border: 2px solid rgba(var(--vs-success), 1) !important;
        background: rgba(var(--vs-success), 1)
    }

    .vs-checkbox-warning .vs-checkbox {
        border: 2px solid #b4b4b4
    }

    .vs-checkbox-warning input:checked + .vs-checkbox {
        border: 2px solid rgba(var(--vs-warning), 1) !important;
        background: rgba(var(--vs-warning), 1)
    }

    .vs-checkbox-dark .vs-checkbox {
        border: 2px solid #b4b4b4
    }

    .vs-checkbox-dark input:checked + .vs-checkbox {
        border: 2px solid rgba(var(--vs-dark), 1) !important;
        background: rgba(var(--vs-dark), 1)
    }

    .vs-checkbox-light .vs-checkbox {
        border: 2px solid #b4b4b4
    }

    .vs-checkbox-light input:checked + .vs-checkbox {
        border: 2px solid rgba(var(--vs-light), 1) !important;
        background: rgba(var(--vs-light), 1)
    }

    .con-vs-chip {
        background: #f0f0f0;
        border-radius: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: .7rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 3px;
        min-height: 28px;
        color: rgba(0,0,0,.7);
        position: relative
    }

    .vuesax-app-is-rtl .con-vs-chip {
        float: right
    }

    .vuesax-app-is-ltr .con-vs-chip {
        float: left
    }

    .vuesax-app-is-rtl .con-vs-chip {
        margin-left: 2px
    }

    .vuesax-app-is-ltr .con-vs-chip {
        margin-right: 2px
    }

    .vuesax-app-is-rtl .con-vs-chip {
        padding-left: 10px
    }

    .vuesax-app-is-ltr .con-vs-chip {
        padding-right: 10px
    }

    .vuesax-app-is-rtl .con-vs-chip.closable {
        padding-left: 0
    }

    .vuesax-app-is-ltr .con-vs-chip.closable {
        padding-right: 0
    }

    .con-vs-chip.con-color .con-vs-avatar {
        background: hsla(0,0%,100%,.2)
    }

    .con-vs-chip .con-vs-avatar {
        width: 24px;
        height: 24px;
        position: relative;
        display: block;
        margin: 2px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: rgba(0,0,0,.15)
    }

    .vuesax-app-is-rtl .con-vs-chip .con-vs-avatar {
        -webkit-transform: translate(8px);
        transform: translate(8px)
    }

    .vuesax-app-is-ltr .con-vs-chip .con-vs-avatar {
        -webkit-transform: translate(-8px);
        transform: translate(-8px)
    }

    .con-vs-chip .con-vs-avatar .material-icons {
        margin-top: 0;
        font-size: .8rem
    }

    .con-vs-chip.bg-chip-transparent {
        font-weight: 500
    }

    .vs-chip--close {
        width: 20px;
        height: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        border: 0;
        margin: 0 4px;
        cursor: pointer;
        background: rgba(0,0,0,.15);
        color: #fff;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

        .vs-chip--close:hover {
            background: 255, 71, 87
        }

        .vs-chip--close i {
            font-size: .9rem
        }

    .vs-chip--text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .vuesax-app-is-rtl .vs-chip--text {
        margin-right: 10px
    }

    .vuesax-app-is-ltr .vs-chip--text {
        margin-left: 10px
    }

    .vs-chip-primary:not(.bg-chip-transparent) {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-chip-primary.bg-chip-transparent {
        background: rgba(var(--vs-primary), .15);
        color: rgba(var(--vs-primary), 1)
    }

    .vs-chip-secondary:not(.bg-chip-transparent) {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-chip-secondary.bg-chip-transparent {
        background: rgba(var(--vs-secondary), .15);
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-chip-danger:not(.bg-chip-transparent) {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-chip-danger.bg-chip-transparent {
        background: rgba(var(--vs-danger), .15);
        color: rgba(var(--vs-danger), 1)
    }

    .vs-chip-success:not(.bg-chip-transparent) {
        background: rgba(var(--vs-success), 1)
    }

    .vs-chip-success.bg-chip-transparent {
        background: rgba(var(--vs-success), .15);
        color: rgba(var(--vs-success), 1)
    }

    .vs-chip-warning:not(.bg-chip-transparent) {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-chip-warning.bg-chip-transparent {
        background: rgba(var(--vs-warning), .15);
        color: rgba(var(--vs-warning), 1)
    }

    .vs-chip-dark:not(.bg-chip-transparent) {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-chip-dark.bg-chip-transparent {
        background: rgba(var(--vs-dark), .15);
        color: rgba(var(--vs-dark), 1)
    }

    .vs-chip-light:not(.bg-chip-transparent) {
        background: rgba(var(--vs-light), 1)
    }

    .vs-chip-light.bg-chip-transparent {
        background: rgba(var(--vs-light), .15);
        color: rgba(var(--vs-light), 1)
    }

    .con-chips {
        width: 100%;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-shadow: 0 2px 15px 0 rgba(0,0,0,.1);
        box-shadow: 0 2px 15px 0 rgba(0,0,0,.1);
        border-radius: 5px;
        overflow: hidden;
        padding: 5px
    }

        .con-chips .con-vs-chip {
            margin-top: 0;
            margin-bottom: 0
        }

    .con-chips--input {
        display: inline-block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        color: inherit;
        padding: 9px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 80px;
        border: 0
    }

    .vuesax-app-is-rtl .con-chips--input {
        margin-right: 2px
    }

    .vuesax-app-is-ltr .con-chips--input {
        margin-left: 2px
    }

    .con-chips--remove-all {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 5px;
        cursor: pointer;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .vuesax-app-is-rtl .con-chips--remove-all {
        left: 0
    }

    .vuesax-app-is-ltr .con-chips--remove-all {
        right: 0
    }

    .con-chips--remove-all:hover {
        color: rgba(var(--vs-danger), 1)
    }

    .vuesax-app-is-rtl .no-items .con-chips--input {
        padding-right: 10px !important
    }

    .vuesax-app-is-ltr .no-items .con-chips--input {
        padding-left: 10px !important
    }

    .vs-collapse {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border-radius: 8px;
        padding: 10px
    }

        .vs-collapse.shadow .open-item {
            -webkit-transform: scale(1.01);
            transform: scale(1.01);
            -webkit-box-shadow: 0 2px 15px 0 rgba(0,0,0,.05);
            box-shadow: 0 2px 15px 0 rgba(0,0,0,.05);
            margin-top: 5px;
            border-bottom: 0 solid transparent;
            margin-bottom: 10px;
            border-radius: 6px
        }

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

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

    .vs-collapse.shadow .open-item .con-content-item {
        opacity: 1
    }

    .vs-collapse.margin .vs-collapse-item {
        margin-top: 10px;
        margin-bottom: 10px;
        -webkit-box-shadow: 0 2px 15px 0 rgba(0,0,0,.05);
        box-shadow: 0 2px 15px 0 rgba(0,0,0,.05);
        border-radius: 5px;
        border-bottom: 0 solid transparent
    }

    .vs-collapse.margin .open-item .con-content-item {
        opacity: 1
    }

    .vuesax-app-is-rtl .vs-collapse.margin .open-item .vs-collapse-item--icon-header {
        -webkit-transform: translate(50%, -50%) rotate(180deg);
        transform: translate(50%, -50%) rotate(180deg)
    }

    .vuesax-app-is-ltr .vs-collapse.margin .open-item .vs-collapse-item--icon-header {
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg)
    }

    .vs-collapse.border {
        border: 1px solid rgba(0,0,0,.1);
        padding: 0
    }

        .vs-collapse.border .vs-collapse-item {
            border-bottom: 1px solid rgba(0,0,0,.1)
        }

        .vs-collapse.border .open-item .con-content-item {
            opacity: 1
        }

    .vuesax-app-is-rtl .vs-collapse.border .open-item .vs-collapse-item--icon-header {
        -webkit-transform: translate(50%, -50%) rotate(180deg);
        transform: translate(50%, -50%) rotate(180deg)
    }

    .vuesax-app-is-ltr .vs-collapse.border .open-item .vs-collapse-item--icon-header {
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg)
    }

    .vs-collapse.default .open-item .con-content--item {
        opacity: 1
    }

    .vuesax-app-is-rtl .vs-collapse.default .open-item .vs-collapse-item--icon-header {
        -webkit-transform: translate(50%, -50%) rotate(180deg);
        transform: translate(50%, -50%) rotate(180deg)
    }

    .vuesax-app-is-ltr .vs-collapse.default .open-item .vs-collapse-item--icon-header {
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg)
    }

    .vs-collapse-item {
        border-bottom: 1px solid rgba(0,0,0,.04);
        cursor: pointer;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

        .vs-collapse-item.open-item .con-content--item {
            opacity: 1
        }

        .vs-collapse-item.disabledx {
            opacity: .5;
            cursor: default;
            pointer-events: none;
            z-index: 999
        }

        .vs-collapse-item:last-child {
            border-bottom: 0 solid transparent !important
        }

    .vs-collapse-item--header {
        display: block;
        padding: 10px;
        position: relative
    }

    .vs-collapse-item--header, .vs-collapse-item--icon-header {
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .vs-collapse-item--icon-header {
        position: absolute;
        top: 50%;
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 5px
    }

    .vuesax-app-is-rtl .vs-collapse-item--icon-header {
        left: 0
    }

    .vuesax-app-is-ltr .vs-collapse-item--icon-header {
        right: 0
    }

    .vuesax-app-is-rtl .vs-collapse-item--icon-header {
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%)
    }

    .vuesax-app-is-ltr .vs-collapse-item--icon-header {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .vs-collapse-item--content {
        overflow: hidden;
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

    .con-content--item {
        padding: 10px;
        padding-top: 0;
        font-size: .85rem;
        opacity: .2;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .dialog-t-enter, .dialog-t-leave-to {
        opacity: 0 !important
    }

        .dialog-t-enter .vs-dialog, .dialog-t-leave-to .vs-dialog {
            -webkit-transform: scale(.9) !important;
            transform: scale(.9) !important
        }

        .dialog-t-enter .vs-dialog-cancel, .dialog-t-leave-to .vs-dialog-cancel {
            border-radius: 50% !important
        }

    .vuesax-app-is-rtl .dialog-t-enter .vs-dialog-cancel, .vuesax-app-is-rtl .dialog-t-leave-to .vs-dialog-cancel {
        -webkit-transform: translate(-8px, -8px) scale(.5) !important;
        transform: translate(-8px, -8px) scale(.5) !important
    }

    .vuesax-app-is-ltr .dialog-t-enter .vs-dialog-cancel, .vuesax-app-is-ltr .dialog-t-leave-to .vs-dialog-cancel {
        -webkit-transform: translate(8px, -8px) scale(.5) !important;
        transform: translate(8px, -8px) scale(.5) !important
    }

    .dialog-t-enter .vs-dialog-text, .dialog-t-leave-to .vs-dialog-text {
        opacity: 0
    }

    .vuesax-app-is-rtl .dialog-t-enter .vs-dialog-text, .vuesax-app-is-rtl .dialog-t-leave-to .vs-dialog-text {
        -webkit-transform: translate(15px) !important;
        transform: translate(15px) !important
    }

    .vuesax-app-is-ltr .dialog-t-enter .vs-dialog-text, .vuesax-app-is-ltr .dialog-t-leave-to .vs-dialog-text {
        -webkit-transform: translate(-15px) !important;
        transform: translate(-15px) !important
    }

    .dialog-t-enter .after, .dialog-t-leave-to .after {
        height: 0% !important
    }

    .dialog-t-enter header h3, .dialog-t-leave-to header h3 {
        opacity: 0
    }

    .vuesax-app-is-rtl .dialog-t-enter header h3, .vuesax-app-is-rtl .dialog-t-leave-to header h3 {
        -webkit-transform: translate(50px) !important;
        transform: translate(50px) !important
    }

    .vuesax-app-is-ltr .dialog-t-enter header h3, .vuesax-app-is-ltr .dialog-t-leave-to header h3 {
        -webkit-transform: translate(-50px) !important;
        transform: translate(-50px) !important
    }

    .dialog-t-enter footer button, .dialog-t-leave-to footer button {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
        opacity: 0
    }

    .con-vs-dialog {
        -webkit-transition: all .2s;
        transition: all .2s;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 30000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        opacity: 1
    }

    .vuesax-app-is-rtl .con-vs-dialog {
        right: 0
    }

    .vuesax-app-is-ltr .con-vs-dialog {
        left: 0
    }

    .con-vs-dialog .vs-dialog-dark {
        width: 100%;
        background: rgba(0,0,0,.4);
        position: absolute;
        top: 0;
        height: 100%;
        z-index: 10;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        opacity: 1
    }

    .vuesax-app-is-rtl .con-vs-dialog .vs-dialog-dark {
        right: 0
    }

    .vuesax-app-is-ltr .con-vs-dialog .vs-dialog-dark {
        left: 0
    }

    .con-vs-dialog .vs-dialog {
        -webkit-transition: all .2s;
        transition: all .2s;
        z-index: 100;
        width: calc(100% - 20px);
        margin: 10px;
        max-width: 400px;
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        background: #fff;
        -webkit-animation: rebound .3s;
        animation: rebound .3s
    }

        .con-vs-dialog .vs-dialog.locked {
            -webkit-transform: scale(1.02);
            transform: scale(1.02)
        }

        .con-vs-dialog .vs-dialog .vs-dialog-text {
            padding: 10px;
            font-size: .875em;
            -webkit-transition: all .23s ease .1s;
            transition: all .23s ease .1s
        }

        .con-vs-dialog .vs-dialog header {
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            background: #f8f8f8;
            border-radius: 5px 5px;
            position: relative
        }

            .con-vs-dialog .vs-dialog header .con-title-after {
                width: 100%;
                position: relative;
                overflow: hidden;
                border-radius: 5px 5px 0 0
            }

            .con-vs-dialog .vs-dialog header span.after {
                -webkit-transition: all .23s ease .1s;
                transition: all .23s ease .1s;
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                width: 3px;
                height: 100%;
                display: block
            }

    .vuesax-app-is-rtl .con-vs-dialog .vs-dialog header span.after {
        right: 0
    }

    .vuesax-app-is-ltr .con-vs-dialog .vs-dialog header span.after {
        left: 0
    }

    .con-vs-dialog .vs-dialog header h3 {
        -webkit-transition: all .23s ease .1s;
        transition: all .23s ease .1s;
        padding: 8px;
        font-size: 1.2rem;
        margin: 0
    }

    .vuesax-app-is-rtl .con-vs-dialog .vs-dialog header h3 {
        padding-right: 12px
    }

    .vuesax-app-is-ltr .con-vs-dialog .vs-dialog header h3 {
        padding-left: 12px
    }

    .con-vs-dialog .vs-dialog header .vs-dialog-cancel {
        -webkit-transition: all .23s ease .1s;
        transition: all .23s ease .1s;
        position: relative;
        padding: 8px;
        cursor: pointer;
        -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        border-radius: 5px;
        background: #fff;
        font-size: 1.25em
    }

    .vuesax-app-is-rtl .con-vs-dialog .vs-dialog header .vs-dialog-cancel {
        -webkit-transform: translate(-8px, -8px);
        transform: translate(-8px, -8px)
    }

    .vuesax-app-is-ltr .con-vs-dialog .vs-dialog header .vs-dialog-cancel {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px)
    }

    .con-vs-dialog .vs-dialog header .vs-dialog-cancel:hover {
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.1);
        box-shadow: 0 0 0 0 rgba(0,0,0,.1)
    }

    .vuesax-app-is-rtl .con-vs-dialog .vs-dialog header .vs-dialog-cancel:hover {
        -webkit-transform: translate(-5px, -5px);
        transform: translate(-5px, -5px)
    }

    .vuesax-app-is-ltr .con-vs-dialog .vs-dialog header .vs-dialog-cancel:hover {
        -webkit-transform: translate(5px, -5px);
        transform: translate(5px, -5px)
    }

    .con-vs-dialog .vs-dialog footer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        position: relative
    }

    .vuesax-app-is-rtl .con-vs-dialog .vs-dialog footer button {
        margin-right: 0
    }

    .vuesax-app-is-ltr .con-vs-dialog .vs-dialog footer button {
        margin-left: 0
    }

    .con-vs-dialog .vs-dialog footer:before {
        content: "";
        top: 0;
        left: 0;
        position: absolute;
        width: 90%;
        height: 1px;
        background: rgba(0,0,0,.05)
    }

    .vuesax-app-is-rtl .con-vs-dialog .vs-dialog footer:before {
        margin-right: 5%
    }

    .vuesax-app-is-ltr .con-vs-dialog .vs-dialog footer:before {
        margin-left: 5%
    }

    .vs-dialog-primary .vs-dialog .vs-dialog-header {
        color: rgba(var(--vs-primary), 1)
    }

    .vs-dialog-primary .vs-dialog .after {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-dialog-secondary .vs-dialog .vs-dialog-header {
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-dialog-secondary .vs-dialog .after {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-dialog-danger .vs-dialog .vs-dialog-header {
        color: rgba(var(--vs-danger), 1)
    }

    .vs-dialog-danger .vs-dialog .after {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-dialog-success .vs-dialog .vs-dialog-header {
        color: rgba(var(--vs-success), 1)
    }

    .vs-dialog-success .vs-dialog .after {
        background: rgba(var(--vs-success), 1)
    }

    .vs-dialog-warning .vs-dialog .vs-dialog-header {
        color: rgba(var(--vs-warning), 1)
    }

    .vs-dialog-warning .vs-dialog .after {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-dialog-dark .vs-dialog .vs-dialog-header {
        color: rgba(var(--vs-dark), 1)
    }

    .vs-dialog-dark .vs-dialog .after {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-dialog-light .vs-dialog .vs-dialog-header {
        color: rgba(var(--vs-light), 1)
    }

    .vs-dialog-light .vs-dialog .after {
        background: rgba(var(--vs-light), 1)
    }

    .vs-divider {
        width: 100%;
        position: relative;
        display: block;
        margin: 15px 0;
        clear: both;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .vs-divider .after, .vs-divider .before {
            position: relative;
            display: block;
            width: 100%
        }

    .vs-divider--text {
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: relative;
        white-space: nowrap;
        background: #fff;
        padding-left: 12px;
        padding-right: 12px;
        font-size: .9375em
    }

    .vs-divider--icon {
        font-size: 1.25em
    }

    .vs-divider-border-primary {
        border-top-color: rgba(var(--vs-primary), 1)
    }

    .vs-divider-text-primary {
        color: rgba(var(--vs-primary), 1)
    }

    .vs-divider-background-primary {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-divider-border-secondary {
        border-top-color: rgba(var(--vs-secondary), 1)
    }

    .vs-divider-text-secondary {
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-divider-background-secondary {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-divider-border-danger {
        border-top-color: rgba(var(--vs-danger), 1)
    }

    .vs-divider-text-danger {
        color: rgba(var(--vs-danger), 1)
    }

    .vs-divider-background-danger {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-divider-border-success {
        border-top-color: rgba(var(--vs-success), 1)
    }

    .vs-divider-text-success {
        color: rgba(var(--vs-success), 1)
    }

    .vs-divider-background-success {
        background: rgba(var(--vs-success), 1)
    }

    .vs-divider-border-warning {
        border-top-color: rgba(var(--vs-warning), 1)
    }

    .vs-divider-text-warning {
        color: rgba(var(--vs-warning), 1)
    }

    .vs-divider-background-warning {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-divider-border-dark {
        border-top-color: rgba(var(--vs-dark), 1)
    }

    .vs-divider-text-dark {
        color: rgba(var(--vs-dark), 1)
    }

    .vs-divider-background-dark {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-divider-border-light {
        border-top-color: rgba(var(--vs-light), 1)
    }

    .vs-divider-text-light {
        color: rgba(var(--vs-light), 1)
    }

    .vs-divider-background-light {
        background: rgba(var(--vs-light), 1)
    }

    .dropdown-group-enter-active, .dropdown-group-leave-active {
        -webkit-transition: opacity .25s;
        transition: opacity .25s
    }

    .dropdown-group-enter, .dropdown-group-leave-to {
        opacity: 0
    }

    .vs-con-dropdown {
        position: relative;
        display: inline-block;
        border: 0;
        background: 0 0
    }

        .vs-con-dropdown * {
            pointer-events: none
        }

        .vs-con-dropdown a {
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important
        }

        .vs-con-dropdown:active {
            opacity: 1 !important
        }

    .vuesax-app-is-rtl .vs-con-dropdown .a-icon {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .vs-dropdown--group {
        position: relative;
        list-style: none;
        width: calc(100% - 6px);
        margin-left: 3px;
        width: auto;
        display: block;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

        .vs-dropdown--group.marginIcon {
            padding-right: 25px
        }

            .vs-dropdown--group.marginIcon:hover .con-dropdown--group {
                border-left: 1px solid rgba(0,0,0,.1)
            }

            .vs-dropdown--group.marginIcon:hover > .icon-group {
                -webkit-transform: translateY(-50%) rotate(-180deg);
                transform: translateY(-50%) rotate(-180deg);
                opacity: 0
            }

    .vs-dropdown--group-label {
        font-size: .9375em;
        font-weight: 400;
        pointer-events: none
    }

    .vs-dropdown--group-icon {
        position: absolute;
        right: 4px;
        font-size: 1.125em;
        top: 50%;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .con-dropdown--group-con-ul {
        padding-left: 3px;
        position: relative;
        right: 0;
        top: 0;
        min-width: 130px;
        width: auto;
        z-index: 1000;
        background: inherit;
        overflow: hidden;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        border-left: 1px solid rgba(0,0,0,.1)
    }

    .con-dropdown--group-ul {
        padding-top: 5px;
        padding-left: 0;
        position: relative;
        background: #fff;
        border-radius: 5px
    }

    .no-cascading {
        font-weight: 700;
        border-top: 1px solid rgba(0,0,0,.05);
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 5px !important;
        margin-left: 0
    }

        .no-cascading > h3 {
            padding: 0 10px;
            font-size: .9375em;
            padding-top: 6px;
            padding-bottom: 6px;
            cursor: default
        }

        .no-cascading .con-dropdown--group-no-cascading {
            width: 100% !important;
            font-weight: 700;
            height: auto !important;
            opacity: 1 !important;
            border-left: 1px solid transparent !important
        }

            .no-cascading .con-dropdown--group-no-cascading ul {
                width: 100%;
                -webkit-box-shadow: 0 5px 20px 0 transparent !important;
                box-shadow: 0 5px 20px 0 transparent !important;
                padding-left: 0 !important
            }

    .vs-dropdown--item {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        position: relative;
        z-index: 100;
        border-radius: 5px;
        width: calc(100% - 6px);
        margin: 0 3px;
        list-style: none;
        font-weight: 400 !important;
        font-size: .9375em
    }

    .vuesax-app-is-rtl .vs-dropdown--item {
        text-align: right
    }

    .vuesax-app-is-ltr .vs-dropdown--item {
        text-align: left
    }

    .vs-dropdown--item .vs-dropdown--item-link {
        background: inherit !important;
        color: inherit !important;
        cursor: pointer;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        position: relative;
        display: block;
        color: rgba(0,0,0,.7)
    }

        .vs-dropdown--item .vs-dropdown--item-link.disabled {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: none !important;
            cursor: default;
            opacity: .5 !important;
            color: rgba(0,0,0,.5) !important
        }

    .vs-dropdown--item.divider {
        border-top: 1px solid rgba(0,0,0,.08);
        margin-top: 5px
    }

    .dropdownx-enter, .dropdownx-leave-to {
        opacity: 0;
        -webkit-transform: translate(-100%, 8px) !important;
        transform: translate(-100%, 8px) !important
    }

    .con-vs-dropdown--menu {
        padding-top: 10px;
        position: absolute;
        height: auto;
        width: auto;
        z-index: 40000;
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
        -webkit-transition: opacity .25s, width .3s ease, -webkit-transform .25s;
        transition: opacity .25s, width .3s ease, -webkit-transform .25s;
        transition: opacity .25s, transform .25s, width .3s ease;
        transition: opacity .25s, transform .25s, width .3s ease, -webkit-transform .25s
    }

        .con-vs-dropdown--menu.rightx .vs-dropdown--menu--after {
            left: 30px;
            right: 0
        }

        .con-vs-dropdown--menu:after {
            content: "";
            display: block;
            width: 100%;
            height: 10px;
            position: absolute;
            left: 0;
            top: 100%
        }

    .vs-dropdown--menu {
        background: #fff;
        padding-left: 0 !important;
        border-radius: 5px;
        -webkit-box-shadow: 0 5px 25px 0 rgba(0,0,0,.1);
        box-shadow: 0 5px 25px 0 rgba(0,0,0,.1);
        border: 1px solid rgba(0,0,0,.1);
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative;
        margin: 0
    }

    .vs-dropdown-right--menu--after {
        left: 20px
    }

    .vs-dropdown--menu--after, .vs-dropdown-right--menu--after {
        position: absolute;
        width: 10px;
        height: 10px;
        display: block;
        background: #fff;
        -webkit-transform: rotate(45deg) translate(-7px);
        transform: rotate(45deg) translate(-7px);
        border-top: 1px solid rgba(0,0,0,.1);
        border-left: 1px solid rgba(0,0,0,.1);
        z-index: 10;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    .vs-dropdown--menu--after {
        right: 10px
    }

    .notHeight .vs-dropdown-menu:after {
        top: auto;
        bottom: 0;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-bottom: 1px solid rgba(0,0,0,.1);
        border-right: 1px solid rgba(0,0,0,.1);
        -webkit-transform: rotate(45deg) translate(7px);
        transform: rotate(45deg) translate(7px)
    }

    .vs-dropdown--custom {
        padding: 5px !important;
        padding-top: 8px !important
    }

    .vs-icon {
        color: inherit;
        text-align: center;
        font-size: 1rem
    }

        .vs-icon.large {
            font-size: 3.125rem;
            width: 3.125rem;
            height: 3.125rem
        }

        .vs-icon.medium {
            font-size: 2.31rem;
            width: 2.31rem;
            height: 2.31rem
        }

        .vs-icon.small {
            font-size: 1.5rem;
            width: 1.5rem;
            height: 1.5rem
        }

    .vs-icon-bg {
        width: 1rem;
        height: 1rem
    }

        .vs-icon-bg.bg-large {
            width: 3.125rem;
            height: 3.125rem
        }

        .vs-icon-bg.bg-medium {
            width: 2.31rem;
            height: 2.31rem
        }

        .vs-icon-bg.bg-small {
            width: 1.5rem;
            height: 1.5rem
        }

    .round {
        border-radius: 50%
    }

    .con-vs-icon-bg-primary, .dot-count-primary {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-icon-primary {
        color: rgba(var(--vs-primary), 1)
    }

    .con-vs-icon-bg-secondary, .dot-count-secondary {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-icon-secondary {
        color: rgba(var(--vs-secondary), 1)
    }

    .con-vs-icon-bg-danger, .dot-count-danger {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-icon-danger {
        color: rgba(var(--vs-danger), 1)
    }

    .con-vs-icon-bg-success, .dot-count-success {
        background: rgba(var(--vs-success), 1)
    }

    .vs-icon-success {
        color: rgba(var(--vs-success), 1)
    }

    .con-vs-icon-bg-warning, .dot-count-warning {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-icon-warning {
        color: rgba(var(--vs-warning), 1)
    }

    .con-vs-icon-bg-dark, .dot-count-dark {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-icon-dark {
        color: rgba(var(--vs-dark), 1)
    }

    .con-vs-icon-bg-light, .dot-count-light {
        background: rgba(var(--vs-light), 1)
    }

    .vs-icon-light {
        color: rgba(var(--vs-light), 1)
    }

    .vs-images {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .vs-images.notBorderRadius .con-vs-image, .vs-images.notBorderRadius .vs-image {
            border-radius: 0 !important
        }

        .vs-images.alternating .vs-image:nth-child(5n) {
            width: calc(50% - 4px);
            float: right
        }

        .vs-images.alternating.notMargin .vs-image:nth-child(5n) {
            width: 50%
        }

        .vs-images.notMargin .vs-image {
            margin: 0;
            width: 25%
        }

    .vs-images--ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0;
        padding: 10px;
        width: 100%
    }

    .vs-image {
        width: calc(25% - 4px);
        height: auto;
        list-style: none;
        margin: 2px;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        float: left;
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        cursor: pointer
    }

        .vs-image, .vs-image .con-vs-image {
            border-radius: 10px;
            position: relative
        }

            .vs-image .con-vs-image {
                overflow: hidden;
                width: 100%;
                z-index: 200
            }

            .vs-image .imag-blur {
                position: absolute;
                bottom: 0;
                border-radius: 10px;
                opacity: 0;
                z-index: 100;
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-filter: blur(5px);
                filter: blur(5px)
            }

            .vs-image .imag-blur, .vs-image--img {
                width: 100%;
                -webkit-transition: all .25s ease;
                transition: all .25s ease
            }

    .vs-image--img {
        background-position: 50%;
        padding-bottom: 100%;
        display: block;
        position: relative
    }

    .vs-images-hover-blur .vs-image:hover {
        -webkit-transform: scale(1.04) translateY(-2px);
        transform: scale(1.04) translateY(-2px);
        cursor: pointer;
        z-index: 300
    }

        .vs-images-hover-blur .vs-image:hover .imag-blur {
            opacity: .8;
            -webkit-transform: scale(.9);
            transform: scale(.9);
            -webkit-filter: blur(5px);
            filter: blur(5px);
            bottom: -10px
        }

    .vs-images-hover-zoom .vs-image:hover .vs-image--img {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    .vs-images-hover-default .vs-image:hover {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

        .vs-images-hover-default .vs-image:hover .vs-image--img {
            -webkit-transform: scale(1.3);
            transform: scale(1.3)
        }

    .vs-images-hover-dark .vs-image:hover {
        background: #000;
        border-radius: 20px
    }

        .vs-images-hover-dark .vs-image:hover .vs-image--img {
            opacity: .4;
            border-radius: 20px
        }

    .vs-images-hover-scale .vs-image:hover {
        z-index: 300;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        -webkit-box-shadow: 0 3px 15px 0 rgba(0,0,0,.3);
        box-shadow: 0 3px 15px 0 rgba(0,0,0,.3)
    }

    .vs-images-hover-curtain .vs-image {
        overflow: hidden
    }

        .vs-images-hover-curtain .vs-image:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.5);
            width: 100%;
            height: 100%;
            z-index: 400;
            border-radius: inherit;
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            opacity: 0;
            -webkit-transition: all .25s ease;
            transition: all .25s ease
        }

        .vs-images-hover-curtain .vs-image .vs-image--img {
            -webkit-transform: scale(1.2) translateY(-10px);
            transform: scale(1.2) translateY(-10px)
        }

        .vs-images-hover-curtain .vs-image:hover .vs-image--img {
            -webkit-transform: scale(1.25) translateY(10px);
            transform: scale(1.25) translateY(10px)
        }

        .vs-images-hover-curtain .vs-image:hover:after {
            -webkit-transform: scale(1) translate(0);
            transform: scale(1) translate(0);
            opacity: 1
        }

    @media only screen and (max-width:700px) {
        .vs-image {
            width: calc(33% - 4px)
        }
    }

    @media only screen and (max-width:550px) {
        .vs-image {
            width: calc(50% - 4px)
        }
    }

    @media only screen and (max-width:350px) {
        .vs-image {
            width: calc(100% - 4px)
        }
    }

    .placeholderx-enter, .placeholderx-leave-to {
        opacity: 0
    }

    .vuesax-app-is-rtl .placeholderx-enter, .vuesax-app-is-rtl .placeholderx-leave-to {
        -webkit-transform: translate(-15px) !important;
        transform: translate(-15px) !important
    }

    .vuesax-app-is-ltr .placeholderx-enter, .vuesax-app-is-ltr .placeholderx-leave-to {
        -webkit-transform: translate(15px) !important;
        transform: translate(15px) !important
    }

    .icon-validate-enter, .icon-validate-leave-to {
        opacity: 0;
        -webkit-transform: scale(.5) !important;
        transform: scale(.5) !important
    }

    .vs-con-input-label {
        position: relative;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        width: 200px
    }

        .vs-con-input-label.is-label-placeholder {
            margin-top: 17px
        }

        .vs-con-input-label .vs-con-input {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            position: relative;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

    .vs-input--icon {
        position: absolute;
        z-index: 100;
        font-size: 1.1rem;
        color: rgba(0,0,0,.4);
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: 8px
    }

    .vuesax-app-is-rtl .vs-input--icon {
        right: 5px
    }

    .vuesax-app-is-ltr .vs-input--icon {
        left: 5px
    }

    .vuesax-app-is-rtl .vs-input--icon {
        border-left: 1px solid rgba(0,0,0,.1)
    }

    .vuesax-app-is-ltr .vs-input--icon {
        border-right: 1px solid rgba(0,0,0,.1)
    }

    .vuesax-app-is-rtl .vs-input--icon {
        padding-left: 3px
    }

    .vuesax-app-is-ltr .vs-input--icon {
        padding-right: 3px
    }

    .vs-input--icon.small {
        top: 4px;
        font-size: 1rem
    }

    .vs-input--icon.large {
        top: 14px
    }

    .vuesax-app-is-rtl .vs-input--icon.icon-after {
        right: auto
    }

    .vuesax-app-is-ltr .vs-input--icon.icon-after {
        left: auto
    }

    .vuesax-app-is-rtl .vs-input--icon.icon-after {
        left: 5px
    }

    .vuesax-app-is-ltr .vs-input--icon.icon-after {
        right: 5px
    }

    .vuesax-app-is-rtl .vs-input--icon.icon-after {
        border-right: 1px solid rgba(0,0,0,.1)
    }

    .vuesax-app-is-ltr .vs-input--icon.icon-after {
        border-left: 1px solid rgba(0,0,0,.1)
    }

    .vuesax-app-is-rtl .vs-input--icon.icon-after {
        border-left: 0
    }

    .vuesax-app-is-ltr .vs-input--icon.icon-after {
        border-right: 0
    }

    .vuesax-app-is-rtl .vs-input--icon.icon-after {
        padding-right: 3px
    }

    .vuesax-app-is-ltr .vs-input--icon.icon-after {
        padding-left: 3px
    }

    .vuesax-app-is-rtl .vs-input--icon.icon-after {
        padding-left: 0
    }

    .vuesax-app-is-ltr .vs-input--icon.icon-after {
        padding-right: 0
    }

    .vs-input--icon.icon-no-border {
        border: 0
    }

    .vs-input--placeholder {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        position: absolute;
        border-radius: 5px;
        padding: .4rem;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        font-size: .85rem;
        color: rgba(0,0,0,.4);
        white-space: nowrap;
        cursor: text;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: -1px;
        pointer-events: none
    }

    .vuesax-app-is-rtl .vs-input--placeholder {
        right: 0
    }

    .vuesax-app-is-ltr .vs-input--placeholder {
        left: 0
    }

    .vuesax-app-is-rtl .vs-input--placeholder {
        padding-right: .55rem
    }

    .vuesax-app-is-ltr .vs-input--placeholder {
        padding-left: .55rem
    }

    .vs-input--placeholder.small {
        padding: .2rem
    }

    .vuesax-app-is-rtl .vs-input--placeholder.small {
        padding-right: .55rem
    }

    .vuesax-app-is-ltr .vs-input--placeholder.small {
        padding-left: .55rem
    }

    .vs-input--placeholder.large {
        padding-top: .8rem;
        padding: .7rem
    }

    .vs-input--label {
        font-size: .85rem;
        color: rgba(0,0,0,.7)
    }

    .vuesax-app-is-rtl .vs-input--label {
        padding-right: 5px
    }

    .vuesax-app-is-ltr .vs-input--label {
        padding-left: 5px
    }

    .vs-input--text-validation {
        position: relative;
        font-size: .65rem;
        overflow: hidden;
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

        .vs-input--text-validation .vs-input--text-validation-span {
            padding: 2px 4px;
            padding-bottom: 4px;
            display: block
        }

    .vs-input--icon-validate {
        position: absolute;
        top: 0;
        font-size: 1.1rem;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 4px;
        border-radius: 0 5px 5px 0;
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

    .vuesax-app-is-rtl .vs-input--icon-validate {
        left: 0
    }

    .vuesax-app-is-ltr .vs-input--icon-validate {
        right: 0
    }

    .vs-input--icon-validate.icon-before {
        position: absolute;
        right: auto;
        z-index: 100;
        font-size: 1.1rem;
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: 0
    }

    .vuesax-app-is-rtl .vs-input--icon-validate.icon-before {
        right: 0
    }

    .vuesax-app-is-ltr .vs-input--icon-validate.icon-before {
        left: 0
    }

    .vuesax-app-is-rtl .vs-input--icon-validate.icon-before {
        padding-left: .2rem
    }

    .vuesax-app-is-ltr .vs-input--icon-validate.icon-before {
        padding-right: .2rem
    }

    .vuesax-app-is-rtl .vs-input--icon-validate.icon-before {
        border-left: 1px
    }

    .vuesax-app-is-ltr .vs-input--icon-validate.icon-before {
        border-right: 1px
    }

    .vs-input--input {
        color: inherit;
        position: relative;
        padding: .4rem;
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,.2);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.15);
        box-shadow: 0 0 0 0 rgba(0,0,0,.15);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        width: 100%
    }

        .vs-input--input.small {
            padding: .2rem
        }

    .vuesax-app-is-rtl .vs-input--input.small {
        padding-right: .55rem
    }

    .vuesax-app-is-ltr .vs-input--input.small {
        padding-left: .55rem
    }

    .vs-input--input.small + .vs-placeholder-label-small {
        padding: 0 .4rem
    }

    .vs-input--input.normal {
        padding: .4rem
    }

    .vs-input--input.large {
        padding: .8rem
    }

        .vs-input--input.large + .vs-placeholder-label-large {
            padding: .6rem
        }

    .vs-input--input:focus {
        -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.15);
        box-shadow: 0 3px 10px 0 rgba(0,0,0,.15)
    }

        .vs-input--input.hasValue + .vs-placeholder-label, .vs-input--input:focus + .vs-placeholder-label {
            font-size: .7rem
        }

    .vuesax-app-is-rtl .vs-input--input.hasValue + .vs-placeholder-label, .vuesax-app-is-rtl .vs-input--input:focus + .vs-placeholder-label {
        -webkit-transform: translate(3px, -90%) !important;
        transform: translate(3px, -90%) !important
    }

    .vuesax-app-is-ltr .vs-input--input.hasValue + .vs-placeholder-label, .vuesax-app-is-ltr .vs-input--input:focus + .vs-placeholder-label {
        -webkit-transform: translate(-3px, -90%) !important;
        transform: translate(-3px, -90%) !important
    }

    .vuesax-app-is-rtl .vs-input--input.hasValue + .vs-placeholder-label, .vuesax-app-is-rtl .vs-input--input:focus + .vs-placeholder-label {
        padding-right: .5rem !important
    }

    .vuesax-app-is-ltr .vs-input--input.hasValue + .vs-placeholder-label, .vuesax-app-is-ltr .vs-input--input:focus + .vs-placeholder-label {
        padding-left: .5rem !important
    }

    .vs-input--input.hasValue + .vs-placeholder-label-small, .vs-input--input:focus + .vs-placeholder-label-small {
        font-size: .7rem
    }

    .vuesax-app-is-rtl .vs-input--input.hasValue + .vs-placeholder-label-small, .vuesax-app-is-rtl .vs-input--input:focus + .vs-placeholder-label-small {
        -webkit-transform: translate(3px, -120%) !important;
        transform: translate(3px, -120%) !important
    }

    .vuesax-app-is-ltr .vs-input--input.hasValue + .vs-placeholder-label-small, .vuesax-app-is-ltr .vs-input--input:focus + .vs-placeholder-label-small {
        -webkit-transform: translate(-3px, -120%) !important;
        transform: translate(-3px, -120%) !important
    }

    .vuesax-app-is-rtl .vs-input--input.hasValue + .vs-placeholder-label-small, .vuesax-app-is-rtl .vs-input--input:focus + .vs-placeholder-label-small {
        padding-right: .5rem !important
    }

    .vuesax-app-is-ltr .vs-input--input.hasValue + .vs-placeholder-label-small, .vuesax-app-is-ltr .vs-input--input:focus + .vs-placeholder-label-small {
        padding-left: .5rem !important
    }

    .vuesax-app-is-rtl .vs-input--input:focus + .vs-input--placeholder {
        -webkit-transform: translate(-5px);
        transform: translate(-5px)
    }

    .vuesax-app-is-ltr .vs-input--input:focus + .vs-input--placeholder {
        -webkit-transform: translate(5px);
        transform: translate(5px)
    }

    .vuesax-app-is-rtl .vs-input--input.hasIcon {
        padding-right: 32px
    }

    .vuesax-app-is-ltr .vs-input--input.hasIcon {
        padding-left: 32px
    }

    .vuesax-app-is-rtl .vs-input--input.hasIcon + .vs-input--placeholder {
        padding-right: 32px
    }

    .vuesax-app-is-ltr .vs-input--input.hasIcon + .vs-input--placeholder {
        padding-left: 32px
    }

    .vuesax-app-is-rtl .vs-input--input.icon-after-input {
        padding-left: 1.75rem
    }

    .vuesax-app-is-ltr .vs-input--input.icon-after-input {
        padding-right: 1.75rem
    }

    .vuesax-app-is-rtl .vs-input--input.icon-after-input + .vs-input--placeholder {
        padding-left: 1.75rem
    }

    .vuesax-app-is-ltr .vs-input--input.icon-after-input + .vs-input--placeholder {
        padding-right: 1.75rem
    }

    .vuesax-app-is-rtl .vs-input--input.hasIcon.icon-after-input {
        padding-right: .85em
    }

    .vuesax-app-is-ltr .vs-input--input.hasIcon.icon-after-input {
        padding-left: .85em
    }

    .vuesax-app-is-rtl .vs-input--input.hasIcon.icon-after-input + .vs-input--placeholder {
        padding-right: .85em
    }

    .vuesax-app-is-ltr .vs-input--input.hasIcon.icon-after-input + .vs-input--placeholder {
        padding-left: .85em
    }

    .vs-input--input:disabled, .vs-input--input:disabled + .vs-input--placeholder {
        opacity: .5;
        cursor: default;
        pointer-events: none
    }

    .vs-input-primary .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-primary), 1) !important
    }

        .vs-input-primary .vs-input--input:focus ~ .icon-inputx, .vs-input-primary .vs-input--input:focus ~ .vs-placeholder-label, .vs-input-primary.isFocus .vs-input--label {
            color: rgba(var(--vs-primary), 1)
        }

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

    .input-icon-validate-primary .vs-input--input, .input-icon-validate-primary .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-primary), 1) !important
    }

    .input-icon-validate-primary .input-icon-validate {
        background: rgba(var(--vs-primary), .2);
        color: rgba(var(--vs-primary), 1)
    }

    .vs-input-secondary .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-secondary), 1) !important
    }

        .vs-input-secondary .vs-input--input:focus ~ .icon-inputx, .vs-input-secondary .vs-input--input:focus ~ .vs-placeholder-label, .vs-input-secondary.isFocus .vs-input--label {
            color: rgba(var(--vs-secondary), 1)
        }

    .span-text-validation-secondary {
        color: rgba(var(--vs-secondary), 1) !important
    }

    .input-icon-validate-secondary .vs-input--input, .input-icon-validate-secondary .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-secondary), 1) !important
    }

    .input-icon-validate-secondary .input-icon-validate {
        background: rgba(var(--vs-secondary), .2);
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-input-danger .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-danger), 1) !important
    }

        .vs-input-danger .vs-input--input:focus ~ .icon-inputx, .vs-input-danger .vs-input--input:focus ~ .vs-placeholder-label, .vs-input-danger.isFocus .vs-input--label {
            color: rgba(var(--vs-danger), 1)
        }

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

    .input-icon-validate-danger .vs-input--input, .input-icon-validate-danger .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-danger), 1) !important
    }

    .input-icon-validate-danger .input-icon-validate {
        background: rgba(var(--vs-danger), .2);
        color: rgba(var(--vs-danger), 1)
    }

    .vs-input-success .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-success), 1) !important
    }

        .vs-input-success .vs-input--input:focus ~ .icon-inputx, .vs-input-success .vs-input--input:focus ~ .vs-placeholder-label, .vs-input-success.isFocus .vs-input--label {
            color: rgba(var(--vs-success), 1)
        }

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

    .input-icon-validate-success .vs-input--input, .input-icon-validate-success .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-success), 1) !important
    }

    .input-icon-validate-success .input-icon-validate {
        background: rgba(var(--vs-success), .2);
        color: rgba(var(--vs-success), 1)
    }

    .vs-input-warning .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-warning), 1) !important
    }

        .vs-input-warning .vs-input--input:focus ~ .icon-inputx, .vs-input-warning .vs-input--input:focus ~ .vs-placeholder-label, .vs-input-warning.isFocus .vs-input--label {
            color: rgba(var(--vs-warning), 1)
        }

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

    .input-icon-validate-warning .vs-input--input, .input-icon-validate-warning .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-warning), 1) !important
    }

    .input-icon-validate-warning .input-icon-validate {
        background: rgba(var(--vs-warning), .2);
        color: rgba(var(--vs-warning), 1)
    }

    .vs-input-dark .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-dark), 1) !important
    }

        .vs-input-dark .vs-input--input:focus ~ .icon-inputx, .vs-input-dark .vs-input--input:focus ~ .vs-placeholder-label, .vs-input-dark.isFocus .vs-input--label {
            color: rgba(var(--vs-dark), 1)
        }

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

    .input-icon-validate-dark .vs-input--input, .input-icon-validate-dark .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-dark), 1) !important
    }

    .input-icon-validate-dark .input-icon-validate {
        background: rgba(var(--vs-dark), .2);
        color: rgba(var(--vs-dark), 1)
    }

    .vs-input-light .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-light), 1) !important
    }

        .vs-input-light .vs-input--input:focus ~ .icon-inputx, .vs-input-light .vs-input--input:focus ~ .vs-placeholder-label, .vs-input-light.isFocus .vs-input--label {
            color: rgba(var(--vs-light), 1)
        }

    .span-text-validation-light {
        color: rgba(var(--vs-light), 1) !important
    }

    .input-icon-validate-light .vs-input--input, .input-icon-validate-light .vs-input--input:focus {
        border: 1px solid rgba(var(--vs-light), 1) !important
    }

    .input-icon-validate-light .input-icon-validate {
        background: rgba(var(--vs-light), .2);
        color: rgba(var(--vs-light), 1)
    }

    .vs-input-number {
        position: relative;
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 5px 10px;
        background: #f5f5f5;
        padding: 2px;
        border-radius: 5px
    }

        .vs-input-number.isChangeValue .vs-input-number--input {
            -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
            opacity: .5
        }

        .vs-input-number .vs-input-number--input {
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            width: 40px;
            min-width: 40px;
            border: 0;
            text-align: center;
            background: 0 0;
            padding: 4px;
            -moz-appearance: textfield
        }

            .vs-input-number .vs-input-number--input[type=number]::-webkit-inner-spin-button, .vs-input-number .vs-input-number--input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0
            }

        .vs-input-number button {
            min-width: 22px;
            min-height: 22px;
            padding: 0;
            margin: 0;
            display: block;
            position: relative;
            border: 0;
            border-radius: 5px;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            color: #fff;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden
        }

            .vs-input-number button:disabled {
                opacity: .5;
                cursor: default;
                pointer-events: none
            }

            .vs-input-number button i {
                font-size: .9rem
            }

    .vuesax-app-is-rtl .vs-input-number button.vs-input-number--button-plus {
        -webkit-transform: translate(-10px);
        transform: translate(-10px)
    }

    .vuesax-app-is-ltr .vs-input-number button.vs-input-number--button-plus {
        -webkit-transform: translate(10px);
        transform: translate(10px)
    }

    .vuesax-app-is-rtl .vs-input-number button.vs-input-number--button-plus:active {
        -webkit-transform: translate(-10px) scale(.9);
        transform: translate(-10px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number button.vs-input-number--button-plus:active {
        -webkit-transform: translate(10px) scale(.9);
        transform: translate(10px) scale(.9)
    }

    .vs-input-number button.vs-input-number--button-plus.limit, .vs-input-number button.vs-input-number--button-plus:disabled {
        opacity: .5;
        cursor: default;
        pointer-events: none;
        background-color: rgba(0,0,0,.5)
    }

    .vuesax-app-is-rtl .vs-input-number button.vs-input-number--button-less {
        -webkit-transform: translate(10px);
        transform: translate(10px)
    }

    .vuesax-app-is-ltr .vs-input-number button.vs-input-number--button-less {
        -webkit-transform: translate(-10px);
        transform: translate(-10px)
    }

    .vuesax-app-is-rtl .vs-input-number button.vs-input-number--button-less:active {
        -webkit-transform: translate(10px) scale(.9);
        transform: translate(10px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number button.vs-input-number--button-less:active {
        -webkit-transform: translate(-10px) scale(.9);
        transform: translate(-10px) scale(.9)
    }

    .vs-input-number button.vs-input-number--button-less.limit, .vs-input-number button.vs-input-number--button-less:disabled {
        opacity: .5;
        cursor: default;
        pointer-events: none;
        background-color: rgba(0,0,0,.5)
    }

    .vs-input-number.vs-input-number-size-medium input {
        padding: 3px;
        font-size: .8rem
    }

    .vs-input-number.vs-input-number-size-medium button {
        min-width: 19px;
        min-height: 19px
    }

        .vs-input-number.vs-input-number-size-medium button i {
            font-size: .8rem
        }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-plus {
        -webkit-transform: translate(-8px);
        transform: translate(-8px)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-plus {
        -webkit-transform: translate(8px);
        transform: translate(8px)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-plus:active {
        -webkit-transform: translate(-8px) scale(.9);
        transform: translate(-8px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-plus:active {
        -webkit-transform: translate(8px) scale(.9);
        transform: translate(8px) scale(.9)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-less {
        -webkit-transform: translate(8px);
        transform: translate(8px)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-less {
        -webkit-transform: translate(-8px);
        transform: translate(-8px)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-less:active {
        -webkit-transform: translate(8px) scale(.9);
        transform: translate(8px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-medium button.vs-input-number--button-less:active {
        -webkit-transform: translate(-8px) scale(.9);
        transform: translate(-8px) scale(.9)
    }

    .vs-input-number.vs-input-number-size-small .vs-input-number--input {
        padding: 2px;
        font-size: .7rem
    }

    .vs-input-number.vs-input-number-size-small button {
        min-width: 16px;
        min-height: 16px
    }

        .vs-input-number.vs-input-number-size-small button i {
            font-size: .7rem
        }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-small button.vs-input-number--button-plus {
        -webkit-transform: translate(-7px);
        transform: translate(-7px)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-small button.vs-input-number--button-plus {
        -webkit-transform: translate(7px);
        transform: translate(7px)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-small button.vs-input-number--button-plus:active {
        -webkit-transform: translate(-7px) scale(.9);
        transform: translate(-7px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-small button.vs-input-number--button-plus:active {
        -webkit-transform: translate(7px) scale(.9);
        transform: translate(7px) scale(.9)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-small button.vs-input-number--button-less {
        -webkit-transform: translate(7px);
        transform: translate(7px)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-small button.vs-input-number--button-less {
        -webkit-transform: translate(-7px);
        transform: translate(-7px)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-small button.vs-input-number--button-less:active {
        -webkit-transform: translate(7px) scale(.9);
        transform: translate(7px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-small button.vs-input-number--button-less:active {
        -webkit-transform: translate(-7px) scale(.9);
        transform: translate(-7px) scale(.9)
    }

    .vs-input-number.vs-input-number-size-mini .vs-input-number--input {
        padding: 1px;
        font-size: .6rem
    }

    .vs-input-number.vs-input-number-size-mini button {
        min-width: 14px;
        min-height: 14px
    }

        .vs-input-number.vs-input-number-size-mini button i {
            font-size: .6rem
        }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-plus {
        -webkit-transform: translate(-6px);
        transform: translate(-6px)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-plus {
        -webkit-transform: translate(6px);
        transform: translate(6px)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-plus:active {
        -webkit-transform: translate(-6px) scale(.9);
        transform: translate(-6px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-plus:active {
        -webkit-transform: translate(6px) scale(.9);
        transform: translate(6px) scale(.9)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-less {
        -webkit-transform: translate(6px);
        transform: translate(6px)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-less {
        -webkit-transform: translate(-6px);
        transform: translate(-6px)
    }

    .vuesax-app-is-rtl .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-less:active {
        -webkit-transform: translate(6px) scale(.9);
        transform: translate(6px) scale(.9)
    }

    .vuesax-app-is-ltr .vs-input-number.vs-input-number-size-mini button.vs-input-number--button-less:active {
        -webkit-transform: translate(-6px) scale(.9);
        transform: translate(-6px) scale(.9)
    }

    .vs-input-number-primary button {
        background: rgba(var(--vs-primary), 1)
    }

        .vs-input-number-primary button:hover {
            -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-primary), .4);
            box-shadow: 0 3px 12px 0 rgba(var(--vs-primary), .4)
        }

    .vs-input-number-secondary button {
        background: rgba(var(--vs-secondary), 1)
    }

        .vs-input-number-secondary button:hover {
            -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-secondary), .4);
            box-shadow: 0 3px 12px 0 rgba(var(--vs-secondary), .4)
        }

    .vs-input-number-danger button {
        background: rgba(var(--vs-danger), 1)
    }

        .vs-input-number-danger button:hover {
            -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-danger), .4);
            box-shadow: 0 3px 12px 0 rgba(var(--vs-danger), .4)
        }

    .vs-input-number-success button {
        background: rgba(var(--vs-success), 1)
    }

        .vs-input-number-success button:hover {
            -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-success), .4);
            box-shadow: 0 3px 12px 0 rgba(var(--vs-success), .4)
        }

    .vs-input-number-warning button {
        background: rgba(var(--vs-warning), 1)
    }

        .vs-input-number-warning button:hover {
            -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-warning), .4);
            box-shadow: 0 3px 12px 0 rgba(var(--vs-warning), .4)
        }

    .vs-input-number-dark button {
        background: rgba(var(--vs-dark), 1)
    }

        .vs-input-number-dark button:hover {
            -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-dark), .4);
            box-shadow: 0 3px 12px 0 rgba(var(--vs-dark), .4)
        }

    .vs-input-number-light button {
        background: rgba(var(--vs-light), 1)
    }

        .vs-input-number-light button:hover {
            -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-light), .4);
            box-shadow: 0 3px 12px 0 rgba(var(--vs-light), .4)
        }

    .vs-list {
        width: 100%;
        position: relative;
        padding: 5px
    }

    .vs-list--icon {
        padding: 6px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .vs-list--icon i {
            font-size: 1.2rem !important
        }

    .vs-list--header {
        padding: 8px 0;
        font-weight: 700;
        -webkit-box-shadow: 0 7px 7px -5px rgba(0,0,0,.08);
        box-shadow: 0 7px 7px -5px rgba(0,0,0,.08);
        margin-bottom: 5px
    }

    .vs-list--header, .vs-list--item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .vs-list--item {
        border-bottom: 1px solid rgba(0,0,0,.08);
        padding: 5px
    }

        .vs-list--item .vs-list--avatar {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

    .vuesax-app-is-rtl .vs-list--slot {
        margin-right: auto
    }

    .vuesax-app-is-ltr .vs-list--slot {
        margin-left: auto
    }

    .vs-list--title {
        font-weight: 700
    }

    .vs-list--subtitle {
        font-size: .8rem
    }

    .vs-header-list-primary {
        color: rgba(var(--vs-primary), 1)
    }

    .vs-header-list-secondary {
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-header-list-danger {
        color: rgba(var(--vs-danger), 1)
    }

    .vs-header-list-success {
        color: rgba(var(--vs-success), 1)
    }

    .vs-header-list-warning {
        color: rgba(var(--vs-warning), 1)
    }

    .vs-header-list-dark {
        color: rgba(var(--vs-dark), 1)
    }

    .vs-header-list-light {
        color: rgba(var(--vs-light), 1)
    }

    .vs-con-loading__container {
        position: relative;
        overflow: hidden
    }

        .vs-con-loading__container .con-vs-loading {
            position: absolute !important;
            width: 100%;
            height: 100%;
            min-height: 60px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

    .beforeRemove {
        opacity: 0
    }

    .con-vs-loading {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: #fff !important;
        z-index: 300000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

        .con-vs-loading.textAfter {
            -webkit-box-orient: vertical !important;
            -webkit-box-direction: reverse !important;
            -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important
        }

        .con-vs-loading .title-loading {
            position: relative;
            padding: 5px
        }

        .con-vs-loading .effect-click {
            position: absolute;
            width: 0;
            height: 0;
            background: rgba(0,0,0,.1);
            border-radius: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

        .con-vs-loading .vs-loading {
            position: relative;
            width: 55px;
            height: 55px;
            display: block;
            border-radius: 50%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 3px solid transparent
        }

            .con-vs-loading .vs-loading .effects {
                -webkit-transition: all .3s ease;
                transition: all .3s ease
            }

            .con-vs-loading .vs-loading.material {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center
            }

            .con-vs-loading .vs-loading.border .effect-1, .con-vs-loading .vs-loading.default .effect-1 {
                -webkit-animation: rotate 1s ease infinite;
                animation: rotate 1s ease infinite
            }

            .con-vs-loading .vs-loading.border .effect-1, .con-vs-loading .vs-loading.border .effect-2, .con-vs-loading .vs-loading.default .effect-1, .con-vs-loading .vs-loading.default .effect-2 {
                position: absolute;
                width: 100%;
                height: 100%;
                border: 3px solid transparent;
                border-left: 3px solid #7367f0 !important;
                border-radius: 50%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .con-vs-loading .vs-loading.border .effect-2, .con-vs-loading .vs-loading.default .effect-2 {
                -webkit-animation: rotateOpacity 1s ease .1s infinite;
                animation: rotateOpacity 1s ease .1s infinite
            }

            .con-vs-loading .vs-loading.border .effect-3, .con-vs-loading .vs-loading.default .effect-3 {
                position: absolute;
                width: 100%;
                height: 100%;
                border: 3px solid transparent;
                border-left: 3px solid #7367f0 !important;
                -webkit-animation: rotateOpacity 1s ease .2s infinite;
                animation: rotateOpacity 1s ease .2s infinite;
                border-radius: 50%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .con-vs-loading .vs-loading.border {
                border: 1px solid #f0f0f0
            }

                .con-vs-loading .vs-loading.border .effect-1, .con-vs-loading .vs-loading.border .effect-2, .con-vs-loading .vs-loading.border .effect-3 {
                    border: 1px solid transparent;
                    border-left: 1px solid rgba(var(--vs-primary), 1)
                }

            .con-vs-loading .vs-loading.point .effect-1 {
                -webkit-animation: scale 1.2s ease infinite;
                animation: scale 1.2s ease infinite
            }

            .con-vs-loading .vs-loading.point .effect-1, .con-vs-loading .vs-loading.point .effect-2 {
                background: rgba(var(--vs-primary), .4);
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .con-vs-loading .vs-loading.point .effect-2 {
                -webkit-animation: scale 1.8s ease infinite;
                animation: scale 1.8s ease infinite
            }

            .con-vs-loading .vs-loading.point .effect-3 {
                background: rgba(var(--vs-primary), .4);
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-animation: scale 3.6s ease-out infinite;
                animation: scale 3.6s ease-out infinite;
                border-radius: 50%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .con-vs-loading .vs-loading.radius .effect-1 {
                -webkit-animation: radius 1s ease infinite;
                animation: radius 1s ease infinite
            }

            .con-vs-loading .vs-loading.radius .effect-1, .con-vs-loading .vs-loading.radius .effect-2 {
                position: absolute;
                width: 100%;
                height: 100%;
                border: 3px solid rgba(var(--vs-primary), 1);
                border-radius: 10px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .con-vs-loading .vs-loading.radius .effect-2 {
                -webkit-animation: radius 2s ease .1s infinite;
                animation: radius 2s ease .1s infinite
            }

            .con-vs-loading .vs-loading.radius .effect-3 {
                -webkit-animation: radius 3s ease .2s infinite;
                animation: radius 3s ease .2s infinite
            }

            .con-vs-loading .vs-loading.corners .effect-1, .con-vs-loading .vs-loading.radius .effect-3 {
                position: absolute;
                width: 100%;
                height: 100%;
                border: 3px solid rgba(var(--vs-primary), 1);
                border-radius: 10px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .con-vs-loading .vs-loading.corners .effect-1 {
                -webkit-animation: corners 1s ease infinite;
                animation: corners 1s ease infinite
            }

            .con-vs-loading .vs-loading.sound {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center
            }

                .con-vs-loading .vs-loading.sound .effect-1 {
                    height: 100%;
                    -webkit-animation: sound 1.4s ease infinite alternate;
                    animation: sound 1.4s ease infinite alternate
                }

                .con-vs-loading .vs-loading.sound .effect-1, .con-vs-loading .vs-loading.sound .effect-2 {
                    position: relative;
                    width: 5px;
                    border-radius: 10px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    background: rgba(var(--vs-primary), 1);
                    margin: 0 4px
                }

                .con-vs-loading .vs-loading.sound .effect-2 {
                    height: 60%;
                    -webkit-animation: sound .7s ease infinite alternate;
                    animation: sound .7s ease infinite alternate
                }

                .con-vs-loading .vs-loading.sound .effect-3 {
                    position: relative;
                    width: 5px;
                    height: 80%;
                    -webkit-animation: sound 1s ease-out infinite alternate;
                    animation: sound 1s ease-out infinite alternate;
                    border-radius: 10px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    background: rgba(var(--vs-primary), 1);
                    margin: 0 4px
                }

    .spinner {
        -webkit-animation: rotator 1.4s linear infinite;
        animation: rotator 1.4s linear infinite
    }

    .path {
        stroke-dasharray: 187;
        stroke-dashoffset: 0;
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
        animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite
    }

    .fade-enter-active, .fade-leave-active {
        -webkit-transition: opacity .3s;
        transition: opacity .3s
    }

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

    .effect-click-leave-active {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .effect-click-leave-to {
        opacity: 0;
        width: 1000px !important;
        height: 1000px !important
    }

    .vs-loading-background-primary {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-loading-color-primary .border .effect-1, .vs-loading-color-primary .border .effect-2, .vs-loading-color-primary .border .effect-3, .vs-loading-color-primary .default .effect-1, .vs-loading-color-primary .default .effect-2, .vs-loading-color-primary .default .effect-3 {
        border-left: 3px solid rgba(var(--vs-primary), 1) !important
    }

    .vs-loading-color-primary .border .effect-1, .vs-loading-color-primary .border .effect-2, .vs-loading-color-primary .border .effect-3 {
        border-left: 1px solid rgba(var(--vs-primary), 1) !important
    }

    .vs-loading-color-primary .point .effect-1, .vs-loading-color-primary .point .effect-2, .vs-loading-color-primary .point .effect-3 {
        background: rgba(var(--vs-primary), .4) !important
    }

    .vs-loading-color-primary .corners .effect-1, .vs-loading-color-primary .radius .effect-1, .vs-loading-color-primary .radius .effect-2, .vs-loading-color-primary .radius .effect-3 {
        border: 3px solid rgba(var(--vs-primary), 1) !important
    }

    .vs-loading-color-primary .sound .effect-1, .vs-loading-color-primary .sound .effect-2, .vs-loading-color-primary .sound .effect-3 {
        background: rgba(var(--vs-primary), 1) !important
    }

    .vs-loading-background-secondary {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-loading-color-secondary .border .effect-1, .vs-loading-color-secondary .border .effect-2, .vs-loading-color-secondary .border .effect-3, .vs-loading-color-secondary .default .effect-1, .vs-loading-color-secondary .default .effect-2, .vs-loading-color-secondary .default .effect-3 {
        border-left: 3px solid rgba(var(--vs-secondary), 1) !important
    }

    .vs-loading-color-secondary .border .effect-1, .vs-loading-color-secondary .border .effect-2, .vs-loading-color-secondary .border .effect-3 {
        border-left: 1px solid rgba(var(--vs-secondary), 1) !important
    }

    .vs-loading-color-secondary .point .effect-1, .vs-loading-color-secondary .point .effect-2, .vs-loading-color-secondary .point .effect-3 {
        background: rgba(var(--vs-secondary), .4) !important
    }

    .vs-loading-color-secondary .corners .effect-1, .vs-loading-color-secondary .radius .effect-1, .vs-loading-color-secondary .radius .effect-2, .vs-loading-color-secondary .radius .effect-3 {
        border: 3px solid rgba(var(--vs-secondary), 1) !important
    }

    .vs-loading-color-secondary .sound .effect-1, .vs-loading-color-secondary .sound .effect-2, .vs-loading-color-secondary .sound .effect-3 {
        background: rgba(var(--vs-secondary), 1) !important
    }

    .vs-loading-background-danger {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-loading-color-danger .border .effect-1, .vs-loading-color-danger .border .effect-2, .vs-loading-color-danger .border .effect-3, .vs-loading-color-danger .default .effect-1, .vs-loading-color-danger .default .effect-2, .vs-loading-color-danger .default .effect-3 {
        border-left: 3px solid rgba(var(--vs-danger), 1) !important
    }

    .vs-loading-color-danger .border .effect-1, .vs-loading-color-danger .border .effect-2, .vs-loading-color-danger .border .effect-3 {
        border-left: 1px solid rgba(var(--vs-danger), 1) !important
    }

    .vs-loading-color-danger .point .effect-1, .vs-loading-color-danger .point .effect-2, .vs-loading-color-danger .point .effect-3 {
        background: rgba(var(--vs-danger), .4) !important
    }

    .vs-loading-color-danger .corners .effect-1, .vs-loading-color-danger .radius .effect-1, .vs-loading-color-danger .radius .effect-2, .vs-loading-color-danger .radius .effect-3 {
        border: 3px solid rgba(var(--vs-danger), 1) !important
    }

    .vs-loading-color-danger .sound .effect-1, .vs-loading-color-danger .sound .effect-2, .vs-loading-color-danger .sound .effect-3 {
        background: rgba(var(--vs-danger), 1) !important
    }

    .vs-loading-background-success {
        background: rgba(var(--vs-success), 1)
    }

    .vs-loading-color-success .border .effect-1, .vs-loading-color-success .border .effect-2, .vs-loading-color-success .border .effect-3, .vs-loading-color-success .default .effect-1, .vs-loading-color-success .default .effect-2, .vs-loading-color-success .default .effect-3 {
        border-left: 3px solid rgba(var(--vs-success), 1) !important
    }

    .vs-loading-color-success .border .effect-1, .vs-loading-color-success .border .effect-2, .vs-loading-color-success .border .effect-3 {
        border-left: 1px solid rgba(var(--vs-success), 1) !important
    }

    .vs-loading-color-success .point .effect-1, .vs-loading-color-success .point .effect-2, .vs-loading-color-success .point .effect-3 {
        background: rgba(var(--vs-success), .4) !important
    }

    .vs-loading-color-success .corners .effect-1, .vs-loading-color-success .radius .effect-1, .vs-loading-color-success .radius .effect-2, .vs-loading-color-success .radius .effect-3 {
        border: 3px solid rgba(var(--vs-success), 1) !important
    }

    .vs-loading-color-success .sound .effect-1, .vs-loading-color-success .sound .effect-2, .vs-loading-color-success .sound .effect-3 {
        background: rgba(var(--vs-success), 1) !important
    }

    .vs-loading-background-warning {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-loading-color-warning .border .effect-1, .vs-loading-color-warning .border .effect-2, .vs-loading-color-warning .border .effect-3, .vs-loading-color-warning .default .effect-1, .vs-loading-color-warning .default .effect-2, .vs-loading-color-warning .default .effect-3 {
        border-left: 3px solid rgba(var(--vs-warning), 1) !important
    }

    .vs-loading-color-warning .border .effect-1, .vs-loading-color-warning .border .effect-2, .vs-loading-color-warning .border .effect-3 {
        border-left: 1px solid rgba(var(--vs-warning), 1) !important
    }

    .vs-loading-color-warning .point .effect-1, .vs-loading-color-warning .point .effect-2, .vs-loading-color-warning .point .effect-3 {
        background: rgba(var(--vs-warning), .4) !important
    }

    .vs-loading-color-warning .corners .effect-1, .vs-loading-color-warning .radius .effect-1, .vs-loading-color-warning .radius .effect-2, .vs-loading-color-warning .radius .effect-3 {
        border: 3px solid rgba(var(--vs-warning), 1) !important
    }

    .vs-loading-color-warning .sound .effect-1, .vs-loading-color-warning .sound .effect-2, .vs-loading-color-warning .sound .effect-3 {
        background: rgba(var(--vs-warning), 1) !important
    }

    .vs-loading-background-dark {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-loading-color-dark .border .effect-1, .vs-loading-color-dark .border .effect-2, .vs-loading-color-dark .border .effect-3, .vs-loading-color-dark .default .effect-1, .vs-loading-color-dark .default .effect-2, .vs-loading-color-dark .default .effect-3 {
        border-left: 3px solid rgba(var(--vs-dark), 1) !important
    }

    .vs-loading-color-dark .border .effect-1, .vs-loading-color-dark .border .effect-2, .vs-loading-color-dark .border .effect-3 {
        border-left: 1px solid rgba(var(--vs-dark), 1) !important
    }

    .vs-loading-color-dark .point .effect-1, .vs-loading-color-dark .point .effect-2, .vs-loading-color-dark .point .effect-3 {
        background: rgba(var(--vs-dark), .4) !important
    }

    .vs-loading-color-dark .corners .effect-1, .vs-loading-color-dark .radius .effect-1, .vs-loading-color-dark .radius .effect-2, .vs-loading-color-dark .radius .effect-3 {
        border: 3px solid rgba(var(--vs-dark), 1) !important
    }

    .vs-loading-color-dark .sound .effect-1, .vs-loading-color-dark .sound .effect-2, .vs-loading-color-dark .sound .effect-3 {
        background: rgba(var(--vs-dark), 1) !important
    }

    .vs-loading-background-light {
        background: rgba(var(--vs-light), 1)
    }

    .vs-loading-color-light .border .effect-1, .vs-loading-color-light .border .effect-2, .vs-loading-color-light .border .effect-3, .vs-loading-color-light .default .effect-1, .vs-loading-color-light .default .effect-2, .vs-loading-color-light .default .effect-3 {
        border-left: 3px solid rgba(var(--vs-light), 1) !important
    }

    .vs-loading-color-light .border .effect-1, .vs-loading-color-light .border .effect-2, .vs-loading-color-light .border .effect-3 {
        border-left: 1px solid rgba(var(--vs-light), 1) !important
    }

    .vs-loading-color-light .point .effect-1, .vs-loading-color-light .point .effect-2, .vs-loading-color-light .point .effect-3 {
        background: rgba(var(--vs-light), .4) !important
    }

    .vs-loading-color-light .corners .effect-1, .vs-loading-color-light .radius .effect-1, .vs-loading-color-light .radius .effect-2, .vs-loading-color-light .radius .effect-3 {
        border: 3px solid rgba(var(--vs-light), 1) !important
    }

    .vs-loading-color-light .sound .effect-1, .vs-loading-color-light .sound .effect-2, .vs-loading-color-light .sound .effect-3 {
        background: rgba(var(--vs-light), 1) !important
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn)
        }
    }

    @keyframes rotate {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn)
        }
    }

    @-webkit-keyframes rotateOpacity {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
            opacity: .1
        }

        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
            opacity: 1
        }
    }

    @keyframes rotateOpacity {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
            opacity: .1
        }

        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
            opacity: 1
        }
    }

    @-webkit-keyframes scale {
        0% {
            -webkit-transform: scale(.1);
            transform: scale(.1)
        }

        60% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        to {
            -webkit-transform: scale(.1);
            transform: scale(.1)
        }
    }

    @keyframes scale {
        0% {
            -webkit-transform: scale(.1);
            transform: scale(.1)
        }

        60% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        to {
            -webkit-transform: scale(.1);
            transform: scale(.1)
        }
    }

    @-webkit-keyframes radius {
        0% {
            -webkit-transform: rotate(0) scale(.1);
            transform: rotate(0) scale(.1);
            opacity: 1
        }

        60% {
            -webkit-transform: rotate(160deg) scale(1);
            transform: rotate(160deg) scale(1);
            opacity: 0
        }

        to {
            -webkit-transform: rotate(0) scale(.1);
            transform: rotate(0) scale(.1);
            opacity: 1
        }
    }

    @keyframes radius {
        0% {
            -webkit-transform: rotate(0) scale(.1);
            transform: rotate(0) scale(.1);
            opacity: 1
        }

        60% {
            -webkit-transform: rotate(160deg) scale(1);
            transform: rotate(160deg) scale(1);
            opacity: 0
        }

        to {
            -webkit-transform: rotate(0) scale(.1);
            transform: rotate(0) scale(.1);
            opacity: 1
        }
    }

    @-webkit-keyframes corners {
        0% {
            border-radius: 50%;
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        25% {
            border-radius: 50% 50% 50% 20%
        }

        50% {
            border-radius: 50% 50% 20% 30%
        }

        75% {
            border-radius: 50% 20% 30% 30%
        }

        to {
            border-radius: 50%;
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
        }
    }

    @keyframes corners {
        0% {
            border-radius: 50%;
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        25% {
            border-radius: 50% 50% 50% 20%
        }

        50% {
            border-radius: 50% 50% 20% 30%
        }

        75% {
            border-radius: 50% 20% 30% 30%
        }

        to {
            border-radius: 50%;
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
        }
    }

    @-webkit-keyframes sound {
        0% {
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            opacity: .7
        }

        40% {
            -webkit-transform: scaleY(1.2);
            transform: scaleY(1.2);
            opacity: .5
        }

        70% {
            -webkit-transform: scaleY(.2);
            transform: scaleY(.2);
            opacity: .8
        }

        50% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            opacity: 1
        }
    }

    @keyframes sound {
        0% {
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            opacity: .7
        }

        40% {
            -webkit-transform: scaleY(1.2);
            transform: scaleY(1.2);
            opacity: .5
        }

        70% {
            -webkit-transform: scaleY(.2);
            transform: scaleY(.2);
            opacity: .8
        }

        50% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            opacity: 1
        }
    }

    @-webkit-keyframes dash {
        0% {
            stroke-dashoffset: 187
        }

        50% {
            stroke-dashoffset: 46.75;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg)
        }

        to {
            stroke-dashoffset: 187;
            -webkit-transform: rotate(450deg);
            transform: rotate(450deg)
        }
    }

    @keyframes dash {
        0% {
            stroke-dashoffset: 187
        }

        50% {
            stroke-dashoffset: 46.75;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg)
        }

        to {
            stroke-dashoffset: 187;
            -webkit-transform: rotate(450deg);
            transform: rotate(450deg)
        }
    }

    @-webkit-keyframes colors {
        0% {
            stroke: #4285f4
        }

        25% {
            stroke: #de3e35
        }

        50% {
            stroke: #f7c223
        }

        75% {
            stroke: #1b9a59
        }

        to {
            stroke: #4285f4
        }
    }

    @keyframes colors {
        0% {
            stroke: #4285f4
        }

        25% {
            stroke: #de3e35
        }

        50% {
            stroke: #f7c223
        }

        75% {
            stroke: #1b9a59
        }

        to {
            stroke: #4285f4
        }
    }

    @-webkit-keyframes rotator {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg)
        }
    }

    @keyframes rotator {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg)
        }
    }

    .vs-navbar {
        clear: both;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-shadow: 0 4px 20px 0 rgba(0,0,0,.05);
        box-shadow: 0 4px 20px 0 rgba(0,0,0,.05);
        width: 100%;
        z-index: 10000;
        position: relative
    }

        .vs-navbar .vs-button {
            margin: 0
        }

    .vs-navbar--btn-responsive {
        display: none;
        width: 40px;
        height: 40px;
        position: relative;
        border: 0;
        background: 0 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 0;
        margin-left: 5px;
        cursor: pointer;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        overflow: hidden
    }

        .vs-navbar--btn-responsive:hover {
            background: rgba(0,0,0,.08);
            padding: 12px 0
        }

        .vs-navbar--btn-responsive.active-menu {
            padding: 10px 0 !important
        }

            .vs-navbar--btn-responsive.active-menu .line--1 {
                -webkit-transform: rotate(45deg) translate(5px, 5px);
                transform: rotate(45deg) translate(5px, 5px)
            }

            .vs-navbar--btn-responsive.active-menu .line--2 {
                opacity: 0;
                -webkit-transform: translate(-10px);
                transform: translate(-10px)
            }

            .vs-navbar--btn-responsive.active-menu .line--3 {
                -webkit-transform: rotate(-45deg) translate(5px, -5px);
                transform: rotate(-45deg) translate(5px, -5px)
            }

        .vs-navbar--btn-responsive .btn-responsive-line {
            width: 20px;
            height: 2px;
            background: rgba(0,0,0,.6);
            position: relative;
            display: block;
            -webkit-transition: all .2s ease;
            transition: all .2s ease
        }

    .vs-con-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .vs-navbar--item {
        display: block;
        position: relative;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        z-index: 1000
    }

        .vs-navbar--item.is-active-item .vs-navbar-after {
            width: 100%
        }

        .vs-navbar--item:hover .vs-navbar-submenu {
            opacity: 1;
            visibility: visible
        }

        .vs-navbar--item a {
            font-size: .8rem;
            padding: 10px 12px;
            display: block;
            color: inherit;
            text-decoration: none !important;
            position: relative;
            z-index: 100
        }

            .vs-navbar--item a:hover ~ .vs-navbar-after {
                width: 100%
            }

        .vs-navbar--item .vs-navbar-after {
            width: 0;
            height: 2px;
            left: 50%;
            bottom: 0;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            background: 31, 116, 255;
            position: absolute;
            -webkit-transition: all .25s ease;
            transition: all .25s ease;
            z-index: 10
        }

    .vs-navbar--title {
        font-size: 1.1rem;
        padding: 0;
        padding-left: 10px;
        padding-right: 10px;
        color: inherit
    }

    .vs-navbar--items {
        position: relative
    }

    .vs-navbar-submenu {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        background: #fff;
        z-index: 1000;
        padding-left: 0;
        width: 200px
    }

        .vs-navbar-submenu .vs-navbar-after {
            display: none
        }

        .vs-navbar-submenu .vs-navbar--items a {
            text-align: left
        }

    .vs-navbar-flat {
        -webkit-box-shadow: none;
        box-shadow: none
    }

        .vs-navbar-flat .vs-navbar-after {
            display: none
        }

    .vs-navbar-fund {
        -webkit-box-shadow: none;
        box-shadow: none
    }

        .vs-navbar-fund .vs-navbar-after {
            width: 100%;
            height: 0%;
            opacity: .1
        }

        .vs-navbar-fund .vs-navbar--item.is-active-item .vs-navbar-after, .vs-navbar-fund a:hover ~ .vs-navbar-after {
            height: 100%
        }

    .vs-navbar-border {
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid rgba(0,0,0,.05)
    }

        .vs-navbar-border .vs-navbar--item {
            border-left: 1px solid rgba(0,0,0,.05)
        }

        .vs-navbar-border .vs-navbar-after {
            height: 1px;
            bottom: -1px
        }

    .vs-navbar-gradient .vs-navbar--item {
        margin: 4px 3px
    }

        .vs-navbar-gradient .vs-navbar--item a {
            padding: 6px 12px
        }

    .vs-navbar-gradient .vs-navbar-after {
        display: none
    }

    .vs-navbar-shadow {
        -webkit-box-shadow: none;
        box-shadow: none
    }

        .vs-navbar-shadow .vs-navbar--item {
            background: rgba(0,0,0,.05)
        }

            .vs-navbar-shadow .vs-navbar--item.is-active-item {
                background: #fff;
                border-radius: 4px;
                -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.07);
                box-shadow: 0 5px 20px 0 rgba(0,0,0,.07)
            }

        .vs-navbar-shadow .vs-navbar-after {
            display: none
        }

    .vs-navbar-color-color {
        background: 31, 116, 255
    }

    .vs-navbar .vs-navbar-item-primary.is-active-item, .vs-navbar .vs-navbar-item-primary:hover > a, .vs-navbar-submenu .vs-navbar-item-primary.is-active-item, .vs-navbar-submenu .vs-navbar-item-primary:hover {
        color: 31, 116, 255
    }

    .vs-navbar-gradient .vs-navbar-item-primary {
        border-radius: 4px
    }

        .vs-navbar-gradient .vs-navbar-item-primary.is-active-item {
            border-radius: 6px;
            color: #fff;
            background: #640064;
            background-image: linear-gradient(30deg, rgba(var(--vs-primary), 1), rgba(var(--vs-primary), .5));
            text-shadow: 1px 2px 4px rgba(0,0,0,.3)
        }

    .vs-navbar-color-color {
        background: 121, 49, 177
    }

    .vs-navbar .vs-navbar-item-secondary.is-active-item, .vs-navbar .vs-navbar-item-secondary:hover > a, .vs-navbar-submenu .vs-navbar-item-secondary.is-active-item, .vs-navbar-submenu .vs-navbar-item-secondary:hover {
        color: 121, 49, 177
    }

    .vs-navbar-gradient .vs-navbar-item-secondary {
        border-radius: 4px
    }

        .vs-navbar-gradient .vs-navbar-item-secondary.is-active-item {
            border-radius: 6px;
            color: #fff;
            background: #640064;
            background-image: linear-gradient(30deg, rgba(var(--vs-secondary), 1), rgba(var(--vs-secondary), .5));
            text-shadow: 1px 2px 4px rgba(0,0,0,.3)
        }

    .vs-navbar-color-color {
        background: 255, 71, 87
    }

    .vs-navbar .vs-navbar-item-danger.is-active-item, .vs-navbar .vs-navbar-item-danger:hover > a, .vs-navbar-submenu .vs-navbar-item-danger.is-active-item, .vs-navbar-submenu .vs-navbar-item-danger:hover {
        color: 255, 71, 87
    }

    .vs-navbar-gradient .vs-navbar-item-danger {
        border-radius: 4px
    }

        .vs-navbar-gradient .vs-navbar-item-danger.is-active-item {
            border-radius: 6px;
            color: #fff;
            background: #640064;
            background-image: linear-gradient(30deg, rgba(var(--vs-danger), 1), rgba(var(--vs-danger), .5));
            text-shadow: 1px 2px 4px rgba(0,0,0,.3)
        }

    .vs-navbar-color-color {
        background: 70, 201, 58
    }

    .vs-navbar .vs-navbar-item-success.is-active-item, .vs-navbar .vs-navbar-item-success:hover > a, .vs-navbar-submenu .vs-navbar-item-success.is-active-item, .vs-navbar-submenu .vs-navbar-item-success:hover {
        color: 70, 201, 58
    }

    .vs-navbar-gradient .vs-navbar-item-success {
        border-radius: 4px
    }

        .vs-navbar-gradient .vs-navbar-item-success.is-active-item {
            border-radius: 6px;
            color: #fff;
            background: #640064;
            background-image: linear-gradient(30deg, rgba(var(--vs-success), 1), rgba(var(--vs-success), .5));
            text-shadow: 1px 2px 4px rgba(0,0,0,.3)
        }

    .vs-navbar-color-color {
        background: 255, 186, 0
    }

    .vs-navbar .vs-navbar-item-warning.is-active-item, .vs-navbar .vs-navbar-item-warning:hover > a, .vs-navbar-submenu .vs-navbar-item-warning.is-active-item, .vs-navbar-submenu .vs-navbar-item-warning:hover {
        color: 255, 186, 0
    }

    .vs-navbar-gradient .vs-navbar-item-warning {
        border-radius: 4px
    }

        .vs-navbar-gradient .vs-navbar-item-warning.is-active-item {
            border-radius: 6px;
            color: #fff;
            background: #640064;
            background-image: linear-gradient(30deg, rgba(var(--vs-warning), 1), rgba(var(--vs-warning), .5));
            text-shadow: 1px 2px 4px rgba(0,0,0,.3)
        }

    .vs-navbar-color-color {
        background: 30, 30, 30
    }

    .vs-navbar .vs-navbar-item-dark.is-active-item, .vs-navbar .vs-navbar-item-dark:hover > a, .vs-navbar-submenu .vs-navbar-item-dark.is-active-item, .vs-navbar-submenu .vs-navbar-item-dark:hover {
        color: 30, 30, 30
    }

    .vs-navbar-gradient .vs-navbar-item-dark {
        border-radius: 4px
    }

        .vs-navbar-gradient .vs-navbar-item-dark.is-active-item {
            border-radius: 6px;
            color: #fff;
            background: #640064;
            background-image: linear-gradient(30deg, rgba(var(--vs-dark), 1), rgba(var(--vs-dark), .5));
            text-shadow: 1px 2px 4px rgba(0,0,0,.3)
        }

    .vs-navbar-color-color {
        background: 245, 245, 245
    }

    .vs-navbar .vs-navbar-item-light.is-active-item, .vs-navbar .vs-navbar-item-light:hover > a, .vs-navbar-submenu .vs-navbar-item-light.is-active-item, .vs-navbar-submenu .vs-navbar-item-light:hover {
        color: 245, 245, 245
    }

    .vs-navbar-gradient .vs-navbar-item-light {
        border-radius: 4px
    }

        .vs-navbar-gradient .vs-navbar-item-light.is-active-item {
            border-radius: 6px;
            color: #fff;
            background: #640064;
            background-image: linear-gradient(30deg, rgba(var(--vs-light), 1), rgba(var(--vs-light), .5));
            text-shadow: 1px 2px 4px rgba(0,0,0,.3)
        }

    .collapse {
        display: block
    }

        .collapse .vs-navbar--btn-responsive, .collapse .vs-navbar--header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }

        .collapse .vs-navbar--header {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between
        }

        .collapse .vs-con-items {
            display: none;
            width: 100%
        }

            .collapse .vs-con-items.activeMenuResponsive {
                display: block
            }

            .collapse .vs-con-items .vs-spacer {
                display: none
            }

        .collapse .vs-navbar--item {
            width: 100%
        }

    @media screen and (max-width:800px) {
        .vs-navbar--btn-responsive {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }

        .vs-navbar {
            display: block
        }

        .vs-navbar--header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between
        }

        .vs-con-items {
            display: none;
            width: 100%
        }

            .vs-con-items.activeMenuResponsive {
                display: block
            }

            .vs-con-items .vs-spacer {
                display: none
            }

        .vs-navbar--item {
            width: 100%
        }
    }

    .vs-notifications {
        position: fixed;
        z-index: 200000;
        padding: 5px;
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 10px;
        overflow: hidden;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        cursor: default;
        max-width: 350px;
        min-width: 200px
    }

        .vs-notifications:active {
            opacity: .8
        }

        .vs-notifications .content-noti {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%
        }

            .vs-notifications .content-noti .con-text-noti {
                width: 100%
            }

            .vs-notifications .content-noti .vs-icon-noti {
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                z-index: 100;
                display: block;
                padding: 5px;
                background: hsla(0,0%,100%,.1);
                border-radius: 6px;
                font-size: 20px;
                -webkit-animation: openicon .4s ease;
                animation: openicon .4s ease
            }

        .vs-notifications h3, .vs-notifications p {
            z-index: 100;
            position: relative;
            -webkit-animation: open .4s ease;
            animation: open .4s ease
        }

        .vs-notifications h3 {
            font-size: 16px;
            padding: 5px;
            padding-bottom: 0
        }

        .vs-notifications p {
            font-size: 14px;
            padding: 5px;
            padding-right: 10px
        }

        .vs-notifications.vs-noti-active h3, .vs-notifications.vs-noti-active p {
            opacity: 1
        }

        .vs-notifications .filling {
            display: block;
            position: absolute;
            -webkit-transition: all .45s ease;
            transition: all .45s ease;
            z-index: 1;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%)
        }

    .vs-noti-primary .filling {
        background: rgba(var(--vs-primary), 1);
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    .vs-noti-secondary .filling {
        background: rgba(var(--vs-secondary), 1);
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    .vs-noti-danger .filling {
        background: rgba(var(--vs-danger), 1);
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    .vs-noti-success .filling {
        background: rgba(var(--vs-success), 1);
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    .vs-noti-warning .filling {
        background: rgba(var(--vs-warning), 1);
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    .vs-noti-dark .filling {
        background: rgba(var(--vs-dark), 1);
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    .vs-noti-light .filling {
        background: rgba(var(--vs-light), 1);
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    @-webkit-keyframes open {
        0% {
            opacity: 0;
            -webkit-transform: translate(-30px);
            transform: translate(-30px)
        }

        to {
            -webkit-transform: translate(0);
            transform: translate(0);
            opacity: 1
        }
    }

    @keyframes open {
        0% {
            opacity: 0;
            -webkit-transform: translate(-30px);
            transform: translate(-30px)
        }

        to {
            -webkit-transform: translate(0);
            transform: translate(0);
            opacity: 1
        }
    }

    @-webkit-keyframes openicon {
        0% {
            opacity: 0;
            -webkit-transform: scale(.4);
            transform: scale(.4)
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1
        }
    }

    @keyframes openicon {
        0% {
            opacity: 0;
            -webkit-transform: scale(.4);
            transform: scale(.4)
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1
        }
    }

    .con-vs-pagination {
        --color-pagination: #f0f0f0;
        --color-pagination-alpha: #f0f0f0
    }

    .vs-pagination--input-goto {
        color: inherit;
        padding: 8px;
        border-radius: 5px;
        border: 0 solid rgba(0,0,0,.2);
        background: #f0f0f0
    }

    .vuesax-app-is-rtl .vs-pagination--input-goto {
        margin-right: 5px
    }

    .vuesax-app-is-ltr .vs-pagination--input-goto {
        margin-left: 5px
    }

    .vs-pagination--nav, .vs-pagination--ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .vs-pagination--ul {
        padding: 0;
        background: #f0f0f0;
        border-radius: 20px;
        padding-left: 5px;
        padding-right: 5px
    }

    .vs-pagination--array {
        display: inline-block;
        padding: 0
    }

        .vs-pagination--array li {
            display: inline-block
        }

    .vs-pagination--mb {
        margin-bottom: 5px
    }

    .vs-pagination--bold {
        font-weight: 700
    }

    .vs-pagination--li {
        cursor: pointer;
        width: 35px;
        height: 35px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 8px;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        position: relative;
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        margin: 0 2px;
        font-weight: 700;
        color: rgba(0,0,0,.5)
    }

        .vs-pagination--li span {
            z-index: 100
        }

        .vs-pagination--li .effect {
            z-index: 50;
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--vs-color-pagination);
            top: 0;
            display: block;
            border-radius: 8px;
            -webkit-transform: scale(.5);
            transform: scale(.5);
            opacity: 0;
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            -webkit-box-shadow: 0 0 20px 0 transparent;
            box-shadow: 0 0 20px 0 transparent
        }

    .vuesax-app-is-rtl .vs-pagination--li .effect {
        right: 0
    }

    .vuesax-app-is-ltr .vs-pagination--li .effect {
        left: 0
    }

    .vs-pagination--li.is-current {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        color: #fff;
        font-weight: 700;
        cursor: default;
        background: var(--vs-color-pagination)
    }

        .vs-pagination--li.is-current .effect {
            opacity: 1;
            -webkit-transform: scale(1) !important;
            transform: scale(1) !important;
            -webkit-box-shadow: 0 0 20px 0 var(--vs-color-pagination-alpha);
            box-shadow: 0 0 20px 0 var(--vs-color-pagination-alpha)
        }

    .vs-pagination--li:hover:not(.is-current) {
        color: var(--vs-color-pagination)
    }

    .vs-pagination--buttons {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        color: rgba(0,0,0,.6);
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        background: #f0f0f0;
        margin: 0;
        z-index: 200
    }

    .vuesax-app-is-rtl .vs-pagination--buttons.vs-pagination--button-prev {
        margin-left: 5px
    }

    .vuesax-app-is-ltr .vs-pagination--buttons.vs-pagination--button-prev, .vuesax-app-is-rtl .vs-pagination--buttons.vs-pagination--button-next {
        margin-right: 5px
    }

    .vuesax-app-is-ltr .vs-pagination--buttons.vs-pagination--button-next {
        margin-left: 5px
    }

    .vs-pagination--buttons.disabled, .vs-pagination--buttons:disabled {
        cursor: default;
        pointer-events: none;
        opacity: .5
    }

    .vs-pagination--buttons i {
        font-size: 1.2rem
    }

    .vs-pagination--buttons:hover {
        background: var(--vs-color-pagination);
        color: #fff
    }

    .vs-pagination-primary li:hover:not(.is-current) {
        color: rgba(var(--vs-primary), 1) !important
    }

    .vs-pagination-primary .effect {
        -webkit-box-shadow: 0 0 20px 0 rgba(var(--vs-primary), .5);
        box-shadow: 0 0 20px 0 rgba(var(--vs-primary), .5)
    }

    .vs-pagination-primary .effect, .vs-pagination-primary .vs-pagination--buttons:hover {
        background: rgba(var(--vs-primary), 1) !important
    }

    .vs-pagination-secondary li:hover:not(.is-current) {
        color: rgba(var(--vs-secondary), 1) !important
    }

    .vs-pagination-secondary .effect {
        -webkit-box-shadow: 0 0 20px 0 rgba(var(--vs-secondary), .5);
        box-shadow: 0 0 20px 0 rgba(var(--vs-secondary), .5)
    }

    .vs-pagination-secondary .effect, .vs-pagination-secondary .vs-pagination--buttons:hover {
        background: rgba(var(--vs-secondary), 1) !important
    }

    .vs-pagination-danger li:hover:not(.is-current) {
        color: rgba(var(--vs-danger), 1) !important
    }

    .vs-pagination-danger .effect {
        -webkit-box-shadow: 0 0 20px 0 rgba(var(--vs-danger), .5);
        box-shadow: 0 0 20px 0 rgba(var(--vs-danger), .5)
    }

    .vs-pagination-danger .effect, .vs-pagination-danger .vs-pagination--buttons:hover {
        background: rgba(var(--vs-danger), 1) !important
    }

    .vs-pagination-success li:hover:not(.is-current) {
        color: rgba(var(--vs-success), 1) !important
    }

    .vs-pagination-success .effect {
        -webkit-box-shadow: 0 0 20px 0 rgba(var(--vs-success), .5);
        box-shadow: 0 0 20px 0 rgba(var(--vs-success), .5)
    }

    .vs-pagination-success .effect, .vs-pagination-success .vs-pagination--buttons:hover {
        background: rgba(var(--vs-success), 1) !important
    }

    .vs-pagination-warning li:hover:not(.is-current) {
        color: rgba(var(--vs-warning), 1) !important
    }

    .vs-pagination-warning .effect {
        -webkit-box-shadow: 0 0 20px 0 rgba(var(--vs-warning), .5);
        box-shadow: 0 0 20px 0 rgba(var(--vs-warning), .5)
    }

    .vs-pagination-warning .effect, .vs-pagination-warning .vs-pagination--buttons:hover {
        background: rgba(var(--vs-warning), 1) !important
    }

    .vs-pagination-dark li:hover:not(.is-current) {
        color: rgba(var(--vs-dark), 1) !important
    }

    .vs-pagination-dark .effect {
        -webkit-box-shadow: 0 0 20px 0 rgba(var(--vs-dark), .5);
        box-shadow: 0 0 20px 0 rgba(var(--vs-dark), .5)
    }

    .vs-pagination-dark .effect, .vs-pagination-dark .vs-pagination--buttons:hover {
        background: rgba(var(--vs-dark), 1) !important
    }

    .vs-pagination-light li:hover:not(.is-current) {
        color: rgba(var(--vs-light), 1) !important
    }

    .vs-pagination-light .effect {
        -webkit-box-shadow: 0 0 20px 0 rgba(var(--vs-light), .5);
        box-shadow: 0 0 20px 0 rgba(var(--vs-light), .5)
    }

    .vs-pagination-light .effect, .vs-pagination-light .vs-pagination--buttons:hover {
        background: rgba(var(--vs-light), 1) !important
    }

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

    .vs-description-secondary {
        color: rgba(var(--vs-secondary), 1) !important
    }

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

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

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

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

    .vs-description-light {
        color: rgba(var(--vs-light), 1) !important
    }

    .popup-t-enter, .popup-t-leave-to {
        opacity: 0 !important
    }

        .popup-t-enter .vs-popup, .popup-t-leave-to .vs-popup {
            -webkit-transform: scale(.9) !important;
            transform: scale(.9) !important
        }

        .popup-t-enter .vs-popup-cancel, .popup-t-leave-to .vs-popup-cancel {
            border-radius: 50% !important
        }

    .vuesax-app-is-rtl .popup-t-enter .vs-popup-cancel, .vuesax-app-is-rtl .popup-t-leave-to .vs-popup-cancel {
        -webkit-transform: translate(-8px, -8px) scale(.5) !important;
        transform: translate(-8px, -8px) scale(.5) !important
    }

    .vuesax-app-is-ltr .popup-t-enter .vs-popup-cancel, .vuesax-app-is-ltr .popup-t-leave-to .vs-popup-cancel {
        -webkit-transform: translate(8px, -8px) scale(.5) !important;
        transform: translate(8px, -8px) scale(.5) !important
    }

    .popup-t-enter .vs-popup-text, .popup-t-leave-to .vs-popup-text {
        opacity: 0
    }

    .vuesax-app-is-rtl .popup-t-enter .vs-popup-text, .vuesax-app-is-rtl .popup-t-leave-to .vs-popup-text {
        -webkit-transform: translate(15px) !important;
        transform: translate(15px) !important
    }

    .vuesax-app-is-ltr .popup-t-enter .vs-popup-text, .vuesax-app-is-ltr .popup-t-leave-to .vs-popup-text {
        -webkit-transform: translate(-15px) !important;
        transform: translate(-15px) !important
    }

    .popup-t-enter header h3, .popup-t-leave-to header h3 {
        opacity: 0
    }

    .vuesax-app-is-rtl .popup-t-enter header h3, .vuesax-app-is-rtl .popup-t-leave-to header h3 {
        -webkit-transform: translate(50px) !important;
        transform: translate(50px) !important
    }

    .vuesax-app-is-ltr .popup-t-enter header h3, .vuesax-app-is-ltr .popup-t-leave-to header h3 {
        -webkit-transform: translate(-50px) !important;
        transform: translate(-50px) !important
    }

    .con-vs-popup {
        -webkit-transition: all .2s;
        transition: all .2s;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 20000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        opacity: 1
    }

    .vuesax-app-is-rtl .con-vs-popup {
        right: 0
    }

    .vuesax-app-is-ltr .con-vs-popup {
        left: 0
    }

    .con-vs-popup.fullscreen .vs-popup {
        width: 100%;
        height: 100%
    }

    .con-vs-popup .vs-popup {
        -webkit-transition: all .2s;
        transition: all .2s;
        z-index: 100;
        width: 600px;
        margin: 10px;
        max-width: calc(100% - 30px);
        max-height: calc(100% - 30px);
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        background: #fff;
        -webkit-animation: rebound .3s;
        animation: rebound .3s
    }

    .vs-popup--header {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background: rgba(0,0,0,.05);
        border-radius: 5px 5px;
        position: relative
    }

    .vs-popup--content {
        padding: 13px;
        font-size: .9em;
        -webkit-transition: all .23s ease .1s;
        transition: all .23s ease .1s;
        overflow: auto;
        max-height: calc(100vh - 100px);
        margin-top: 5px;
        margin-bottom: 5px;
        width: calc(100% - 5px)
    }

    .vuesax-app-is-rtl .vs-popup--content {
        margin-left: 5px
    }

    .vuesax-app-is-ltr .vs-popup--content {
        margin-right: 5px
    }

    .vs-popup--close {
        -webkit-transition: all .23s ease .1s;
        transition: all .23s ease .1s;
        position: relative;
        padding: 8px;
        cursor: pointer;
        -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
        border-radius: 5px;
        background: #fff;
        font-size: 1.25em;
        color: rgba(0,0,0,.6)
    }

    .vuesax-app-is-rtl .vs-popup--close {
        -webkit-transform: translate(-8px, -8px);
        transform: translate(-8px, -8px)
    }

    .vuesax-app-is-ltr .vs-popup--close {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px)
    }

    .vs-popup--close:hover {
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.1);
        box-shadow: 0 0 0 0 rgba(0,0,0,.1)
    }

    .vuesax-app-is-rtl .vs-popup--close:hover {
        -webkit-transform: translate(-5px, -5px);
        transform: translate(-5px, -5px)
    }

    .vuesax-app-is-ltr .vs-popup--close:hover {
        -webkit-transform: translate(5px, -5px);
        transform: translate(5px, -5px)
    }

    .vs-popup--title {
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 5px 5px 0 0
    }

        .vs-popup--title h3 {
            -webkit-transition: all .23s ease .1s;
            transition: all .23s ease .1s;
            padding: 8px;
            padding-left: 12px;
            font-size: 1.2rem
        }

    .vs-popup--background {
        width: 100%;
        background: rgba(0,0,0,.4);
        position: absolute;
        top: 0;
        height: 100%;
        z-index: 10;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        opacity: 1
    }

    .vuesax-app-is-rtl .vs-popup--background {
        right: 0
    }

    .vuesax-app-is-ltr .vs-popup--background {
        left: 0
    }

    .vs-popup-primary header .after {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-popup-secondary header .after {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-popup-danger header .after {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-popup-success header .after {
        background: rgba(var(--vs-success), 1)
    }

    .vs-popup-warning header .after {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-popup-dark header .after {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-popup-light header .after {
        background: rgba(var(--vs-light), 1)
    }

    @-webkit-keyframes rebound {
        0% {
            -webkit-transform: scale(.9);
            transform: scale(.9)
        }

        50% {
            -webkit-transform: scale(1.08);
            transform: scale(1.08)
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }

    @keyframes rebound {
        0% {
            -webkit-transform: scale(.9);
            transform: scale(.9)
        }

        50% {
            -webkit-transform: scale(1.08);
            transform: scale(1.08)
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }

    .vs-progress--indeterminate {
        position: absolute;
        width: 0;
        height: 100%;
        left: -100%;
        top: 0;
        border-radius: 2px;
        -webkit-animation: indeterminate 1.2s ease infinite;
        animation: indeterminate 1.2s ease infinite;
        border-radius: 20px
    }

    .vs-progress--background {
        width: 100%;
        border-radius: 18px;
        background-color: rgba(0,0,0,.06);
        z-index: 50;
        position: relative;
        display: inline-block;
        overflow: hidden
    }

    .vs-progress--foreground {
        z-index: 100;
        height: 100%;
        border-radius: 18px;
        -webkit-transition: all .5s ease;
        transition: all .5s ease
    }

    .vs-progress-primary {
        background: rgba(var(--vs-primary), .1)
    }

        .vs-progress-primary .vs-progress--foreground, .vs-progress-primary .vs-progress--indeterminate {
            background: rgba(var(--vs-primary), 1)
        }

    .vs-progress-secondary {
        background: rgba(var(--vs-secondary), .1)
    }

        .vs-progress-secondary .vs-progress--foreground, .vs-progress-secondary .vs-progress--indeterminate {
            background: rgba(var(--vs-secondary), 1)
        }

    .vs-progress-danger {
        background: rgba(var(--vs-danger), .1)
    }

        .vs-progress-danger .vs-progress--foreground, .vs-progress-danger .vs-progress--indeterminate {
            background: rgba(var(--vs-danger), 1)
        }

    .vs-progress-success {
        background: rgba(var(--vs-success), .1)
    }

        .vs-progress-success .vs-progress--foreground, .vs-progress-success .vs-progress--indeterminate {
            background: rgba(var(--vs-success), 1)
        }

    .vs-progress-warning {
        background: rgba(var(--vs-warning), .1)
    }

        .vs-progress-warning .vs-progress--foreground, .vs-progress-warning .vs-progress--indeterminate {
            background: rgba(var(--vs-warning), 1)
        }

    .vs-progress-dark {
        background: rgba(var(--vs-dark), .1)
    }

        .vs-progress-dark .vs-progress--foreground, .vs-progress-dark .vs-progress--indeterminate {
            background: rgba(var(--vs-dark), 1)
        }

    .vs-progress-light {
        background: rgba(var(--vs-light), .1)
    }

        .vs-progress-light .vs-progress--foreground, .vs-progress-light .vs-progress--indeterminate {
            background: rgba(var(--vs-light), 1)
        }

    @-webkit-keyframes indeterminate {
        0% {
            width: 30%;
            left: -40%
        }

        60% {
            left: 100%;
            width: 100%
        }

        to {
            left: 100%;
            width: 0
        }
    }

    @keyframes indeterminate {
        0% {
            width: 30%;
            left: -40%
        }

        60% {
            left: 100%;
            width: 100%
        }

        to {
            left: 100%;
            width: 0
        }
    }

    .con-vs-radio {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .con-vs-radio:hover .vs-radio--borde {
            border: 2px solid #a0a0a0
        }

    .vs-radio--label {
        cursor: pointer
    }

    .vuesax-app-is-rtl .vs-radio--label {
        margin-right: 5px
    }

    .vuesax-app-is-ltr .vs-radio--label {
        margin-left: 5px
    }

    .vs-radio {
        width: 18px;
        height: 18px;
        position: relative;
        display: block;
        border-radius: 50%;
        cursor: pointer;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }

    .vs-radio--borde {
        border-radius: 50%;
        background: 0 0;
        border: 2px solid #c8c8c8
    }

    .vs-radio--borde, .vs-radio--circle {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        top: 0
    }

    .vs-radio--circle {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: 0;
        border-radius: 50%
    }

    .vs-radio--input {
        position: absolute;
        left: 0;
        opacity: 0;
        width: 20px
    }

        .vs-radio--input:checked + .vs-radio {
            cursor: default
        }

            .vs-radio--input:checked + .vs-radio .vs-radio--circle {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }

            .vs-radio--input:checked + .vs-radio .vs-radio--borde {
                opacity: 0;
                -webkit-transform: scale(.3);
                transform: scale(.3)
            }

        .vs-radio--input:active + .vs-radio .vs-radio--borde {
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }

        .vs-radio--input:disabled + .vs-radio, .vs-radio--input:disabled + .vs-radio + .vs-radio--label {
            pointer-events: none;
            cursor: default
        }

        .vs-radio--input:disabled + .vs-radio {
            opacity: .4
        }

            .vs-radio--input:disabled + .vs-radio .vs-radio--circle {
                pointer-events: none
            }

            .vs-radio--input:disabled + .vs-radio .vs-radio--borde {
                border: 2px solid #b4b4b4;
                background: #d2d2d2;
                pointer-events: none
            }

    .vs-radio-primary .vs-radio--circle {
        background: rgba(var(--vs-primary), 1);
        -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-primary), .4);
        box-shadow: 0 3px 12px 0 rgba(var(--vs-primary), .4)
    }

    .vs-radio-secondary .vs-radio--circle {
        background: rgba(var(--vs-secondary), 1);
        -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-secondary), .4);
        box-shadow: 0 3px 12px 0 rgba(var(--vs-secondary), .4)
    }

    .vs-radio-danger .vs-radio--circle {
        background: rgba(var(--vs-danger), 1);
        -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-danger), .4);
        box-shadow: 0 3px 12px 0 rgba(var(--vs-danger), .4)
    }

    .vs-radio-success .vs-radio--circle {
        background: rgba(var(--vs-success), 1);
        -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-success), .4);
        box-shadow: 0 3px 12px 0 rgba(var(--vs-success), .4)
    }

    .vs-radio-warning .vs-radio--circle {
        background: rgba(var(--vs-warning), 1);
        -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-warning), .4);
        box-shadow: 0 3px 12px 0 rgba(var(--vs-warning), .4)
    }

    .vs-radio-dark .vs-radio--circle {
        background: rgba(var(--vs-dark), 1);
        -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-dark), .4);
        box-shadow: 0 3px 12px 0 rgba(var(--vs-dark), .4)
    }

    .vs-radio-light .vs-radio--circle {
        background: rgba(var(--vs-light), 1);
        -webkit-box-shadow: 0 3px 12px 0 rgba(var(--vs-light), .4);
        box-shadow: 0 3px 12px 0 rgba(var(--vs-light), .4)
    }

    .fadeselect-enter-active {
        -webkit-transition: opacity .2s, -webkit-transform .2s;
        transition: opacity .2s, -webkit-transform .2s;
        transition: transform .2s, opacity .2s;
        transition: transform .2s, opacity .2s, -webkit-transform .2s
    }

    .fadeselect-leave-active {
        -webkit-transition: opacity .15s, -webkit-transform .15s;
        transition: opacity .15s, -webkit-transform .15s;
        transition: transform .15s, opacity .15s;
        transition: transform .15s, opacity .15s, -webkit-transform .15s
    }

    .fadeselect-enter, .fadeselect-leave-to {
        opacity: 0;
        -webkit-transform: translate(0) scale(.95);
        transform: translate(0) scale(.95);
        -webkit-box-shadow: 0 10px 0 -5px transparent;
        box-shadow: 0 10px 0 -5px transparent
    }

    .con-select, .input-select-con {
        position: relative
    }

    .con-select {
        width: 200px;
        clear: both
    }

        .con-select.activeOptions:not(.autocompletex) .input-select {
            opacity: 0;
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }

    .vuesax-app-is-ltr .con-select.activeOptions .vs-select--icon, .vuesax-app-is-rtl .con-select.activeOptions .vs-select--icon {
        -webkit-transform: translateY(-50%) rotate(-180deg);
        transform: translateY(-50%) rotate(-180deg)
    }

    .vs-select--icon {
        position: absolute;
        font-size: 1.0625em;
        top: 50%;
        pointer-events: none;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

    .vuesax-app-is-rtl .vs-select--icon {
        left: 5px
    }

    .vuesax-app-is-ltr .vs-select--icon {
        right: 5px
    }

    .vs-select--input {
        color: inherit;
        width: 100%;
        position: relative;
        padding: 7px;
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,.1);
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .vuesax-app-is-rtl .vs-select--input {
        padding-left: 20px
    }

    .vuesax-app-is-ltr .vs-select--input {
        padding-right: 20px
    }

    .vs-select--input:hover {
        border: 1px solid rgba(0,0,0,.4)
    }

    .vs-select--input-con {
        position: relative
    }

    .vs-select--input:disabled {
        opacity: .5;
        cursor: default;
        pointer-events: none
    }

    .vs-select--label {
        font-size: .85rem;
        color: rgba(0,0,0,.6)
    }

    .vuesax-app-is-rtl .vs-select--label {
        padding-right: 5px
    }

    .vuesax-app-is-ltr .vs-select--label {
        padding-left: 5px
    }

    .con-text-validation {
        position: relative;
        font-size: .65rem;
        overflow: hidden;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

        .con-text-validation .span-text-validation {
            padding: 2px 4px;
            padding-bottom: 4px;
            display: block
        }

    .scrollx ul {
        padding-right: 4px
    }

    .vs-select--options {
        padding: 4px;
        padding-top: 6px;
        padding-bottom: 6px;
        -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.05);
        box-shadow: 0 5px 20px 0 rgba(0,0,0,.05);
        border-radius: 5px;
        position: absolute;
        z-index: 40000;
        background: #fff
    }

    .vuesax-app-is-rtl .vs-select--options {
        padding-right: 5px
    }

    .vuesax-app-is-ltr .vs-select--options {
        padding-left: 5px
    }

    .vs-select--options ul {
        max-height: 260px;
        overflow: auto;
        padding: 0
    }

    .vuesax-app-is-rtl .vs-select--options ul {
        padding-right: 0
    }

    .vuesax-app-is-ltr .vs-select--options ul {
        padding-left: 0
    }

    .vs-select--options ul li {
        margin: 0
    }

    .vs-select--item {
        color: rgba(0,0,0,.8);
        padding: 7px;
        border: 0;
        position: relative;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        margin: 0 !important;
        cursor: pointer
    }

    .vuesax-app-is-rtl .vs-select--item {
        text-align: right
    }

    .vuesax-app-is-ltr .vs-select--item {
        text-align: left
    }

    .vs-select--item:focus, .vs-select--item:hover {
        background: #f5f5f5
    }

    .vs-select--item.con-icon.activex {
        padding-left: 25px
    }

        .vs-select--item.con-icon.activex .vs-select--item-icon {
            opacity: 1;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%)
        }

    .vs-select--item-icon {
        position: absolute;
        font-size: 1em;
        left: 5px;
        opacity: 0;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        top: 50%
    }

    .vuesax-app-is-rtl .vs-select--item-icon {
        -webkit-transform: translate(100%, -50%);
        transform: translate(100%, -50%)
    }

    .vuesax-app-is-ltr .vs-select--item-icon {
        -webkit-transform: translate(-100%, -50%);
        transform: translate(-100%, -50%)
    }

    .vs-select-primary .vs-select--item.activex {
        background: rgba(var(--vs-primary), .1);
        color: rgba(var(--vs-primary), 1);
        font-weight: 700
    }

    .input-select-label-primary--active {
        color: rgba(var(--vs-primary), 1)
    }

    .input-select-validate-primary .input-select-con .input-select {
        border-color: rgba(var(--vs-primary), 1)
    }

    .input-select-validate-primary .input-select-con .vs-select--icon {
        color: rgba(var(--vs-primary), 1)
    }

    .vs-select-secondary .vs-select--item.activex {
        background: rgba(var(--vs-secondary), .1);
        color: rgba(var(--vs-secondary), 1);
        font-weight: 700
    }

    .input-select-label-secondary--active {
        color: rgba(var(--vs-secondary), 1)
    }

    .input-select-validate-secondary .input-select-con .input-select {
        border-color: rgba(var(--vs-secondary), 1)
    }

    .input-select-validate-secondary .input-select-con .vs-select--icon {
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-select-danger .vs-select--item.activex {
        background: rgba(var(--vs-danger), .1);
        color: rgba(var(--vs-danger), 1);
        font-weight: 700
    }

    .input-select-label-danger--active {
        color: rgba(var(--vs-danger), 1)
    }

    .input-select-validate-danger .input-select-con .input-select {
        border-color: rgba(var(--vs-danger), 1)
    }

    .input-select-validate-danger .input-select-con .vs-select--icon {
        color: rgba(var(--vs-danger), 1)
    }

    .vs-select-success .vs-select--item.activex {
        background: rgba(var(--vs-success), .1);
        color: rgba(var(--vs-success), 1);
        font-weight: 700
    }

    .input-select-label-success--active {
        color: rgba(var(--vs-success), 1)
    }

    .input-select-validate-success .input-select-con .input-select {
        border-color: rgba(var(--vs-success), 1)
    }

    .input-select-validate-success .input-select-con .vs-select--icon {
        color: rgba(var(--vs-success), 1)
    }

    .vs-select-warning .vs-select--item.activex {
        background: rgba(var(--vs-warning), .1);
        color: rgba(var(--vs-warning), 1);
        font-weight: 700
    }

    .input-select-label-warning--active {
        color: rgba(var(--vs-warning), 1)
    }

    .input-select-validate-warning .input-select-con .input-select {
        border-color: rgba(var(--vs-warning), 1)
    }

    .input-select-validate-warning .input-select-con .vs-select--icon {
        color: rgba(var(--vs-warning), 1)
    }

    .vs-select-dark .vs-select--item.activex {
        background: rgba(var(--vs-dark), .1);
        color: rgba(var(--vs-dark), 1);
        font-weight: 700
    }

    .input-select-label-dark--active {
        color: rgba(var(--vs-dark), 1)
    }

    .input-select-validate-dark .input-select-con .input-select {
        border-color: rgba(var(--vs-dark), 1)
    }

    .input-select-validate-dark .input-select-con .vs-select--icon {
        color: rgba(var(--vs-dark), 1)
    }

    .vs-select-light .vs-select--item.activex {
        background: rgba(var(--vs-light), .1);
        color: rgba(var(--vs-light), 1);
        font-weight: 700
    }

    .input-select-label-light--active {
        color: rgba(var(--vs-light), 1)
    }

    .input-select-validate-light .input-select-con .input-select {
        border-color: rgba(var(--vs-light), 1)
    }

    .input-select-validate-light .input-select-con .vs-select--icon {
        color: rgba(var(--vs-light), 1)
    }

    .vs-select--item {
        background: 0 0;
        padding: 5px;
        width: 100%;
        margin: 0;
        text-transform: capitalize
    }

        .vs-select--item.disabledx {
            opacity: .5;
            cursor: default;
            pointer-events: none
        }

        .vs-select--item span.searchx {
            background: rgba(0,0,0,.07);
            border-bottom: 1px solid rgba(0,0,0,.3);
            font-weight: 700;
            color: inherit
        }

    .vs-select-group h4 {
        cursor: default;
        padding-bottom: 5px
    }

    .vuesax-app-is-rtl .vs-select-group h4 {
        padding-right: 10px
    }

    .vuesax-app-is-ltr .vs-select-group h4 {
        padding-left: 10px
    }

    .vs-select-group li {
        list-style: none
    }

    .vuesax-app-is-rtl .vs-select-group li {
        border-right: 1px solid rgba(0,0,0,.1)
    }

    .vuesax-app-is-ltr .vs-select-group li {
        border-left: 1px solid rgba(0,0,0,.1)
    }

    .vuesax-app-is-rtl .vs-select-group li {
        margin-right: 15px !important
    }

    .vuesax-app-is-ltr .vs-select-group li {
        margin-left: 15px !important
    }

    .vs-select--icon-clear {
        position: absolute;
        z-index: 200;
        top: 50%;
        cursor: pointer;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
        border: 0;
        width: 15px;
        height: 15px;
        border-radius: 0 5px 5px 0;
        background: inherit;
        color: inherit;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

    .vuesax-app-is-rtl .vs-select--icon-clear {
        left: 5px
    }

    .vuesax-app-is-ltr .vs-select--icon-clear {
        right: 5px
    }

    .vs-select--icon-clear.activeBtnClear {
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-transform: translateY(-50%) rotate(0) !important;
        transform: translateY(-50%) rotate(0) !important
    }

    .vs-select--icon-clear i {
        font-size: .9rem
    }

    .parentx-static .vs-sidebar-background {
        display: none
    }

    .vs-sidebar--background {
        background: rgba(0,0,0,.2);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 20000;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        opacity: 1
    }

    .vs-sidebar {
        background: #fff;
        z-index: 3000;
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 260px;
        top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
        box-shadow: 0 0 15px 0 rgba(0,0,0,.05);
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        z-index: 40000
    }

    .vuesax-app-is-rtl .vs-sidebar {
        right: 0
    }

    .vuesax-app-is-ltr .vs-sidebar {
        left: 0
    }

    .vs-sidebar.vs-sidebar-reduce {
        max-width: 54px;
        border-radius: 0 10px 10px 0
    }

        .vs-sidebar.vs-sidebar-reduce h4 {
            display: block;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            font-size: .7rem
        }

            .vs-sidebar.vs-sidebar-reduce h4 i {
                opacity: 0
            }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-reduce ul {
        padding-right: 0 !important
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-reduce ul {
        padding-left: 0 !important
    }

    .vs-sidebar.vs-sidebar-reduce .con-vs-avatar {
        width: 40px !important;
        height: 40px !important
    }

    .vs-sidebar.vs-sidebar-reduce.vs-sidebar-reduceNotHoverExpand h4 {
        text-align: center
    }

        .vs-sidebar.vs-sidebar-reduce.vs-sidebar-reduceNotHoverExpand h4:hover ~ .vs-sidebar--tooltip {
            opacity: 1;
            visibility: visible
        }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-reduce.vs-sidebar-reduceNotHoverExpand h4:hover ~ .vs-sidebar--tooltip {
        -webkit-transform: translate(-5px, -110%);
        transform: translate(-5px, -110%)
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-reduce.vs-sidebar-reduceNotHoverExpand h4:hover ~ .vs-sidebar--tooltip {
        -webkit-transform: translate(5px, -110%);
        transform: translate(5px, -110%)
    }

    .vs-sidebar.vs-sidebar-reduce:hover:not(.vs-sidebar-reduceNotRebound):not(.vs-sidebar-reduceNotHoverExpand) {
        -webkit-animation: expand .4s ease .15s;
        animation: expand .4s ease .15s
    }

    .vs-sidebar.vs-sidebar-reduce:hover:not(.vs-sidebar-reduceNotHoverExpand) {
        max-width: 260px
    }

        .vs-sidebar.vs-sidebar-reduce:hover:not(.vs-sidebar-reduceNotHoverExpand) h4 i {
            opacity: 1
        }

    .vs-sidebar.vs-sidebar-reduce .vs-sidebar--item {
        overflow: hidden
    }

        .vs-sidebar.vs-sidebar-reduce .vs-sidebar--item i {
            padding: 10px
        }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-position-right {
        right: auto
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-position-right {
        left: auto
    }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-position-right {
        left: 0
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-position-right {
        right: 0
    }

    .vs-sidebar.vs-sidebar-position-right.vs-sidebar-reduce {
        border-radius: 10px 0 0 10px
    }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip {
        right: auto
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip {
        left: auto
    }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip {
        left: 70px
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip {
        right: 70px
    }

    .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip:after {
        -webkit-box-shadow: 4px 0 6px -3px rgba(0,0,0,.07);
        box-shadow: 4px 0 6px -3px rgba(0,0,0,.07)
    }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip:after {
        right: auto
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip:after {
        left: auto
    }

    .vuesax-app-is-rtl .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip:after {
        left: 5px
    }

    .vuesax-app-is-ltr .vs-sidebar.vs-sidebar-position-right .vs-sidebar-tooltip:after {
        right: 5px
    }

    .vs-sidebar.vs-sidebar-parent {
        position: absolute;
        height: 100% !important;
        top: 0
    }

    .vs-sidebar.vs-sidebar-staticPosition {
        position: relative
    }

    .vs-sidebar .vs-divider-text {
        opacity: .7
    }

    .vs-sidebar--footer {
        border-top: 1px solid rgba(0,0,0,.06)
    }

    .vs-sidebar--items {
        padding: 10px 0;
        background: inherit;
        overflow-y: auto
    }

    .vs-sidebar--item {
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

        .vs-sidebar--item i.material-icons {
            -webkit-transition: border .25s ease;
            transition: border .25s ease;
            font-size: 1rem
        }

    .vuesax-app-is-rtl .vs-sidebar--item i.material-icons {
        margin-left: 8px
    }

    .vuesax-app-is-ltr .vs-sidebar--item i.material-icons {
        margin-right: 8px
    }

    .vs-sidebar--item a {
        padding: 10px;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: inherit;
        opacity: .8;
        font-size: .85rem;
        text-decoration: none
    }

        .vs-sidebar--item a:hover {
            opacity: 1
        }

    .vs-sidebar--header {
        border-bottom: 1px solid rgba(0,0,0,.06);
        padding: 10px 5px
    }

    .vs-sidebar-group {
        background: inherit;
        position: relative
    }

        .vs-sidebar-group > ul {
            -webkit-transition: all .2s ease;
            transition: all .2s ease
        }

        .vs-sidebar-group h4 {
            padding: 10px;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-transition: all .25s ease;
            transition: all .25s ease;
            border-bottom: 1px solid transparent;
            background: inherit;
            font-size: .7rem
        }

            .vs-sidebar-group h4 i {
                position: absolute
            }

    .vuesax-app-is-rtl .vs-sidebar-group h4 i {
        left: 10px
    }

    .vuesax-app-is-ltr .vs-sidebar-group h4 i {
        right: 10px
    }

    .vs-sidebar-group .vs-icon {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .vs-sidebar-group.vs-sidebar-group-open > ul {
        opacity: 1
    }

    .vuesax-app-is-rtl .vs-sidebar-group.vs-sidebar-group-open > ul {
        padding-right: 10px
    }

    .vuesax-app-is-ltr .vs-sidebar-group.vs-sidebar-group-open > ul {
        padding-left: 10px
    }

    .vs-sidebar-group.vs-sidebar-group-open > ul .vs-sidebar--item:last-child {
        border-bottom: 1px solid rgba(0,0,0,.05)
    }

    .vs-sidebar-group.vs-sidebar-group-open > h4 {
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01))
    }

        .vs-sidebar-group.vs-sidebar-group-open > h4 > .vs-icon {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
        }

    .vs-sidebar--tooltip {
        opacity: 0;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        background: inherit;
        -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.07);
        box-shadow: 0 0 6px 0 rgba(0,0,0,.07);
        padding: 4px 8px;
        border-radius: 4px;
        position: fixed;
        pointer-events: none;
        visibility: hidden
    }

    .vuesax-app-is-rtl .vs-sidebar--tooltip {
        right: 60px
    }

    .vuesax-app-is-ltr .vs-sidebar--tooltip {
        left: 60px
    }

    .vuesax-app-is-rtl .vs-sidebar--tooltip {
        -webkit-transform: translate(-15px, -110%);
        transform: translate(-15px, -110%)
    }

    .vuesax-app-is-ltr .vs-sidebar--tooltip {
        -webkit-transform: translate(15px, -110%);
        transform: translate(15px, -110%)
    }

    .vs-sidebar--tooltip:after {
        content: "";
        width: 10px;
        height: 10px;
        background: inherit;
        -webkit-box-shadow: -4px 0 6px -3px rgba(0,0,0,.07);
        box-shadow: -4px 0 6px -3px rgba(0,0,0,.07);
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg)
    }

    .vuesax-app-is-rtl .vs-sidebar--tooltip:after {
        right: -5px
    }

    .vuesax-app-is-ltr .vs-sidebar--tooltip:after {
        left: -5px
    }

    .vs-sidebar--group-items {
        padding: 0;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        max-height: 0;
        overflow: hidden;
        background: inherit
    }

    .vs-sidebar-primary .vs-sidebar--item a:hover {
        color: rgba(var(--vs-primary), 1)
    }

    .vs-sidebar-primary .vs-sidebar-item-active {
        font-weight: 700;
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01));
        border-right: 3px solid rgba(var(--vs-primary), 1) !important
    }

    .vuesax-app-is-rtl .vs-sidebar-primary .vs-sidebar-item-active {
        border-left: 3px solid rgba(var(--vs-primary), 1) !important
    }

    .vuesax-app-is-ltr .vs-sidebar-primary .vs-sidebar-item-active {
        border-right: 3px solid rgba(var(--vs-primary), 1) !important
    }

    .vs-sidebar-primary .vs-sidebar-item-active a {
        color: rgba(var(--vs-primary), 1) !important;
        opacity: 1 !important
    }

    .vs-sidebar-secondary .vs-sidebar--item a:hover {
        color: rgba(var(--vs-secondary), 1)
    }

    .vs-sidebar-secondary .vs-sidebar-item-active {
        font-weight: 700;
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01));
        border-right: 3px solid rgba(var(--vs-secondary), 1) !important
    }

    .vuesax-app-is-rtl .vs-sidebar-secondary .vs-sidebar-item-active {
        border-left: 3px solid rgba(var(--vs-secondary), 1) !important
    }

    .vuesax-app-is-ltr .vs-sidebar-secondary .vs-sidebar-item-active {
        border-right: 3px solid rgba(var(--vs-secondary), 1) !important
    }

    .vs-sidebar-secondary .vs-sidebar-item-active a {
        color: rgba(var(--vs-secondary), 1) !important;
        opacity: 1 !important
    }

    .vs-sidebar-danger .vs-sidebar--item a:hover {
        color: rgba(var(--vs-danger), 1)
    }

    .vs-sidebar-danger .vs-sidebar-item-active {
        font-weight: 700;
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01));
        border-right: 3px solid rgba(var(--vs-danger), 1) !important
    }

    .vuesax-app-is-rtl .vs-sidebar-danger .vs-sidebar-item-active {
        border-left: 3px solid rgba(var(--vs-danger), 1) !important
    }

    .vuesax-app-is-ltr .vs-sidebar-danger .vs-sidebar-item-active {
        border-right: 3px solid rgba(var(--vs-danger), 1) !important
    }

    .vs-sidebar-danger .vs-sidebar-item-active a {
        color: rgba(var(--vs-danger), 1) !important;
        opacity: 1 !important
    }

    .vs-sidebar-success .vs-sidebar--item a:hover {
        color: rgba(var(--vs-success), 1)
    }

    .vs-sidebar-success .vs-sidebar-item-active {
        font-weight: 700;
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01));
        border-right: 3px solid rgba(var(--vs-success), 1) !important
    }

    .vuesax-app-is-rtl .vs-sidebar-success .vs-sidebar-item-active {
        border-left: 3px solid rgba(var(--vs-success), 1) !important
    }

    .vuesax-app-is-ltr .vs-sidebar-success .vs-sidebar-item-active {
        border-right: 3px solid rgba(var(--vs-success), 1) !important
    }

    .vs-sidebar-success .vs-sidebar-item-active a {
        color: rgba(var(--vs-success), 1) !important;
        opacity: 1 !important
    }

    .vs-sidebar-warning .vs-sidebar--item a:hover {
        color: rgba(var(--vs-warning), 1)
    }

    .vs-sidebar-warning .vs-sidebar-item-active {
        font-weight: 700;
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01));
        border-right: 3px solid rgba(var(--vs-warning), 1) !important
    }

    .vuesax-app-is-rtl .vs-sidebar-warning .vs-sidebar-item-active {
        border-left: 3px solid rgba(var(--vs-warning), 1) !important
    }

    .vuesax-app-is-ltr .vs-sidebar-warning .vs-sidebar-item-active {
        border-right: 3px solid rgba(var(--vs-warning), 1) !important
    }

    .vs-sidebar-warning .vs-sidebar-item-active a {
        color: rgba(var(--vs-warning), 1) !important;
        opacity: 1 !important
    }

    .vs-sidebar-dark .vs-sidebar--item a:hover {
        color: rgba(var(--vs-dark), 1)
    }

    .vs-sidebar-dark .vs-sidebar-item-active {
        font-weight: 700;
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01));
        border-right: 3px solid rgba(var(--vs-dark), 1) !important
    }

    .vuesax-app-is-rtl .vs-sidebar-dark .vs-sidebar-item-active {
        border-left: 3px solid rgba(var(--vs-dark), 1) !important
    }

    .vuesax-app-is-ltr .vs-sidebar-dark .vs-sidebar-item-active {
        border-right: 3px solid rgba(var(--vs-dark), 1) !important
    }

    .vs-sidebar-dark .vs-sidebar-item-active a {
        color: rgba(var(--vs-dark), 1) !important;
        opacity: 1 !important
    }

    .vs-sidebar-light .vs-sidebar--item a:hover {
        color: rgba(var(--vs-light), 1)
    }

    .vs-sidebar-light .vs-sidebar-item-active {
        font-weight: 700;
        background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0,0,0,.01)));
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.01));
        border-right: 3px solid rgba(var(--vs-light), 1) !important
    }

    .vuesax-app-is-rtl .vs-sidebar-light .vs-sidebar-item-active {
        border-left: 3px solid rgba(var(--vs-light), 1) !important
    }

    .vuesax-app-is-ltr .vs-sidebar-light .vs-sidebar-item-active {
        border-right: 3px solid rgba(var(--vs-light), 1) !important
    }

    .vs-sidebar-light .vs-sidebar-item-active a {
        color: rgba(var(--vs-light), 1) !important;
        opacity: 1 !important
    }

    .vs-sidebar-animate-enter-active, .vs-sidebar-animate-enter-active .vs-sidebar, .vs-sidebar-animate-leave-active, .vs-sidebar-animate-leave-active .vs-sidebar {
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .vuesax-app-is-rtl .vs-sidebar-animate-enter:not(.vs-sidebar-position-right) .vs-sidebar, .vuesax-app-is-rtl .vs-sidebar-animate-leave-to:not(.vs-sidebar-position-right) .vs-sidebar {
        -webkit-transform: translate(100%);
        transform: translate(100%)
    }

    .vuesax-app-is-ltr .vs-sidebar-animate-enter:not(.vs-sidebar-position-right) .vs-sidebar, .vuesax-app-is-ltr .vs-sidebar-animate-leave-to:not(.vs-sidebar-position-right) .vs-sidebar {
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
    }

    .vs-sidebar-animate-enter .vs-sidebar-background, .vs-sidebar-animate-leave-to .vs-sidebar-background {
        opacity: 0 !important
    }

    .vuesax-app-is-rtl .vs-sidebar-animate-enter .vs-sidebar.vs-sidebar-position-right, .vuesax-app-is-rtl .vs-sidebar-animate-leave-to .vs-sidebar.vs-sidebar-position-right {
        -webkit-transform: translate(-100%);
        transform: translate(-100%)
    }

    .vuesax-app-is-ltr .vs-sidebar-animate-enter .vs-sidebar.vs-sidebar-position-right, .vuesax-app-is-ltr .vs-sidebar-animate-leave-to .vs-sidebar.vs-sidebar-position-right {
        -webkit-transform: translate(100%);
        transform: translate(100%)
    }

    @-webkit-keyframes expand {
        0% {
            max-width: 275px
        }

        30% {
            max-width: 250px
        }

        60% {
            max-width: 265px
        }

        to {
            max-width: 260px
        }
    }

    @keyframes expand {
        0% {
            max-width: 275px
        }

        30% {
            max-width: 250px
        }

        60% {
            max-width: 265px
        }

        to {
            max-width: 260px
        }
    }

    .con-vs-slider {
        width: 100%;
        position: relative;
        left: 0;
        margin: 16px 0;
        display: block;
        min-width: 300px;
        z-index: 100
    }

        .con-vs-slider.disabledx {
            opacity: .4;
            cursor: default
        }

            .con-vs-slider.disabledx button {
                cursor: default !important;
                pointer-events: none
            }

    .vs-slider {
        width: 100%;
        height: 4px;
        border-radius: 4px;
        background: #f0f0f0;
        position: relative;
        cursor: pointer;
        border: 0;
        margin: 0;
        display: block;
        overflow: hidden
    }

    .vs-slider-line-one {
        width: 20px;
        height: 100%;
        top: 0;
        position: absolute;
        left: 0;
        z-index: 1
    }

        .vs-slider-line-one.hasTransition {
            -webkit-transition: all .2s ease;
            transition: all .2s ease
        }

    .vs-slider-line-efect {
        width: 0;
        height: 100%;
        top: 0;
        position: absolute;
        left: 0;
        -webkit-transition: opacity .3s ease, width .3s ease;
        transition: opacity .3s ease, width .3s ease;
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }

        .vs-slider-line-efect:not(.run-effect) {
            opacity: 0 !important;
            width: 0 !important
        }

        .vs-slider-line-efect.run-effect {
            width: 100%;
            -webkit-animation: example .3s ease;
            animation: example .3s ease;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1
        }

    .vs-slider--tick {
        position: absolute;
        left: 100px;
        background: #d2d2d2;
        width: 4px;
        height: 100%;
        top: 0
    }

        .vs-slider--tick.isEnd {
            -webkit-transform: translate(-100%);
            transform: translate(-100%)
        }

    .vs-slider--circles {
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
        -webkit-transition: border .2s ease, border-radius .2s ease, -webkit-transform .2s ease;
        transition: border .2s ease, border-radius .2s ease, -webkit-transform .2s ease;
        transition: border .2s ease, transform .2s ease, border-radius .2s ease;
        transition: border .2s ease, transform .2s ease, border-radius .2s ease, -webkit-transform .2s ease;
        display: block;
        background: #fff
    }

        .vs-slider--circles:active {
            border-width: 7px !important
        }

        .vs-slider--circles.isEquals.vs-circle-slider-two {
            border-radius: 50% 50% 0 0;
            -webkit-transform: translate(-50%, -7px) scale(.9) !important;
            transform: translate(-50%, -7px) scale(.9) !important
        }

        .vs-slider--circles.isEquals.vs-circle-slider {
            border-radius: 0 0 50% 50%;
            -webkit-transform: translate(-50%, 6px) scale(.9) !important;
            transform: translate(-50%, 6px) scale(.9) !important
        }

        .vs-slider--circles.changeValue:active {
            border-width: 6px !important
        }

            .vs-slider--circles.changeValue:active .text-circle-slider {
                -webkit-transform: translate(-50%, calc(-100% + -19px)) !important;
                transform: translate(-50%, calc(-100% + -19px)) !important
            }

        .vs-slider--circles.isEndValue {
            border-radius: 50% 0 0 50% !important
        }

        .vs-slider--circles:hover:not(:active) {
            -webkit-transform: scale(1.2) translate(-50%);
            transform: scale(1.2) translate(-50%)
        }

        .vs-slider--circles:active .text-circle-slider {
            opacity: 1;
            -webkit-transform: translate(-50%, calc(-100% + -13px)) scale(1) rotate(0);
            transform: translate(-50%, calc(-100% + -13px)) scale(1) rotate(0);
            visibility: visible
        }

    .vs-slider--circle-text {
        color: #fff;
        position: absolute;
        padding: 2px 5px;
        display: block;
        border-radius: 5px;
        -webkit-transform: translate(-50%, -20%) scale(.3);
        transform: translate(-50%, -20%) scale(.3);
        top: 0;
        left: 50%;
        font-size: .75rem;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        z-index: 1000
    }

        .vs-slider--circle-text span {
            margin-left: 2px
        }

        .vs-slider--circle-text i {
            font-size: .8rem;
            margin-left: 2px
        }

        .vs-slider--circle-text:after {
            content: "";
            width: 6px;
            height: 6px;
            display: block;
            position: absolute;
            background: inherit;
            left: 50%;
            bottom: -3px;
            -webkit-transform: translate(-50%) rotate(45deg);
            transform: translate(-50%) rotate(45deg)
        }

    .vs-slider--circle {
        width: 16px;
        height: 16px;
        position: absolute;
        top: -6px;
        border-radius: 50%;
        cursor: pointer;
        border: 0;
        margin: 0;
        z-index: 200
    }

        .vs-slider--circle.hasTransition {
            -webkit-transition: all .2s ease;
            transition: all .2s ease
        }

    .vs-slider--circle-two {
        z-index: 100;
        width: 16px;
        height: 16px;
        position: absolute;
        top: -6px;
        border-radius: 50%;
        cursor: pointer;
        border: 0;
        margin: 0;
        color: #fff
    }

        .vs-slider--circle-two.hasTransition {
            -webkit-transition: all .2s ease;
            transition: all .2s ease
        }

    .vs-slider-primary .vs-slider-line-one {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-slider-primary .vs-circles-slider {
        border: 2px solid rgba(var(--vs-primary), 1)
    }

    .vs-slider-primary .text-circle-slider, .vs-slider-primary .vs-slider-line-efect {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-slider-secondary .vs-slider-line-one {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-slider-secondary .vs-circles-slider {
        border: 2px solid rgba(var(--vs-secondary), 1)
    }

    .vs-slider-secondary .text-circle-slider, .vs-slider-secondary .vs-slider-line-efect {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-slider-danger .vs-slider-line-one {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-slider-danger .vs-circles-slider {
        border: 2px solid rgba(var(--vs-danger), 1)
    }

    .vs-slider-danger .text-circle-slider, .vs-slider-danger .vs-slider-line-efect {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-slider-success .vs-slider-line-one {
        background: rgba(var(--vs-success), 1)
    }

    .vs-slider-success .vs-circles-slider {
        border: 2px solid rgba(var(--vs-success), 1)
    }

    .vs-slider-success .text-circle-slider, .vs-slider-success .vs-slider-line-efect {
        background: rgba(var(--vs-success), 1)
    }

    .vs-slider-warning .vs-slider-line-one {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-slider-warning .vs-circles-slider {
        border: 2px solid rgba(var(--vs-warning), 1)
    }

    .vs-slider-warning .text-circle-slider, .vs-slider-warning .vs-slider-line-efect {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-slider-dark .vs-slider-line-one {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-slider-dark .vs-circles-slider {
        border: 2px solid rgba(var(--vs-dark), 1)
    }

    .vs-slider-dark .text-circle-slider, .vs-slider-dark .vs-slider-line-efect {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-slider-light .vs-slider-line-one {
        background: rgba(var(--vs-light), 1)
    }

    .vs-slider-light .vs-circles-slider {
        border: 2px solid rgba(var(--vs-light), 1)
    }

    .vs-slider-light .text-circle-slider, .vs-slider-light .vs-slider-line-efect {
        background: rgba(var(--vs-light), 1)
    }

    @-webkit-keyframes example {
        0% {
            opacity: 1
        }

        to {
            opacity: 0
        }
    }

    @keyframes example {
        0% {
            opacity: 1
        }

        to {
            opacity: 0
        }
    }

    .vs-spacer {
        padding: 0;
        margin: 0;
        -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important;
        background: 0 0
    }

    .vs-switch {
        border-radius: 12px;
        border: 0;
        min-width: 42px;
        height: 22px;
        position: relative;
        cursor: pointer;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .vs-switch:disabled {
            opacity: .5;
            cursor: default;
            pointer-events: none
        }

        .vs-switch:active:not(.vs-switch--circle) .vs-switch--circle {
            width: 24px;
            border-radius: 15px
        }

        .vs-switch.vs-switch-active:active .vs-switch--circle {
            width: 24px;
            margin-left: calc(100% - 29px)
        }

        .vs-switch.vs-switch-active .vs-switch--circle {
            margin-left: calc(100% - 22px)
        }

    .vs-switch--circle {
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        background: #fff;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.1);
        box-shadow: 0 0 4px 0 rgba(0,0,0,.1)
    }

    .vs-switch--text {
        position: absolute;
        display: block;
        font-size: .625em;
        opacity: 0;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden
    }

        .vs-switch--text.text-on {
            padding-left: 6px;
            left: 0;
            color: #fff;
            -webkit-transform: translate(10px);
            transform: translate(10px)
        }

        .vs-switch--text.text-off {
            right: 0;
            padding-right: 5px;
            color: #a0a0a0;
            -webkit-transform: translate(-10px);
            transform: translate(-10px)
        }

        .vs-switch--text.active-text {
            opacity: 1;
            -webkit-transform: translate(0);
            transform: translate(0)
        }

    .vs-switch--icon {
        font-size: .8rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        overflow: hidden;
        max-width: 16px;
        padding: 0 2px
    }

    .vs-switch--input {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 200;
        opacity: 0;
        cursor: pointer
    }

    .vs-switch-primary {
        background: #e2e2e2
    }

        .vs-switch-primary.vs-switch-active {
            background: rgba(var(--vs-primary), 1)
        }

    .vs-switch-secondary {
        background: #e2e2e2
    }

        .vs-switch-secondary.vs-switch-active {
            background: rgba(var(--vs-secondary), 1)
        }

    .vs-switch-danger {
        background: #e2e2e2
    }

        .vs-switch-danger.vs-switch-active {
            background: rgba(var(--vs-danger), 1)
        }

    .vs-switch-success {
        background: #e2e2e2
    }

        .vs-switch-success.vs-switch-active {
            background: rgba(var(--vs-success), 1)
        }

    .vs-switch-warning {
        background: #e2e2e2
    }

        .vs-switch-warning.vs-switch-active {
            background: rgba(var(--vs-warning), 1)
        }

    .vs-switch-dark {
        background: #e2e2e2
    }

        .vs-switch-dark.vs-switch-active {
            background: rgba(var(--vs-dark), 1)
        }

    .vs-switch-light {
        background: #e2e2e2
    }

        .vs-switch-light.vs-switch-active {
            background: rgba(var(--vs-light), 1)
        }

    .vs-con-table {
        background: #fbfbfb;
        border-radius: 5px;
        padding: 5p
    }

        .vs-con-table .empty {
            color: rgba(var(--vs-danger), 1)
        }

        .vs-con-table .con-edit-td {
            position: absolute;
            padding: 6px;
            -webkit-transform: translateY(15%);
            transform: translateY(15%);
            border-radius: 5px;
            z-index: 300;
            background: #fff;
            -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,.05);
            box-shadow: 0 6px 10px 0 rgba(0,0,0,.05);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%;
            overflow: hidden
        }

    .vuesax-app-is-rtl .vs-con-table .con-edit-td {
        right: 0
    }

    .vuesax-app-is-ltr .vs-con-table .con-edit-td {
        left: 0
    }

    .vs-con-table.stripe .tr-values:nth-child(2n) {
        background: 0 0 !important
    }

    .vs-con-table table {
        font-size: .8rem;
        width: 100%;
        border-collapse: collapse
    }

        .vs-con-table table tbody {
            width: 100%
        }

    .vs-con-table td {
        border: 0;
        padding: 2px 8px
    }

        .vs-con-table td:first-child {
            border-left: 1px solid transparent
        }

        .vs-con-table td.td-check {
            cursor: pointer;
            padding: 5px !important
        }

            .vs-con-table td.td-check .con-vs-checkbox {
                margin-left: 0 !important;
                margin-right: 0 !important
            }

            .vs-con-table td.td-check .vs-icon {
                -webkit-transition: all .25s ease;
                transition: all .25s ease;
                -webkit-transform: translate(7px) rotate(-90deg);
                transform: translate(7px) rotate(-90deg)
            }

    .td-edit {
        text-decoration: underline
    }

        .td-edit .icon-edit {
            -webkit-transition: all .25s ease;
            transition: all .25s ease;
            font-size: .75rem;
            position: absolute;
            opacity: 0;
            padding-top: 3px;
            -webkit-transform: translate(0);
            transform: translate(0);
            background: #f0f0f0;
            width: 17px;
            height: 17px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            border-radius: 5px
        }

        .td-edit > span {
            cursor: pointer
        }

    .vs-table--pagination {
        width: 100%;
        padding: 7px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

        .vs-table--pagination .vs-pagination--buttons {
            width: 30px;
            height: 30px
        }

        .vs-table--pagination .item-pagination {
            width: 30px;
            height: 30px;
            font-size: .8rem
        }

    .vs-table--tbody {
        z-index: 400;
        position: relative
    }

    .vs-table--tbody-table {
        width: 100%;
        margin: 0;
        min-width: 400px;
        position: relative
    }

        .vs-table--tbody-table .tr-table:last-child .con-edit-td {
            -webkit-transform: translateY(-100%) !important;
            transform: translateY(-100%) !important
        }

        .vs-table--tbody-table .tr-spacer {
            height: 4px;
            opacity: 1
        }

        .vs-table--tbody-table:nth-child(2n) {
            background: #000
        }

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

            .vs-table--tbody-table .tr-expand td .con-expand {
                -webkit-transition: all .25s ease;
                transition: all .25s ease
            }

        .vs-table--tbody-table tr {
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            background: #fff
        }

        .vs-table--tbody-table .tr-values.activeEdit {
            z-index: 500 !important
        }

            .vs-table--tbody-table .tr-values.activeEdit + .tr-table {
                -webkit-transform: translate(0) !important;
                transform: translate(0) !important
            }

        .vs-table--tbody-table .tr-values.hoverFlat:not(.activeEdit):not(.is-expand):hover {
            opacity: .8
        }

        .vs-table--tbody-table .tr-values:not(.activeEdit):not(.tr-expandedx):not(.hoverFlat):hover {
            z-index: 200;
            -webkit-transform: translateY(-4px);
            transform: translateY(-4px)
        }

            .vs-table--tbody-table .tr-values:not(.activeEdit):not(.tr-expandedx):not(.hoverFlat):hover .tr-values {
                -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.05);
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.05)
            }

            .vs-table--tbody-table .tr-values:not(.activeEdit):not(.tr-expandedx):not(.hoverFlat):hover ~ tbody {
                z-index: 10
            }

        .vs-table--tbody-table .tr-values td {
            padding: 10px
        }

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

        .vs-table--tbody-table .tr-values.selected {
            cursor: pointer
        }

        .vs-table--tbody-table .tr-values:last-child {
            border-bottom: 1px solid transparent
        }

        .vs-table--tbody-table .tr-values.is-expand {
            -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
            box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
            -webkit-transform: scale(1.025);
            transform: scale(1.025);
            z-index: 300
        }

            .vs-table--tbody-table .tr-values.is-expand .tr-values {
                z-index: 300;
                -webkit-box-shadow: 0 2px 10px 0 transparent;
                box-shadow: 0 2px 10px 0 transparent
            }

            .vs-table--tbody-table .tr-values.is-expand .tr-spacer {
                height: 0
            }

            .vs-table--tbody-table .tr-values.is-expand .tr-expand .con-expand {
                border-top: 1px solid rgba(0,0,0,.05) !important
            }

    .td-check {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

        .td-check.active-expanded .vs-icon {
            -webkit-transform: translate(7px) rotate(0) !important;
            transform: translate(7px) rotate(0) !important
        }

        .td-check .vs-icon {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-transform: translate(7px) rotate(0);
            transform: translate(7px) rotate(0)
        }

    .vs-table--content {
        width: 100%;
        overflow: auto
    }

    .vs-table--header {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .vs-table--header, .vs-table--search {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .vs-table--search {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        max-width: 200px;
        position: relative
    }

    .vuesax-app-is-rtl .vs-table--search {
        margin-right: auto
    }

    .vuesax-app-is-ltr .vs-table--search {
        margin-left: auto
    }

    .vs-table--search i {
        position: absolute;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        font-size: 1rem
    }

    .vuesax-app-is-rtl .vs-table--search i {
        right: 10px
    }

    .vuesax-app-is-ltr .vs-table--search i {
        left: 10px
    }

    .vs-table--search-input {
        padding: 5px 10px;
        border-radius: 20px;
        border: 1px solid rgba(0,0,0,.04);
        font-size: .7rem;
        width: 200px;
        color: rgba(0,0,0,.7);
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .vuesax-app-is-rtl .vs-table--search-input {
        padding-right: 30px
    }

    .vuesax-app-is-ltr .vs-table--search-input {
        padding-left: 30px
    }

    .vs-table--search-input:focus {
        -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.03);
        box-shadow: 0 4px 10px 0 rgba(0,0,0,.03)
    }

        .vs-table--search-input:focus + i {
            color: rgba(var(--vs-primary), 1)
        }

    .vs-table--thead {
        z-index: 200;
        width: 100%;
        position: relative
    }

    th {
        padding: 6px 10px;
        padding-top: 5px;
        padding-bottom: 3px;
        border: 0;
        text-align: left;
        font-size: .85rem
    }

        th .vs-table-text {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            cursor: pointer
        }

        th .sort-th, th .vs-table-text {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

        th .sort-th {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            padding-left: 6px;
            -webkit-transform: translateY(2px);
            transform: translateY(2px)
        }

            th .sort-th .th-sort-icon {
                font-size: .9rem;
                -webkit-transition: all .25s ease;
                transition: all .25s ease;
                border-radius: 2px
            }

        th.td-check {
            padding: 0 !important
        }

            th.td-check .con-td-check {
                display: block;
                padding-top: 3px;
                background: #fff;
                border-radius: 6px;
                padding: 5px;
                padding-right: 2px;
                -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.05);
                box-shadow: 0 3px 10px 0 rgba(0,0,0,.05);
                -webkit-transition: all .25s ease;
                transition: all .25s ease
            }

            th.td-check:hover {
                -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.05);
                box-shadow: 0 0 0 0 rgba(0,0,0,.05)
            }

            th.td-check .con-vs-checkbox {
                margin-right: 0 !important;
                margin-left: 0 !important
            }

    .vs-table--not-data {
        padding: 10px;
        text-align: center
    }

    .tr-table-state-primary {
        background: rgba(var(--vs-primary), .1) !important
    }

    .tr-table-state-primary, .vs-table-primary .is-selected {
        color: rgba(var(--vs-primary), 1);
        -webkit-box-shadow: 0 0 1px 0 rgba(var(--vs-primary), 1) !important;
        box-shadow: 0 0 1px 0 rgba(var(--vs-primary), 1) !important
    }

    .vs-table-primary .is-selected {
        -webkit-transform: translate(0) !important;
        transform: translate(0) !important;
        background: rgba(var(--vs-primary), .05) !important
    }

        .vs-table-primary .is-selected td:first-child {
            border-left: 1px solid transparent !important
        }

    .tr-table-state-secondary {
        background: rgba(var(--vs-secondary), .1) !important
    }

    .tr-table-state-secondary, .vs-table-secondary .is-selected {
        color: rgba(var(--vs-secondary), 1);
        -webkit-box-shadow: 0 0 1px 0 rgba(var(--vs-secondary), 1) !important;
        box-shadow: 0 0 1px 0 rgba(var(--vs-secondary), 1) !important
    }

    .vs-table-secondary .is-selected {
        -webkit-transform: translate(0) !important;
        transform: translate(0) !important;
        background: rgba(var(--vs-secondary), .05) !important
    }

        .vs-table-secondary .is-selected td:first-child {
            border-left: 1px solid transparent !important
        }

    .tr-table-state-danger {
        background: rgba(var(--vs-danger), .1) !important
    }

    .tr-table-state-danger, .vs-table-danger .is-selected {
        color: rgba(var(--vs-danger), 1);
        -webkit-box-shadow: 0 0 1px 0 rgba(var(--vs-danger), 1) !important;
        box-shadow: 0 0 1px 0 rgba(var(--vs-danger), 1) !important
    }

    .vs-table-danger .is-selected {
        -webkit-transform: translate(0) !important;
        transform: translate(0) !important;
        background: rgba(var(--vs-danger), .05) !important
    }

        .vs-table-danger .is-selected td:first-child {
            border-left: 1px solid transparent !important
        }

    .tr-table-state-success {
        background: rgba(var(--vs-success), .1) !important
    }

    .tr-table-state-success, .vs-table-success .is-selected {
        color: rgba(var(--vs-success), 1);
        -webkit-box-shadow: 0 0 1px 0 rgba(var(--vs-success), 1) !important;
        box-shadow: 0 0 1px 0 rgba(var(--vs-success), 1) !important
    }

    .vs-table-success .is-selected {
        -webkit-transform: translate(0) !important;
        transform: translate(0) !important;
        background: rgba(var(--vs-success), .05) !important
    }

        .vs-table-success .is-selected td:first-child {
            border-left: 1px solid transparent !important
        }

    .tr-table-state-warning {
        background: rgba(var(--vs-warning), .1) !important
    }

    .tr-table-state-warning, .vs-table-warning .is-selected {
        color: rgba(var(--vs-warning), 1);
        -webkit-box-shadow: 0 0 1px 0 rgba(var(--vs-warning), 1) !important;
        box-shadow: 0 0 1px 0 rgba(var(--vs-warning), 1) !important
    }

    .vs-table-warning .is-selected {
        -webkit-transform: translate(0) !important;
        transform: translate(0) !important;
        background: rgba(var(--vs-warning), .05) !important
    }

        .vs-table-warning .is-selected td:first-child {
            border-left: 1px solid transparent !important
        }

    .tr-table-state-dark {
        background: rgba(var(--vs-dark), .1) !important
    }

    .tr-table-state-dark, .vs-table-dark .is-selected {
        color: rgba(var(--vs-dark), 1);
        -webkit-box-shadow: 0 0 1px 0 rgba(var(--vs-dark), 1) !important;
        box-shadow: 0 0 1px 0 rgba(var(--vs-dark), 1) !important
    }

    .vs-table-dark .is-selected {
        -webkit-transform: translate(0) !important;
        transform: translate(0) !important;
        background: rgba(var(--vs-dark), .05) !important
    }

        .vs-table-dark .is-selected td:first-child {
            border-left: 1px solid transparent !important
        }

    .tr-table-state-light {
        background: rgba(var(--vs-light), .1) !important
    }

    .tr-table-state-light, .vs-table-light .is-selected {
        color: rgba(var(--vs-light), 1);
        -webkit-box-shadow: 0 0 1px 0 rgba(var(--vs-light), 1) !important;
        box-shadow: 0 0 1px 0 rgba(var(--vs-light), 1) !important
    }

    .vs-table-light .is-selected {
        -webkit-transform: translate(0) !important;
        transform: translate(0) !important;
        background: rgba(var(--vs-light), .05) !important
    }

        .vs-table-light .is-selected td:first-child {
            border-left: 1px solid transparent !important
        }

    .td-enter-active, .td-leave-active {
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .td-enter, .td-leave-to {
        opacity: 0;
        -webkit-transform: translateY(15%) scale(.4) !important;
        transform: translateY(15%) scale(.4) !important
    }

    .tr-expand-enter-active, .tr-expand-leave-active {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .tr-expand-enter, .tr-expand-leave-to {
        opacity: 0;
        height: 0
    }

    .tr-expand td .content-tr-expand {
        padding: 10px;
        position: relative;
        border-top: 1px solid rgba(0,0,0,.05);
        border-bottom: 1px solid rgba(0,0,0,.05);
        width: 100%;
        padding-right: 30px
    }

    .tr-expand td .content-tr-expand, .tr-expand td .tr-expand--close {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .tr-expand td .tr-expand--close {
        position: absolute;
        width: 30px;
        height: 30px;
        right: 0;
        background: inherit;
        color: rgba(var(--vs-danger), 1);
        border: 0;
        margin-left: 10px;
        background: #f5f5f5;
        border-radius: 3px;
        cursor: pointer;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

        .tr-expand td .tr-expand--close:hover {
            opacity: .7;
            background: rgba(var(--vs-danger), 1);
            color: #fff
        }

        .tr-expand td .tr-expand--close i {
            font-size: 1.1rem
        }

    .vuesax-app-is-rtl .vs-con-table td.td-check .vs-icon {
        -webkit-transform: translate(-7px) rotate(90deg);
        transform: translate(-7px) rotate(90deg)
    }

    .vuesax-app-is-rtl .vs-con-table td.td-check .vs-checkbox--check .vs-icon {
        -webkit-transform: translate(1px) rotate(0);
        transform: translate(1px) rotate(0)
    }

    .fade-tab-enter-active, .fade-tab-leave-active {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .fade-tab-enter, .fade-tab-leave-to {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    .fade-tab-leave-to {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    .fade-tab-invert-enter-active, .fade-tab-invert-leave-active {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .fade-tab-invert-enter, .fade-tab-invert-leave-to {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    .fade-tab-invert-leave-to {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    .fade-tab-vertical-enter-active, .fade-tab-vertical-leave-active {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .fade-tab-vertical-enter {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    .fade-tab-vertical-leave-to {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    .fade-tab-vertical-invert-enter-active, .fade-tab-vertical-invert-leave-active {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .fade-tab-vertical-invert-enter {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    .fade-tab-vertical-invert-leave-to {
        top: 0;
        opacity: 0;
        position: absolute !important;
        -webkit-transform: translate3d(0, 100%, 0) !important;
        transform: translate3d(0, 100%, 0) !important
    }

    .con-vs-tabs {
        width: 100%;
        overflow: hidden;
        position: relative
    }

        .con-vs-tabs .con-slot-tabs {
            position: relative;
            display: block;
            overflow: hidden
        }

        .con-vs-tabs .con-ul-tabs, .vs-tabs--ul {
            position: relative
        }

    .vs-tabs--ul {
        width: 100%;
        padding-left: 0;
        -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,.04);
        box-shadow: 0 0 25px 0 rgba(0,0,0,.04)
    }

        .vs-tabs--ul.ul-tabs-center {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .vs-tabs--ul.ul-tabs-right {
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end
        }

        .vs-tabs--ul.ul-tabs-fixed {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important
        }

            .vs-tabs--ul.ul-tabs-fixed li {
                width: 100%
            }

    .line-vs-tabs {
        width: 100px;
        height: 2px;
        display: block;
        position: absolute;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: left, right
    }

    .vs-tabs--li {
        display: block;
        position: relative
    }

        .vs-tabs--li button {
            color: inherit;
            font-family: inherit
        }

            .vs-tabs--li button.vs-tabs--btn {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                display: block;
                position: relative;
                width: 100%;
                background: 0 0;
                margin: 0;
                padding: 10px;
                border: 0;
                cursor: pointer;
                -webkit-transition: all .2s ease;
                transition: all .2s ease;
                z-index: 100
            }

                .vs-tabs--li button.vs-tabs--btn:hover:not(:disabled) {
                    color: inherit
                }

            .vs-tabs--li button:disabled {
                opacity: .5;
                cursor: default !important;
                pointer-events: none
            }

    .activeChild button:not(:disabled) {
        color: inherit
    }

    .activeChild button.vs-tabs--btn {
        padding-top: 8px;
        padding-bottom: 12px
    }

    .vs-tabs--btn-tag {
        position: absolute;
        width: 20px;
        height: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        top: -10px;
        right: -10px;
        border-radius: 3px;
        border: 0;
        background: #fff;
        -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.05);
        box-shadow: 0 0 10px 0 rgba(0,0,0,.05);
        cursor: pointer;
        z-index: 200
    }

        .vs-tabs--btn-tag i {
            padding-right: 0 !important;
            font-size: .9rem
        }

    .vuesax-app-is-rtl .vs-tabs--btn-icon + span {
        padding-right: 9px
    }

    .vuesax-app-is-ltr .vs-tabs--btn-icon + span {
        padding-left: 9px
    }

    .vs-tabs-position-top .vs-tabs--ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .vs-tabs-position-bottom .vs-tabs--ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-top: 1px solid rgba(0,0,0,.05);
        border-bottom: 0 !important
    }

    .vs-tabs-position-bottom .con-ul-tabs {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    .vs-tabs-position-bottom .line-vs-tabs {
        top: 0
    }

    .vs-tabs-position-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

        .vs-tabs-position-left .line-vs-tabs {
            left: auto !important;
            right: 0
        }

        .vs-tabs-position-left .con-ul-tabs {
            float: left;
            height: 100%;
            display: block
        }

        .vs-tabs-position-left .vs-tabs--ul {
            display: block;
            width: auto;
            border-bottom: 0 !important;
            border-right: 1px solid rgba(0,0,0,.05)
        }

        .vs-tabs-position-left .activeChild button {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            padding-left: 12px !important;
            padding-right: 8px !important
        }

    .vs-tabs-position-right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

        .vs-tabs-position-right .con-slot-tabs {
            width: 100%
        }

        .vs-tabs-position-right .con-ul-tabs {
            float: left;
            height: 100%;
            display: block;
            -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
            order: 2
        }

        .vs-tabs-position-right .vs-tabs--ul {
            display: block;
            width: auto;
            border-bottom: 0 !important;
            border-left: 1px solid rgba(0,0,0,.05)
        }

        .vs-tabs-position-right .activeChild button {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            padding-left: 8px !important;
            padding-right: 12px !important
        }

    .vs-tabs-primary .con-ul-tabs .activeChild button, .vs-tabs-primary .con-ul-tabs button:not(:disabled):hover {
        color: rgba(var(--vs-primary), 1) !important
    }

    .vs-tabs-primary .con-ul-tabs .line-vs-tabs {
        background: linear-gradient(30deg, rgba(var(--vs-primary), 1), rgba(var(--vs-primary), .5)) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(var(--vs-primary), .4) !important;
        box-shadow: 0 0 8px 0 rgba(var(--vs-primary), .4) !important
    }

    .vs-tabs-secondary .con-ul-tabs .activeChild button, .vs-tabs-secondary .con-ul-tabs button:not(:disabled):hover {
        color: rgba(var(--vs-secondary), 1) !important
    }

    .vs-tabs-secondary .con-ul-tabs .line-vs-tabs {
        background: linear-gradient(30deg, rgba(var(--vs-secondary), 1), rgba(var(--vs-secondary), .5)) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(var(--vs-secondary), .4) !important;
        box-shadow: 0 0 8px 0 rgba(var(--vs-secondary), .4) !important
    }

    .vs-tabs-danger .con-ul-tabs .activeChild button, .vs-tabs-danger .con-ul-tabs button:not(:disabled):hover {
        color: rgba(var(--vs-danger), 1) !important
    }

    .vs-tabs-danger .con-ul-tabs .line-vs-tabs {
        background: linear-gradient(30deg, rgba(var(--vs-danger), 1), rgba(var(--vs-danger), .5)) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(var(--vs-danger), .4) !important;
        box-shadow: 0 0 8px 0 rgba(var(--vs-danger), .4) !important
    }

    .vs-tabs-success .con-ul-tabs .activeChild button, .vs-tabs-success .con-ul-tabs button:not(:disabled):hover {
        color: rgba(var(--vs-success), 1) !important
    }

    .vs-tabs-success .con-ul-tabs .line-vs-tabs {
        background: linear-gradient(30deg, rgba(var(--vs-success), 1), rgba(var(--vs-success), .5)) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(var(--vs-success), .4) !important;
        box-shadow: 0 0 8px 0 rgba(var(--vs-success), .4) !important
    }

    .vs-tabs-warning .con-ul-tabs .activeChild button, .vs-tabs-warning .con-ul-tabs button:not(:disabled):hover {
        color: rgba(var(--vs-warning), 1) !important
    }

    .vs-tabs-warning .con-ul-tabs .line-vs-tabs {
        background: linear-gradient(30deg, rgba(var(--vs-warning), 1), rgba(var(--vs-warning), .5)) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(var(--vs-warning), .4) !important;
        box-shadow: 0 0 8px 0 rgba(var(--vs-warning), .4) !important
    }

    .vs-tabs-dark .con-ul-tabs .activeChild button, .vs-tabs-dark .con-ul-tabs button:not(:disabled):hover {
        color: rgba(var(--vs-dark), 1) !important
    }

    .vs-tabs-dark .con-ul-tabs .line-vs-tabs {
        background: linear-gradient(30deg, rgba(var(--vs-dark), 1), rgba(var(--vs-dark), .5)) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(var(--vs-dark), .4) !important;
        box-shadow: 0 0 8px 0 rgba(var(--vs-dark), .4) !important
    }

    .vs-tabs-light .con-ul-tabs .activeChild button, .vs-tabs-light .con-ul-tabs button:not(:disabled):hover {
        color: rgba(var(--vs-light), 1) !important
    }

    .vs-tabs-light .con-ul-tabs .line-vs-tabs {
        background: linear-gradient(30deg, rgba(var(--vs-light), 1), rgba(var(--vs-light), .5)) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(var(--vs-light), .4) !important;
        box-shadow: 0 0 8px 0 rgba(var(--vs-light), .4) !important
    }

    .vs-tabs--content {
        position: relative;
        width: 100%;
        display: block;
        padding: 10px
    }

    .vs-con-textarea {
        width: 100%;
        position: relative;
        border: 1px solid rgba(0,0,0,.08);
        -webkit-box-shadow: 0 0 0 0 transparent;
        box-shadow: 0 0 0 0 transparent;
        border-radius: 6px;
        -webkit-transition: boxShadow .25s ease, border .25s ease, -webkit-transform .25s ease;
        transition: boxShadow .25s ease, border .25s ease, -webkit-transform .25s ease;
        transition: boxShadow .25s ease, border .25s ease, transform .25s ease;
        transition: boxShadow .25s ease, border .25s ease, transform .25s ease, -webkit-transform .25s ease;
        -webkit-transform: translate(0);
        transform: translate(0);
        margin-bottom: 16px
    }

        .vs-con-textarea.focusx h4 {
            background: #fcfcfc;
            padding-top: 4px;
            padding-bottom: 4px
        }

        .vs-con-textarea h4 {
            font-size: .7rem;
            padding: 8px;
            padding-bottom: 0;
            cursor: default;
            -webkit-transition: all .25s ease;
            transition: all .25s ease;
            border-radius: 5px 5px 0 0
        }

    .vs-textarea {
        resize: none;
        border-radius: 6px;
        border: 0 solid transparent;
        display: block;
        padding: 9px;
        color: rgba(0,0,0,.8);
        font-size: .8rem;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        background: 0 0
    }

        .vs-textarea:focus {
            resize: auto !important
        }

            .vs-textarea:focus ~ .count {
                opacity: 1
            }

    .textarea-danger {
        border: 1px solid rgba(var(--vs-danger), .4);
        -webkit-box-shadow: 0 4px 20px 0 rgba(var(--vs-danger), .1);
        box-shadow: 0 4px 20px 0 rgba(var(--vs-danger), .1)
    }

        .textarea-danger .vs-textarea {
            color: rgba(var(--vs-danger), .8)
        }

        .textarea-danger .count {
            background: rgba(var(--vs-danger), 1)
        }

    .vs-textarea--count {
        position: absolute;
        right: 14px;
        bottom: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        padding: 1px 6px;
        font-size: .6rem;
        border-radius: 0 0 5px 5px;
        font-weight: 700;
        -webkit-box-shadow: 0 4px 20px 0 rgba(0,0,0,.05);
        box-shadow: 0 4px 20px 0 rgba(0,0,0,.05);
        cursor: default;
        background: rgba(var(--vs-primary), 1);
        color: #fff;
        opacity: .3;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .focusx.vs-textarea-primary {
        border: 1px solid rgba(var(--vs-primary), 1) !important
    }

    .focusx.vs-textarea-secondary {
        border: 1px solid rgba(var(--vs-secondary), 1) !important
    }

    .focusx.vs-textarea-danger {
        border: 1px solid rgba(var(--vs-danger), 1) !important
    }

    .focusx.vs-textarea-success {
        border: 1px solid rgba(var(--vs-success), 1) !important
    }

    .focusx.vs-textarea-warning {
        border: 1px solid rgba(var(--vs-warning), 1) !important
    }

    .focusx.vs-textarea-dark {
        border: 1px solid rgba(var(--vs-dark), 1) !important
    }

    .focusx.vs-textarea-light {
        border: 1px solid rgba(var(--vs-light), 1) !important
    }

    .vs-timepicker {
        display: inline-block;
        position: relative
    }

        .vs-timepicker .con-vs-time {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

            .vs-timepicker .con-vs-time .time {
                padding: 5px 8px;
                margin: 0 2px;
                border-radius: 4px;
                -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.05);
                box-shadow: 0 4px 10px 0 rgba(0,0,0,.05);
                cursor: pointer;
                position: relative
            }

    .con-ul-time {
        overflow: hidden;
        max-height: 180px;
        position: absolute;
        z-index: 20000
    }

    .ul-time {
        position: relative;
        background: #fff;
        margin: 0;
        padding: 0;
        height: auto;
        max-height: 180px;
        overflow: auto;
        border-radius: 4px;
        -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.05);
        box-shadow: 0 4px 10px 0 rgba(0,0,0,.05)
    }

        .ul-time li {
            padding: 5px 8px;
            list-style: none;
            text-align: center;
            cursor: pointer
        }

            .ul-time li.active-time {
                background: #000
            }

    .vs-tooltip {
        display: block;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 40000;
        background: #323232;
        padding: 5px 7px;
        font-size: 12px;
        border-radius: 6px;
        max-width: 220px;
        color: #fff
    }

        .vs-tooltip.after-none:after {
            display: none !important
        }

        .vs-tooltip h4 {
            font-size: 13px;
            width: 100%;
            border-bottom: 1px solid hsla(0,0%,100%,.1);
            padding-bottom: 5px;
            margin-bottom: 5px;
            text-align: center
        }

        .vs-tooltip:after {
            content: "";
            background: inherit;
            width: 8px;
            height: 8px;
            position: absolute;
            display: block
        }

        .vs-tooltip.vs-tooltip-top:after {
            bottom: -6px
        }

        .vs-tooltip.vs-tooltip-bottom:after, .vs-tooltip.vs-tooltip-top:after {
            -webkit-transform: rotate(45deg) translate(-50%);
            transform: rotate(45deg) translate(-50%);
            left: 50%
        }

        .vs-tooltip.vs-tooltip-bottom:after {
            top: -1px
        }

        .vs-tooltip.vs-tooltip-left:after {
            right: -1px
        }

        .vs-tooltip.vs-tooltip-left:after, .vs-tooltip.vs-tooltip-right:after {
            -webkit-transform: rotate(45deg) translateY(-50%);
            transform: rotate(45deg) translateY(-50%);
            top: 50%
        }

        .vs-tooltip.vs-tooltip-right:after {
            left: -6px
        }

    .tooltip-fade-enter-active, .tooltip-fade-leave-active {
        -webkit-transition: opacity .2s, -webkit-transform .2s;
        transition: opacity .2s, -webkit-transform .2s;
        transition: opacity .2s, transform .2s;
        transition: opacity .2s, transform .2s, -webkit-transform .2s
    }

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

        .tooltip-fade-enter.vs-tooltip-top, .tooltip-fade-leave-to.vs-tooltip-top {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px)
        }

        .tooltip-fade-enter.vs-tooltip-bottom, .tooltip-fade-leave-to.vs-tooltip-bottom {
            -webkit-transform: translateY(10px);
            transform: translateY(10px)
        }

        .tooltip-fade-enter.vs-tooltip-left, .tooltip-fade-leave-to.vs-tooltip-left {
            -webkit-transform: translate(-10px);
            transform: translate(-10px)
        }

        .tooltip-fade-enter.vs-tooltip-right, .tooltip-fade-leave-to.vs-tooltip-right {
            -webkit-transform: translate(10px);
            transform: translate(10px)
        }

    .vs-tooltip-primary {
        background: rgba(var(--vs-primary), 1)
    }

    .vs-tooltip-secondary {
        background: rgba(var(--vs-secondary), 1)
    }

    .vs-tooltip-danger {
        background: rgba(var(--vs-danger), 1)
    }

    .vs-tooltip-success {
        background: rgba(var(--vs-success), 1)
    }

    .vs-tooltip-warning {
        background: rgba(var(--vs-warning), 1)
    }

    .vs-tooltip-dark {
        background: rgba(var(--vs-dark), 1)
    }

    .vs-tooltip-light {
        background: rgba(var(--vs-light), 1)
    }

    .con-upload {
        width: 100%;
        position: relative
    }

    .con-input-upload {
        background: #f5f5f5;
        width: 200px;
        height: 200px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 8px;
        position: relative;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        border: 1px dashed rgba(0,0,0,.1);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 15px
    }

    .vuesax-app-is-rtl .con-input-upload {
        float: right
    }

    .vuesax-app-is-ltr .con-input-upload {
        float: left
    }

    .con-input-upload:hover {
        border: 1px dashed rgba(var(--vs-primary), .5)
    }

    .con-input-upload.disabled-upload {
        opacity: 0;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: none
    }

    .con-input-upload input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        left: 0;
        top: 0;
        cursor: pointer
    }

    .con-input-upload .text-input {
        min-width: 200px;
        display: block;
        text-align: center;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        font-weight: 700
    }

    .con-input-upload .input-progress {
        height: 100%;
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 29%;
        background: rgba(var(--vs-primary), 1);
        border-radius: 10px
    }

    .con-input-upload.on-progress-all-upload {
        width: 100%;
        height: 4px;
        overflow: hidden;
        padding: 0;
        border: 0 solid transparent
    }

        .con-input-upload.on-progress-all-upload .text-input, .con-input-upload.on-progress-all-upload .vs-upload--button-upload {
            opacity: 0;
            -webkit-transform: translate(-40px);
            transform: translate(-40px)
        }

    .con-input-upload.is-ready-all-upload .input-progress {
        background: rgba(var(--vs-success), 1) !important
    }

    .vs-upload--button-upload {
        position: absolute;
        border: 0;
        padding: 4px;
        border-radius: 0 0 5px 5px;
        padding-left: 6px;
        padding-right: 6px;
        font-size: .8rem;
        z-index: 500;
        cursor: pointer;
        margin: 0;
        color: rgba(var(--vs-primary), 1);
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.05);
        box-shadow: 0 0 0 0 rgba(0,0,0,.05);
        background: rgba(0,0,0,.03);
        bottom: 0;
        width: 100%
    }

        .vs-upload--button-upload:disabled {
            opacity: .4;
            pointer-events: none
        }

        .vs-upload--button-upload:hover {
            padding-bottom: 10px;
            padding-top: 10px;
            background: rgba(var(--vs-primary), 1);
            color: #fff
        }

    .con-img-upload {
        width: 100%;
        background: #fff;
        margin-top: 5px;
        padding-right: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-column-gap: 5px;
        -moz-column-gap: 5px;
        column-gap: 5px
    }

        .con-img-upload, .con-img-upload .img-upload {
            position: relative;
            border-radius: 10px;
            overflow: hidden
        }

            .con-img-upload .img-upload {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                background: rgba(0,80,0,.5);
                background: #fff;
                -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
                box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                width: 200px;
                height: 200px;
                margin: 5px;
                cursor: pointer
            }

    .vuesax-app-is-rtl .con-img-upload .img-upload {
        float: right
    }

    .vuesax-app-is-ltr .con-img-upload .img-upload {
        float: left
    }

    .con-img-upload .img-upload.fileError {
        border: 1px solid rgba(var(--vs-danger), 1);
        -webkit-box-shadow: 0 5px 20px 0 rgba(var(--vs-danger), 1);
        box-shadow: 0 5px 20px 0 rgba(var(--vs-danger), 1)
    }

        .con-img-upload .img-upload.fileError .btn-upload-file {
            background: rgba(var(--vs-danger), .3) !important
        }

            .con-img-upload .img-upload.fileError .btn-upload-file i {
                background: rgba(var(--vs-danger), 1) !important
            }

    .con-img-upload .img-upload.removeItem {
        -webkit-transition: all .3s ease, height .2s ease .2s;
        transition: all .3s ease, height .2s ease .2s;
        opacity: 0 !important;
        width: 0 !important;
        visibility: hidden;
        margin: 0 !important;
        height: 0 !important
    }

    .con-img-upload .img-upload img {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .con-img-upload .img-upload:hover {
        -webkit-transform: scale(.99);
        transform: scale(.99);
        -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.1);
        box-shadow: 0 0 0 0 rgba(0,0,0,.1)
    }

        .con-img-upload .img-upload:hover .btn-x-file {
            opacity: 1;
            -webkit-transform: translate(0);
            transform: translate(0)
        }

        .con-img-upload .img-upload:hover .btn-upload-file {
            opacity: 1;
            -webkit-transform: translate(-50%, 65%);
            transform: translate(-50%, 65%)
        }

    .con-img-upload .img-upload .btn-x-file {
        display: block;
        position: absolute;
        top: 5px;
        padding: 0;
        margin: 0;
        -webkit-transform: translate(20%, -20%);
        transform: translate(20%, -20%);
        background: 0 0;
        z-index: 300;
        opacity: 0;
        border: 0;
        cursor: pointer;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        border-radius: 10px
    }

    .vuesax-app-is-rtl .con-img-upload .img-upload .btn-x-file {
        left: 5px
    }

    .vuesax-app-is-ltr .con-img-upload .img-upload .btn-x-file {
        right: 5px
    }

    .con-img-upload .img-upload .btn-x-file i {
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        position: relative;
        padding: 4px;
        font-size: 1.4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 5px;
        background: rgba(0,0,0,.1);
        color: #fff;
        text-shadow: 0 3px 10px rgba(0,0,0,.5)
    }

    .con-img-upload .img-upload .btn-x-file:hover i {
        border-radius: 50%;
        background: rgba(var(--vs-danger), 1)
    }

    .con-img-upload .img-upload .btn-x-file:hover ~ .btn-upload-file:not(.on-progress) {
        background: radial-gradient(ellipse at center, rgba(var(--vs-danger), 1) 0, transparent 70%);
        height: 300px
    }

        .con-img-upload .img-upload .btn-x-file:hover ~ .btn-upload-file:not(.on-progress):after {
            border: 1px solid rgba(var(--vs-danger), 1)
        }

        .con-img-upload .img-upload .btn-x-file:hover ~ .btn-upload-file:not(.on-progress) i {
            opacity: 0
        }

    .con-img-upload .img-upload .btn-x-file:hover ~ .on-progress {
        background: rgba(var(--vs-danger), .2)
    }

        .con-img-upload .img-upload .btn-x-file:hover ~ .on-progress i {
            opacity: 0
        }

    .con-img-upload .img-upload .btn-x-file:hover ~ img {
        -webkit-filter: grayscale(80%);
        filter: grayscale(80%)
    }

    .con-img-upload .img-upload .text-archive {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        text-align: center;
        padding: 5px
    }

        .con-img-upload .img-upload .text-archive i {
            position: absolute;
            font-size: 7rem;
            opacity: .05
        }

        .con-img-upload .img-upload .text-archive span {
            position: relative;
            padding: 5px
        }

    .con-img-upload .img-upload .btn-upload-file {
        margin: 0;
        opacity: 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: 200;
        border-radius: 50%;
        width: 300px;
        height: 200px;
        -webkit-transform: translate(-50%, 80%);
        transform: translate(-50%, 80%);
        border: 0;
        background: radial-gradient(ellipse at center, rgba(var(--vs-success), 1) 0, transparent 70%);
        cursor: pointer;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        -webkit-animation: imageRebound .7s ease !important;
        animation: imageRebound .7s ease !important
    }

        .con-img-upload .img-upload .btn-upload-file:after {
            content: "";
            width: 200px;
            height: 200px;
            position: absolute;
            z-index: 100;
            display: block;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            top: 50%;
            border-radius: 50%;
            border: 1px solid rgba(var(--vs-success), 1);
            -webkit-animation: circle 1.5s ease infinite;
            animation: circle 1.5s ease infinite
        }

        .con-img-upload .img-upload .btn-upload-file:not(.on-progress):hover {
            width: 200px;
            height: 200px;
            -webkit-transform: translate(-50%, 70%);
            transform: translate(-50%, 70%)
        }

            .con-img-upload .img-upload .btn-upload-file:not(.on-progress):hover i {
                font-size: 1.4rem;
                background: rgba(var(--vs-success), 1);
                top: 6%;
                padding: 10px
            }

        .con-img-upload .img-upload .btn-upload-file i {
            z-index: 50;
            border-radius: 50%;
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
            position: absolute;
            left: 50%;
            top: 12%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            color: #fff;
            text-shadow: 0 3px 10px rgba(0,0,0,.5);
            padding: 20px;
            -webkit-backface-visibility: visible;
            backface-visibility: visible
        }

        .con-img-upload .img-upload .btn-upload-file span {
            opacity: 0;
            z-index: 300
        }

        .con-img-upload .img-upload .btn-upload-file.on-progress {
            width: 100%;
            height: 20px;
            background: rgba(var(--vs-success), 1);
            border-top: 1px solid rgba(var(--vs-success), 1);
            bottom: 0;
            -webkit-transform: translate(0);
            transform: translate(0);
            left: 0;
            opacity: 1 !important;
            overflow: hidden;
            border-radius: 0;
            pointer-events: none
        }

            .con-img-upload .img-upload .btn-upload-file.on-progress i {
                opacity: .2;
                background: rgba(var(--vs-success), 1);
                -webkit-box-shadow: 0 5px 17px 0 rgba(0,0,0,.15);
                box-shadow: 0 5px 17px 0 rgba(0,0,0,.15);
                top: 50%;
                -webkit-transform: translate(-50%, -50%) scale(1.2);
                transform: translate(-50%, -50%) scale(1.2);
                padding: 20px
            }

            .con-img-upload .img-upload .btn-upload-file.on-progress span {
                -webkit-transition: all .5s ease;
                transition: all .5s ease;
                opacity: 1;
                color: #fff;
                font-size: 1rem;
                position: absolute;
                top: calc(50% + 40px);
                left: 0;
                text-align: center;
                width: 100%;
                text-shadow: 0 3px 15px rgba(var(--vs-success), 1);
                font-weight: 700;
                z-index: 300;
                display: block;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%)
            }

        .con-img-upload .img-upload .btn-upload-file.ready-progress {
            border-top: 0 solid rgba(var(--vs-success), 1);
            background: rgba(var(--vs-success), .5)
        }

            .con-img-upload .img-upload .btn-upload-file.ready-progress span {
                z-index: 10;
                -webkit-transform: translateY(-50%) scale(.5);
                transform: translateY(-50%) scale(.5);
                top: calc(50% + 20px);
                opacity: 0
            }

            .con-img-upload .img-upload .btn-upload-file.ready-progress:after {
                opacity: 0
            }

            .con-img-upload .img-upload .btn-upload-file.ready-progress i {
                opacity: 1;
                background: rgba(var(--vs-success), 1);
                -webkit-box-shadow: 0 5px 17px 0 rgba(0,0,0,.15);
                box-shadow: 0 5px 17px 0 rgba(0,0,0,.15);
                top: 50%;
                -webkit-transform: translate(-50%, -50%) scale(1);
                transform: translate(-50%, -50%) scale(1);
                padding: 10px
            }

    .upload-enter-active {
        -webkit-transition: all .7s ease !important;
        transition: all .7s ease !important;
        -webkit-animation: imageRebound .7s ease !important;
        animation: imageRebound .7s ease !important
    }

    .view-upload-enter-active, .view-upload-leave-active {
        -webkit-transition: opacity .5s;
        transition: opacity .5s
    }

    .view-upload-enter, .view-upload-leave-to {
        opacity: 0
    }

        .view-upload-enter img, .view-upload-leave-to img {
            -webkit-transform: scale(.4);
            transform: scale(.4)
        }

    .view-upload {
        position: fixed;
        left: 0;
        z-index: 15000;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.3);
        top: 0;
        padding: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

        .view-upload img {
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            border-radius: 10px;
            position: relative;
            display: block;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            max-width: 100%;
            max-height: 100%;
            margin: auto;
            -webkit-animation: imageRebound .7s ease !important;
            animation: imageRebound .7s ease !important;
            -webkit-box-shadow: 0 8px 30px 0 rgba(0,0,0,.25);
            box-shadow: 0 8px 30px 0 rgba(0,0,0,.25);
            background: #fff
        }

    @-webkit-keyframes imageRebound {
        0% {
            -webkit-transform: scale(.4);
            transform: scale(.4);
            border-radius: 30%;
            pointer-events: none
        }

        40% {
            -webkit-transform: scale(1.03);
            transform: scale(1.03);
            border-radius: 14px;
            pointer-events: none
        }

        70% {
            -webkit-transform: scale(.98);
            transform: scale(.98);
            border-radius: 18px;
            pointer-events: none
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1);
            border-radius: 10px;
            pointer-events: none
        }
    }

    @keyframes imageRebound {
        0% {
            -webkit-transform: scale(.4);
            transform: scale(.4);
            border-radius: 30%;
            pointer-events: none
        }

        40% {
            -webkit-transform: scale(1.03);
            transform: scale(1.03);
            border-radius: 14px;
            pointer-events: none
        }

        70% {
            -webkit-transform: scale(.98);
            transform: scale(.98);
            border-radius: 18px;
            pointer-events: none
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1);
            border-radius: 10px;
            pointer-events: none
        }
    }

    @-webkit-keyframes circle {
        0% {
            width: 0;
            height: 0
        }

        to {
            width: 230px;
            height: 230px;
            opacity: 0
        }
    }

    @keyframes circle {
        0% {
            width: 0;
            height: 0
        }

        to {
            width: 230px;
            height: 230px;
            opacity: 0
        }
    }

    body.v-tour--active {
        pointer-events: none
    }

    .v-tour {
        pointer-events: auto
    }

    .v-tour__target--highlighted {
        -webkit-box-shadow: 0 0 0 4px rgba(0,0,0,.4);
        pointer-events: auto;
        z-index: 9999
    }

    [dir] .v-tour__target--highlighted {
        box-shadow: 0 0 0 4px rgba(0,0,0,.4)
    }

    .v-tour__target--relative {
        position: relative
    }

    .v-step[data-v-1c0035bb] {
        color: #fff;
        max-width: 320px;
        -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
        z-index: 10000
    }

    [dir] .v-step[data-v-1c0035bb] {
        background: #50596c;
        border-radius: 3px;
        padding: 1rem;
        text-align: center
    }

    .v-step .v-step__arrow[data-v-1c0035bb] {
        width: 0;
        height: 0;
        position: absolute
    }

    [dir] .v-step .v-step__arrow[data-v-1c0035bb] {
        border-style: solid;
        margin: .5rem;
        border-color: #50596c
    }

    [dir] .v-step .v-step__arrow--dark[data-v-1c0035bb] {
        border-color: #454d5d
    }

    [dir] .v-step[x-placement^=top][data-v-1c0035bb] {
        margin-bottom: .5rem
    }

    .v-step[x-placement^=top] .v-step__arrow[data-v-1c0035bb] {
        bottom: -.5rem
    }

    [dir] .v-step[x-placement^=top] .v-step__arrow[data-v-1c0035bb] {
        border-width: .5rem .5rem 0 .5rem;
        border-bottom-color: transparent;
        margin-top: 0;
        margin-bottom: 0
    }

    [dir=ltr] .v-step[x-placement^=top] .v-step__arrow[data-v-1c0035bb] {
        border-left-color: transparent;
        border-right-color: transparent;
        left: calc(50% - 1rem)
    }

    [dir=rtl] .v-step[x-placement^=top] .v-step__arrow[data-v-1c0035bb] {
        border-right-color: transparent;
        border-left-color: transparent;
        right: calc(50% - 1rem)
    }

    [dir] .v-step[x-placement^=bottom][data-v-1c0035bb] {
        margin-top: .5rem
    }

    .v-step[x-placement^=bottom] .v-step__arrow[data-v-1c0035bb] {
        top: -.5rem
    }

    [dir] .v-step[x-placement^=bottom] .v-step__arrow[data-v-1c0035bb] {
        border-width: 0 .5rem .5rem .5rem;
        border-top-color: transparent;
        margin-top: 0;
        margin-bottom: 0
    }

    [dir=ltr] .v-step[x-placement^=bottom] .v-step__arrow[data-v-1c0035bb] {
        border-left-color: transparent;
        border-right-color: transparent;
        left: calc(50% - 1rem)
    }

    [dir=rtl] .v-step[x-placement^=bottom] .v-step__arrow[data-v-1c0035bb] {
        border-right-color: transparent;
        border-left-color: transparent;
        right: calc(50% - 1rem)
    }

    [dir=ltr] .v-step[x-placement^=right][data-v-1c0035bb] {
        margin-left: .5rem
    }

    [dir=rtl] .v-step[x-placement^=right][data-v-1c0035bb] {
        margin-right: .5rem
    }

    .v-step[x-placement^=right] .v-step__arrow[data-v-1c0035bb] {
        top: calc(50% - 1rem)
    }

    [dir] .v-step[x-placement^=right] .v-step__arrow[data-v-1c0035bb] {
        border-top-color: transparent;
        border-bottom-color: transparent
    }

    [dir=ltr] .v-step[x-placement^=right] .v-step__arrow[data-v-1c0035bb] {
        border-width: .5rem .5rem .5rem 0;
        border-left-color: transparent;
        left: -.5rem;
        margin-left: 0;
        margin-right: 0
    }

    [dir=rtl] .v-step[x-placement^=right] .v-step__arrow[data-v-1c0035bb] {
        border-width: .5rem 0 .5rem .5rem;
        border-right-color: transparent;
        right: -.5rem;
        margin-right: 0;
        margin-left: 0
    }

    [dir=ltr] .v-step[x-placement^=left][data-v-1c0035bb] {
        margin-right: .5rem
    }

    [dir=rtl] .v-step[x-placement^=left][data-v-1c0035bb] {
        margin-left: .5rem
    }

    .v-step[x-placement^=left] .v-step__arrow[data-v-1c0035bb] {
        top: calc(50% - 1rem)
    }

    [dir] .v-step[x-placement^=left] .v-step__arrow[data-v-1c0035bb] {
        border-top-color: transparent;
        border-bottom-color: transparent
    }

    [dir=ltr] .v-step[x-placement^=left] .v-step__arrow[data-v-1c0035bb] {
        border-width: .5rem 0 .5rem .5rem;
        border-right-color: transparent;
        right: -.5rem;
        margin-left: 0;
        margin-right: 0
    }

    [dir=rtl] .v-step[x-placement^=left] .v-step__arrow[data-v-1c0035bb] {
        border-width: .5rem .5rem .5rem 0;
        border-left-color: transparent;
        left: -.5rem;
        margin-right: 0;
        margin-left: 0
    }

    [dir] .v-step__header[data-v-1c0035bb] {
        margin: -1rem -1rem .5rem;
        padding: .5rem;
        background-color: #454d5d
    }

    [dir=ltr] .v-step__header[data-v-1c0035bb], [dir=rtl] .v-step__header[data-v-1c0035bb] {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px
    }

    [dir] .v-step__content[data-v-1c0035bb] {
        margin: 0 0 1rem 0
    }

    .v-step__button[data-v-1c0035bb] {
        color: #fff;
        display: inline-block;
        font-size: .8rem;
        height: 1.8rem;
        line-height: 1rem;
        outline: 0;
        text-decoration: none;
        transition: all .2s ease;
        vertical-align: middle;
        white-space: nowrap
    }

    [dir] .v-step__button[data-v-1c0035bb] {
        background: 0 0;
        border: .05rem solid #fff;
        border-radius: .1rem;
        cursor: pointer;
        margin: 0 .2rem;
        padding: .35rem .4rem;
        text-align: center;
        -webkit-transition: all .2s ease
    }

    .v-step__button[data-v-1c0035bb]:hover {
        color: #50596c
    }

    [dir] .v-step__button[data-v-1c0035bb]:hover {
        background-color: hsla(0,0%,100%,.95)
    }

    .vue-map-container {
        position: relative
    }

        .vue-map-container .vue-map {
            top: 0;
            bottom: 0;
            position: absolute
        }

    [dir=ltr] .vue-map-container .vue-map, [dir=rtl] .vue-map-container .vue-map {
        left: 0;
        right: 0
    }

    .vue-map-hidden {
        display: none
    }

    .vue-street-view-pano-container {
        position: relative
    }

        .vue-street-view-pano-container .vue-street-view-pano {
            top: 0;
            bottom: 0;
            position: absolute
        }

    [dir=ltr] .vue-street-view-pano-container .vue-street-view-pano, [dir=rtl] .vue-street-view-pano-container .vue-street-view-pano {
        left: 0;
        right: 0
    }

    code[class*=language-], pre[class*=language-] {
        color: #ccc;
        font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
        font-size: 1em;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none
    }

    [dir] code[class*=language-], [dir] pre[class*=language-] {
        background: 0 0
    }

    [dir=ltr] code[class*=language-], [dir=ltr] pre[class*=language-] {
        text-align: left
    }

    [dir=rtl] code[class*=language-], [dir=rtl] pre[class*=language-] {
        text-align: right
    }

    pre[class*=language-] {
        overflow: auto
    }

    [dir] pre[class*=language-] {
        padding: 1em;
        margin: .5em 0
    }

    [dir] pre[class*=language-], [dir]:not(pre) > code[class*=language-] {
        background: #2d2d2d
    }

    :not(pre) > code[class*=language-] {
        white-space: normal
    }

    [dir]:not(pre) > code[class*=language-] {
        padding: .1em;
        border-radius: .3em
    }

    .token.block-comment, .token.cdata, .token.comment, .token.doctype, .token.prolog {
        color: #999
    }

    .token.punctuation {
        color: #ccc
    }

    .token.attr-name, .token.deleted, .token.namespace, .token.tag {
        color: #e2777a
    }

    .token.function-name {
        color: #6196cc
    }

    .token.boolean, .token.function, .token.number {
        color: #f08d49
    }

    .token.class-name, .token.constant, .token.property, .token.symbol {
        color: #f8c555
    }

    .token.atrule, .token.builtin, .token.important, .token.keyword, .token.selector {
        color: #cc99cd
    }

    .token.attr-value, .token.char, .token.regex, .token.string, .token.variable {
        color: #7ec699
    }

    .token.entity, .token.operator, .token.url {
        color: #67cdcc
    }

    .token.bold, .token.important {
        font-weight: 700
    }

    .token.italic {
        font-style: italic
    }

    [dir] .token.entity {
        cursor: help
    }

    .token.inserted {
        color: green
    }

    .mb20 {
        margin-bottom: 20px;
        font-size:25px;
    }

    .pb100 {
        padding-bottom: 100px !important
    }

    .app-modal {
        height: 120px;
    }

    .download {
        position: absolute;
        top: calc(30% - 30px);
        right: calc(50% - 152px);
        width: 300px;
        margin-top: 20px;
        height: 60px;
        background-color: #7367f0;
        box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.2);
        color: #fff;
        border-radius: .4285rem;
        color: rgba(255,255,255,.9);
        line-height: 60px;
        text-align: center;
        letter-spacing: 0;
        text-transform: uppercase;
        overflow: hidden;
        transition: all .3s cubic-bezier(.67, .13, .1, .81), transform .15s cubic-bezier(.67, .13, .1, .81)
    }

        .download:hover {
            color: #fff
        }

        .download:active {
            transform: translateY(3px)
        }

        .download:after, .download:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 1;
            transition: all .3s cubic-bezier(.67, .13, .1, .81)
        }

        .download:before {
            content: 'DOWNLOAD '
        }

        .download:after {
            content: 'Click to select a platform';
            top: -60px;
            opacity: 0
        }

        .download:hover:after {
            top: 0;
            opacity: 1
        }

        .download:hover:before {
            top: 60px;
            opacity: 0
        }

    .platforms {
        position: absolute;
        /*top: calc(50% - 99px);
        left: calc(52% - 248px);        
        background: #e3e2e2;*/
        height: 150px;
        width: 100%;
        padding-top: 1px;
        border-radius: 5px;
        visibility: visible;
        transform: scale(.9);
        opacity: 1;
        overflow: hidden;
        transition: all .3s cubic-bezier(.67, .13, .1, .81)
    }

    .download-app-sec {
        height: 580px
    }

    .android-icon {
        color: #28b351 !important;
        font-size: 6rem !important;
        margin-top: 15px;
    }

    .color-white {
        color: #fff !important
    }

    .apple-icon {
        color: #000 !important;
        margin-top: 20px;
    }

    .platforms:target {
        visibility: visible;
        transform: scale(1);
        opacity: 1
    }

    .platforms a {
        position: absolute;
        /*top: 0px;
        margin-left: 40px;*/
        text-align: center;
        left: 10px;
        width: 120px;
        height: 130px;
        border-radius: 5px;
        color: #000;
        text-transform: uppercase;
        transition: top .5s cubic-bezier(.67, .13, .1, .81)
    }

        .platforms a:nth-child(1) {
            transition-delay: .1s
        }

        .platforms a:nth-child(2) {
            left: 150px;
        }

        .platforms a:nth-child(3) {
            left: 390px;
            transition-delay: .1s
        }

    .platforms:target a {
        top: 10px;
        margin-left: 80px;
        text-align: center
    }

    .icon {
    }

    .platforms a:hover {
        background: #e5f4ff;
        box-shadow: 0 0 0 1px #a5cfff
    }

    .platforms a:before {
        content: attr(data-os);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        line-height: 60px;
        text-align: center
    }

    .platforms a:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        line-height: 60px;
        text-align: center;
        font-size: 300%
    }

    .installer {
        position: fixed;
        top: calc(51% - 150px);
        left: calc(50% - 300px);
        width: 600px;
        height: 300px;
        background: #f0f0f0;
        border-radius: 5px;
        visibility: hidden;
        transform: scale(.9);
        opacity: 0;
        transition: all .3s cubic-bezier(.67, .13, .1, .81)
    }

        .installer:target {
            visibility: visible;
            transform: scale(1);
            opacity: 1
        }

        .installer a.back {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 38px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 200%;
            color: #bbb
        }

            .installer a.back:after {
                content: 'Back';
                position: absolute;
                top: 7px;
                left: 30px;
                height: 20;
                line-height: 20px;
                font-size: 40%;
                text-align: center;
                color: #cacaca;
                border-radius: 5px;
                pointer-events: none;
                opacity: 0;
                transition: all .2s cubic-bezier(.67, .13, .1, .81)
            }

            .installer a.back:hover:after {
                left: 38px;
                opacity: 1
            }

        .installer a.close {
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 200%;
            color: #bbb
        }

    .inner-icon {
        margin-top: 50px;
        margin-left: 70px;
        font-size: 140px !important
    }

    .back-arrow {
        background: #ccc;
        color: #fff;
        padding: 10px;
        width: 40px;
        line-height: 23px !important;
        font-size: 20px !important;
        height: 40px;
        border-radius: 50%
    }

    .installer a.close:after {
        content: 'Close';
        position: absolute;
        top: 7px;
        right: 30px;
        height: 20;
        line-height: 20px;
        font-size: 40%;
        text-align: center;
        color: #cacaca;
        border-radius: 5px;
        pointer-events: none;
        opacity: 0;
        transition: all .2s cubic-bezier(.67, .13, .1, .81)
    }

    .installer a.close:hover:after {
        right: 38px;
        opacity: 1
    }

    .installer .info {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 280px;
        width: 180px
    }

        .installer .info:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 180px;
            height: 220px;
            line-height: 220px;
            text-align: center;
            font-size: 1000%;
            color: #3f8efc
        }

        .installer .info:after {
            content: attr(data-weight);
            position: absolute;
            bottom: 0;
            left: 0;
            width: 180px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 100%;
            letter-spacing: 5px;
            color: #aaa
        }

    .installer .details {
        position: absolute;
        top: 10px;
        left: 260px;
        height: 200px;
        width: 360px;
        padding: 10px
    }

        .installer .details p {
            margin: 0;
            font-weight: bolder;
            font-size: 120%;
            color: #444
        }

        .installer .details span {
            color: #cacaca
        }

        .installer .details ul {
            padding-left: 0;
            list-style: none;
            padding-top: 10px;
            color: #888
        }

            .installer .details ul li {
                margin-left: 0;
                margin-bottom: 8px;
                opacity: 0;
                transition: all .3s cubic-bezier(.67, .13, .1, .81)
            }

    h5#myModalLabel160 {
        display: none
    }

    .top-menu-icon {
        float: right !important;
        margin-top: -40px !important;
        margin-right: 60px;
        color: #7367f0
    }

        .top-menu-icon a i {
            color: #022f40;
        }

    .close-btn {
        background: #ccc;
        color: #fff;
        margin: 10px 10px;
        padding: 7px 0 0 12px;
        width: 40px;
        line-height: 23px !important;
        font-size: 20px !important;
        height: 40px;
        border-radius: 50%
    }

    .installer:target .details ul li {
        margin-left: 10px;
        opacity: 1
    }

        .installer:target .details ul li:nth-child(1) {
            transition-delay: .1s
        }

        .installer:target .details ul li:nth-child(2) {
            transition-delay: .2s
        }

        .installer:target .details ul li:nth-child(3) {
            transition-delay: .3s
        }

        .installer:target .details ul li:nth-child(4) {
            transition-delay: .4s
        }

        .installer:target .details ul li:nth-child(5) {
            transition-delay: .5s
        }

    .inner-btn-download {
        top: 77% !important;
        left: 48% !important;
        text-transform: uppercase !important
    }

    .installer label input {
        display: none
    }

    .installer label span {
        position: absolute;
        height: 100%;
        width: 100%;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background: #7367f0
    }

    .installer label input:checked ~ span {
        background: #87e544;
        animation: downloadSuccess 3.1s ease
    }

    .installer label span:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        background: rgba(255,255,255,.2)
    }

    .installer label input:checked ~ span:before {
        animation: downloadProgress 3s cubic-bezier(.67, .13, .1, .81)
    }

    @keyframes downloadSuccess {
        0%, 90% {
            background: #3f8efc
        }

        100% {
            background: #87e544
        }
    }

    @keyframes downloadState {
        0%, 95% {
            content: 'DOWNLOADING...'
        }

        100% {
            content: '\f14a\00a0 SUCCESS!'
        }
    }

    @keyframes downloadProgress {
        0% {
            width: 5%;
            opacity: 1
        }

        35% {
            width: 17%
        }

        64% {
            width: 51%
        }

        81% {
            width: 70%
        }

        90% {
            width: 86%;
            opacity: 1
        }

        100% {
            width: 100%;
            opacity: 0
        }
    }

    .app-content .wizard > .steps > ul {
        display: none
    }

    .bg-none {
        background: 0 0 !important
    }

    @media(max-width:767px) {
        .installer .details {
            position: absolute;
            top: 40px;
            left: 107px;
            height: 200px;
            width: 100%
        }

        .app-content .wizard > .actions {
            padding: 0 !important
        }

        .platforms a:before {
            height: 20px;
            line-height: 15px;
        }

        .inner-icon {
            margin-top: 100px !important;
            margin-left: 15px !important;
            font-size: 70px !important
        }

        .installer .info {
            position: absolute;
            top: 10px !important;
            left: 10px !important;
            float: none !important;
            height: 280px !important;
            width: 180px !important
        }

        .installer {
            position: fixed;
            top: calc(51% - 150px) !important;
            left: calc(50% - 164px) !important;
            width: 89% !important;
            height: 320px !important
        }

        .inner-btn-download {
            top: 82% !important;
            left: auto;
            margin: auto;
            width: auto !important;
            text-transform: uppercase !important
        }

        @media(min-width:360px) and (max-width:1200px) {
            .top-menu-icon {
                margin-top: -50px !important;
                margin-right: 45px
            }
        }
    }

    .social-footer ul li a {
        color: #022f40;
        padding: 5px;
    }
    /*========================================================
  Horizontal Menu CSS    
=========================================================*/

    .horizontal-menu .content {
        margin-left: 0
    }

    .horizontal-menu footer {
        position: static
    }

    .horizontal-menu.navbar-floating:not(.blank-page) .app-content {
        padding-top: 5.75rem;
    }

    .horizontal-menu.navbar-floating .horizontal-menu-wrapper {
        /*background: linear-gradient(to bottom, rgba(248,248,248,.95) 44%, rgba(248,248,248,.46) 73%, rgba(255,255,255,0) 100%);*/
        background-repeat: repeat-x
    }

        .horizontal-menu.navbar-floating .horizontal-menu-wrapper .navbar-horizontal.floating-nav {
            margin: 1.3rem 2.2rem 0
        }

    .horizontal-menu.dark-layout .header-navbar {
        background: inherit !important
    }

    .horizontal-menu.dark-layout .horizontal-menu-wrapper {
        background: linear-gradient(to bottom, rgba(37,43,71,.76) 44%, rgba(56,53,53,.46) 73%, rgba(255,255,255,0) 100%)
    }

        .horizontal-menu.dark-layout .horizontal-menu-wrapper .header-navbar {
            background: #10163a !important
        }

            .horizontal-menu.dark-layout .horizontal-menu-wrapper .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover:not(.active) > a {
                background: #262c49
            }

    .horizontal-menu.semi-dark-layout .header-navbar {
        background: linear-gradient(to bottom, rgba(37,43,71,.76) 44%, rgba(56,53,53,.46) 73%, rgba(255,255,255,0) 100%)
    }

    .horizontal-menu.semi-dark-layout .horizontal-menu-wrapper .header-navbar {
        background: #10163a !important
    }

        .horizontal-menu.semi-dark-layout .horizontal-menu-wrapper .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover > a {
            background: #262c49
        }

        .horizontal-menu.semi-dark-layout .horizontal-menu-wrapper .header-navbar .nav-link, .horizontal-menu.semi-dark-layout .horizontal-menu-wrapper .header-navbar i, .horizontal-menu.semi-dark-layout .horizontal-menu-wrapper .header-navbar span {
            color: #c2c6dc
        }

    .horizontal-menu.semi-dark-layout .horizontal-menu-wrapper .dropdown-menu {
        background-color: #262c49
    }

    .horizontal-menu.navbar-sticky .app-content {
        padding-top: 8.5rem
    }

    .horizontal-menu.navbar-sticky .header-navbar {
        background-color: #f8f8f8
    }

    .horizontal-menu.navbar-sticky .horizontal-menu-wrapper .navbar-horizontal.header-navbar.fixed-top {
        left: 0;
        top: 62px;
        background-color: #fff
    }

    .horizontal-menu.navbar-static .app-content {
        padding-top: 2.5rem
    }

    .horizontal-menu.navbar-static .header-navbar {
        background-color: #f8f8f8
    }

        .horizontal-menu.navbar-static .header-navbar .navbar-wrapper {
            width: 100%
        }

    .horizontal-menu.navbar-static .horizontal-menu-wrapper {
        position: relative
    }

        .horizontal-menu.navbar-static .horizontal-menu-wrapper .navbar-horizontal.header-navbar {
            background: #fff
        }

            .horizontal-menu.navbar-static .horizontal-menu-wrapper .navbar-horizontal.header-navbar.navbar-static-top {
                position: static;
                background: #fff;
                left: 0
            }

    .horizontal-menu .horizontal-menu-wrapper {
        position: fixed;
        top: 62px;
        z-index: 990;
        width: 100%;
        height: 99px
    }

        .horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container {
            padding-left: 1rem;
            padding-right: 1rem;
            width: 100%
        }

        .horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-header {
            display: none
        }

    .horizontal-menu .header-navbar {
        background: #fff;
        z-index: 999 !important;
        line-height: 1;
        min-height: auto
    }

        .horizontal-menu .header-navbar.navbar-horizontal.floating-nav {
            width: calc(100vw - (100vw - 100%) - calc(2.2rem * 2));
            background: #fff
        }

        .horizontal-menu .header-navbar .navbar-container {
            padding-left: 2.2rem;
            padding-right: calc(2.2rem - 1rem);
            border-radius: .5rem
        }

        .horizontal-menu .header-navbar.navbar-fixed {
            position: fixed;
            width: 100%
        }

        .horizontal-menu .header-navbar.navbar-brand-center .navbar-header {
            position: absolute;
            left: 50%;
            margin-left: -65px;
            padding: 0;
            z-index: 1000
        }

            .horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand {
                display: flex;
                align-items: center;
                margin-right: 0
            }

                .horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand .brand-logo { /*background:url(../../../../../app-assets/images/logo/logo.png) no-repeat;*/
                    height: 60px;
                    width: 85px;
                    background-size: 70px;
                }

                .horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand .brand-text {
                    color: #fff;
                    padding-left: 1rem;
                    letter-spacing: .01rem;
                    font-size: 1.57rem
                }

        .horizontal-menu .header-navbar.navbar-horizontal .nav-link.dropdown-toggle::after {
            left: .4rem
        }

        .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu::before {
            display: none
        }

        .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu {
            min-width: 215px;
            border: none;
            margin-top: 0;
            min-height: 52px
        }

            .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .disabled {
                pointer-events: none !important
            }

                .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .disabled a {
                    color: #b8c2cc
                }

            .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-toggle::after {
                left: auto;
                position: absolute;
                top: 50%;
                margin-top: -7px;
                right: 1rem;
                content: "\e844" !important
            }

            .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-item {
                font-size: 1rem;
                padding: .965rem 1.428rem;
                display: flex;
                align-items: center
            }

            .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-submenu {
                position: relative
            }

                .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-submenu.openLeft .dropdown-menu {
                    left: auto;
                    right: 100%
                }

                .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-submenu.show {
                    background: #f8f8f8
                }

                .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-submenu > .dropdown-menu {
                    position: absolute;
                    top: 0 !important;
                    left: 100% !important
                }

                    .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-submenu > .dropdown-menu i {
                        font-size: .75rem !important
                    }

        .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li {
            padding-top: .965rem;
            padding-bottom: .965rem
        }

            .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu {
                margin-top: .75rem
            }

                .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a {
                    transition: padding .35s ease 0s !important
                }

                    .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a:hover {
                        padding-left: 25px;
                        transition: padding .35s ease 0s !important;
                        background-color: transparent;
                        color: #626262
                    }

                .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu .active > a {
                    background: #f8f8f8;
                    color: #7367f0;
                    font-weight: 500
                }

                .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu .open.active > a {
                    color: #626262;
                    font-weight: 400
                }

            .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li i {
                font-size: 1.11rem;
                margin-right: .75rem
            }

            .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a {
                padding: .75rem 1.25rem .75rem 1.25rem;
                display: flex;
                margin-right: .3rem
            }

            .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover > a {
                background: #f8f8f8;
                border-radius: 4px
            }

            .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a {
                background: linear-gradient(118deg, #7367f0, rgba(115,103,240,.7));
                box-shadow: 0 0 6px 1px rgba(115,103,240,.6);
                color: #fff;
                border-radius: 4px
            }

    .horizontal-menu.menu-collapsed #main-menu-navigation .nav-item > a span {
        display: none
    }

    .horizontal-menu .navigation-header {
        font-family: inherit;
        color: #929292;
        padding: 8px 20px;
        font-size: 1rem;
        text-transform: uppercase
    }

    .horizontal-menu .navbar-dark .nav-item.active > a {
        border-bottom: 2px solid #7367f0;
        background-color: #313c50
    }

    .horizontal-menu .content.app-content .content-area-wrapper {
        margin-top: 2.2rem
    }

        .horizontal-menu .content.app-content .content-area-wrapper .content-wrapper {
            height: calc(100vh - 16rem);
            height: calc(var(--vh, 1vh) * 100 - 16rem)
        }

    .horizontal-menu.chat-application .sidebar-content, .horizontal-menu.email-application .content-area-wrapper .sidebar .email-app-sidebar, .horizontal-menu.todo-application .content-area-wrapper .sidebar .todo-sidebar {
        height: calc(100vh - 16rem);
        height: calc(var(--vh, 1vh) * 100 - 16rem)
    }

    .horizontal-menu.todo-application .content-area-wrapper .content-right .todo-task-list {
        height: calc(100vh - 19.5rem);
        height: calc(var(--vh, 1vh) * 100 - 19.5rem)
    }

    .horizontal-menu.email-application .app-content .content-area-wrapper .email-user-list {
        height: calc(100vh - 23.3rem);
        height: calc(var(--vh, 1vh) * 100 - 23.3rem)
    }

    .horizontal-menu.chat-application .user-profile-sidebar {
        height: calc(100vh - 16.1rem);
        height: calc(var(--vh, 1vh) * 100 - 16.1rem);
        bottom: 4.1rem
    }

    .horizontal-menu.chat-application .chat-profile-sidebar {
        height: calc(100vh - 16rem);
        height: calc(var(--vh, 1vh) * 100 - 16rem)
    }

    .horizontal-menu.chat-application .chat-app-window .user-chats {
        height: calc(100vh - 26.5rem);
        height: calc(var(--vh, 1vh) * 100 - 26.5rem)
    }

    @media (max-width:1199.98px) {
        body.horizontal-layout.horizontal-menu .horizontal-menu-wrapper .header-navbar {
            display: none
        }

        body.horizontal-layout .header-navbar {
            background: #fff
        }
    }

    .vertical-overlay-menu .content {
        margin-left: 0
    }

    .vertical-overlay-menu .navbar .navbar-header {
        float: left;
        width: 260px
    }

    .vertical-overlay-menu .navbar.header-navbar.floating-nav {
        width: calc(100vw - (100vw - 100%) - calc(2.2rem * 2))
    }

    .vertical-overlay-menu .main-menu, .vertical-overlay-menu.menu-hide .main-menu {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        transition: width .25s, opacity .25s, transform .25s;
        width: 260px;
        top: 0px !important;
        left: -260px
    }

        .vertical-overlay-menu .main-menu .navigation .navigation-header .icon-minus {
            display: none
        }

        .vertical-overlay-menu .main-menu .navigation > li > a > i {
            margin-right: 14px;
            float: left
        }

            .vertical-overlay-menu .main-menu .navigation > li > a > i:before {
                transition: .2s ease all;
                font-size: 1.429rem
            }

        .vertical-overlay-menu .main-menu .navigation li.has-sub > a:not(.mm-next):after {
            content: "\f105";
            font-family: FontAwesome;
            font-size: 1rem;
            display: inline-block;
            position: absolute;
            right: 25px;
            top: 10px;
            transform: rotate(0);
            transition: -webkit-transform .2s ease-in-out
        }

        .vertical-overlay-menu .main-menu .navigation li.open > a:not(.mm-next):after {
            transform: rotate(90deg)
        }

        .vertical-overlay-menu .main-menu .navigation li a i {
            font-size: 1.1rem
        }

        .vertical-overlay-menu .main-menu .main-menu-footer {
            bottom: 55px
        }

        .vertical-overlay-menu .main-menu .main-menu-footer {
            width: 260px
        }

    .vertical-overlay-menu.menu-open .main-menu {
        opacity: 1;
        transform: translate3d(260px, 0, 0);
        transition: width .25s, opacity .25s, transform .25s
    }

    .vertical-overlay-menu.menu-flipped .main-menu {
        right: -260px;
        left: inherit
    }

    .vertical-overlay-menu.menu-flipped .navbar .navbar-container {
        margin: 0;
        margin-right: 260px
    }

    .vertical-overlay-menu.menu-flipped .navbar .navbar-header {
        float: right
    }

    .vertical-overlay-menu.menu-flipped.menu-open .main-menu {
        transform: translate3d(-260px, 0, 0)
    }

    @media (max-width:991.98px) {
        .pb-5, .py-5 {
            padding-bottom: 0 !important
        }

        .pt-5, .py-5 {
            padding-top: 0 !important
        }

        .vertical-overlay-menu .main-menu .main-menu-footer {
            bottom: 0
        }

        .sidetextpd .text-style {
            margin-top: -30px !important;
        }
    }

    a:hover {
        color: #022f40;
        text-decoration: none;
    }

    img {
        vertical-align: middle;
        border-style: none;
        max-width: 100%;
    }

    .mb30 {
        margin-bottom: 30px;
    }

    .footer_bottom {
        height: 45px;
    }

    .account_section {
        margin-top: 12px;
    }

    .select_btn {
        width: 100%;
        display: inline-flex;
    }

    html body.blank-page .content-wrapper .login_section .flexbox-container {
        height: calc(var(--vh, 7vh) * 94);
    }

    .exc_sign {
        margin-bottom: 15px;
        font-size: 40px !important;
    }
    /*========================================================
   dashboard-analytics CSS     DARK LAYOUT
=========================================================*/
    #dashboard-analytics .img-left {
        width: 210px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .top3 {
        top: 3px !important;
    }

    .cursor {
        cursor: pointer !important;
    }

    .top2 {
        top: 2px !important;
    }

    a#ContentPlaceHolder1_ancPrev {
        color: #022f40 !important;
        font-weight: bold !important;
        font-size: 18px !important;
        padding: 8px 20px !important;

    }
    a#ContentPlaceHolder1_ancPrev:hover {
        border-bottom: 2px solid !important;
    }

    a#ContentPlaceHolder1_ancNext {
            color: #e54b4b !important;
            font-weight: bold !important;
            font-size: 18px !important;
            padding: 8px 20px !important;
    }
    a#ContentPlaceHolder1_ancNext:hover {
          border-bottom: 2px solid !important;
    }
    a #ContentPlaceHolder1_ancPrev {
        color: #022f40;
        font-weight: bold;
        padding: 10px;
        border-bottom: 2px solid;
    }

    .search_icon {
        font-size: 20px !important;
        top: 4px !important;
        left: 0px !important;
    }

    #dashboard-analytics .img-right {
        width: 175px;
        position: absolute;
        top: 0;
        right: 0;
    }

    #dashboard-analytics .pay_status {
        width: 190px;
        text-align: right;
    }

    #dashboard-analytics .bg-analytics {
        /*background: linear-gradient(118deg, #7367f0, rgba(115, 103, 240, 0.7));*/
        background: #023040;
    }

        #dashboard-analytics .bg-analytics .avatar {
            margin-bottom: 2rem;
        }

    #dashboard-analytics table tr th:first-child, #dashboard-analytics table tr td:first-child {
        padding-left: 2rem;
    }

    #dashboard-analytics table tr th:last-child, #dashboard-analytics table tr td:last-child {
        padding-right: 2rem;
    }

    #dashboard-analytics table td {
        padding: .75rem;
    }

    .current_btn {
        width: 225px;
        padding: .9rem 1rem !important;
    }

    @media only screen and (max-width: 576px) {
        #dashboard-analytics .img-left, #dashboard-analytics .img-right {
            width: 140px;
        }

        .mob-clearfix {
            clear: both;
        }

        .mob_padding {
            padding: 0.9rem !important;
        }
    }
    /*========================================================
       card-analytics.css  DARK LAYOUT
=========================================================*/
    .user-latest-image {
        -webkit-transition: all .2s ease-in-out;
    }

    .apple-icon {
        font-size: 6rem !important;
    }

    .step5-logo {
        width: 30px;
    }

    .pdl3 {
        padding-left: 3rem !important;
    }

    .odd-sec {
        margin-top: 190px;
    }

    .card-bodyrespnsve {
        flex: 1 1 auto;
        padding: 1.5rem
    }

    .content2 {
        position: relative;
    }

        .content2 .content-overlay {
            background: rgba(0,0,0,0.7);
            position: absolute;
            height: 99%;
            width: 100%;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            opacity: 0;
            -webkit-transition: all 0.4s ease-in-out 0s;
            -moz-transition: all 0.4s ease-in-out 0s;
            transition: all 0.4s ease-in-out 0s;
        }

        .content2:hover .content-overlay {
            opacity: 1;
        }

    .content-image {
        width: 100%;
    }

    .side_menu-odd {
        z-index: 105;
    }

    .grey_bg {
        background: #f2f2f2 !important;
    }

    .dot-btn {
        float: left;
        border-left: 2px dashed #000;
        padding: 10px 10px 10px 10px;
        margin-top: 10px !important;
        margin-left: 10px !important;
    }

    .bg-blue {
        background: #042f40 !important;
    }

    .bg-red {
        background: red !important;
    }

    .footer-btn {
        width: 30px;
        float: left;
        margin-right: -5px;
        margin-top: -3px;
    }

    [data-tooltip]:hover:before, [data-tooltip]:hover:after {
        display: block;
        position: absolute;
        font-size: 0.8em;
        color: white;
    }

    [data-tooltip]:hover:before {
        border-radius: 0.2em;
        content: attr(title);
        background-color: #640064 !important;
        margin-top: -2.5em;
        padding: 0.3em;
    }

    [data-tooltip]:hover:after {
        content: '';
        margin-top: -2.1em;
        margin-left: 1em;
        border-style: solid;
        border-color: transparent;
        border-top-color: rgba(0, 0, 0, 0.9);
        border-width: 0.5em 0.5em 0 0.5em;
    }

    .width20 {
        width: 20% !important;
    }

    .question-box {
        border: 1px solid #ddd;
        padding: 10px;
    }

    .question-qanda {
        border: 1px solid #9e9e9e;
        color: #000;
        text-align: center;
        font-weight: bold;
        padding: 15px 10px;
    }

    a {
        color: #022f40;
    }

    .question2 {
        width: 90%;
        margin: 5px;
    }

    .mendatory-box2 {
        float: right;
        border: 2px solid #ddd;
        margin: 15px 0px 5px 0px;
        width: 100%;
        padding-left: 4px;
        border-radius: 0 0px 0px 0;
    }

    .popup-btn {
        background-color: #e54b4b !important;
    }

    .mendatory-box2 .form-group {
        margin-bottom: 0.5rem !important;
    }

    .close-icon {
        background: #ff0000;
        margin-right: 5px;
        color: #fff;
        cursor: pointer;
        width: 30px;
        margin: 10px 10px;
        height: 30px;
        text-align: center;
        float: right;
        border: 1px solid #ff0000;
        padding: 5px;
    }

    .add-btn {
        background: #e54b4b;
        color: #fff;
        border-radius: 0px;
    }

    .chk_box2 {
        margin-left: 10px;
    }

    .odd-check {
        margin-top: 65px;
    }

    .border2 {
        border-bottom: 1px solid rgb(34, 41, 47);
        width: 100%;
    }

    .plus-icon {
        background: #e54b4b;
        margin-right: 5px;
        color: #fff;
        cursor: pointer;
        width: 30px;
        border-radius: .4285rem;
        margin: 10px 5px;
        height: 30px;
        text-align: center;
        float: left;
        border: 1px solid #e54b4b !important;
        padding: 5px;
    }

        .plus-icon:hover {
            border: 1px solid #e54b4b !important;
        }

    .color_red {
        color: #e54b4b !important;
        padding: 2px 8px !important;

    }
    .color_red:hover {
        color: #023040 !important;
    }

    .pl25 {
        padding-left: 25px;
    }

    .emojis-sec {
        float: right;
        text-align: center;
        width: 150px;
        height: 80px;
        background: #e54b4b6e;
        margin-top: 0px;
        padding-top: 5px;
    }

        .emojis-sec img {
            width: 40px;
        }

    .rating_oneline2 {
        width: 20%;
        float: left;
        text-align: center;
        padding-bottom: 0;
    }

    .red {
        color: #f00 !important;
    }

    .rating_oneline2 img {
        width: 100%;
    }
.btn{
        padding: 0.9rem 1rem !important;
}
    
.modal-backdrop {
    background-color: #000 !important;
}
 .modal-backdrop.show {
    opacity: .5 !important;
}       

    .step-img {
        border: 1px solid #000;
        padding: 5px;
    }

    html body .content .content-wrapper {
        margin-top: 0rem;
        padding-top: 20px;
    }

    .txt-pdng h2 {
        margin-bottom: 0px;
    }

    @media(min-width:1400px) {
        html body .content .content-wrapper {
            /*padding-top: 0px !important;*/
        }
    }

    @media(min-width:1600px) {
        html body .content .content-wrapper {
            /*padding-top: 15px !important;*/
        }
    }

.mt-15{
    margin-top: -15px;
}

.create-compaign-btn {
    background-color: #e54b4b !important;
}

    .mt_0 {
        margin-top: 0rem !important;
        padding-top: 0px !important;
    }

    .mb-1 {
        margin-bottom: 1rem !important;
    }

    .color-theme {
        color: #bcbcbc !important;
    }

    .mt15 {
        margin-top: 18px;
    }

    .fleft {
        float: left !important;
    }

    .border1 {
        border: 1px solid #ddd;
    }

    .pr50 {
        padding-right: 50px;
    }

    .icon-sec {
        float: right;
        margin-top: 5px;
    }

    .text-name {
        font-size: 18px !important;
        font-weight: bold !important;
        color: #022f40;
    }

    .text-name2 {
        font-weight: bold !important;
        color: #022f40;
    }

    .check {
        background: #048400;
        color: #fff;
        cursor: pointer;
        float: left;
        border: 1px solid #048400;
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 5px;
        margin-right: 5px;
    }

        .check:hover {
            background: #ffffff;
            color: #048400;
            border: 1px solid #048400;
        }

    .save-btn {
        background: #e54b4b !important;
    }

    .remove {
        background: #f00;
        color: #fff;
        cursor: pointer;
        width: 30px;
        height: 30px;
        text-align: center;
        margin-right: 5px;
        float: left;
        border: 1px solid #f00;
        padding: 5px;
    }

        .remove:hover {
            background: #fff;
            color: #f00;
            border: 1px solid #f00;
        }

    .step-heading {
        margin-top: -40px;
    }

    .step-textbox {
        padding-bottom: 5px;
        padding-top: 10px;
    }

    .move {
        background: #022f40;
        margin-right: 5px;
        color: #fff;
        cursor: pointer;
        width: 30px;
        height: 30px;
        text-align: center;
        float: left;
        border: 1px solid #022f40;
        padding: 5px;
    }

        .move:hover {
            background: #fff;
            color: #022f40;
            border: 1px solid #022f40;
        }

    .customer-info.list-group .list-group-item:last-child {
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    .customer-info.list-group .list-group-item .series-info i {
        top: 0;
        margin-right: 0.3rem;
    }

    .avg-sessions .progress {
        margin-top: 0.5rem;
    }

    .analytics-list.list-group .list-group-item {
        border: 0;
    }

        .analytics-list.list-group .list-group-item:first-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .analytics-list.list-group .list-group-item .btn {
            display: none;
        }

        .analytics-list.list-group .list-group-item:hover .btn {
            display: inline-block;
        }

    .chart-dropdown .btn {
        font-size: 0.8rem;
        font-weight: 500;
    }

        .chart-dropdown .btn:after {
            left: 0;
            position: relative;
        }

    @media only screen and (max-width: 992px) and (min-width: 768px) {
        .analytics-list .float-left, .analytics-list .float-right {
            display: block;
        }

        .mob-clearfix {
            clear: both !important;
        }

        .add-ques-sec {
            max-width: 100%;
            margin-left: 0px !important;
            margin-top: 30px !important;
        }
    }

    @media only screen and (max-width: 1024px) {
        .main-menu .navbar-header .navbar-brand {
            margin-top: .35rem !important;
        }

        .header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-nav {
            margin-right: .4rem;
        }

        .font-medium-5 {
            font-size: 1rem !important;
        }

        .campian_btn {
            padding: .9rem .5rem;
            font-size: .7rem;
        }

        .header-navbar .navbar-container .bookmark-wrapper ul.nav li > a.nav-link {
            padding: 1.4rem .5rem 1.35rem 0rem;
        }

        .ques_icon {
            right: -3px;
            top: -2px;
        }

        .header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name {
            font-size: 11px !important;
        }

        .header-navbar .navbar-container ul.nav li a.dropdown-user-link {
            padding: 1rem 0rem !important;
        }

        .horizontal-layout .header-navbar .navbar-container {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        .header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-status {
            font-size: 9px !important;
        }

        .main-menu .navbar-header .navbar-brand .brand-logo {
            height: 60px !important;
            background-position: top !important;
            background-size: 80px !important;
            width: 100px !important;
        }

        .mob-clearfix {
            clear: both !important;
        }

        .add-ques-sec {
            max-width: 100%;
            margin-left: 0px !important;
            margin-top: 30px !important;
        }
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        #dashboard-analytics .avatar .avatar-content, #statistics-card .avatar .avatar-content {
            padding: 0 !important;
        }
    }
    /*========================================================
    tour.css   DARK LAYOUT
=========================================================*/
    .form-control:focus {
        border-color: #042d3f !important;
    }

    .tippy-popper {
        border: none;
        border-radius: .5rem;
        filter: drop-shadow(0 0 7px rgba(0,0,0,0.5))
    }

        .tippy-popper .tippy-tooltip {
            width: auto !important
        }

            .tippy-popper .tippy-tooltip .tippy-arrow {
                border-bottom-color: #7367f0
            }

            .tippy-popper .tippy-tooltip .tippy-content .shepherd-content {
                background-color: #7367f0;
                padding: 1.3rem 1rem;
                border-radius: .5rem
            }

                .tippy-popper .tippy-tooltip .tippy-content .shepherd-content .shepherd-header {
                    padding: 0
                }

                .tippy-popper .tippy-tooltip .tippy-content .shepherd-content .shepherd-text {
                    color: #fff;
                    font-size: 1rem
                }

                .tippy-popper .tippy-tooltip .tippy-content .shepherd-content .shepherd-footer {
                    padding: 0
                }

                    .tippy-popper .tippy-tooltip .tippy-content .shepherd-content .shepherd-footer .shepherd-buttons li {
                        margin: 0
                    }

                    .tippy-popper .tippy-tooltip .tippy-content .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button {
                        background-color: transparent;
                        border: 1px solid #fff;
                        border-radius: 6px;
                        padding: .7rem 2rem;
                        color: #fff;
                        margin: 0 5px
                    }

                        .tippy-popper .tippy-tooltip .tippy-content .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button:hover {
                            background-color: rgba(255,255,255,0.1)
                        }

            .tippy-popper .tippy-tooltip .tippy-content [data-shepherd-step-id="step-4"] .shepherd-footer .shepherd-buttons {
                text-align: center
            }

        .tippy-popper[x-placement="top"] .tippy-arrow {
            border-color: transparent;
            border-top-color: #7367f0
        }

        .tippy-popper[x-placement="bottom"] .tippy-arrow {
            border-color: transparent;
            border-bottom-color: #7367f0
        }

        .tippy-popper[x-placement="right"] .tippy-arrow {
            border-color: transparent;
            border-right-color: #7367f0
        }

        .tippy-popper[x-placement="left"] .tippy-arrow {
            border-color: transparent;
            border-left-color: #7367f0
        }

    .bg-gradient-white {
        color: #fff;
        background-image: linear-gradient(30deg, #fff, rgba(255,255,255,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-white:active, .bg-gradient-white:hover {
            color: #fff
        }

    .gradient-light-white {
        background: linear-gradient(30deg, #fff 0, 100%);
        color: #fff
    }

        .gradient-light-white:active, .gradient-light-white:hover {
            color: #fff
        }

    .bg-gradient-black {
        color: #fff;
        background-image: linear-gradient(30deg, #000, rgba(0,0,0,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-black:active, .bg-gradient-black:hover {
            color: #fff
        }

    .gradient-light-black {
        background: linear-gradient(30deg, #000 0, 100%);
        color: #fff
    }

        .gradient-light-black:active, .gradient-light-black:hover {
            color: #fff
        }

    .bg-gradient-dark {
        background: #640064;
        color: #fff;
        background-image: linear-gradient(30deg, #1e1e1e, rgba(30,30,30,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-dark:active, .bg-gradient-dark:hover {
            color: #fff
        }

    .gradient-light-dark {
        background: linear-gradient(30deg, #1e1e1e 0, 100%);
        color: #fff
    }

        .gradient-light-dark:active, .gradient-light-dark:hover {
            color: #fff
        }

    .bg-gradient-light {
        background: #640064;
        color: #fff;
        background-image: linear-gradient(30deg, #babfc7, rgba(186,191,199,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-light:active, .bg-gradient-light:hover {
            color: #fff
        }

    .gradient-light-light {
        background: linear-gradient(30deg, #babfc7 0, 100%);
        color: #fff
    }

        .gradient-light-light:active, .gradient-light-light:hover {
            color: #fff
        }

    .bg-gradient-primary {
        background: #640064;
        color: #fff;
        background-image: linear-gradient(30deg, #7367f0, rgba(115,103,240,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-primary:active, .bg-gradient-primary:hover {
            color: #fff
        }

    .gradient-light-primary {
        background: linear-gradient(30deg, #7367f0 0, #ce9ffc 100%);
        color: #fff
    }

        .gradient-light-primary:active, .gradient-light-primary:hover {
            color: #fff
        }

    .bg-gradient-secondary {
        background: #640064;
        color: #fff;
        background-image: linear-gradient(30deg, #b8c2cc, rgba(184,194,204,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-secondary:active, .bg-gradient-secondary:hover {
            color: #fff
        }

    .gradient-light-secondary {
        background: linear-gradient(30deg, #b8c2cc 0, #dcdeec 100%);
        color: #fff
    }

        .gradient-light-secondary:active, .gradient-light-secondary:hover {
            color: #fff
        }

    .bg-gradient-success {
        background: #0064fa;
        color: #fff;
        background-image: linear-gradient(30deg, #28c76f, rgba(40,199,111,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-success:active, .bg-gradient-success:hover {
            color: #fff
        }

    .gradient-light-success {
        background: linear-gradient(30deg, #28c76f 0, #4ae9d3 100%);
        color: #fff
    }

        .gradient-light-success:active, .gradient-light-success:hover {
            color: #fff
        }

    .bg-gradient-info {
        background: #640064;
        color: #fff;
        background-image: linear-gradient(30deg, #00cfe8, rgba(0,207,232,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-info:active, .bg-gradient-info:hover {
            color: #fff
        }

    .gradient-light-info {
        background: linear-gradient(30deg, #00cfe8 0, #2d91ff 100%);
        color: #fff
    }

        .gradient-light-info:active, .gradient-light-info:hover {
            color: #fff
        }

    .bg-gradient-warning {
        background: #fafafa;
        color: #fff;
        background-image: linear-gradient(30deg, #ff9f43, rgba(255,159,67,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-warning:active, .bg-gradient-warning:hover {
            color: #fff
        }

    .gradient-light-warning {
        background: linear-gradient(30deg, #ff9f43 0, #fff487 100%);
        color: #fff
    }

        .gradient-light-warning:active, .gradient-light-warning:hover {
            color: #fff
        }

    .bg-gradient-danger {
        background: #640064;
        color: #fff;
        background-image: linear-gradient(30deg, #ea5455, rgba(234,84,85,.5));
        background-repeat: repeat-x
    }

        .bg-gradient-danger:active, .bg-gradient-danger:hover {
            color: #fff
        }

    .gradient-light-danger {
        background: linear-gradient(30deg, #ea5455 0, #f9b789 100%);
        color: #fff
    }

        .gradient-light-danger:active, .gradient-light-danger:hover {
            color: #fff
        }

    .add_btn2 {
        border: none;
        font-family: inherit;
        font-size: inherit;
        color: inherit;
        background: none;
        cursor: pointer;
        padding: 10px 40px;
        display: inline-block;
        margin: 15px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700;
        outline: none;
        position: relative;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s
    }

    .btn-6b {
        border: 4px solid #e54b4b;
        border-radius: 7px
    }

    .btn-6 {
        color: #fff;
        background: #e54b4b;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none
    }

    .btn-6b:hover {
        background: transparent;
        color: #e54b4b
    }

    .form-control {
        border: 2px solid #d3d3d4
    }

    .custom-control-input:checked ~ .custom-control-label::before {
        border-color: #042d3f !important;
        background-color: #042d3f !important
    }

    .sorting_1 a {
        display: inline-block;
        border-radius: 5px;
        color: #042d3f
    }

    .feather.icon-users:before {
        font-size: 27px
    }

    .main-menu.menu-light .navigation > li.active > a {
        width: 100% !important
    }
    /*.modal .modal-header .close span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}*/
    .modal .modal-header .close span {
        position: relative;
        transform: translate(-50%, -50%)
    }

    .platforms2:target {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1)
    }

    section#validation.reduce-margin {
        margin: 0
    }

    .min-height-1 .card {
        margin: 0
    }

    .app-content .wizard > .actions {
        padding: 0 !important
    }

    span.vs-button-linex {
        bottom: 0 !important
    }

    .align-right {
        text-align: right
    }

    .app-content .wizard > .actions > ul > li > a[href="#previous"] {
        color: #fff !important
    }

    .app-content .wizard > .content > .body {
        padding: 0 !important
    }

    .app-content .wizard > .actions > ul > li + li a {
        border-radius: .42rem;
        color: #e74f4a !important;
        padding: 8px 20px; /*border-bottom:2px solid;*/
        border-radius: 0;
        font-weight: 700
    }

    .app-content .wizard > .actions > ul > li > a[href="#previous"] {
        border-radius: .42rem;
        color: #042d3f !important;
        padding: 8px 20px;
        border-bottom: 2px solid #042d3f;
        border-radius: 0;
        font-weight: 700
    }

    .action-btn {
        background: #e54b4b !important
    }

    .mob-popup {
        height: 650px;
        padding: 10px 42px 10px 42px !important;
        overflow-x: hidden;
        overflow-y: auto !important
    }

    .modal .modal-header .close {
        transform: none;
        top: -8px
    }

    .cd-cart__trigger::after {
        background-position: -37px -1px !important;
        background-size: 96px !important
    }

    .cd-cart__header h2 {
        color: #e54b4b
    }

    .cd-cart__details h3 {
        font-weight: 500 !important
    }

    .cd-cart__price {
        height: 28px !important
    }

        .cd-cart__price .fa-trash:before {
            font-size: 15px
        }

    i.fa.fa-trash {
        margin: -5px 0 0
    }

    #divDuplicate {
        display: none
    }

    .qa .collapse-bordered .card .card-body {
        width: 95%;
        margin: 0 auto 10px
    }

        .qa .collapse-bordered .card .card-body span:first-child {
            border: 1px solid green;
            display: block;
            padding: 10px;
        }

        .qa .collapse-bordered .card .card-body span ~ span {
            border: 1px solid red;
            display: block;
            padding: 10px;
        }

    @media only screen and (max-width:1200px) {
        .card {
            margin-top: 0 !important
        }
    }

    @media only screen and (max-width:1199px) {
        .breadcrumbs-top {
            display: none
        }

        .reduce-comman-padding {
            padding-top: 10px !important
        }

        .has-sub.open {
            background: none !important;
        }

        .main-menu.menu-light .navigation > li.active > a {
            color: #494949 !important;
            background: #f5f5f5 !important;
            box-shadow: none !important;
        }

        .main-menu.menu-light .navigation > li {
            padding: 0 15px;
            margin: 0 0 10px;
        }

            .main-menu.menu-light .navigation > li ul .active {
                background: #f5f5f5 !important;
                box-shadow: none !important;
            }

                .main-menu.menu-light .navigation > li ul .active a {
                    color: #494949 !important;
                }
    }

    @media only screen and (max-width:1024px) {
        section#validation {
            margin-top: 0
        }

        .step2 .text-cross {
            position: static;
        }

        .step2 .text-cross {
            right: 0 !important;
        }

        .cross-icon-white {
            width: 26px;
        }

        .step2 .text2 {
            right: 0 !important;
            width: 25px !important;
        }

        div#ecommerce-sidebar-toggler {
            display: block !important;
        }

        .ecommerce-application .sidebar-left .sidebar {
            position: static !important;
            top: 0 !important;
        }

            .ecommerce-application .sidebar-left .sidebar .sidebar-shop {
                transform: none !important;
                position: static !important;
            }

            .ecommerce-application .sidebar-left .sidebar .card .card-body {
                padding-bottom: 0 !important;
            }

            .ecommerce-application .sidebar-left .sidebar .card {
                padding-bottom: 0 !important;
            }

        .ecommerce-application .sidebar-shop {
            width: 100% !important;
        }

        .navbar-brand {
            margin-right: 0 !important;
        }

        .btn-relief-success {
            display:;
        }

        .vertical-overlay-menu .navbar .navbar-header {
            position: absolute;
            left: 50%;
            width: 75px;
            transform: translate(-50%);
            top: 3px;
        }
    }
    @media(min-width:1025px) and (max-width:1199px){
        .vertical-overlay-menu .navbar .navbar-header {
            position: absolute;
            left: 50%;
            width: 110px;
            transform: translate(-50%);
            top: 3px;
        }
    }
   

    @media only screen and (max-width:990px) {
        .full-width .modal-dialog {
            width: 92%;
            max-width: 100%
        }

        .full-width #platforms2 {
            padding-top: 0
        }

        .full-width .popup-head {
            margin-top: 5px !important;
            margin-bottom: 31px;
            margin-left: 31px
        }

        .full-width .platforms2 {
            width: 86%
        }

        .full-width .red-color {
            font-size: 22px
        }

        .icon-img {
            width: auto
        }

        .package-popup {
            height: 500px
        }

        .bronze-prize {
            margin-bottom: 0 !important
        }

        .full-width .modal-body img {
            max-width: 100%;
            width: auto !important
        }

        .desktop-view {
            margin-top: 60px;
        }

        a.window_close {
            top: 40px;
        }
    }

    @media (max-width: 767.98px) {
        .header-navbar .navbar-header .navbar-brand {
            position: static !important;
            left: 0 !important;
            top: 0;
            transform: translate(0, 0) !important;
        }
    }

    @media only screen and (max-width:767px) {
        .edit_menu {
            margin-top: 25px;
        }
        .dv_ply {
            margin-top: 15px;
            margin-bottom: 20px;
        }
        .tabs .nav-tabs li {
            border: 1px solid #e54b4b !important;
            text-align: center;
            margin-right: 5px !important;
            border-radius: 0.357rem !important;
            width:auto !important;
        }
        .sliding_mob {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .blockpadding {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

        .custom_package_btn{
            margin-left:0px;
        }

        .font_s {
            margin-top: 0px;
        }
        .match-height ul li a {
            margin-bottom: 0px !important;
        }
        .match-height ul li {
            margin-top: 7px;
        }
        .dv_ply h4 {
            margin-bottom: 0px !important;
            margin-left: 55px !important;
        }
        .sp_ball {
            margin-top: 16px;
            margin-bottom: 25px;
        }
        .mob_package h4 {
            font-size: 14px;
        }
        .dv_ply a {
            margin-top: -68px;
        }
        .mob_package h2 {
            font-size: 22px;
        }
        .dv_ply_inner {
            margin-left: 0px !important;
        }
        .sm_line {
            margin-left: unset !important;
            margin-top: 15px;
        }
        .custom_package_btn .campiagn_new {
            display: flex;
            align-items: center;
        }
            .custom_package_btn .campiagn_new h4 {
                margin-top: 8px;
                font-size: 14px;
                margin-bottom: 0;
                margin-left: 10px;
            }
        .custom_package_btn .campiagn_new .hover-switch img {
            width: 25px;
            top: 10px;
            margin-right: 25px;
        }

        .modal .modal-header .close {
            transform: none;
            top: -8px;
            right: -14px;
            position: absolute;
        }

        .modal-header .close-icon {
            margin: 0 !important;
        }

        .step3-mob {
            float: left;
            width: 33%;
            padding: 0 10px
        }

        .icon-mob a img {
            width: auto !important
        }
        .icon-mob .hover-switch img {
            width: 35px !important
        }

        #page-account-settings {
            margin-top: 50px
        }

        #question3 {
            z-index: 9999
        }

        #question2 {
            z-index: 9999
        }

        #question4 {
            z-index: 9999
        }

        #question5 {
            z-index: 9999
        }

        .step3-mob .card.ecommerce-card {
            margin: 0
        }

        #dashboard-analytics .card {
            margin: 0 !important
        }

        .waves-input-wrapper .waves-button-input {
            padding: 12px
        }

        .step_5 {
            margin-bottom: 0 !important
        }

        .card.ttt {
            margin: 0 0 20px
        }

        #page-account-settings {
            margin: 0 0 20px
        }

        .pt25.no-padd {
            padding: 0
        }

        .logo_img {
            height: 80px
        }

        .mob_mt0 {
            margin-top: 0px !important;
        }

        .icon-search:before {
            font-size: 25px
        }

        .horizontal-menu.navbar-floating:not(.blank-page) .app-content {
            padding-top: 4.75rem
        }

        .horizontal-menu .horizontal-menu-wrapper {
            height: auto
        }

        .full-width .popup-head {
            margin-top: 29px !important;
            margin-bottom: 31px;
            margin-left: 1px
        }

        .full-width .red-color {
            font-size: 16px
        }

        .full-width #price-table .card-body {
            padding: 0
        }

        div#ecommerce-sidebar-toggler {
            display: block !important;
        }

        /*.horizontal-layout .header-navbar .navbar-container {
            padding-left: 0 !important;
        }*/

        .navbar-collapse {
            flex-basis: 100%;
            flex-grow: 1;
            display: flex;
            align-items: center;
        }

        .app-content .wizard > .steps > ul > li.disabled a, .app-content .wizard > .steps > ul > li.current .step {
            display: none;
        }

        .app-content .wizard > .steps > ul > li {
            width: 100% !important;
        }

        .app-content .wizard.wizard-circle > .steps > ul > li:before, .app-content .wizard.wizard-circle > .steps > ul > li:after {
            background: none !important;
        }

        div.app-content .wizard > .steps > ul > li a {
            padding-top: 0 !important;
        }

        .app-content .wizard > .steps > ul > li.disabled a, .app-content .wizard > .steps > ul > li.current .step {
            display: none;
        }

        .app-content .wizard > .steps > ul > li.done a {
            display: none !important;
        }

        .content-body.cleardiv {
            clear: both;
        }

        .row.border2.tr1.grey_bg {
            margin-right: 0;
            margin-left: 0;
        }

        .blue-color {
            font-size: 15px;
        }

        .vertical-overlay-menu .navbar .navbar-header {
            left: 43%;
        }
      
    }

    @media only screen and (max-width:480px) {
        .cross-icon-white {
            height: 24px !important;
            width: 26px !important;
        } 

        .vertical-overlay-menu .navbar .navbar-header {
            left: 50%;
        }

        .vertical-overlay-menu .navbar .navbar-header {
            margin-top: 45px;
        }

        .header-navbar .navbar-container .bookmark-wrapper ul.nav li > a.nav-link {
            padding: 1.4rem .5rem 1.35rem .5rem;
        }

        .mob-popup {
            padding: 16px !important
        }

        .full-width .popup-head {
            margin-top: 50px !important;
            width: 60%;
            margin-right: 0;
            padding-right: 0;
            margin-left: 55px
        }

        .full-width .red-color {
            font-size: 14px
        }

        .modal .modal-header .close {
            transform: none;
            top: -8px;
            right: 44%
        }

        .navbar-header .nav-item {
            position: relative
        }

        body.horizontal-layout .content.tn .content-wrapper {
            margin-top: 0 !important;
        }

        /*img {
            margin-top: 8px;
        }*/
    }

    /*.pricing-title {
        padding-top: 21px !important;
    }*/

    .platforms21 {
        position: absolute;
        height: auto;
        width: 95%;
        margin: auto;
        padding: 25px 0px 97px 0px;
        z-index: 9;
        background: #fff;
        border-radius: 0px;
        transform: scale(0.9);
        opacity: 1;
        /* overflow: hidden; */
        transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
    }

    .user-latest-image-test:hover {
        transform: scale(1.1) !important;
    }

    @media (min-width: 1600px) {
        /*.compaign_section {
            margin-top: 1% !important;
        }*/

        #dvRating {
            padding: 0% 12%;
        }
    }

    @media (min-width: 1800px) {
        /*.compaign_section {
            margin-top: 1% !important;
        }*/

        div#dvRating {
            padding: 0% 17%;
        }
    }

    @media (min-width: 1900px) {

        #dvRating {
            padding: 0% 18%;
        }
    }

    @media (max-width: 480px) {
        .full-width .popup-head {
            margin-bottom: 6px !important;
        }

        .package-popup {
            height: 400px !important;
        }

        .mob-popup {
            height: 440px !important;
        }
    }

    @media screen (min-width:550px) and (max-width: 595px) {
        .mob-popup {
            height: 285px !important;
        }
    }

    .tooltip-inner {
        background-color: #022f40 !important;
    }

    .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
        border-top-color: #022f40 !important;
    }

    .ml-15 {
        margin-left: -15px !important;
    }

    .upload-preview-box {
        background: #fff;
        margin-bottom: 2.2rem;
        border: none;
        border-radius: 0 0 .5rem .5rem;
        box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
        transition: all .3s ease-in-out;
        margin: auto;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .outerpreview {
        margin-top: 25px;
    }

    .mt_1 {
        margin-top: 1px;
    }

    .btn1 {
        padding: 10px 2px !important;
        width: 150px;
    }





/*current_campaigm CSS begin*/

@media(max-width:355px) {
    .text-1 {
        width: 99px;
    }
    .text-4 {
        font-size: 12px;
        font-weight: bold;
    }
    .mr_20{
        margin-left:55px;
    }
    
}

@media(min-width:360px) and (max-width:374px) {
    .text-1 {
        width: 125px;
    }
    .text-4 {
        font-size: 15px;
        font-weight: bold;
    }
   
    #slider .outer {
        width: 100%;
    }
    #slider .emoji {
        margin-left: -30px;
        font-size: 35px;
        width: 12px;
    }
    .width1 {
        width: 275px;
        margin-left: -40px;
    }
    #slider {
        padding: 40px 2px 60px 1px !important;
    }
}

@media(min-width:375px) and (max-width:400px) {
    .text-1 {
        width: 135px;
    }
    .text-4 {
        font-size: 16px;
        font-weight: bold;
    }
   
    #slider .outer {
        width: 100%;
    }
    #slider .emoji {
        font-size: 35px;
        width: 12px;
    }
    .width1 {
        width: 290px;
        margin-left: -40px;
    }
    #slider {
        padding: 40px 2px 60px 1px !important;
    }
}

@media(min-width:401px) and (max-width:420px) {
    .text-1 {
        width: 155px;
    }
    .text-4 {
        font-size: 18px;
        font-weight: bold;
    }
    
    #slider .outer {
        width: 100%;
    }

    #slider .emoji {
        font-size: 35px;
        width: 13px;
    }
    .width1 {
        width: 318px;
        margin-left: -35px;
    }
    #slider {
        padding: 40px 2px 60px 1px !important;
    }
}

@media(min-width:768px) and (max-width:812px) {
    .text-1 {
        width: 165px;
    }
}

@media(max-width:480px) {
    .text-3 {
        font-size: 12px !important;
    }
    .mob_scroll {
        overflow-y: scroll;
    }
    .first-row {
        min-width: 205px !important;
    }
    .mr-15 {
        margin-right: -15px !important;
    }
}

.sec-width {
    width: 25%;
}

.color-code {
    color: red;
    font-weight: bold;
    text-transform: uppercase;
}

.text-1 {
    height: 500px;
    margin-bottom: 50px;
    margin-top: 20px;
}

.text-2 {
    text-align: center;
}

.text-3 {
    font-size: 15px;
    text-transform: uppercase;
}

.pd_10 {
    padding: 10px;
}

.font_s {
    font-size: 14px !important;
    display: block;
    padding-top: 8px;
    margin-top: 38px;
}

ul#main-menu-navigation1 li {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

ul#main-menu-navigation1 li a{
    display: flex !important;
    justify-content:center;
    width: 150px;
}

.font_s:hover {
    color: #e54b4b !important;
}

.icon_s {
    font-size: 27px !important;
}

@media(min-width:1200px) {
    .icon_s {
        margin-right: 0px !important;
    }
}

.pb {
    padding: 0px 20px !important;
}

.font-size {
    font-size: 16px;
    padding-bottom: 3px;
}

.help_icon {
    color: #e54b4b !important;
    font-size: 27px;
}
.help_icon:hover {
    color: #023040 !important;
    font-size: 27px;
}

.news_icon {
    color: #e54b4b !important;
    font-size: 27px;
}
.news_icon:hover {
    color: #023040 !important;
    font-size: 27px;
}
@media(max-width:1024px){
    .help_icon {
        padding-top: 10px !important;
    }
}

.icon-color {
    color: #e54b4b;
}
.icon-color:hover {
    color: #023040 !important;
}

@media(min-width:767px){
    .mob-device {
        display: none;
    }
}

.text-1:hover {
    color: #e54b4b ;
}

.font-sz{
    font-size:9px;
}










/*Css form edit_campaign_overview page start*/

section {
    float: left;
    width: 100%;
}

h2 {
    color: #1a0e0e;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    line-height: normal;
    text-transform: uppercase;
}

h2 span {
    display: block;
    padding: 0;
    font-size: 18px;
    opacity: 0.7;
    margin-top: 5px;
    text-transform: uppercase;
}

.rt-container {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

.rt-row:before, .rt-row:after {
    display: table;
    line-height: 0;
    content: "";
}

.rt-row:after {
    clear: both;
}

.rt-container {
    width: 100%;
}

.timeline {
    width: 90%;
    height: 20px;
    list-style: none;
    text-align: justify;
    margin: 80px auto;
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(45%, rgba(255,255,255,0)), color-stop(51%, rgba(191,128,11,1)), color-stop(57%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0)));
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgb(26 42 79) 51%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 100%)
}

.timeline:after {
    display: inline-block;
    content: "";
    width: 100%;
}

    .timeline li {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #006400;
        text-align: center;
        line-height: 1.2;
        position: relative;
        border-radius: 50%;
    }

.timeline li:before {
    display: inline-block;
    content: attr(data-year);
    font-size: 16px;
    position: absolute;
}

.timeline li:after {
    display: inline-block;
    content: attr(data-text);
    font-size: 16px;
    position: absolute;
}

.timeline li:nth-child(odd):after {
    bottom: 0;
    margin-bottom: -10px;
    transform: translate(-50%, 100%);
}

.timeline li:nth-child(even):after {
    top: 0;
    margin-top: -10px;
    transform: translate(-50%, -100%);
}

        .timeline li:nth-child(odd):before {
            top: -10px;
            transform: translate(-50%, -100%);
        }

        .timeline li:nth-child(even):before {
            bottom: -10px;
            transform: translate(-50%, 100%);
        }
/*Css form edit_campaign_overview page end*/


.tooltip1 {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip1 .tooltiptext1 {
    visibility: hidden;
    width: 161px;
    background-color: #023040;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 370%;
    left: 50%;
    margin-left: -80px;
}

.tooltip1 .tooltiptext1::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip1:hover .tooltiptext1 {
    visibility: visible;
}


@media(max-width:480px){
    .timeline {
        width: 350px;
        margin: 120px auto;
    }
    .Scriptcontent{
        overflow-x: auto !important;
    }
    .rt-container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .platforms a {
        width: 90px;
        height: 130px;
    }
    .android-icon{
        margin-top:5px;
    }
    .apple-icon{
        margin-top:8px;
    }
    .platforms a:nth-child(1) {
        left: 2px;
    }
    .platforms a:nth-child(2) {
        left: 90px;
    }
    .app-modal{
        padding: 0px;
    }
    .media:first-child {
        margin-top: 20px;
    }
    .mob-pd{
        padding: 0px !important;
    }
}

@media(max-width:768px){
    .media {
        margin: 3px 0px;
    }
}

.card-profile .card-body .profile-image-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.profile-image {
    padding: .5rem;
    border-radius: 50%;
    /*background-color: #fff;*/
    -webkit-box-shadow: 0 0 8px 0 rgb(34 41 47 / 14%);
    box-shadow: 0 0 8px 0 rgb(34 41 47 / 14%);
    margin-bottom: 1.15rem;
}
.rounded-circle {
    border-radius: 50% !important;
}
.content-text{
    text-align:center;
    margin-top:8%;
}
.table-data {
    text-align: center;
    width: 100%;
}
.b-avatar-img img {
    width: 100px;
    height: 100px;
}
.mb_20 {
    margin-bottom: 20px;
}

@media(max-width:480px){
    .table-data{
        margin:2% -3%;
    }

    .mt-20 {
        margin-top: -20px !important;
    }   

    .text-style{
        padding-top:0px !important;
    }

    .mt-120 .text-style {
        padding-top: 45px !important;
    }
}

@media(max-width:767px){
    .mt-60 {
        margin-top: -80px;
        width: 180px;
        float: right;
    }

    .mt-120 {
        margin-top: -105px;
        width: 188px;
        float: right;
    }

    .mt-150 {
        margin-top: -150px !important;
    }
}

@media(min-width:1200px) {
    .mr_10 {
        margin-right: 10px;
    }
}

@media(min-width:481px){
    .pl-6{
        padding-left: 6%;
    }
}

@media(min-width:481px) and (max-width:767px){
    .paddingtop0 {
        padding-top: 0px !important;
    }
}




#sidebar1 {
    position: fixed;
    top: 3px;
    right: -300px;
    width: 300px;
    height: 100%;
    z-index: 14;
    background: #fff;
    -webkit-transition: -webkit-transform 25000s;
    transition: transform 25000s;
    -webkit-box-shadow: 0 15px 30px 0 rgb(34 41 47 / 11%), 0 5px 15px 0 rgb(34 41 47 / 8%);
}

    #sidebar1.active {
        right: 0px;
        overflow: auto;
        -webkit-transition: -webkit-transform 25000s;
        transition: transform 25000s;
    }

    #sidebar1 .toggle-btn {
        position: absolute;
        right: 310px;
        top: 10px;
    }

    #sidebar1 .toggle-btn span {
         display: block;
         width: 30px;
         height: 5px;
         background: #151719;
         margin: 5px 0px;
         cursor: pointer;
    }

    #sidebar1 div.list1 div.item {
        padding: 15px 10px;
        border-bottom: 1px solid #444;
        text-transform: uppercase;
        font-size: 12px;
    }

    #sidebar1 div.list1 div.item a {
        color: #fcfcfc;
        text-decoration: none;
    }

.item1{
    background-color:#444;
    color:#fff;
}

#more {
    display: none;
}
#myBtn {
    border: 1px solid #e54b4b;
    padding: 5px;
}

.modal-text {
    background-color: #f8f8f8;
    padding: 10px;
    width: 170px;
}

/*.mt-1, h4{
    padding-top:3% !important;
}*/

.pd-15{
    padding:15px !important;
}

.mtb-20{
    margin-top:20px;
    margin-bottom:20px;
}

.pd-10 {
    padding: 10px 0px !important;
    color: #023040 !important;
    font-weight: 600 !important;
    font-size: 20px !important;
}

@media only screen and (max-width: 1199px) {
    .box1 {
        display: block !important;
    }
    .emailtext{
        width: 100% !important;
    }
}

.btn-orange {
    color: #fff !important;
    background-color: #e54b4b !important;
    border-color: #d66a06 !important;
    padding: 5px !important;
    margin: 3px !important;
}

    .btn-orange:hover, .btn-orange:active {
        color: #fff !important;
        background-color: #e54b4b !important;
        border-color: #d66a06 !important;
    }

.del{
    padding:8px !important;
}


@media (min-width:1025px) and (max-width: 1199px) {
    .main-menu .navbar-header .navbar-brand .brand-logo {
        height: 70px !important;
        background-position: top !important;
        background-size: 85px !important;
        width: 100px !important;
        margin-top: -15px !important;
    }
}

@media(min-width:1024px){
    .modal-wid{
        min-width:750px;
    }
}



/*solution builder CSS start - ashish*/

.carousel-inner1 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.indicator.active, .indicator.complete {
    border-color: #e54b4b !important;
}
.pagination-container1 {
    margin-top: 0;
}

.full-width-container1 {
    width: 100%;
    min-width: 320px;
}

.sized-container1 {
    max-width: 900px;
    width: 100%;
}

.pagination1 {
    width: 100%;
    text-align: center;
    padding: 0 15px;
    margin-bottom: 20px;
    display: flex;
    list-style: none;
    border-radius: 0.25rem;
}

.indicator {
    width: 35px;
    height: 29px;
    border: 4px solid lightgray;
    border-radius: 50%;
    display: inline-block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

/*.indicator:hover {
    border: 3px solid #e54b4b !important;
}*/
.indicator:active {
    border: 3px solid #e54b4b !important;
}
.indicator:focus {
    border: 3px solid #e54b4b !important;
}
    
/*.progress-bar-container1:hover {
    background-color: #e54b4b !important;
}*/
.progress-bar-container1:active {
    background-color: #e54b4b !important;
}
.progress-bar-container1:focus {
    background-color: #e54b4b !important;
}
.progress-bar-container1:last-of-type {
    display: none
}

.indicator .tag {
    position: absolute;
    top: -30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: lightgray;
    white-space: nowrap;
}

.progress-bar-container1 {
    width: 10%;
    height: 4px;
    display: inline-block;
    background-color: lightgray;
    position: relative;
    top: 12px;
}

.progress-bar-container1 .progress-bar {
    width: 0;
    height: 100%;
    background-color: red;
}



.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #007bff;
    transition: width .6s ease;
}

@media(min-width:768px) {
    .wdth_60 {
        min-width: 730px;
    }
}

@media(min-width:768px) and (max-width:1099px) {
    .form-width {
        min-width: 103% ;
        margin-top: -9%;
    }
}

@media(min-width:1100px){
    .form-width {
        min-width: 102%;
    }
}

.question-heading{
    margin-top:20px;
    margin-bottom:20px;
}

/*solution builder CSS end - ashish*/









.bronze-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bronze-radio input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 3px;
    left: 80px;
    height: 15px;
    width: 15px;
    background-color: darkgray;
    border-radius: 50%;
}

@media(max-width:1200px){
    .checkmark {
        left: 15px !important;
    }
}

.bronze-radio:hover input ~ .checkmark {
    background-color: #ccc;
}

.bronze-radio input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.bronze-radio input:checked ~ .checkmark:after {
    display: block;
}

.bronze-radio .checkmark:after {
    top: 3px;
    left: 4px;
    width: 7px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.box-wid{
   width: 35%;
}

@media(min-width:768px) and (max-width:815px){
    .product-block {
        max-width: 70% !important;
        margin-left: 16% !important;
    }
    .session-block{
        max-width: 70% !important;
        margin-left: 16% !important;
    }
}

@media(min-width:1024px) {
    .box-wid1 {
        width: 400px !important;
    }
}


.label-font {
    font-size: 15px;
}


@media(max-width:480px) {
    .profile-image-wrapper{
        margin-top: -60px !important;
    }
}

.profile-image-wrapper{
    margin-top: -70px;
}

@media(max-width:375px) {
    .mr-12 {
        margin-left: -12px;
        margin-right: -12px;
    }
}


.blockpadding{
    padding-left: 20px;
    padding-right: 20px;
}

.slidingDiv p{
    text-align: justify;
}












/*.animate {
    animation-duration: 10s;
    animation-delay: 10s;
}*/

.nav-menu-item .active {
    background-color: #e54b4b !important;
    color: #fff !important;
    padding: 5px 8px !important;
    border-bottom: none !important;
    margin-top: 5px;
}
.nav-menu-item .active::after{
    content:none !important;
}
.img-wrapper {
    overflow: hidden;
}
.inner-column-overly {
    position: absolute;
    bottom: 30px;
}
.inner-column-overly span {
    display: block;
    padding-left: 15px;
    color:#fff;
}
.inner-column-overly a {
    margin-left: 15px;
}
.inner-img {
    transition: 0.3s;
    width: 100%;
    /*filter: brightness(0.5);*/
}

@media(max-width:1199px){
    .inner-img {
        height: 250px;
    }
}

/*.inner-img:hover {
    transform: scale(1.1);
}*/

.setting_btn {
    background-color: #fff !important;
    color: #222d31 !important;
    border-radius: 0px !important;
    padding: 10px !important;
    margin-top: 5px;
    text-transform: uppercase;
    word-break: break-word;
}

.text1 {
    float: right;
    color: #fff;
    padding: 10px;
}

/*.red-bg {
    background-image: url('../img/red_background.png');
    background-repeat: no-repeat;
}*/

/*.white-bg {
    background-image: url('../img/white_background.png');
    background-repeat: no-repeat;
}*/

.inner-overly1 {
    position: relative;
    bottom: 40px;
}

.inner-overly2 {
    position: relative;
    bottom: 38px;
    float: right;
    right: 15px;
}

.inner-overly {
    position: relative;
    bottom: 100px;
}

/*.inner-overly .red-bg{
    display: block;
    color: #fff;
    padding-left: 25px;
    transform: scaleY(2);
    min-width: 200px;
    font-weight: bold;
}*/

/*.inner-overly .white-bg{
    display: inline-grid;
    padding-left: 22px;
    transform: scaleY(2);
    color: #111;
    width: 100%;
    font-weight: bold;
}*/


.color-red {
    color: red;
    font-size: 18px;
    transform: scaleY(1.5);
}

.color-red1 {
    color: red;
    font-size: 18px;
    padding-left: 15px;
    transform: scaleY(1.5);
}


.red-box {
    background-image: url(../img/red_rectangle.jpg);
    height: 25px;
    width: 185px;
    position: absolute;
    padding: 4px;
    font-size: 10px;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.inner-overly-main {
    position: absolute;
    top: -10px;
    right: 16px;
}



.text1 span {
    font-size: 8px;
    padding-left: 3px;
}

.text1 .top-text{
    font-size: 14px;
    font-weight: bold;
    padding-left: 3px;
}

.black-text {
    color: #111;
    font-weight: bold;
}

.text1 img {
    width: 8px;
    padding-bottom: 1px;
}

@media(max-width:1199px){
    .inner-overly{
        bottom: 130px;
    }
    .color-red1{
        min-height: 33px;
    }
}



.box-side1 {
    background-color: #e54b4b;
    padding: 1px 9px 1px 20px;
    text-align: left;
    position: absolute;
    z-index: 1;
    color: #fff;
}

.box-side1:after {
    content: '';
    position: absolute;
    top: 0;
    right: -22px;
    border-top: 31px solid rgb(51 51 51 / 0%);
    border-left: 22px solid #e54b4b;
    width: 0;
}

.box-side2 {
    background-color: #fff;
    padding: 1px 10px;
    text-align: center;
    position: relative;
    height: 25px;
    z-index: 1;
    font-size: 10px;
    color: #111;
    margin-top: 31px;
}

.box-side2:before {
    background: #fff;
    content: "";
    height: 25px;
    position: absolute;
    left: -8px;
    z-index: -1;
    top: 0;
    -webkit-transform: skew(-160deg);
    -moz-transform: skew(-160deg);
    transform: skew(-160deg);
    width: 25px;
}


.box-side1 p {
    font-family: 'Bebas Neue', cursive;
    font-size: 22px;
    margin: 0;
    padding: 4px 0px;    
}

.entries {
    position: absolute;
    z-index: 99;
    bottom: -4px;
    left: 20px;
    transform: unset;
    font-weight: 600;
    color: #e54b4b;
}
.entries span.color-white {
    font-weight: 100;
}
.wh_brk{
    width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.box-side2 p {
    width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.box-side2 p {
    font-weight: bold;
}

@media(min-width:1200px) {
    .sec-flex {
        display: flex;
    }
}

@media(max-width:1199px) {
    /*.box-side1 {
        max-width: fit-content;
    }*/

    .box-side2 {
        float: right;
    }
}



.pl20{
    padding-left: 20px;
}

.pt10{
    padding-top: 9px;
}

@media(min-width:768px) and (max-width:799px){
    .box-side1{
        padding: 1px 9px 1px 7px;
    }
}


@media(max-width:767px){
    .header-text{
        display: none !important;
    }
}














.text-font {
    font-size: 18px;
    padding-left: 10px;
    padding-top: 2px;
}

/*.check-tick {
    color: #e54b4b;
    padding: 3px 6px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px;
    background: #fff;
}*/

.box-size {
    border: 1px solid #ccc;
    padding: 15px 25px !important;
    width: 100%;
    max-width: initial;
}

.card1 {
    margin-bottom: 10px !important;
    border-radius: 0px;
    padding: 20px;
    box-shadow: none;
}

    .card1 .card-head {
        background: #cccccc1f;
    }

.card1 .card-head h2{
    padding: 15px;
    
}

.acc-font {
    border: 1px solid #023040 !important;
}


@media(min-width:600px) and (max-width:1199px){
    .main-box {
        margin-top: 5%;
    }
}

@media(max-width:599px){
    .main-box {
        margin-top: 10%;
    }
}









.nav .nav-item .ac-img:hover img:nth-child(1) {
    display: none;
    text-align: center;
    margin: auto;
}

.nav .nav-item .ac-img:hover img:nth-child(2) {
    display: block;
    text-align: center;
    margin: auto;
}

.nav .nav-item .ac-img img:nth-child(2) {
    display: none;
    text-align: center;
    margin: auto;
}

/*.nav .nav-item:hover img:nth-child(1) {
    display: none;
    text-align: center;
    margin: auto;
}

.nav .nav-item:hover img:nth-child(2) {
    display: block;
    text-align: center;
    margin: auto;
}

.nav .nav-item img:nth-child(2) {
    display: none;
    text-align: center;
    margin: auto;
}

.main-menu-content .nav-item:hover img:nth-child(1) {
    display: none;
    text-align: center;
    margin: auto;
}

.main-menu-content .nav-item:hover img:nth-child(2) {
    display: inline;
    text-align: center;
    margin: auto;
}

.main-menu-content .nav-item img:nth-child(2) {
    display: none;
    text-align: center;
    margin: auto;
}

.nav-item:hover .font_s {
    color: #e54b4b !important;
}*/




.mt125 {
    margin-top: 125px;
}

@media(max-width:1024px) {
    .mt125 {
        margin-top: 60px !important;
    }
    .mt-98 {
        margin-top: 80px !important;
    }
}

@media(min-width:992px) {
    .sidetextpd .text-style {
        padding-top: 40px;
    }
}

@media(min-width:992px) and (max-width:1199px) {
    .mt125 {
        margin-top: 60px;
    }
    body.horizontal-layout .content .content-wrapper {
        margin-top: 6rem !important;
    }
    .belowsec-height{
        margin-top: -95px;
    }
}

@media(min-width:1100px) and (max-width:1199px) {
    .belowsec-height1 {
        margin-top: -95px;
    }
}

@media(min-width:768px) and (max-width:991px) {
    .mt125 {
        margin-top: 60px;
    }
    .belowsec-height {
        margin-top: -80px;
    }

    body.horizontal-layout .content .content-wrapper {
        margin-top: 3rem !important;
    }
}

body.horizontal-layout .content .content-wrapper {
    margin-top: 0;
}

.mt-98{
    margin-top: 98px;
}


.select-text-pos {
    margin-top: -21px;
    position: absolute;
    left: 10%;
}

.select-text-pos1 {
    margin-top: -21px;
    position: absolute;
    left: 20%;
}

.line-bar {
    width: 100%;
    margin-left: -90%;
}

.line-bar .step{
    left:-35% !important;
}


.line-bar1 {
    width: 100%;
    margin-left: -90%;
}

.line-bar1 .step{
    left:-35% !important;
}


.version_txt {
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    display: block;
    margin-bottom: -5px;
}
.update{
    font-size: 8px;
}


.free_acc {
    background-color: #fff;
    border: 1px solid rgba(82,104,255,.1);
    color: #111;
    border-radius: 16px;
    box-shadow: 0 5px 32px 0 rgb(0 0 0 / 5%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    text-align: left;
    width: 48%;
}

.free_acc ul li{
    list-style-type: none;
}

.text-black{
    color: #111;
    text-transform: capitalize;
    padding-bottom: 5px;
}

.text-red {
    color: #e54b4b;
    text-transform: capitalize;
    padding-bottom: 5px;
}

.pro_acc {
    background-color: #F3E8EA;
    border: 1px solid rgba(82,104,255,.1);
    color: #e54b4b;
    border-radius: 16px;
    box-shadow: 0 5px 32px 0 rgb(0 0 0 / 5%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    text-align: left;
    width: 48%;
}

.pro_acc ul li {
    list-style-type: none;
}

.btnn1 {
    border-color: #111 !important;
    background-color: #111 !important;
    color: #fff !important;
    padding: 12px 5px;
}

.btnn2 {
    border-color: #db10108c !important;
    background-color: #db10108c !important;
    color: #fff !important;
    padding: 12px 5px;
    opacity: 1;
    cursor: not-allowed !important;
}

.upload_correct{
    width: 144px;
    height: 144px;
}

.upload_logo .logo_label{
    width: auto;
}

.line-text {
    display: flex;
}

.line-text span{
    padding-left: 10px;
}

.text-fontsize .pay_text{
    font-size: 32px;
    font-weight: bold;
}

.text-fontsize .mon_text {
    font-size: 12px;
    font-weight: bold;
    vertical-align: super;
}

.black-bar {
    border-top: 1px solid #111;
    padding-top: 15px;
}

.red-bar {
    border-top: 1px solid #e54b4b;
    padding-top: 15px;
}
.new_button {
   
    width: fit-content;
}

@media(max-width:767px) {
    .table-size{
        overflow-x: auto;
    }
}

@media(max-width:480px){
    .free_acc{
        width: 100%;
    }
    .pro_acc {
        width: 100%;
    }
    .txt-pdng h2 {
        display:none;
    }
}

.app-content .wizard > .steps > ul > li .line-bar .step {
    background-color: #e54b4b !important;
    color: #fff !important;
}

.dv_ply_inner {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-left: 15px;
    cursor: pointer;
}

    .dv_ply_inner h4 {
        margin-bottom: 0;
        font-size: 14px;
        margin-left: 10px;
    }

    .dv_ply_inner img {
        width: 25px;
        cursor: pointer;
    }

    .dv_ply_inner h4:hover {
        color: #e54b4b;
    }

    .dv_ply_inner a {
        margin-right: 25px;
        margin-top: -25px;
    }
.change_lnk {
    font-size: 14px;
}
.campiagn_new a {
    display: flex;
    justify-content: center;
}
.change_lnk:hover {
    color: #e54b4b !important;
}

.campiagn_new h4{
    margin-top: 50px;
}
.dv_ply a {
    margin-top: -45px;
}
.campiagn_new h4:hover, .dv_ply h4:hover {
    color: #e54b4b;
}

.sm_line {
    width: fit-content;
    margin-left: auto;
}

.mytooltip {
    
    left: -35px;
    display: inline-block;
    
}

    .mytooltip .mytooltiptext {
        visibility: hidden;
        width: 70px;
        background-color: #022f40;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        padding: 2px 2px;
        position: absolute;
        z-index: 1;
        font-size: 10px;
        font-weight: 400;
        bottom: 125%;
        left: 50%;
        margin-left: -35px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .mytooltip .mytooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #022f40 transparent transparent transparent;
    }

    .mytooltip:hover .mytooltiptext {
        visibility: visible;
        opacity: 1;
    }


.hover-switch > img {
    position: absolute;
    
}
    /* 
 * Show the last image by default
*/
    .hover-switch > img:last-of-type {
        opacity: 0;
        
    }
/* 
 * Hide the last image on hover
*/
.hover-switch:hover > img:last-of-type {
    opacity: 1;
}
.hover-switch:hover > img:first-of-type {
    opacity: 0;
}

.modal-body iframe {
    width: 100%;
    /*height: 550px;*/
}
.wdth_45{
    width:45px;
}


.main-title {
    color: #2d2d2d;
    text-align: center;
    text-transform: capitalize;
    padding: 0.7em 0;
}


.content_a {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #fff;
}

    .content_a .content-overlay-a {
        background: rgba(0,0,0,0.7);
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        -webkit-transition: all 0.4s ease-in-out 0s;
        -moz-transition: all 0.4s ease-in-out 0s;
        transition: all 0.4s ease-in-out 0s;
        z-index: 9;
    }

    .content_a:hover .content-overlay-a {
        opacity: 1;
    }

.content-image-a {
    width: 100%;
}

.content-details-a {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    z-index: 9;
}

.content_a:hover .content-details-a {
    top: 50%;
    left: 50%;
    opacity: 1;
}


.fadeIn-bottom {
    top: 80%;
}

.content-details-a i {
    color: #e54b4b;
    font-size: 40px;
}

.content_a .inner-overly, .content_a .inner-overly1 {
    position: absolute;
    bottom: 20px;
    width: 100%;
}

.padlock {
    display: block;
    color: #fff;
    font-size: 20px;
}


.icon-img {
    width: 40% !important;
}

.match-height ul li a {
    margin-bottom: 10px;
}

.edit_menu .nav-item .nav-link:hover {
    background-color: #e54b4b !important;
    color: #fff !important;
}

.select_btn .waves-effect {
    padding: 0;
}

.select_btn .waves-button-input {
    padding: 12px;
    width: 100%;
}

.select_btn a {
    padding: 12px !important;
}

.c_ended_box .box-side1 {
    background: unset;
}
.c_ended_box .box-side1:after{
    content:unset !important;
}
.c_ended_box .content_a .inner-overly, .content_a .inner-overly1{
    position: absolute;
    top: 33%;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
}
.c_ended_box .box-side1 {
    background: unset;
    text-align: center !important;
    width: 100%;
    float: left;
    padding: 0;
    position: unset;
}
.c_ended_box .wh_brk {
    width: 100%;
    font-size: 55px;
    padding: 20px 0px;
}
.c_ended_box .box-side2 {
   background: transparent;
    width: 100%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    position: unset;
    height: auto;
}
.c_ended_box .box-side2:before{
    content:unset;
}
.c_ended_box .box-side2 p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
     background: #e54b4b;
    color: #000;
    max-width: 220px;
    margin: 0px auto;
}










.c_live_box .box-side1 {
    background: unset;
}
.c_live_box .box-side1:after{
    content:unset !important;
}
.c_live_box .content_a .inner-overly, .content_a .inner-overly1{
    position: absolute;
    top: 33%;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
}
.c_live_box .box-side1 {
    background: unset;
    text-align: center;
    width: 100%;
    float: left;
    padding: 0;
    position: unset;
    padding:0px 20px;
    font-style: italic;
    font-family: 'Bebas Neue', cursive;
}
.c_live_box .wh_brk {
    width: 100%;
    font-size: 55px;
    padding: 20px 15px;
}
.c_live_box .box-side2 {
   background: transparent;
    width: 100%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    position: unset;
    height: auto;
}
.c_live_box .box-side2:before{
    content:unset;
}
.c_live_box .box-side2 p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
     background: #e54b4b;
    color: #000;
    max-width: 200px;
    margin: 0px auto;
}
/*.c_live_box .box-side2 p:after {
    content: '';
    position: absolute;
    top: 42%;
    right: 14%;
    border-bottom: 21px solid rgb(51 51 51 / 0%);
    border-left: 15px solid #e54b4b;
    width: 0;
}*/
/*.c_live_box .entries{
    right:20px;
    left:unset;
}*/

.c_future_box .entries {
    left: 10%;
}

@media(min-width:576px) and (max-width:1199px){
    #category_loadmore1 .waves-input-wrapper {
        display: table-cell;
    }
}

@media(max-width:767px){
    .table-wid{
        width: 100%;
    }
}

@media(min-width:767px) {
    .table-wid {
        width: 50%;
    }
}


@media only screen and (max-width: 600px) {
    .c_live_box{
        margin-top:0px;
    }
    .c_future_box{
        margin-top:0px;
    }
    .c_ended_box {
        margin-top: 0px;
    }
    .c_future_box .box-side1 {
        top: -24px;
    }
    .c_ended_box .box-side1 {
        max-width: unset;
    }
    .c_ended_box .wh_brk {
        font-size: 35px;
    }
    .c_live_box .wh_brk {
        font-size: 35px;
    }
    .c_live_box .box-side1 {
        max-width: unset;
    }
}





.create_tootltip {
    position: relative;
    display: inline-block;
}

    .create_tootltip .mytooltiptext {
        visibility: hidden;
        width: 100%;
        background-color: #022f40;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        font-size: 11px;
        position: absolute;
        z-index: 1;
        top: 82%;
    }

    .create_tootltip .mytooltiptext::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }

    .create_tootltip:hover .mytooltiptext {
        visibility: visible;
    }

@media only screen and (max-width: 767px) {
    .box1.cust-add-sp {
        width: 100%;
        float: left;
        margin-top: 0px !important;
    }

    .cust-add-sp1 .new_button {
        width: auto;
    }

    .box1.cust-add-sp input {
        width: 100%;
        float: left;
        margin-bottom: 15px;
    }

    select#ContentPlaceHolder1_dlArticles_ddlstatus_0 {
        width: unset;
    }

    table#tblOpH tr td:nth-last-child(1) {
        display: flex;
    }

    .c_ended_box {
        margin-top: 0px;
    }
}


@media only screen and (min-width : 768px) and (max-width : 1024px) {
    table#tblOpH tr td:nth-last-child(1) {
        display: flex;
    }

    .cust-add-sp1 .new_button {
        margin-top: -9.5%;
    }
}



.btn-pd{
    padding-left: 12px;
    padding-right: 12px;
}


.blur_bg {
    background: rgb(226 226 226 / 50%) !important;
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    -moz-filter: blur(20px);
    backdrop-filter: blur(5px);
}

.notification_bar {
    height: 100% !important;
    padding-left: 35px !important;
    border: 1px solid #e54b4b !important;
}

.notification_icon_pos {
    left: 10px;
    padding-left: 10px;
    color: #e54b4b;
}

.tooltip-pd {
    padding: 9px 4px 0px 2px;
}
.future_button a.nav-link.tooltip-pd {
    height: 24px;
}

.barcode-wid {
    width: 100px;
    height: 100px;
    display: inline;
}

@media(min-width:600px){
    .btn-pos {
        display: inline-flex;
        align-items: center;
        width: 85%;
    }
}

@media(max-width:599px){
    .btn-pos {
        align-items: center;
        width: 85%;
    }
    .box-side2 {
        float: right;
        margin-top: 8px;
    }
}

@media(min-width:768px){
    .future_button a{
        font-size: 12px !important;
    }

    .live_button a{
        font-size: 12px !important;
    }

    .end_button a {
        font-size: 12px !important;
    }

    #UploadLogo {
        text-align: center;
    }

    #UploadLogo label{
        margin-left: 5px;
    }
}

@media(min-width:768px){
    .deletebutton {
        margin-top: 48%;
        justify-content: end;
        display: flex;
    }
}

@media(max-width:767px) {
    .deletebutton {
        padding-top: 30px;
        padding-bottom: 10px;
        justify-content: end;
        display: flex;
    }

    .box-pd{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .cust-add-sp1 {
        margin-top: 70px;
    }
}

.box-height{
    height: 100%;
}



.mod-header {
    color: #ea5455 !important;
    background: #fff !important;
}

.mod-header .modal-title{
    color: #ea5455 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

.winner-text {
    color: #e54b4b;
    font-size: 14px;
    font-weight: bold;
}

.progressbarcolor {
    border: 1px solid red;
    border-radius: 1.28rem !important;
}

@media(min-width:481px){
    .box_css {
        float: right;
        margin-bottom: 2.2rem;
        border: none;
        border-radius: .5rem;
        min-height: 300px;
        box-shadow: 0 5px 25px 0 rgb(0 0 0 / 10%);
    }
}


@media(max-width: 1199px){
    .img-pd .col-3 {
        padding: 3px;
    }
}


.label-text {
    font-size: 20px;
    font-weight: bold;
    color: #e54b4b;
}

@media(min-width:768px) and (max-width:896px){
    .select-text-pos {
        margin-top: -40px;
    }
    .editselect-text-pos {
        margin-top: -21px;
    }
}

@media(min-width:768px) and (max-width:1399px) {
    .select-text-pos1 {
        left: 10%;
    }
}

@media(min-width: 1400px){
    .editselect-text-pos {
        left: 20%;
    }
    .editselect-text-pos1 {
        left: 28%;
    }
}

@media(min-width:1200px) and (max-width:1399px) {
    .editselect-text-pos1 {
        left: 20%;
    }
}

@media(min-width:769px) and (max-width:775px) {
    .ipadtext {
        font-size: 13px !important;
    }
}



/*For Ended campaign animated text CSS start*/

.animate-charcter {
    text-transform: uppercase;
    background-image: linear-gradient( -225deg, #023040 0%, #023040 29%, #e54b4b 67%, #e54b4b 100% );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}

@media(min-width:768px){
    .animate-charcter {
        font-size: 98px;
    }
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

/*For Ended campaign animated text CSS end*/




#chktxtquestionemailx {
    accent-color: #e54b4b;
    color: #e54b4b;
    width: 18px;
}

.upbtn-text {
    text-transform: uppercase;
}