*, html{padding:0;margin:0;}
a, a:visited, a:focus, focus{outline:0;transition: all 0.3s ease;box-shadow:none;}
a:hover{color:unset;text-decoration:none;transition: all 0.3s ease;}

/*
:root {
--grey12:#121212;
--grey22:#222222;
--grey1e:#1e1e1e;
--grey33:#333333;
--grey66:#666666;
--grey99:#999999;
--greycc:#cccccc;
--white: #ffffff;
--purple:#49239a;
--lightpurple: #5F23DE;
--d-purple:#2e1562;
--dd-purple:#1c0a40;
--yellow:#ffe467;
--purple2:#5f46de;
--d-purple2:#4b35b9;
--red:#f80147;
--green: #3aad12;
}
*/

:root {
--grey12:#121212;
--grey22:#222222;
--grey1e:#1e1e1e;
--grey33:#333333;
--grey66:#666666;
--grey99:#999999;
--greycc:#cccccc;
--white: #ffffff;
--green:#26A94A;
--lightgreen: #80C341;
--d-green:#063D25;
--dd-green:#022315;
--yellow:#ffe467;
--green2:#26A94A;
--d-green2:#063D25;
--red-s:#f80147;
--green-s: #3aad12;
--t-bg:#1a1a1a;    
}

[data-theme=light]{
--grey12:#f8f9fa;
--grey22:#d5d5d5;
--grey1e:#edffe2;
--grey33:#dddddd;
--greycc:#333333;    
--white: #131B24;
--t-bg:#ffffff;      
}

body{background:var(--grey12);font-family:'Poppins', sans-serif;font-weight:400;font-size:13px;line-height:inherit;overflow-x:hidden;}

/*theme-mode-switch*/
.theme-switch-wrapper {display:flex;align-items: center;justify-content:flex-end;}
.theme-switch-wrapper em {margin-left: 10px;font-size:13px;}
.theme-switch {display: inline-block;height:20px;position: relative;width:40px;}
.theme-switch input {display: none;}
.slider {background-color:#ccc;bottom:0;cursor:pointer;left: 0;position: absolute;right: 0;top: 0;transition: 0.4s;}
.slider:before {background-color: #fff;bottom:3px;content: "";height:15px;left: 4px;position: absolute;transition:0.4s;width:15px;}
input:checked + .slider {background-color: #66bb6a;}
input:checked + .slider:before {transform: translateX(17px);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}


/*general*/
.mobile-wrapper{display:none;}
#section{width:75%;transform:translate(25% , 80px);height:100%;padding:2rem;padding-bottom:5rem;}
#section-configure{width:80%;transform:translate(25% , 80px);height:100%;padding:2rem;min-height:800px;}
#section-configure p{color:var(--white);}
#section h3, #section-configure h3, .landing{font-size:25px;font-weight:600;color:var(--white);margin-bottom:20px;}
.btn{background-color:var(--green);border:1px solid var(--green);color:white;padding:10px 25px;font-size:13px;-webkit-border-radius:5px;-moz-border-radius: 5px;border-radius:5px;margin:10px 0;font-weight:600;}
.btn:hover{background-color:var(--d-green);text-decoration:none;color:white;border:1px solid var(--d-green);}
.btn:focus, .btn-d-grey:focus{box-shadow:none;}
.btn-d-grey{background-color:#fff;font-size:13px;font-weight:600;color:var(--green);border:1px solid var(--green);}
.btn-d-grey:hover{background-color:var(--d-green);border:1px solid var(--d-green);}
.btn-create{background:none;color:#fff;border:1px solid rgba(255,255,255,.5);margin:0;}
.btn-create:hover{background:#fff;color:var(--d-green);text-decoration:none;}
.btn-create a{color:#fff;font-size:13px;font-weight:600;}
.btn-create:hover, .btn-create:hover i{color:var(--green);text-decoration:none;}
.btn-create:hover{border:1px solid #fff;}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered{color:var(--white);}
.btn-right {position: absolute;right: 35px;}
.text-green{color:var(--green-s);}
.text-red{color:var(--red-s);}

.active {color: var(--green2);}
button:focus, input:focus, optgroup:focus, select:focus, textarea:focus, .form-control:focus{box-shadow:none;}
input:-internal-autofill-selected {box-shadow:none;background-color:transparent!important;}

.col-1 {float: left;width: 10%;margin-bottom:20px;margin-top:20px;text-align: left;}
.col-2 {float: right;width: 10%;margin-bottom:20px;margin-top:20px;}
.col-3 {float: left;width: 25%;margin-bottom:20px;margin-top:20px;}
.col-4 {float: right;width: 10%;margin-bottom:20px;margin-top:20px;text-align: right;}
.col-6 {float: left;width: 50%;margin-bottom:20px;margin-top:20px;}
.col-8 {float: right;width: 5%;margin-top:10px;text-align: right;}
.col-9 {float: left;width: 75%;margin-bottom:20px;}
.col-11{padding-left: 0;text-align: left;}
.col-15 {float: left;width: 15%;margin-bottom:20px;margin-top:20px;}
.col-20 {float: left;width: 20%;margin-bottom:20px;}
.right{float: right;width: 75%;margin-bottom:20px;margin-top: 20px;text-align: right;color: var(--grey66);padding-right: 2rem;}
.billing_left, .billing_right{margin-bottom: 0;}
.amount{float: right;width: 10%;margin-bottom:20px;margin-top:20px;text-align: right;padding: 0 7rem;}
.SecondaryContact{float: left;width: 25%;margin-bottom:20px;margin-top: 0;}
.checkbox{float: right;width: 10%;margin-bottom:0;margin-top:0;padding: 0;}
.modal_body_left{float: right;width: 10%;margin-bottom:20px;margin-top:10px;text-align: left;padding: 0;}

hr{border-bottom:1px solid var(--grey33);border-top:0;}
.container_profile_edit-general hr, .container_profile_edit-plan hr, .container_profile_edit-billing hr{margin: 0;}
.container_profile_edit-general .col-1, .container_profile_edit-plan .col-1, .container_profile_edit-billing{margin: 0;}

/* Login Page_Header */
header{padding:1.3rem 1.5rem; position: absolute; z-index: 5;width:100%;}
ul.signin{list-style: none; float: right;}
ul.signin li{display: inline-flex;}
ul.signin li a{font-weight:600;color:var(--grey66);}
ul.signin li a:hover{color:var(--white);text-decoration:none;}
ul.signin li a p{padding:0 10px;font-size:14px;}
.login{text-align: center;margin-top:20px;}
.logo{max-width: 100%;width:220px;position:absolute;margin:5px 0;top:10px;}
.logo img{height:50px;}
#index_footer{position: fixed; width: 100%;bottom:20px; max-width: 100%; max-height: 100%;}
#index_footer ul{padding:0 50px;}
.footer1, .footer2{color:var(--grey99);font-size:12px;}
.footer1 p{display: flex; padding: 0 50px;color:var(--grey99); margin: 0;}
.footer1 p a{color:var(--grey99);padding:0 10px;}
.footer2 li{float: right; list-style: none;}
.footer2 p{padding-left:30px;color:var(--grey99);}
.footer1 p a:hover, .footer2 li p:hover{color:var(--white);text-decoration:none;}

/**********************************************************************************************************************************/

/*header*/
header#homedata_header{background-color:var(--green);height: 80px;top: 0;position:fixed;}
.nav-wrapper{width:calc(100% - 220px);transform:translateX(220px);height:40px;}

/* Header Bar 虎虎生威 Dropdown Button */
ul.btndropdown{text-align:left;}
ul.btndropdown{border:0;color:var(--white);padding:0 20px 0 0;font-size:14px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:auto;list-style: none;margin:auto 0;}
ul.btndropdown .nav-link{padding:0 20px;float:left;color:white;border-left:1px solid rgba(255,255,255,.2);}
.dropdown-menu.show{padding:0;width:auto;transform:translate3d(20px, 36px, 0px)!important;}
ul.btndropdown .nav-link span{display:block;font-size:10px;opacity:.5;margin-bottom:5px;}
ul.btndropdown a:hover{color:white;}
.dropdown-item{color:white;font-size:12px;padding:15px 25px;}
.dropdown-item:hover{background:var(--dd-green);color:white}
.dropdown-item.active{background-color: var(--green);}


/* Search Bar */
.topnav {overflow:hidden;width:45%;transform:translate(10%, -12%);}
.topnav input[type=text] {padding: 5px 20px;margin-top: 2px;border: none;border-radius:6px;width:100%;height:50px;outline: none;color:var(--grey666);}
.topnav input[type=text]::placeholder{color:var(--greycc);}
.topnav .search-container button {padding:10px 15px;background:white;font-size:20px;border: none;cursor: pointer;border-radius: 0px 7px 7px 0px;height:50px;position:absolute;top:2px;right:0;color: var(--greycc);}
.topnav .search-container button:hover {color:var(--grey33);}

/*r-bar*/
.r-side-wrapper{display:flex;width:auto;position:absolute;right:0;}
.bellbutton{width:40px;}
.bellbutton a.active{color:white;z-index:5;display:block;text-align: right;font-size:25px;padding:8px;}
.badgebell{position: relative;top: -45px;left: 6px;background-color:var(--yellow);color:#333;border-radius: 15px;font-size: 13px;padding: 2px 5px;}
.rounded-circle{float:right;}
.iconimage{margin-left:30px;}
.iconimage img{max-width:100%;width:40px;}
.badge-light{float: right;border-radius: 10px;background-color:var(--yellow);position:relative;right: 10px;font-size:13px;padding:2px 5px;}
ul.myaccount{text-align: right;margin-bottom: 10px;color:var(--white);}
ul.myaccount{border:0;padding:0 10px;font-size:14px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;list-style: none;margin:auto 0;}
ul.myaccount .dropdown-item{color:white;}
ul.myaccount a:hover{color:white;}
ul.myaccount .nav-link{color:white;padding:0;text-align:left;}
ul.myaccount .nav-link span{font-size:12px;opacity:.5;display:block;}
.dropdown-menu{background-color:var(--d-green);color: var(--white);top:80%!important;}
.badgemyacc{float: right;border-radius: 10px;background-color:var(--yellow);position: relative;right: -2px;color: #330066;width: 40px;}
ul.myaccount .dropdown-menu.show{transform:translate3d(-100px, 39px, 0px)!important;}

/* Section Sidebar */
#side-bar{width:50px;height:100%;}
#side-bar .sidebar {width:auto;background-color:var(--grey12);top:80px;position:fixed;height: 100vh;z-index: 5;left: 0;border-right:1px solid var(--grey33);padding:10px 5px;}
#side-bar .sidebar a{display: block;text-align: center;padding:10px;transition: all 0.3s ease;font-size:18px;color:var(--grey66);margin:10px 0;width:40px}
#side-bar .sidebar a:hover, #side-bar .sidebar a.active{background-color:var(--green2);border-radius:50px;color:var(--white);}
[data-theme=light] #side-bar .sidebar a:hover, #side-bar .sidebar a.active{color:white;}
#side-bar .setting{position:fixed;bottom:0;}


/* Sidenav & Designbar & Reports_nav*/
.sidenav, .designbar, .reports_nav, .profile_nav, .filterbar{height:100vh;width:15%;position:fixed;top:0;left:0;overflow-x: hidden;border-right: 1px solid var(--grey33);padding-left:10px;transform:translate(50px, 80px);padding-top:15px;}
.designbar{width:19%;transform:translate(100%, 80px);}
.sidenav h1, .designbar h1, .reports_nav h1, .profile_nav h1, .filterbar h1{font-size:14px;text-align:left;padding: 10px 15px;width:95%;color:var(--white);border-bottom: 1px solid var(--grey33);}
.sidenav a, .designbar a, .dropdown-tab, .reports_nav a, .profile_nav a, .filterbar a{padding: 6px 8px 6px 16px;text-decoration: none;font-size:12px;color:var(--grey66);display: block;border: none;background: none;width: 100%;text-align: left;cursor: pointer;outline: none;}
.designbar a button.dropdown-tab{padding:0;}
.sidenav a:hover, .sidenav a.active, .designbar a:hover, .designbar a.active, .dropdown-tab:hover, .dropdown-tab a.active, .reports_nav a:hover, .reports_nav a.active, .profile_nav a:hover, .profile_nav a.active, .filterbar a:hover, .filterbar a.active{color: var(--green2);}
.main {margin-left: 200px;font-size: 20px;padding: 0px 10px;}
.dropdown-container{display:block;padding-left: 8px;border-bottom: 1px solid var(--grey33);width:95%;padding-bottom:15px;margin-bottom:15px;}
.dropdown-container1 {display:block;padding-left: 8px;width:95%;border: none;}
.dropdown-container.hidden, .dropdown-container1.hidden{display:none;}
.fa-caret-down {float: right;padding-right: 8px;}
.reports{margin:2rem auto;}
.reports img{max-width:100%;}


/* Footer */
footer#footer{width:calc(100% - 50px);padding-bottom:0;position: relative;bottom: -4rem;}

/* Footer Bar */
footer#footer_bar{position:fixed; width:100%;height: auto;z-index: 1;}
#footer_bar .container_footerbar{height:auto;width: 100%;background-color:var(--green2);bottom:0;position: inherit;padding:1rem 3rem;}
#footer_bar .musicplayer.container_footerbar{width: 80%!important;right:0;padding:1rem 1rem;}
.footerbar_button{float: right;}
.cancel{background-color: transparent;padding: 10px 30px;border-radius:5px;border: none;color:#fff;font-weight:600;outline:0;}
.save{background-color:#fff;padding: 10px 40px;border-radius:5px;border: none;color:var(--green2);font-weight: 600;outline:0;}
.cancel:hover{color:rgba(255,255,255,.5);}
.save:hover{background-color:#e1e1e1;}

#waveform{width:100vh;}
.justify-sb{justify-content: space-between;}
.justify-se{justify-content: space-evenly;}

/**********************************************************************************************************************************/



/*   Index   */
/* Section */
#index_login .bg{background:url(../image/login.webp) center center no-repeat;background-size:cover;height:100vh;background-color: var(--d-green);}
#index_login .title{padding-bottom:30px;}
#index_login .title h2{font-weight:600;color:var(--white);font-size:20px;}
#index_login .title h2 sup{font-size:12px;position:absolute;top:5px;}
#index_login .title p{color:var(--grey66);font-size:14px;}
#index_login h1{color:white;font-size:60px;font-weight:800;font-style:italic;line-height:75px;width:90%;padding:0 50px;display:flex;align-items:center;height:100%;letter-spacing:2px;}
#index_login .Forgot-Password{text-align: right;}
#index_login .Forgot-Password small{color:var(--grey99);font-size:90%;}
#index_login .Forgot-Password small:hover{color:var(--white);text-decoration:none;}
#index_login .form{height:100%;padding:0 4rem;margin-top:15%;}
#index_login .form label{font-weight:600;font-size:13px;color:var(--grey99);padding:0;margin:0 0 10px 0;}
#index_login .form input{padding:0 20px;background:var(--grey22);color:var(--white);border:0;outline:0;height:50px;font-size:13px;}
[data-theme=light] #index_login .form input{background:#efefef;}
#index_login .form input::placeholder{color:var(--grey66);}
#index_login .form input.form-check-input {height: auto;}
#index_login .form label.form-check-label {margin: 0;line-height: 1.7;}
[data-theme=light] #index_login .form input::placeholder{color:var(--greycc);}
#index_footer .footer1 p{color:white;}


.content{min-height:500px;}
.design-wrapper{width:60%;transform:translate(64%, 80px);height:100vh;padding:1rem 2rem;}

/* Banner*/
#banner{flex: 3;background-color:var(--grey1e);padding: 45px 150px;position: inherit;width: 100vw;transform:translateY(80px);}
.top-banner h1{color:var(--white);font-weight:600;font-size:25px;}
.top-banner p{color:var(--grey99);font-size:12px;}
.homedata_pic{z-index: 1;}

/* Dashboard*/
#ac_widgets,#bc_widgets,#charts{padding: 25px 150px;position: inherit;width: 100vw;transform:translateY(80px);}
#ac_widgets.report,#bc_widgets.report,#charts.report{width:75%!important;transform:translate(25% , 80px);height:100%;padding:2rem;}
#ac_widgets .bg-dark,#bc_widgets .bg-dark,#charts .bg-dark{background-color:#1a1a1a!important;}
#ac_widgets{padding-bottom:5rem!important;}
.total-list, .chart-list{padding:1.25rem;}
.total-list{border-bottom:5px solid var(--green2)!important;}
.total-list .card-header{padding:0 0 0.25rem 0;color:#999;background:none;}
.total-list .card-body{padding:0;font-weight:700;font-size:35px;color:var(--white);}
.total-list img{width: 70px;margin-top: -20px;}
.age-list .total-list .card-body{font-size:13px!important;}
.mc-picker td {border:none;}


/**********************************************************************************************************************************/

/* Your Campaign */
.btn i {color:white;padding: 0 10px 0 0;}
.r-btn{margin-right:0;}
#section .d-flex h3{margin-bottom: 0;}

/* Create- New Campaign & Your Campaign */

/* Overlay*/
.create-box {position: relative;list-style: none;float: left;border: 5px solid transparent;width:33%;margin: 0 0 10px 0;cursor:pointer;}
.create-box:hover .overlay {height:auto;bottom:39px;padding:5% 10px;}
.create-box.active img{border: 5px solid var(--green2);}
.image:hover{border: 5px solid var(--green2);z-index: 5;}
.image:active{border: 5px solid var(--green2);}
.image {display: block;width: 100%;height:auto;border: 5px solid transparent;}
.overlay {position: absolute;bottom: 0;left:5px;right: 0;background-color: var(--grey12);opacity: 80%;overflow: hidden;width: calc(100% - 10px);;height:0;transition: .5s ease;text-align: center;color: var(--white);display:inline-flex;}
.overlay a{color: var(--white);padding:0;font-weight:600;width:100%}
.overlay a i{padding:0 10px;font-size:16px;}
.overlay a:hover{color:var(--green2);}
.overlay .text {font-size:14px;position: relative;transform: translate(-50%, -50%);display: contents;padding: 0 10px;}
p.desc{text-align: center;color:var(--grey66);margin: 10px auto;}
.new_campaign ul, .your_campaigns ul, .marketplace ul {width: 100%;}


#section .card img[data-handle=mainImage] {max-width: 50%;}

/**********************************************************************************************************************************/


/* Campaign */
input[type=text_], select, textarea {width: 100%;padding: 12px;resize: vertical;border: none;border-radius:0;background-color: transparent;color:var(--white);outline: none;border-bottom: 1px solid var(--grey22);}
input[type=text_]::placeholder, select::placeholder, textarea::placeholder{color:var(--grey66);}
input[type=text_]:focus, input[type=text]:focus, select:focus, textarea:focus{border-color:var(--white)!important;}
input[type=submit] {background-color: #04AA6D;color:var(--white);padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;}
input[type=submit]:hover {background-color: #45a049;}
.right input[type=text_] {text-align: right;}
.billing_right input[type=text_] {text-align: right;border-bottom: 0;}

.container_campaign, .container_gametour, .container_profile-general, .container_profile-plan,.container_profile_edit-general, .container_profile_edit-plan, .container_profile_edit-billing{border-radius: 10px;color:var(--white);position:initial;border: 1px solid var(--grey33);}

.container_campaign .card{border:0;}

[data-theme=light] .container_campaign, [data-theme=light] .container_gametour, [data-theme=light] .container_profile-general, [data-theme=light] .container_profile-plan, [data-theme=light] .container_profile_edit-general, [data-theme=light] .container_profile_edit-plan, [data-theme=light] .container_profile_edit-billing, [data-theme=light] .user-dynamic-form .card, [data-theme=light] .addon-container .grey-border, .history-container .grey-border, [data-theme=light] .bg-l-grey, [data-theme=light] .card{background:white;}
.container_campaign p{margin:15px 0;}

/* Calendar */
input, label {margin: .4rem 0;}
#start , #End{background-color: transparent;color:var(--grey99);border: none;position: relative;outline: none;border-bottom: 1px solid var(--grey33);width:45%;top:15px;font-size:12px;padding:5px 10px;margin:0 5px 0 0;}
#start::placeholder , #End::placeholder{color:var(--grey66);}
input[type=date]::-webkit-calendar-picker-indicator {filter: invert(1);}


/**********************************************************************************************************************************/


/* Design */
.design-wrapper h3{font-size:25px;font-weight:600;color:var(--white);margin-bottom:20px;}
.icon-btn{background-color: transparent;padding:0px 0 0 20px;border: none;font-weight:600;font-size:25px;color:var(--white);}
.r-iconbtn button:hover p, .r-iconbtn button:hover i, .r-iconbtn a.active p, .r-iconbtn a.active i{color:var(--green2);}
.icon-btn p{font-size:12px;color:var(--white);font-weight:500;}
.design-section{width:56%!important;transform:translate(73% , 80px)!important;}

/*attachment*/
.attachment-wrap{width:50%;margin:30px auto 50px auto;}
.attachment-wrap .box{background:rgba(0,0,0,.2);padding:15px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin-bottom:20px;}
.box{background-size: cover !important;background-position: center center !important;background-repeat: no-repeat !important;}
.border-dotted{border:2px dashed rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;min-height:200px;}
.attachment-wrap .box input[type=file] {display: none;}

/*default-img*/
#landing-bg{background-image: url(../image/shake-image.jpg);}

.inputfile-4 + label {color:var(--white);}
.inputfile-4:focus + label,
.inputfile-4.has-focus + label,
.inputfile-4 + label:hover {color:var(--white);}
.inputfile-4 + label figure {width:80px;height:80px;border-radius: 50%;background-color:rgba(0,0,0,.5);display:flex;padding:30px 32px;margin:0 auto 10px auto;align-items:center;font-size:20px;cursor:pointer;}
.inputfile-4 + label figure .fas{color:var(--white);font-size:20px;padding:8px;}
.inputfile-4:focus + label figure,
.inputfile-4.has-focus + label figure,
.inputfile-4 + label:hover figure {background-color: rgba(255,255,255,.1);}
.inputfile-4 + label svg {width: 100%;height: 100%;fill: #f1e5e6;}

.desktop-box{width: 100%;min-height:450px;background-color:var(--grey22);text-align: center;border-radius: 8px;transform: translate(0, 10px);}
#show-box img{max-width:100%;}
#show-box {padding:0;text-align: center;margin-top:0;}
.show-boxbtn{background-color: transparent;border: 0;outline: none;}

/* Design_Landing Page */
/* The browser window */
.container_browsorwindow {border: 3px solid #f1f1f1;border-top-left-radius: 4px;border-top-right-radius: 4px;}
.browser{padding:5px 20px;background:#f1f1f1;border-top-left-radius: 4px;border-top-right-radius: 4px;width: 100%;margin: 0;}
.browser .column {float: left;}
.browser .dotleft {width:10%;align-items:center;display:inline-flex;}
.browser .middle {width: 75%;margin-top:10px;}
.browser:after {content: "";display: table;clear: both;}
.browser .dot {margin-right:5px;height:12px;width: 12px;background-color: #bbb;border-radius: 50%;display: inline-block;}
.browser .middle input[type=text] {border-radius:3px;border: none;background-color: white;margin-top: -5px;height:30px;color:var(--grey99);padding:5px 10px;outline: none;width: 75%;font-size:12px;}
.browser .middle .favicon{margin:0 5px;}
.browser .bar {width: 17px;height: 3px;background-color: #aaa;margin: 3px 0;display: block;}
.designbar .dd-game{padding-bottom:8rem;}


/**********************************************************************************************************************************/



/* Rewards */
/* container_rewards & container_pages */
.container_rewards, .container_pages{border-radius:10px;color:var(--white);padding:3rem 0;position: relative;border: 1px solid var(--grey33);}
[data-theme=light] .container_rewards, [data-theme=light] .container_pages{background:white;}
.rewards h1, .container_pages h1{font-size:16px;color: var(--green2);padding:0 2rem;margin-bottom:10px;font-weight:600;}
.rewards h2, .container_pages h2{font-size:16px;padding:0 2rem;}
.rewards p, .container_pages p{font-size: 12px;color:var(--grey99);padding:0 2rem 2rem 2rem;line-height:20px;}
.container_rewards form p, .container_pages form p{padding:0;margin:30px auto;text-align:center;}
.container_rewards form i, .container_pages form i{display:inline-block;padding: 0 10px;color:var(--grey99);}
#rewards input[type="file"]{text-align: left;}
#rewards input[type=text_], select, textarea {width: 100%;padding: 12px;resize: vertical;border: none;border-radius:0;background-color: transparent;color:var(--white);outline: none;border-bottom: 1px solid var(--grey22);}
#rewards input[type=text_]:focus, select:focus, textarea:focus{border-color:var(--white);}
.container_rewards label, .container_pages label{color:var(--grey99);}
.reward-section{border-bottom:1px solid var(--grey33);padding-bottom:2rem;margin-bottom:2rem;}
.reward-section p{color:var(--grey66);font-size:13px;line-height:1.5;}
div.dataTables_wrapper div.dataTables_info{padding-bottom:0.85em!important;color:var(--grey66)!important;}
.form-control[type=search]{background:var(--grey33);color:var(--grey99);font-size:13px;border:0;padding:0.8rem 1.5rem;border-radius:.25rem;}


/*btn-primary*/
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-light.focus, .btn-light:focus, .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle{background-color:var(--d-green);border-color:var(--d-green);outline:0;color:#fff;}
[data-handle="remove"]{background-color:var(--d-green);border-color:var(--d-green);outline:0;color:#fff;}
[data-handle="remove"] i{padding:0;}


/*admin table style*/
.table-dark{background-color:var(--t-bg);}
.table td, .table th{padding:1rem;border:0;vertical-align:middle;}
.table td{color:var(--greyCC);}
.table thead th{border-bottom:1px solid var(--grey33);}
.table-dark td, .table-dark th, .table-dark thead th{border-color:var(--grey33);}
.table-dark td a.btn{margin:0;}
.page-item.disabled .page-link, .page-link{color:var(--greycc);border-color:var(--grey33);background-color:var(--t-bg);}
.page-item.active .page-link{background-color:var(--green);border-color:var(--green);}
.page-link:hover{color:#fff;background-color:var(--grey33);border-color:var(--grey33);}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {content: none!important;}
table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1), table.dataTable>tbody>tr{background-color:var(--t-bg);color:var(--white);}
table.dataTable{background-color:var(--green);color:#fff;}
.table-dark.table-hover tbody td.no-padding{border-top:1px solid var(--grey33);border-bottom:1px solid var(--grey33)}
.table-dark.table-hover tbody tr:hover{background:var(--t-bg);color:var(--white);}

/*form*/
span.select2-container--bootstrap{width:70%!important;}
.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap .select2-selection--single{background: none;border-radius: 0;border: 0;border-bottom: 1px solid var(--grey22);color: var(--white);font-size: 0.8rem;box-shadow:none;padding:0.8rem;}
.select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection{box-shadow:none;}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow{top:-25px;}
.form-control, .backstrap-file{background: none;border-radius: 0;border: 0;border-bottom: 1px solid var(--grey22);color: var(--white);font-size: 0.8rem;box-shadow:none;padding:0.8rem;height:auto;}
.backstrap-file-label{background:none;border:0;}
.user-dynamic-form .form-group .backstrap-file input{width:100%;}
.user-dynamic-form .form-group label.backstrap-file-label{width:100%;height:50px;margin:0.5rem 0;}
.backstrap-file-input:lang(en) ~ .backstrap-file-label::after{content:"Attach CSV";font-weight:600;display:flex;align-items:center;border-radius:0.25rem;color:#fff;height:40px;}
.backstrap-file-label::after{background-color:var(--green);padding:5px 25px;}
.user-dynamic-form .iti{color:var(--d-green2);width: 70%;}

/* quantity +- */
.validationContainer {position:relative;overflow:hidden;margin:7px 10px;}
#qty_input {-webkit-appearance:none;padding:15px 20px;outline: none;background-color: transparent;color:var(--white);border:0;border-bottom: 1px solid var(--grey22);margin-top:27px;}
#qty_input::placeholder{color:var(--grey66);}
.toast {position: absolute;top: 5px;left:11px;color:crimson;font-size: .65rem;transform: translate3d(0, -20px, 0);transition: transform .3s ease;transform: translate3d(0,0,0);}

/* Attach Button */
.custom-file-input2::-webkit-file-upload-button {visibility:hidden;display:none;}
.custom-file-input2::before {content: 'Attach';display: inline-block;background-color:var(--green2);border-radius:5px;padding:10px 27px;outline: none;white-space: nowrap;-webkit-user-select: none;cursor: pointer;font-weight: 600;font-size:14px;margin-left:8%;float: right;color:var(--white);}
.custom-file-input2:hover::before {background-color:var(--white);color:var(--green2);}
input[type=file]{width:100%;border-bottom: 1px solid var(--grey22);padding:8px 20px;cursor:pointer;color:var(--grey66);}

/* Progrees Bar */
.progress-area{height: 5px;width:90%;background-color:var(--grey33);margin-bottom: 4px;border-radius:5px;margin-top: -10px;margin-left: 6px;}
.uploaded-area{height: 5px;width:40%;background-color:var(--green2);border-radius:5px;margin-top:-9px;margin-left: 6px;}
.percent {margin-left:95%;position: relative;font-size:90%;color:var(--grey99);}



/**********************************************************************************************************************************/

/* Page */
.accordion{padding:2rem;}
.accordion .card{border-radius:5px;}
.accordion>.card>.card-header{margin:0;}
.accordion .card-header{padding:0;}
.accordion .card-header h2{padding:0;}
.accordion .card-header .btn{background:var(--green2);padding:1rem 2rem;border-radius:5px 5px 0 0;text-decoration:none;}
.accordion .card-header .btn:hover{background:var(--d-green2);}
.accordion .card-header .last-btn{border-radius:0 0 5px 5px;}
.accordion .card-body{border:1px solid var(--grey33);padding:0;border-bottom:0;border-top:0;}
.accordion ..card:last-child{border-radius:0 0 5px 5px;}
.color-picker input[type="color"] {display:block;width:50px; height:30px;background-color:transparent;border:0;cursor:pointer;}
.accordion .card-body .bg-lightgrey{background:var(--grey22);padding:2rem;display:flex;justify-content:flex-end;}
.accordion .card-body .bg-lightgrey .input-group input{margin: 0 0 0 10px;border-radius: 8px 0 0 8px;padding: 5px 15px;
font-size: 12px;height: 35px;background: var(--grey22);border: 1px solid rgba(255,255,255,.1);color:var(--white);outline:0;width:250px;border-right:0;}
.accordion .card-body .bg-lightgrey .input-group input::placeholder{color:var(--grey66);}
.accordion .preview-btn{background-color: var(--white);padding: 10px 40px;border-radius: 8px;border: none;color: var(--green2);font-weight: 600;}
.preview-btn:hover{background-color:#e1e1e1;}
.accordion .test-btn{background-color:var(--green2);color:var(--white);border-radius:0 8px 8px 0;padding:5px 25px;border:0;height: 35px;font-size: 14px;font-weight: 600;}
.accordion .test-btn:hover{color:var(--green2);background-color:var(--white);}
.card{background-color: transparent;border: 1px solid var(--grey33);border-radius: 0;}
.card-header{padding: 0.75rem 1.25rem;margin-bottom: 0;border: 0;background:none;color:var(--grey99);}

/*publish*/

.container_publish .icon-btn p{padding:0 1rem;}
.publish-wrapper{display:flex;justify-content:space-between;}
.publish-wrapper .input-group{width:50%;padding-right:2rem;}
.publish-wrapper .input-group input{margin: 0 0 0 10px;border-radius: 8px 0 0 8px;padding: 5px 15px;
font-size: 12px;height:50px;background: var(--grey22);border: 1px solid rgba(255,255,255,.1);color:var(--white);outline:0;width:250px;border-right:0;}
.publish-wrapper .input-group input::placeholder{color:var(--grey66);}
.publish-wrapper .input-group .copy-btn{background-color:var(--green2);color:var(--white);border-radius:0 8px 8px 0;padding:5px 25px;border:0;height:50px;font-size: 14px;font-weight:600;}
.publish-wrapper .input-group .copy-btn:hover{color:var(--green2);background-color:var(--white);}

/**********************************************************************************************************************************/

/* Profile */
.profile-pic-div{height: 50px;width: 50px;position: relative;float: right;}
#photo {height: 100%;width: 100%;border-radius: 50%;overflow: hidden;}
.profile-pic img {height: 100% !important;width: 100% !important;border-radius: 50% !important;overflow: hidden;}
#file{display: none;top: -15px;left: 36px;position: absolute;width: 10px;}
.inline-edit-button, #uploadBtn:hover, #uploadBtnicon:hover{color: var(--white);}
.inline-edit-button, #uploadBtn, #uploadBtnicon{color: var(--grey66);cursor:pointer;}
#expiry_date{color: var(--red-s);}
#status{color: var(--green-s);}
#Licensekeys{color:var(--white);cursor:pointer;text-decoration:underline;}
#Licensekeys:hover{text-decoration:none;}

.container_profile_edit-billing h1{font-size:16px;color: var(--white);padding-top:2rem;margin-bottom:10px;font-weight:600;}
.container_profile_edit-billing p{font-size: 12px;color:var(--grey99);padding:0 0 1rem 0;line-height:20px;}
.container_profile_edit-billing h1, .container_profile_edit-billing p{padding-left:2rem;}
table {border-collapse: collapse;}
.billing_table {table-layout: auto;width: 100%;  }
td {border-bottom: 1px solid var(--grey99);}
.container_profile_edit-general label, .container_profile_edit-plan label, .container_profile_edit-billing label{padding-left:1rem;}
.container_profile_edit-general label#uploadBtn, .container_profile_edit-general label#uploadBtnicon, .container_profile_edit-billing label#uploadBtnicon, .container_profile_edit-general label.inline-edit-button {padding-left:1.5rem;padding-top:1.3rem;}
.box{border-bottom:1px solid var(--grey33);}
.box:last-child{border:0;}
.tablehd{background-color:var(--grey22);border-bottom:1px solid var(--grey33);}
.container_profile_edit-billing label{color: var(--grey99);}
.container_profile_edit-billing label.a-link{color:var(--white);text-decoration:underline;cursor:pointer;}
.container_profile_edit-billing label.a-link:hover{text-decoration:none;}
.ViewMoreBillingHistory{text-align: center;padding-top: 30px;}
.ViewMoreBillingHistory a{padding:0 0 2rem 0;display:block;color:var(--grey66);}
.ViewMoreBillingHistory a:hover{text-decoration:underline;color:var(--white);}
.container_profile_edit-plan .p-r-2{padding-right:2rem;}

.bg-l-grey{background:var(--grey12);padding:3rem;margin:2rem 0;border-radius:8px;text-align:center;min-height:800px;z-index:1;padding-top:5rem;border:3px solid var(--grey22);}
.bg-l-grey.popular{padding-top:3rem;}
.bg-l-grey p{margin:0 auto;}
.bg-l-grey h5, .addon-container h5, .history-container h5{color:var(--white);font-size:1rem;font-weight:600;}
.bg-l-grey .price, .order-item .price{color:var(--yellow);display:flex;justify-content:center;margin:1rem 0 0 0;}
.bg-l-grey .price sup{font-size:1rem;font-style:italic;font-weight:700;top:0;}
.bg-l-grey .price h5{color:var(--yellow);}
.bg-l-grey ul.list{margin-top:2rem;list-style-type:none;}
.bg-l-grey ul.list li{width:100%;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.1);font-size: 14px;color:var(--grey99);}
.bg-l-grey ul.list li:last-child{border:0;}
.popular{border:3px solid var(--lightgreen);}
.popular .circle-label{background:var(--lightgreen);width:100%;height:50px;border-radius:0 0 300px 300px;margin:-48px auto 30px auto;}
.popular .circle-label h5{color:#fff;padding-top:15px;}
.addon-container, .history-container{color:var(--greycc);}
.addon-top{display:flex;justify-content:space-between;}
.addon-container .addon-top h5,.history-container .title h5{padding-top:20px;padding-right:40px;color:var(--white);}
.top-curve{border-top-left-radius:10px;border-top-right-radius:10px;}
.grey-border{border:1px solid var(--grey22);}
.grey-border:first-child{border-bottom:0;}
.addon-container ul, .history-container ul{list-style-type:none;padding:25px 50px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.addon-container ul li , .history-container ul li{margin-bottom:5px;}
.history-container ul{padding:5px 50px 25px 50px!important;}
.history-container ul li{border-bottom:1px solid var(--grey22);padding:25px 0px;}
.history-container img{max-width:250px;}
.history-container .music-img img{max-width:150px;}
.order-item .category{color:var(--lightgreen);}
.order-item .desc{color:var(--greycc);word-wrap:break-word;}

/* Modal */
.modal{padding-top:15rem;}
.modal-content{border: 0;border-radius: 10px;text-align: center;}
.modal-title{color:white;padding: 15px 20px;font-weight: 600;font-size: 30px; background-color: #230267;}
.modal-body, .modal-footer, .address_modal-body{background-color: var(--grey12);}
.modal-header, .modal-footer{border: 0;}
.modal-header{border-bottom: 1px solid var(--grey33);background-color: var(--green);display:inline-flex!important;}
.modal-body, .address_modal-body{padding: 2rem;}
.modal-body .col-8, .address_modal-body .col-8{margin:0;}
.modal-body label, .address_modal-body label{color: var(--white);}
.address_modal-body input[type=text]{font-size:14px;background-color: transparent;border:none;outline: none;border-bottom: 1px solid var(--grey33);border-radius: 0;color: var(--white);width: 100%;margin:0 0 10px 0;}
.address_modal-body textarea{width: 100%;padding: 12px;resize: vertical;border: none;border-radius: 0;background-color: transparent;color: var(--white);outline: none;border-bottom: 1px solid var(--grey22);font-size:14px;margin-bottom:10px;}
.address_modal-body textarea:focus{border-color:var(--white);background:none;box-shadow:none;color:var(--white);}
.close{text-shadow:none;color: var(--white);margin-top:-5px;}
.close:hover{color: var(--white);text-shadow: 0 0 transparent;}
.btnmodal{background-color: var(--green);border: none;color: var(--white);padding: 10px 25px;border-radius: 8px;font-size: 22px;}
.icon-container {margin-bottom: 20px;padding: 7px 0;font-size: 30px;color: var(--white);}
.modal-footer .cancel{padding:0 10px;}
.modal-footer .cancel:hover{background:none;}
.modal-dialog {max-width: 700px;width: 100%;}

.activation-modal .modal-title{font-weight:500;font-size:14px;text-align:left;padding:20px 30px;}
.activation-modal .btnmodal{font-size:15px;}
.activation-modal .form-control:focus{background-color:transparent;}

/* Secondary Email list */
/* Remove margins and padding from the list */
#myUL, #myUL2{margin: 0;padding: 0;}
#myUL li, #myUL2 li {cursor: pointer;position: relative;padding:15px 20px;list-style-type: none;background: transparent;font-size:14px;transition: 0.2s;color: var(--white);font-weight:400;}
#myUL li:hover, #myUL2 li:hover{background:var(--grey1e);}
#myUL li.checked, #myUL2 li.checked{background: #888;color: #fff;text-decoration: line-through;}
#myUL li.checked::before, #myUL2 li .checked::before{content: '';position: absolute;border-color: #fff;border-style: solid;border-width: 0 2px 2px 0;top: 10px;left: 16px;transform: rotate(45deg);height: 15px;width: 7px;}
.modal-body .header {color: white;text-align:right;padding-bottom: 10px;}
.modal-body .header:after {content: "";display: table;clear: both;}
.modal_input, #showPassword{margin: 0;border: none;border-radius: 0;width: 100%;padding: 10px;float: left;font-size: 14px;border-bottom: 1px solid var(--grey33);background-color: transparent;outline: none;color: var(--white);}
#myInput, #myInput2{margin: 0;border: none;border-radius: 0;width:80%;padding: 10px;float: left;font-size:14px;border-bottom: 1px solid var(--grey33);background-color: transparent;outline: none;color: var(--white);}
#password{background-color: transparent;border: none;color: var(--white);outline: none;border-bottom: 1px solid var(--grey33);width: 100%;padding: 10px 15px;margin: 0 0 10px 0;}


/* Address Custom Select */
.custom-select {position: relative;background-color: transparent;border: 0;border-bottom: 1px solid var(--grey33);border-radius:0;}
.custom-select select {display: none; /*hide original SELECT element:*/}
.select-selected {background-color: transparent;}
.select-selected:after {position: absolute;content: "";top: 14px;right: 10px;width: 0;height: 0;border: 6px solid transparent;}
.select-selected.select-arrow-active:after {border-color: transparent transparent #fff transparent;top: 7px;}
.select-items div,.select-selected {color: var(--grey66);padding:10px 0px;border:0;cursor: pointer;user-select: none;text-align: left;font-size:14px;margin-top:-10px;}
.select-items {position: absolute;background-color:var(--grey22);top: 100%;left: 0;right: 0;z-index: 1;text-align: left;padding: 0 20px;}
.select-hide {display: none;}
.select-items div:hover, .same-as-selected {border-bottom:0;color: var(--white);}

/* user dynamic form */
.user-dynamic-form .form-group {display: flex;}
.user-dynamic-form .form-group label{width: 30%;padding: 0.375rem 0.75rem;color:var(--white);height:auto;display:flex;align-items:center;}
.user-dynamic-form .form-group input, .user-dynamic-form .form-group textarea , .user-dynamic-form .form-group .input-group {width: 70%;background: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--grey22);color: var(--white); font-size: 0.8rem;height:auto;}
.user-dynamic-form .form-group .input-group input{width:auto;height:50px;}
.user-dynamic-form .form-group .input-group {border: 0;}
.user-dynamic-form .form-group .input-group.date .la {font-size: 1rem;}
.user-dynamic-form .form-group .input-group-text {font-size: 0.8rem;}
.user-dynamic-form .form-group .input-group-prepend span, .user-dynamic-form .form-group .input-group-append span{color: var(--white);border: 0;background: none;}
.user-dynamic-form .card {border-radius:10px;border:1px solid var(--grey33);}
.user-dynamic-form .card .card-body{padding:3rem;}
.attach-wrap70{width:70%;}
.c-dynamic-form select.form-control{width:70%!important;}
.c-dynamic-form .card{border:0;}
.c-dynamic-form .card .card-body{padding:1.25rem;}

/*vouchers*/
.vouchers .navbar, .music .navbar, .entries .navbar{background: var(--green);padding: 0.55rem 1rem!important;border-radius: 5px;margin: 12px 10px;display: inline-flex;}
.vouchers .navbar a, .music .navbar a, .entries .navbar a{color:#fff;}
.vouchers span.select2-container--bootstrap,.music span.select2-container--bootstrap{width: auto!important;}
.vouchers .select2-container--bootstrap .select2-results__option,.music .select2-container--bootstrap .select2-results__option,.music .select2-container--bootstrap .select2-results__option,.music .select2-container--bootstrap .select2-results__option{font-size:14px;}
.vouchers .select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap .select2-selection--single,.music .select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap .select2-selection--single{color:#fff;width:auto;box-shadow:none;height:50px;}
.vouchers .select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection,.music .select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection{box-shadow:none;}
.vouchers .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,.music .select2-container--bootstrap .select2-selection--single .select2-selection__rendered{color:#fff;padding:0.5rem;background-color:var(--d-green);}
.vouchers .select2-container--bootstrap .select2-dropdown,.music .select2-container--bootstrap .select2-dropdown{width:500px!important;}
.vouchers .dropdown-menu.show,.music .dropdown-menu.show{transform:translate3d(-28px, 15px, 0px)!important;}
.vouchers .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,.music .select2-container--bootstrap .select2-selection--single .select2-selection__arrow{top:0;}
.vouchers .select2-container--bootstrap .select2-results__option--highlighted[aria-selected],.music .select2-container--bootstrap .select2-results__option--highlighted[aria-selected]{color:#fff;background-color:var(--d-green);}
.vouchers .select2-container--bootstrap .select2-results__option[aria-selected=true],.music .select2-container--bootstrap .select2-results__option[aria-selected=true]{color:#fff;background-color:var(--d-green);}
.vouchers .select2-container--bootstrap .select2-dropdown,.music .select2-container--bootstrap .select2-dropdown{border:0;background-color:var(--green);}

/* Tags */
.tag{padding: 5px 10px;font-size: 12px;border:none;font-weight: 600;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-transform:uppercase;}
.green-tag{background-color: #21bf8d;color: white;}
.yellow-tag{background-color: #ffbc00;color: black;}
a.green-tag:hover {color:white;}
a.yellow-tag:hover {color:black;}

/* Marketplace */
#section-marketplace{width:65%;transform:translate(52% , 80px);height:100%;padding:2rem;min-height:800px;color:var(--white);}
.filterbar{width:15%;transform:translate(122%, 80px);}
.bb-grey{border-bottom: 1px solid var(--grey33);}
.marketplace .badge{border-radius:5px;position: absolute;top:1rem;right:1rem;padding: 8px 15px;font-size:0.6rem;font-weight: 600;color:#fff;}
.marketplace{margin-top:2rem;}
.marketplace .badge.badge-free{background-color: white;}
.marketplace .badge.badge-yellow{background-color: #ffbc00;}
.text-grey99{color: var(--grey99)!important;display:inline-block;}
.img-box{height:48vh;margin-right:20px;}
.img-box img{width: inherit;}
.product-slide .slick-dots{bottom:-35px;}
.product-slide .slick-dots li button:before{font-size:13px;color:white;}
#section-marketplace-detail{width:80%;transform:translate(25% , 80px);height:100%;padding:2rem;min-height:800px;color: white;}


/*@media screen and (max-width: 600px) {
.topnav .search-container {float: none;}
.topnav a, .topnav input[type=text], .topnav .search-container button {float: none;display: block;text-align: left;width: 100%;margin: 0;padding: 14px;}
.topnav input[type=text] {border: 1px solid #ccc;  }
}

@media screen and (max-width: 450px) {
.col-25, .col-75, input[type=submit] {width: 100%;margin-top: 0;}
.designbar {padding-top: 15px;}
.designbar a {font-size: 18px;}
}*/

/*mobile*/
@media screen and (max-width:820px) {

.mobile-wrapper{display:block;position:fixed;top:0;padding:50% 2rem;background-color:var(--green);height:100%;z-index:10;overflow:hidden;}
.mobile-wrapper img{height:30px;margin:2rem auto;display:block;}
.mobile-wrapper h1{color:var(--yellow);font-weight:700;font-size:2.5rem;text-align:center;}
.mobile-wrapper p{color:rgba(255,255,255,.5);text-align:center;line-height:1.5;font-size:16px;}
}