Public

Project privacy set to public. By default, its content is available to everyone (authenticated or not). Please note that more restrictive permissions might exist on some items.

vedas

Clone or download

gis sidebar

Download Browse
+5693 −54
Prashant K Gosai (PrashantGosai) 2021-01-12 17:59
Prashant K Gosai (PrashantGosai) 2021-01-12 17:59
f97dd510e1476a10fad5eaa085ea51e5e200fb3b
512af081d6d4381a90075ae212aa13d380c7fe90
git #vedas/f97dd510e1476a10fad5eaa085ea51e5e200fb3b

Modified Files

List
Inline diff
M src/main/java/com/GisSatellite/Server/Controller/SatelliteController.java
+6 −0
package com.GisSatellite.Server.Controller;
package com.GisSatellite.Server.Controller;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.nio.charset.StandardCharsets;
import java.util.HashMap;
import java.util.HashMap;
import java.util.List;
import java.util.List;
import java.util.Scanner;
import java.util.Scanner;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequest;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.locationtech.jts.geom.Geometry;
import org.locationtech.jts.geom.Geometry;
import org.locationtech.jts.io.WKTReader;
import org.locationtech.jts.io.WKTReader;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.repository.query.Param;
import org.springframework.data.repository.query.Param;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import com.GisSatellite.Server.Entities.Satellite;
import com.GisSatellite.Server.Entities.Satellite;
import com.GisSatellite.Server.Repository.SatelliteRepository;
import com.GisSatellite.Server.Repository.SatelliteRepository;
import com.GisSatellite.Server.Services.SatelliteServices;
import com.GisSatellite.Server.Services.SatelliteServices;
import com.sun.el.parser.ParseException;
import com.sun.el.parser.ParseException;
@Controller
@Controller
@PreAuthorize("hasRole('admin')")
@PreAuthorize("hasRole('admin')")
public class SatelliteController {
public class SatelliteController {
@Autowired
@Autowired
private SatelliteServices satelliteServices;
private SatelliteServices satelliteServices;
@Autowired
@Autowired
private SatelliteRepository satelliteRepo;
private SatelliteRepository satelliteRepo;
@Autowired
@Autowired
private CommonController comcon;
private CommonController comcon;
@RequestMapping("/satelliteform")
@RequestMapping("/satelliteform")
public String home1() {
public String home1() {
return "satelliteform";
return "satelliteform";
}
}
@GetMapping("/admin")
@GetMapping("/admin")
public String admin() {
public String admin() {
return "attributenew";
return "attributenew";
}
@GetMapping("/map")
public String map() {
return "map";
}
}
/*
/*
* @RequestMapping("/attributenew") public String homenew() { return
* @RequestMapping("/attributenew") public String homenew() { return
* "attributenew"; }
* "attributenew"; }
*/
*/
@RequestMapping("/attribute")
@RequestMapping("/attribute")
public String home2() {
public String home2() {
return "attribute";
return "attribute";
}
}
@RequestMapping(path="/attribute", method=RequestMethod.GET)
@RequestMapping(path="/attribute", method=RequestMethod.GET)
public String getData(Model model,@Param("keyword") String keyword) {
public String getData(Model model,@Param("keyword") String keyword) {
List<Satellite> list = satelliteServices.listAll(keyword);
List<Satellite> list = satelliteServices.listAll(keyword);
model.addAttribute("list", list);
model.addAttribute("list", list);
model.addAttribute("keyword", keyword);
model.addAttribute("keyword", keyword);
return "attribute";
return "attribute";
}
}
@RequestMapping(path="/success", method=RequestMethod.POST, consumes = {"multipart/form-data"})
@RequestMapping(path="/success", method=RequestMethod.POST, consumes = {"multipart/form-data"})
public String handlerform(@ModelAttribute @Validated Satellite satelliteform,BindingResult bindingResult,
public String handlerform(@ModelAttribute @Validated Satellite satelliteform,BindingResult bindingResult,
@RequestParam(value = "image1") MultipartFile image1,
@RequestParam(value = "image1") MultipartFile image1,
HttpServletRequest request, MultipartHttpServletRequest req,
HttpServletRequest request, MultipartHttpServletRequest req,
@RequestParam(value = "msg", required = false) String msg, ModelMap modelMap) throws ParseException
@RequestParam(value = "msg", required = false) String msg, ModelMap modelMap) throws ParseException
{
{
try {
try {
if (!image1.isEmpty()) {
if (!image1.isEmpty()) {
String name = comcon.fileupload(image1.getBytes(), image1.getOriginalFilename());
String name = comcon.fileupload(image1.getBytes(), image1.getOriginalFilename());
if (name != "") {
if (name != "") {
satelliteform.setImage1(name);
satelliteform.setImage1(name);
//adminform.setPre_not(name);
//adminform.setPre_not(name);
}
}
}
}
// if (!image2.isEmpty()) {
// if (!image2.isEmpty()) {
// String name = comcon.fileupload(image2.getBytes(), image2.getOriginalFilename());
// String name = comcon.fileupload(image2.getBytes(), image2.getOriginalFilename());
// if (name != "") {
// if (name != "") {
// satelliteform.setImage2(name);
// satelliteform.setImage2(name);
// //adminform.setPre_not(name);
// //adminform.setPre_not(name);
// }
// }
// }
// }
// if (!image3.isEmpty()) {
// if (!image3.isEmpty()) {
// String name = comcon.fileupload(image3.getBytes(), image3.getOriginalFilename());
// String name = comcon.fileupload(image3.getBytes(), image3.getOriginalFilename());
// if (name != "") {
// if (name != "") {
// satelliteform.setImage3(name);
// satelliteform.setImage3(name);
// //adminform.setPre_not(name);
// //adminform.setPre_not(name);
// }
// }
// }
// }
} catch (Exception e) {
} catch (Exception e) {
}
}
System.out.println(satelliteform);
System.out.println(satelliteform);
//String wkt="POLYGON((75.83036587499998 22.921094475424255,79.08231899999998 23.64767847769751,79.69755337499998 20.71823588581489,76.35770962499998 20.22419690313707,75.83036587499998 22.921094475424255))";
//String wkt="POLYGON((75.83036587499998 22.921094475424255,79.08231899999998 23.64767847769751,79.69755337499998 20.71823588581489,76.35770962499998 20.22419690313707,75.83036587499998 22.921094475424255))";
String wkt = "POLYGON(("+satelliteform.getUllong()+" "+satelliteform.getUllat()+"," +satelliteform.getUrlong()+" "+satelliteform.getUrlat()+","+satelliteform.getLrlong()+" "+satelliteform.getLrlat()+"," +satelliteform.getLllong()+" "+satelliteform.getLllat()+","+satelliteform.getUllong()+" "+satelliteform.getUllat()+"))";
String wkt = "POLYGON(("+satelliteform.getUllong()+" "+satelliteform.getUllat()+"," +satelliteform.getUrlong()+" "+satelliteform.getUrlat()+","+satelliteform.getLrlong()+" "+satelliteform.getLrlat()+"," +satelliteform.getLllong()+" "+satelliteform.getLllat()+","+satelliteform.getUllong()+" "+satelliteform.getUllat()+"))";
WKTReader wktReader = new WKTReader();
WKTReader wktReader = new WKTReader();
try {
try {
satelliteform.setWktgeom(wkt);
satelliteform.setWktgeom(wkt);
Geometry geom = wktReader.read(satelliteform.getWktgeom());
Geometry geom = wktReader.read(satelliteform.getWktgeom());
satelliteform.setAddgeom(geom);
satelliteform.setAddgeom(geom);
} catch (Exception e) {
} catch (Exception e) {
System.out.println(e.getMessage());
System.out.println(e.getMessage());
e.printStackTrace();
e.printStackTrace();
}
}
System.out.println(satelliteform);
System.out.println(satelliteform);
satelliteRepo.save(satelliteform);
satelliteRepo.save(satelliteform);
return "success";
return "success";
}
}
@PostMapping("/uploadFile")
@PostMapping("/uploadFile")
public String uploadFile(@RequestParam("textFile") MultipartFile file,Model model) throws FileNotFoundException {
public String uploadFile(@RequestParam("textFile") MultipartFile file,Model model) throws FileNotFoundException {
if(file.isEmpty()){
if(file.isEmpty()){
//if file is empty then put your message
//if file is empty then put your message
System.out.println("No File Found");
System.out.println("No File Found");
}
}
else {
else {
String content;
String content;
try {
try {
content = new String(file.getBytes(), StandardCharsets.UTF_8);
content = new String(file.getBytes(), StandardCharsets.UTF_8);
Scanner myReader = new Scanner(content);
Scanner myReader = new Scanner(content);
HashMap<String, String> map = new HashMap<>();
HashMap<String, String> map = new HashMap<>();
while (myReader.hasNext()) {
while (myReader.hasNext()) {
String data = myReader.nextLine();
String data = myReader.nextLine();
String part[]= data.split("=");
String part[]= data.split("=");
map.put(part[0],part[1]);
map.put(part[0],part[1]);
}
}
System.out.println(map);
System.out.println(map);
// System.out.println(map.get("DPCounter"));
// System.out.println(map.get("DPCounter"));
// System.out.println(map.size());
// System.out.println(map.size());
myReader.close();
myReader.close();
model.addAttribute("filedata", map);
model.addAttribute("filedata", map);
return "satelliteform";
return "satelliteform";
} catch (IOException e) {
} catch (IOException e) {
// TODO Auto-generated catch block
// TODO Auto-generated catch block
e.printStackTrace();
e.printStackTrace();
}
}
// File myObj = new File(file);
// File myObj = new File(file);
}
}
return "satelliteform";
return "satelliteform";
}
}
}
}
M src/main/resources/static/assets/css/style.css
+2 −2
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url(../scss/icons/font-awesome/css/font-awesome.min.css);
@import url(../scss/icons/font-awesome/css/font-awesome.min.css);
@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(../scss/icons/weather-icons/css/weather-icons.min.css);
@import url(../scss/icons/weather-icons/css/weather-icons.min.css);
@import url(../scss/icons/linea-icons/linea.css);
@import url(../scss/icons/linea-icons/linea.css);
@import url(../scss/icons/themify-icons/themify-icons.css);
@import url(../scss/icons/themify-icons/themify-icons.css);
@import url(../scss/icons/flag-icon-css/flag-icon.min.css);
@import url(../scss/icons/flag-icon-css/flag-icon.min.css);
@import url(../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url(../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url(spinners.css);
@import url(spinners.css);
@import url(animate.css);
@import url(animate.css);
.preloader {
.preloader {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
top: 0px;
top: 0px;
position: fixed;
position: fixed;
z-index: 99999;
z-index: 99999;
background: #fff
background: #fff
}
}
.preloader .cssload-speeding-wheel {
.preloader .cssload-speeding-wheel {
position: absolute;
position: absolute;
top: calc(50% - 3.5px);
top: calc(50% - 3.5px);
left: calc(50% - 3.5px)
left: calc(50% - 3.5px)
}
}
* {
* {
outline: none
outline: none
}
}
body {
body {
background: #fff;
background: #fff;
font-family: "Poppins", sans-serif;
font-family: "Poppins", sans-serif;
margin: 0;
margin: 0;
overflow-x: hidden;
overflow-x: hidden;
color: #67757c;
color: #67757c;
font-weight: 300
font-weight: 300
}
}
html {
html {
position: relative;
position: relative;
min-height: 100%;
min-height: 100%;
background: #ffffff
background: #ffffff
}
}
a:focus, a:hover {
a:focus, a:hover {
text-decoration: none
text-decoration: none
}
}
a.link {
a.link {
color: #455a64
color: #455a64
}
}
a.link:focus, a.link:hover {
a.link:focus, a.link:hover {
color: #1976d2
color: #1976d2
}
}
.img-responsive {
.img-responsive {
width: 100%;
width: 100%;
height: auto;
height: auto;
display: inline-block
display: inline-block
}
}
.img-rounded {
.img-rounded {
border-radius: 4px
border-radius: 4px
}
}
html body .mdi-set, html body .mdi:before {
html body .mdi-set, html body .mdi:before {
line-height: initial
line-height: initial
}
}
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
color: #455a64;
color: #455a64;
font-family: "Poppins", sans-serif;
font-family: "Poppins", sans-serif;
font-weight: 400
font-weight: 400
}
}
h1 {
h1 {
line-height: 40px;
line-height: 40px;
font-size: 36px
font-size: 36px
}
}
h2 {
h2 {
line-height: 36px;
line-height: 36px;
font-size: 24px
font-size: 24px
}
}
h3 {
h3 {
line-height: 30px;
line-height: 30px;
font-size: 21px
font-size: 21px
}
}
h4 {
h4 {
line-height: 22px;
line-height: 22px;
font-size: 18px
font-size: 18px
}
}
h5 {
h5 {
line-height: 18px;
line-height: 18px;
font-size: 16px;
font-size: 16px;
font-weight: 400
font-weight: 400
}
}
h6 {
h6 {
line-height: 16px;
line-height: 16px;
font-size: 14px;
font-size: 14px;
font-weight: 400
font-weight: 400
}
}
.display-5 {
.display-5 {
font-size: 3rem
font-size: 3rem
}
}
.display-6 {
.display-6 {
font-size: 36px
font-size: 36px
}
}
.box {
.box {
border-radius: 4px;
border-radius: 4px;
padding: 10px
padding: 10px
}
}
html body .dl {
html body .dl {
display: inline-block
display: inline-block
}
}
html body .db {
html body .db {
display: block
display: block
}
}
.no-wrap td, .no-wrap th {
.no-wrap td, .no-wrap th {
white-space: nowrap
white-space: nowrap
}
}
html body blockquote {
html body blockquote {
border-left: 5px solid #1976d2;
border-left: 5px solid #1976d2;
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
padding: 15px
padding: 15px
}
}
.clear {
.clear {
clear: both
clear: both
}
}
ol li {
ol li {
margin: 5px 0
margin: 5px 0
}
}
html body .p-0 {
html body .p-0 {
padding: 0px
padding: 0px
}
}
html body .p-10 {
html body .p-10 {
padding: 10px
padding: 10px
}
}
html body .p-20 {
html body .p-20 {
padding: 20px
padding: 20px
}
}
html body .p-30 {
html body .p-30 {
padding: 30px
padding: 30px
}
}
html body .p-l-0 {
html body .p-l-0 {
padding-left: 0px
padding-left: 0px
}
}
html body .p-l-10 {
html body .p-l-10 {
padding-left: 10px
padding-left: 10px
}
}
html body .p-l-20 {
html body .p-l-20 {
padding-left: 20px
padding-left: 20px
}
}
html body .p-r-0 {
html body .p-r-0 {
padding-right: 0px
padding-right: 0px
}
}
html body .p-r-10 {
html body .p-r-10 {
padding-right: 10px
padding-right: 10px
}
}
html body .p-r-20 {
html body .p-r-20 {
padding-right: 20px
padding-right: 20px
}
}
html body .p-r-30 {
html body .p-r-30 {
padding-right: 30px
padding-right: 30px
}
}
html body .p-r-40 {
html body .p-r-40 {
padding-right: 40px
padding-right: 40px
}
}
html body .p-t-0 {
html body .p-t-0 {
padding-top: 0px
padding-top: 0px
}
}
html body .p-t-10 {
html body .p-t-10 {
padding-top: 10px
padding-top: 10px
}
}
html body .p-t-20 {
html body .p-t-20 {
padding-top: 20px
padding-top: 20px
}
}
html body .p-t-30 {
html body .p-t-30 {
padding-top: 30px
padding-top: 30px
}
}
html body .p-b-0 {
html body .p-b-0 {
padding-bottom: 0px
padding-bottom: 0px
}
}
html body .p-b-5 {
html body .p-b-5 {
padding-bottom: 5px
padding-bottom: 5px
}
}
html body .p-b-10 {
html body .p-b-10 {
padding-bottom: 10px
padding-bottom: 10px
}
}
html body .p-b-20 {
html body .p-b-20 {
padding-bottom: 20px
padding-bottom: 20px
}
}
html body .p-b-30 {
html body .p-b-30 {
padding-bottom: 30px
padding-bottom: 30px
}
}
html body .p-b-40 {
html body .p-b-40 {
padding-bottom: 40px
padding-bottom: 40px
}
}
html body .m-0 {
html body .m-0 {
margin: 0px
margin: 0px
}
}
html body .m-l-5 {
html body .m-l-5 {
margin-left: 5px
margin-left: 5px
}
}
html body .m-l-10 {
html body .m-l-10 {
margin-left: 10px
margin-left: 10px
}
}
html body .m-l-15 {
html body .m-l-15 {
margin-left: 15px
margin-left: 15px
}
}
html body .m-l-20 {
html body .m-l-20 {
margin-left: 20px
margin-left: 20px
}
}
html body .m-l-30 {
html body .m-l-30 {
margin-left: 30px
margin-left: 30px
}
}
html body .m-l-40 {
html body .m-l-40 {
margin-left: 40px
margin-left: 40px
}
}
html body .m-r-5 {
html body .m-r-5 {
margin-right: 5px
margin-right: 5px
}
}
html body .m-r-10 {
html body .m-r-10 {
margin-right: 10px
margin-right: 10px
}
}
html body .m-r-15 {
html body .m-r-15 {
margin-right: 15px
margin-right: 15px
}
}
html body .m-r-20 {
html body .m-r-20 {
margin-right: 20px
margin-right: 20px
}
}
html body .m-r-30 {
html body .m-r-30 {
margin-right: 30px
margin-right: 30px
}
}
html body .m-r-40 {
html body .m-r-40 {
margin-right: 40px
margin-right: 40px
}
}
html body .m-t-0 {
html body .m-t-0 {
margin-top: 0px
margin-top: 0px
}
}
html body .m-t-5 {
html body .m-t-5 {
margin-top: 5px
margin-top: 5px
}
}
html body .m-t-10 {
html body .m-t-10 {
margin-top: 10px
margin-top: 10px
}
}
html body .m-t-15 {
html body .m-t-15 {
margin-top: 15px
margin-top: 15px
}
}
html body .m-t-20 {
html body .m-t-20 {
margin-top: 20px
margin-top: 20px
}
}
html body .m-t-30 {
html body .m-t-30 {
margin-top: 30px
margin-top: 30px
}
}
html body .m-t-40 {
html body .m-t-40 {
margin-top: 40px
margin-top: 40px
}
}
html body .m-b-0 {
html body .m-b-0 {
margin-bottom: 0px
margin-bottom: 0px
}
}
html body .m-b-5 {
html body .m-b-5 {
margin-bottom: 5px
margin-bottom: 5px
}
}
html body .m-b-10 {
html body .m-b-10 {
margin-bottom: 10px
margin-bottom: 10px
}
}
html body .m-b-15 {
html body .m-b-15 {
margin-bottom: 15px
margin-bottom: 15px
}
}
html body .m-b-20 {
html body .m-b-20 {
margin-bottom: 20px
margin-bottom: 20px
}
}
html body .m-b-30 {
html body .m-b-30 {
margin-bottom: 30px
margin-bottom: 30px
}
}
html body .m-b-40 {
html body .m-b-40 {
margin-bottom: 40px
margin-bottom: 40px
}
}
html body .vt {
html body .vt {
vertical-align: top
vertical-align: top
}
}
html body .vm {
html body .vm {
vertical-align: middle
vertical-align: middle
}
}
html body .vb {
html body .vb {
vertical-align: bottom
vertical-align: bottom
}
}
.op-5 {
.op-5 {
opacity: 0.5
opacity: 0.5
}
}
html body .font-bold {
html body .font-bold {
font-weight: 700
font-weight: 700
}
}
html body .font-normal {
html body .font-normal {
font-weight: normal
font-weight: normal
}
}
html body .font-light {
html body .font-light {
font-weight: 300
font-weight: 300
}
}
html body .font-medium {
html body .font-medium {
font-weight: 500
font-weight: 500
}
}
html body .font-16 {
html body .font-16 {
font-size: 16px
font-size: 16px
}
}
html body .font-14 {
html body .font-14 {
font-size: 14px
font-size: 14px
}
}
html body .font-10 {
html body .font-10 {
font-size: 10px
font-size: 10px
}
}
html body .font-18 {
html body .font-18 {
font-size: 18px
font-size: 18px
}
}
html body .font-20 {
html body .font-20 {
font-size: 20px
font-size: 20px
}
}
html body .b-0 {
html body .b-0 {
border: none
border: none
}
}
html body .b-r {
html body .b-r {
border-right: 1px solid rgba(120, 130, 140, 0.13)
border-right: 1px solid rgba(120, 130, 140, 0.13)
}
}
html body .b-l {
html body .b-l {
border-left: 1px solid rgba(120, 130, 140, 0.13)
border-left: 1px solid rgba(120, 130, 140, 0.13)
}
}
html body .b-b {
html body .b-b {
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
}
}
html body .b-t {
html body .b-t {
border-top: 1px solid rgba(120, 130, 140, 0.13)
border-top: 1px solid rgba(120, 130, 140, 0.13)
}
}
html body .b-all {
html body .b-all {
border: 1px solid rgba(120, 130, 140, 0.13)!important
border: 1px solid rgba(120, 130, 140, 0.13)!important
}
}
.thumb-sm {
.thumb-sm {
height: 32px;
height: 32px;
width: 32px
width: 32px
}
}
.thumb-md {
.thumb-md {
height: 48px;
height: 48px;
width: 48px
width: 48px
}
}
.thumb-lg {
.thumb-lg {
height: 88px;
height: 88px;
width: 88px
width: 88px
}
}
.hide {
.hide {
display: none
display: none
}
}
.img-circle {
.img-circle {
border-radius: 100%
border-radius: 100%
}
}
.radius {
.radius {
border-radius: 4px
border-radius: 4px
}
}
.text-white {
.text-white {
color: #ffffff!important
color: #ffffff!important
}
}
.text-danger {
.text-danger {
color: #ef5350!important
color: #ef5350!important
}
}
.text-muted {
.text-muted {
color: #fff!important
color: #fff!important
}
}
.text-warning {
.text-warning {
color: #ffb22b!important
color: #ffb22b!important
}
}
.text-success {
.text-success {
color: #26dad2!important
color: #26dad2!important
}
}
.text-info {
.text-info {
color: #1976d2!important
color: #1976d2!important
}
}
.text-inverse {
.text-inverse {
color: #2f3d4a!important
color: #2f3d4a!important
}
}
html body .text-blue {
html body .text-blue {
color: #02bec9
color: #02bec9
}
}
html body .text-purple {
html body .text-purple {
color: #7460ee
color: #7460ee
}
}
html body .text-primary {
html body .text-primary {
color: #5c4ac7
color: #5c4ac7
}
}
html body .text-megna {
html body .text-megna {
color: #00897b
color: #00897b
}
}
html body .text-dark {
html body .text-dark {
color: #67757c
color: #67757c
}
}
html body .text-themecolor {
html body .text-themecolor {
color: #1976d2
color: #1976d2
}
}
.bg-primary {
.bg-primary {
background-color: #5c4ac7!important
background-color: #5c4ac7!important
}
}
.bg-success {
.bg-success {
background-color: #26dad2!important
background-color: #26dad2!important
}
}
.bg-info {
.bg-info {
background-color: #1976d2!important
background-color: #1976d2!important
}
}
.bg-warning {
.bg-warning {
background-color: #ffb22b!important
background-color: #ffb22b!important
}
}
.bg-danger {
.bg-danger {
background-color: #ef5350!important
background-color: #ef5350!important
}
}
html body .bg-megna {
html body .bg-megna {
background-color: #00897b
background-color: #00897b
}
}
html body .bg-theme {
html body .bg-theme {
background-color: #1976d2
background-color: #1976d2
}
}
html body .bg-inverse {
html body .bg-inverse {
background-color: #2f3d4a
background-color: #2f3d4a
}
}
html body .bg-purple {
html body .bg-purple {
background-color: #7460ee
background-color: #7460ee
}
}
html body .bg-light-part {
html body .bg-light-part {
background-color: rgba(0, 0, 0, 0.02)
background-color: rgba(0, 0, 0, 0.02)
}
}
html body .bg-light-primary {
html body .bg-light-primary {
background-color: #f1effd
background-color: #f1effd
}
}
html body .bg-light-success {
html body .bg-light-success {
background-color: #e8fdeb
background-color: #e8fdeb
}
}
html body .bg-light-info {
html body .bg-light-info {
background-color: #cfecfe
background-color: #cfecfe
}
}
html body .bg-light-extra {
html body .bg-light-extra {
background-color: #ebf3f5
background-color: #ebf3f5
}
}
html body .bg-light-warning {
html body .bg-light-warning {
background-color: #fff8ec
background-color: #fff8ec
}
}
html body .bg-light-danger {
html body .bg-light-danger {
background-color: #f9e7eb
background-color: #f9e7eb
}
}
html body .bg-light-inverse {
html body .bg-light-inverse {
background-color: #f6f6f6
background-color: #f6f6f6
}
}
html body .bg-light {
html body .bg-light {
background-color: #f2f4f8
background-color: #f2f4f8
}
}
html body .bg-white {
html body .bg-white {
background-color: #ffffff
background-color: #ffffff
}
}
.round {
.round {
line-height: 48px;
line-height: 48px;
color: #ffffff;
color: #ffffff;
width: 50px;
width: 50px;
height: 50px;
height: 50px;
display: inline-block;
display: inline-block;
font-weight: 400;
font-weight: 400;
text-align: center;
text-align: center;
border-radius: 100%;
border-radius: 100%;
background: #1976d2
background: #1976d2
}
}
.round img {
.round img {
border-radius: 100%
border-radius: 100%
}
}
.round-lg {
.round-lg {
line-height: 65px;
line-height: 65px;
width: 60px;
width: 60px;
height: 60px;
height: 60px;
font-size: 30px
font-size: 30px
}
}
.round.round-info {
.round.round-info {
background: #1976d2
background: #1976d2
}
}
.round.round-warning {
.round.round-warning {
background: #ffb22b
background: #ffb22b
}
}
.round.round-danger {
.round.round-danger {
background: #ef5350
background: #ef5350
}
}
.round.round-success {
.round.round-success {
background: #26dad2
background: #26dad2
}
}
.round.round-primary {
.round.round-primary {
background: #5c4ac7
background: #5c4ac7
}
}
.label {
.label {
padding: 3px 10px;
padding: 3px 10px;
line-height: 13px;
line-height: 13px;
color: #ffffff;
color: #ffffff;
font-weight: 400;
font-weight: 400;
border-radius: 4px;
border-radius: 4px;
font-size: 75%
font-size: 75%
}
}
.label-rounded {
.label-rounded {
border-radius: 60px
border-radius: 60px
}
}
.label-custom {
.label-custom {
background-color: #00897b
background-color: #00897b
}
}
.label-success {
.label-success {
background-color: #26dad2
background-color: #26dad2
}
}
.label-info {
.label-info {
background-color: #1976d2
background-color: #1976d2
}
}
.label-warning {
.label-warning {
background-color: #ffb22b
background-color: #ffb22b
}
}
.label-danger {
.label-danger {
background-color: #ef5350
background-color: #ef5350
}
}
.label-megna {
.label-megna {
background-color: #00897b
background-color: #00897b
}
}
.label-primary {
.label-primary {
background-color: #5c4ac7
background-color: #5c4ac7
}
}
.label-purple {
.label-purple {
background-color: #7460ee
background-color: #7460ee
}
}
.label-red {
.label-red {
background-color: #fb3a3a
background-color: #fb3a3a
}
}
.label-inverse {
.label-inverse {
background-color: #2f3d4a
background-color: #2f3d4a
}
}
.label-default {
.label-default {
background-color: #f2f4f8
background-color: #f2f4f8
}
}
.label-white {
.label-white {
background-color: #ffffff
background-color: #ffffff
}
}
.label-light-success {
.label-light-success {
background-color: #e8fdeb;
background-color: #e8fdeb;
color: #26dad2
color: #26dad2
}
}
.label-light-info {
.label-light-info {
background-color: #cfecfe;
background-color: #cfecfe;
color: #1976d2
color: #1976d2
}
}
.label-light-warning {
.label-light-warning {
background-color: #fff8ec;
background-color: #fff8ec;
color: #ffb22b
color: #ffb22b
}
}
.label-light-danger {
.label-light-danger {
background-color: #f9e7eb;
background-color: #f9e7eb;
color: #ef5350
color: #ef5350
}
}
.label-light-megna {
.label-light-megna {
background-color: #e0f2f4;
background-color: #e0f2f4;
color: #00897b
color: #00897b
}
}
.label-light-primary {
.label-light-primary {
background-color: #f1effd;
background-color: #f1effd;
color: #5c4ac7
color: #5c4ac7
}
}
.label-light-inverse {
.label-light-inverse {
background-color: #f6f6f6;
background-color: #f6f6f6;
color: #2f3d4a
color: #2f3d4a
}
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
.pagination>li:first-child>a, .pagination>li:first-child>span {
border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px
border-top-left-radius: 4px
}
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
.pagination>li:last-child>a, .pagination>li:last-child>span {
border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px
border-top-right-radius: 4px
}
}
.pagination>li>a, .pagination>li>span {
.pagination>li>a, .pagination>li>span {
color: #263238
color: #263238
}
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
background-color: #f2f4f8
background-color: #f2f4f8
}
}
.pagination-split li {
.pagination-split li {
margin-left: 5px;
margin-left: 5px;
display: inline-block;
display: inline-block;
float: left
float: left
}
}
.pagination-split li:first-child {
.pagination-split li:first-child {
margin-left: 0
margin-left: 0
}
}
.pagination-split li a {
.pagination-split li a {
-moz-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px
border-radius: 4px
}
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
background-color: #1976d2;
background-color: #1976d2;
border-color: #1976d2
border-color: #1976d2
}
}
.pager li>a, .pager li>span {
.pager li>a, .pager li>span {
-moz-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-radius: 4px;
color: #263238
color: #263238
}
}
.table-box {
.table-box {
display: table;
display: table;
width: 100%
width: 100%
}
}
.table.no-border tbody td {
.table.no-border tbody td {
border: 0px
border: 0px
}
}
.cell {
.cell {
display: table-cell;
display: table-cell;
vertical-align: middle
vertical-align: middle
}
}
.table td, .table th {
.table td, .table th {
border-color: #f3f1f1
border-color: #f3f1f1
}
}
.table th, .table thead th {
.table th, .table thead th {
font-weight: 500
font-weight: 500
}
}
.table-hover tbody tr:hover {
.table-hover tbody tr:hover {
background: #f2f4f8
background: #f2f4f8
}
}
.nowrap {
.nowrap {
white-space: nowrap
white-space: nowrap
}
}
.lite-padding td {
.lite-padding td {
padding: 5px
padding: 5px
}
}
.v-middle td, .v-middle th {
.v-middle td, .v-middle th {
vertical-align: middle
vertical-align: middle
}
}
.table-responsive {
.table-responsive {
display: block;
display: block;
width: 100%;
width: 100%;
overflow-x: auto;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar
-ms-overflow-style: -ms-autohiding-scrollbar
}
}
.waves-effect {
.waves-effect {
position: relative;
position: relative;
cursor: pointer;
cursor: pointer;
display: inline-block;
display: inline-block;
overflow: hidden;
overflow: hidden;
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-user-select: none;
user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
vertical-align: middle;
z-index: 1;
z-index: 1;
will-change: opacity, transform;
will-change: opacity, transform;
-webkit-transition: all 0.1s ease-out;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out
transition: all 0.1s ease-out
}
}
.waves-effect .waves-ripple {
.waves-effect .waves-ripple {
position: absolute;
position: absolute;
border-radius: 50%;
border-radius: 50%;
width: 20px;
width: 20px;
height: 20px;
height: 20px;
margin-top: -10px;
margin-top: -10px;
margin-left: -10px;
margin-left: -10px;
opacity: 0;
opacity: 0;
background: rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-webkit-transition-property: -webkit-transform, opacity;
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-o-transition-property: -o-transform, opacity;
-o-transition-property: -o-transform, opacity;
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
-o-transition-property: transform, opacity;
-o-transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
transition-property: transform, opacity, -webkit-transform;
-webkit-transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
transform: scale(0);
pointer-events: none
pointer-events: none
}
}
.waves-effect.waves-light .waves-ripple {
.waves-effect.waves-light .waves-ripple {
background-color: rgba(255, 255, 255, 0.45)
background-color: rgba(255, 255, 255, 0.45)
}
}
.waves-effect.waves-red .waves-ripple {
.waves-effect.waves-red .waves-ripple {
background-color: rgba(244, 67, 54, 0.7)
background-color: rgba(244, 67, 54, 0.7)
}
}
.waves-effect.waves-yellow .waves-ripple {
.waves-effect.waves-yellow .waves-ripple {
background-color: rgba(255, 235, 59, 0.7)
background-color: rgba(255, 235, 59, 0.7)
}
}
.waves-effect.waves-orange .waves-ripple {
.waves-effect.waves-orange .waves-ripple {
background-color: rgba(255, 152, 0, 0.7)
background-color: rgba(255, 152, 0, 0.7)
}
}
.waves-effect.waves-purple .waves-ripple {
.waves-effect.waves-purple .waves-ripple {
background-color: rgba(156, 39, 176, 0.7)
background-color: rgba(156, 39, 176, 0.7)
}
}
.waves-effect.waves-green .waves-ripple {
.waves-effect.waves-green .waves-ripple {
background-color: rgba(76, 175, 80, 0.7)
background-color: rgba(76, 175, 80, 0.7)
}
}
.waves-effect.waves-teal .waves-ripple {
.waves-effect.waves-teal .waves-ripple {
background-color: rgba(0, 150, 136, 0.7)
background-color: rgba(0, 150, 136, 0.7)
}
}
html body .waves-notransition {
html body .waves-notransition {
-webkit-transition: none;
-webkit-transition: none;
-moz-transition: none;
-moz-transition: none;
-o-transition: none;
-o-transition: none;
-ms-transition: none;
-ms-transition: none;
transition: none
transition: none
}
}
.waves-circle {
.waves-circle {
-webkit-transform: translateZ(0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
transform: translateZ(0);
text-align: center;
text-align: center;
width: 2.5em;
width: 2.5em;
height: 2.5em;
height: 2.5em;
line-height: 2.5em;
line-height: 2.5em;
border-radius: 50%;
border-radius: 50%;
-webkit-mask-image: none
-webkit-mask-image: none
}
}
.waves-input-wrapper {
.waves-input-wrapper {
border-radius: 0.2em;
border-radius: 0.2em;
vertical-align: bottom
vertical-align: bottom
}
}
.waves-input-wrapper .waves-button-input {
.waves-input-wrapper .waves-button-input {
position: relative;
position: relative;
top: 0;
top: 0;
left: 0;
left: 0;
z-index: 1
z-index: 1
}
}
.waves-block {
.waves-block {
display: block
display: block
}
}
.badge {
.badge {
font-weight: 400
font-weight: 400
}
}
.badge-xs {
.badge-xs {
font-size: 9px
font-size: 9px
}
}
.badge-sm, .badge-xs {
.badge-sm, .badge-xs {
-webkit-transform: translate(0, -2px);
-webkit-transform: translate(0, -2px);
-ms-transform: translate(0, -2px);
-ms-transform: translate(0, -2px);
-o-transform: translate(0, -2px);
-o-transform: translate(0, -2px);
transform: translate(0, -2px)
transform: translate(0, -2px)
}
}
.badge-success {
.badge-success {
background-color: #26dad2
background-color: #26dad2
}
}
.badge-info {
.badge-info {
background-color: #1976d2
background-color: #1976d2
}
}
.badge-primary {
.badge-primary {
background-color: #5c4ac7
background-color: #5c4ac7
}
}
.badge-warning {
.badge-warning {
background-color: #ffb22b
background-color: #ffb22b
}
}
.badge-danger {
.badge-danger {
background-color: #ef5350
background-color: #ef5350
}
}
.badge-purple {
.badge-purple {
background-color: #7460ee
background-color: #7460ee
}
}
.badge-red {
.badge-red {
background-color: #fb3a3a
background-color: #fb3a3a
}
}
.badge-inverse {
.badge-inverse {
background-color: #2f3d4a
background-color: #2f3d4a
}
}
.btn {
.btn {
padding: 7px 12px;
padding: 7px 12px;
cursor: pointer
cursor: pointer
}
}
.btn-group label {
.btn-group label {
color: #ffffff!important;
color: #ffffff!important;
margin-bottom: 0px
margin-bottom: 0px
}
}
.btn-group label.btn-secondary {
.btn-group label.btn-secondary {
color: #67757c!important
color: #67757c!important
}
}
.btn-lg {
.btn-lg {
padding: .75rem 1.5rem;
padding: .75rem 1.5rem;
font-size: 1.25rem
font-size: 1.25rem
}
}
.btn-md {
.btn-md {
padding: 12px 55px;
padding: 12px 55px;
font-size: 16px
font-size: 16px
}
}
.btn-circle {
.btn-circle {
border-radius: 100%;
border-radius: 100%;
width: 40px;
width: 40px;
height: 40px;
height: 40px;
padding: 10px
padding: 10px
}
}
.btn-circle.btn-sm {
.btn-circle.btn-sm {
width: 35px;
width: 35px;
height: 35px;
height: 35px;
padding: 8px 10px;
padding: 8px 10px;
font-size: 14px
font-size: 14px
}
}
.btn-circle.btn-lg {
.btn-circle.btn-lg {
width: 50px;
width: 50px;
height: 50px;
height: 50px;
padding: 14px 15px;
padding: 14px 15px;
font-size: 18px;
font-size: 18px;
line-height: 22px
line-height: 22px
}
}
.btn-circle.btn-xl {
.btn-circle.btn-xl {
width: 70px;
width: 70px;
height: 70px;
height: 70px;
padding: 14px 15px;
padding: 14px 15px;
font-size: 24px
font-size: 24px
}
}
.btn-sm {
.btn-sm {
padding: .25rem .5rem;
padding: .25rem .5rem;
font-size: 12px
font-size: 12px
}
}
.btn-xs {
.btn-xs {
padding: .25rem .5rem;
padding: .25rem .5rem;
font-size: 10px
font-size: 10px
}
}
.button-list a, .button-list button {
.button-list a, .button-list button {
margin: 5px 12px 5px 0
margin: 5px 12px 5px 0
}
}
.btn-outline {
.btn-outline {
color: inherit;
color: inherit;
background-color: transparent;
background-color: transparent;
-webkit-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
transition: all .5s
}
}
.btn-rounded {
.btn-rounded {
border-radius: 60px;
border-radius: 60px;
padding: 7px 18px
padding: 7px 18px
}
}
.btn-rounded.btn-lg {
.btn-rounded.btn-lg {
padding: .75rem 1.5rem
padding: .75rem 1.5rem
}
}
.btn-rounded.btn-sm {
.btn-rounded.btn-sm {
padding: .25rem .5rem;
padding: .25rem .5rem;
font-size: 12px
font-size: 12px
}
}
.btn-rounded.btn-xs {
.btn-rounded.btn-xs {
padding: .25rem .5rem;
padding: .25rem .5rem;
font-size: 10px
font-size: 10px
}
}
.btn-rounded.btn-md {
.btn-rounded.btn-md {
padding: 12px 35px;
padding: 12px 35px;
font-size: 16px
font-size: 16px
}
}
.btn-secondary, .btn-secondary.disabled {
.btn-secondary, .btn-secondary.disabled {
-webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
transition: 0.2s ease-in;
background-color: #ffffff;
background-color: #ffffff;
color: #67757c;
color: #67757c;
border-color: #b1b8bb
border-color: #b1b8bb
}
}
.btn-secondary.disabled:hover, .btn-secondary:hover {
.btn-secondary.disabled:hover, .btn-secondary:hover {
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
}
}
.btn-secondary.active, .btn-secondary.disabled.active, .btn-secondary.disabled:active, .btn-secondary.disabled:focus, .btn-secondary:active, .btn-secondary:focus {
.btn-secondary.active, .btn-secondary.disabled.active, .btn-secondary.disabled:active, .btn-secondary.disabled:focus, .btn-secondary:active, .btn-secondary:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
}
}
.btn-primary, .btn-primary.disabled {
.btn-primary, .btn-primary.disabled {
background: #5c4ac7;
background: #5c4ac7;
border: 1px solid #5c4ac7;
border: 1px solid #5c4ac7;
-webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-primary.disabled:hover, .btn-primary:hover {
.btn-primary.disabled:hover, .btn-primary:hover {
background: #5c4ac7;
background: #5c4ac7;
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
border: 1px solid #5c4ac7
border: 1px solid #5c4ac7
}
}
.btn-primary.active, .btn-primary.disabled.active, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary:active, .btn-primary:focus {
.btn-primary.active, .btn-primary.disabled.active, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary:active, .btn-primary:focus {
background: #6352ce;
background: #6352ce;
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2)
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2)
}
}
.btn-themecolor, .btn-themecolor.disabled {
.btn-themecolor, .btn-themecolor.disabled {
background: #1976d2;
background: #1976d2;
color: #ffffff;
color: #ffffff;
border: 1px solid #1976d2
border: 1px solid #1976d2
}
}
.btn-themecolor.disabled:hover, .btn-themecolor:hover {
.btn-themecolor.disabled:hover, .btn-themecolor:hover {
background: #1976d2;
background: #1976d2;
opacity: 0.7;
opacity: 0.7;
border: 1px solid #1976d2
border: 1px solid #1976d2
}
}
.btn-themecolor.active, .btn-themecolor.disabled.active, .btn-themecolor.disabled:active, .btn-themecolor.disabled:focus, .btn-themecolor:active, .btn-themecolor:focus {
.btn-themecolor.active, .btn-themecolor.disabled.active, .btn-themecolor.disabled:active, .btn-themecolor.disabled:focus, .btn-themecolor:active, .btn-themecolor:focus {
background: #028ee1
background: #028ee1
}
}
.btn-success, .btn-success.disabled {
.btn-success, .btn-success.disabled {
background: #26dad2;
background: #26dad2;
border: 1px solid #26dad2;
border: 1px solid #26dad2;
-webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-success.disabled:hover, .btn-success:hover {
.btn-success.disabled:hover, .btn-success:hover {
background: #26dad2;
background: #26dad2;
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
border: 1px solid #26dad2
border: 1px solid #26dad2
}
}
.btn-success.active, .btn-success.disabled.active, .btn-success.disabled:active, .btn-success.disabled:focus, .btn-success:active, .btn-success:focus {
.btn-success.active, .btn-success.disabled.active, .btn-success.disabled:active, .btn-success.disabled:focus, .btn-success:active, .btn-success:focus {
background: #1eacbe;
background: #1eacbe;
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2)
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2)
}
}
.btn-info, .btn-info.disabled {
.btn-info, .btn-info.disabled {
background: #1976d2;
background: #1976d2;
border: 1px solid #1976d2;
border: 1px solid #1976d2;
-webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-info.disabled:hover, .btn-info:hover {
.btn-info.disabled:hover, .btn-info:hover {
background: #1976d2;
background: #1976d2;
border: 1px solid #1976d2;
border: 1px solid #1976d2;
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2)
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2)
}
}
.btn-info.active, .btn-info.disabled.active, .btn-info.disabled:active, .btn-info.disabled:focus, .btn-info:active, .btn-info:focus {
.btn-info.active, .btn-info.disabled.active, .btn-info.disabled:active, .btn-info.disabled:focus, .btn-info:active, .btn-info:focus {
background: #028ee1;
background: #028ee1;
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2)
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2)
}
}
.btn-warning, .btn-warning.disabled {
.btn-warning, .btn-warning.disabled {
background: #ffb22b;
background: #ffb22b;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
border: 1px solid #ffb22b;
border: 1px solid #ffb22b;
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
transition: 0.2s ease-in;
color: #ffffff
color: #ffffff
}
}
.btn-warning.disabled:hover, .btn-warning:hover {
.btn-warning.disabled:hover, .btn-warning:hover {
background: #ffb22b;
background: #ffb22b;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
border: 1px solid #ffb22b
border: 1px solid #ffb22b
}
}
.btn-warning.active, .btn-warning.disabled.active, .btn-warning.disabled:active, .btn-warning.disabled:focus, .btn-warning:active, .btn-warning:focus {
.btn-warning.active, .btn-warning.disabled.active, .btn-warning.disabled:active, .btn-warning.disabled:focus, .btn-warning:active, .btn-warning:focus {
background: #e9ab2e;
background: #e9ab2e;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2)
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2)
}
}
.btn-danger, .btn-danger.disabled {
.btn-danger, .btn-danger.disabled {
background: #ef5350;
background: #ef5350;
border: 1px solid #ef5350;
border: 1px solid #ef5350;
-webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-danger.disabled:hover, .btn-danger:hover {
.btn-danger.disabled:hover, .btn-danger:hover {
background: #ef5350;
background: #ef5350;
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
border: 1px solid #ef5350
border: 1px solid #ef5350
}
}
.btn-danger.active, .btn-danger.disabled.active, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger:active, .btn-danger:focus {
.btn-danger.active, .btn-danger.disabled.active, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger:active, .btn-danger:focus {
background: #e6294b;
background: #e6294b;
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)
}
}
.btn-inverse, .btn-inverse.disabled {
.btn-inverse, .btn-inverse.disabled {
background: #2f3d4a;
background: #2f3d4a;
border: 1px solid #2f3d4a;
border: 1px solid #2f3d4a;
color: #ffffff
color: #ffffff
}
}
.btn-inverse.disabled:hover, .btn-inverse:hover {
.btn-inverse.disabled:hover, .btn-inverse:hover {
background: #2f3d4a;
background: #2f3d4a;
opacity: 0.7;
opacity: 0.7;
color: #ffffff;
color: #ffffff;
border: 1px solid #2f3d4a
border: 1px solid #2f3d4a
}
}
.btn-inverse.active, .btn-inverse.disabled.active, .btn-inverse.disabled:active, .btn-inverse.disabled:focus, .btn-inverse:active, .btn-inverse:focus {
.btn-inverse.active, .btn-inverse.disabled.active, .btn-inverse.disabled:active, .btn-inverse.disabled:focus, .btn-inverse:active, .btn-inverse:focus {
background: #232a37;
background: #232a37;
color: #ffffff
color: #ffffff
}
}
.btn-red, .btn-red.disabled {
.btn-red, .btn-red.disabled {
background: #fb3a3a;
background: #fb3a3a;
border: 1px solid #fb3a3a;
border: 1px solid #fb3a3a;
color: #ffffff
color: #ffffff
}
}
.btn-red.disabled:hover, .btn-red:hover {
.btn-red.disabled:hover, .btn-red:hover {
opacity: 0.7;
opacity: 0.7;
border: 1px solid #fb3a3a;
border: 1px solid #fb3a3a;
background: #fb3a3a
background: #fb3a3a
}
}
.btn-red.active, .btn-red.disabled.active, .btn-red.disabled:active, .btn-red.disabled:focus, .btn-red:active, .btn-red:focus {
.btn-red.active, .btn-red.disabled.active, .btn-red.disabled:active, .btn-red.disabled:focus, .btn-red:active, .btn-red:focus {
background: #e6294b
background: #e6294b
}
}
.btn-outline-secondary {
.btn-outline-secondary {
background-color: #ffffff;
background-color: #ffffff;
-webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-outline-secondary.focus, .btn-outline-secondary:focus, .btn-outline-secondary:hover {
.btn-outline-secondary.focus, .btn-outline-secondary:focus, .btn-outline-secondary:hover {
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
}
}
.btn-outline-secondary.active, .btn-outline-secondary:active, .btn-outline-secondary:focus {
.btn-outline-secondary.active, .btn-outline-secondary:active, .btn-outline-secondary:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2)
}
}
.btn-outline-primary {
.btn-outline-primary {
color: #5c4ac7;
color: #5c4ac7;
background-color: #ffffff;
background-color: #ffffff;
border-color: #5c4ac7;
border-color: #5c4ac7;
-webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary:hover {
.btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary:hover {
background: #5c4ac7;
background: #5c4ac7;
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
color: #ffffff;
color: #ffffff;
border-color: #5c4ac7
border-color: #5c4ac7
}
}
.btn-outline-primary.active, .btn-outline-primary:active, .btn-outline-primary:focus {
.btn-outline-primary.active, .btn-outline-primary:active, .btn-outline-primary:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
background: #6352ce
background: #6352ce
}
}
.btn-outline-success {
.btn-outline-success {
color: #26dad2;
color: #26dad2;
background-color: transparent;
background-color: transparent;
border-color: #26dad2;
border-color: #26dad2;
-webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-outline-success.focus, .btn-outline-success:focus, .btn-outline-success:hover {
.btn-outline-success.focus, .btn-outline-success:focus, .btn-outline-success:hover {
background: #26dad2;
background: #26dad2;
border-color: #26dad2;
border-color: #26dad2;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2)
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2)
}
}
.btn-outline-success.active, .btn-outline-success:active, .btn-outline-success:focus {
.btn-outline-success.active, .btn-outline-success:active, .btn-outline-success:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
background: #1eacbe
background: #1eacbe
}
}
.btn-outline-info {
.btn-outline-info {
color: #1976d2;
color: #1976d2;
background-color: transparent;
background-color: transparent;
border-color: #1976d2;
border-color: #1976d2;
-webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-outline-info.focus, .btn-outline-info:focus, .btn-outline-info:hover {
.btn-outline-info.focus, .btn-outline-info:focus, .btn-outline-info:hover {
background: #1976d2;
background: #1976d2;
border-color: #1976d2;
border-color: #1976d2;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2)
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2)
}
}
.btn-outline-info.active, .btn-outline-info:active, .btn-outline-info:focus {
.btn-outline-info.active, .btn-outline-info:active, .btn-outline-info:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
background: #028ee1
background: #028ee1
}
}
.btn-outline-warning {
.btn-outline-warning {
color: #ffb22b;
color: #ffb22b;
background-color: transparent;
background-color: transparent;
border-color: #ffb22b;
border-color: #ffb22b;
-webkit-box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-outline-warning.focus, .btn-outline-warning:focus, .btn-outline-warning:hover {
.btn-outline-warning.focus, .btn-outline-warning:focus, .btn-outline-warning:hover {
background: #ffb22b;
background: #ffb22b;
border-color: #ffb22b;
border-color: #ffb22b;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2)
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2)
}
}
.btn-outline-warning.active, .btn-outline-warning:active, .btn-outline-warning:focus {
.btn-outline-warning.active, .btn-outline-warning:active, .btn-outline-warning:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
background: #e9ab2e
background: #e9ab2e
}
}
.btn-outline-danger {
.btn-outline-danger {
color: #ef5350;
color: #ef5350;
background-color: transparent;
background-color: transparent;
border-color: #ef5350;
border-color: #ef5350;
-webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.btn-outline-danger.focus, .btn-outline-danger:focus, .btn-outline-danger:hover {
.btn-outline-danger.focus, .btn-outline-danger:focus, .btn-outline-danger:hover {
background: #ef5350;
background: #ef5350;
border-color: #ef5350;
border-color: #ef5350;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)
}
}
.btn-outline-danger.active, .btn-outline-danger:active, .btn-outline-danger:focus {
.btn-outline-danger.active, .btn-outline-danger:active, .btn-outline-danger:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
background: #e6294b
background: #e6294b
}
}
.btn-outline-red {
.btn-outline-red {
color: #fb3a3a;
color: #fb3a3a;
background-color: transparent;
background-color: transparent;
border-color: #fb3a3a
border-color: #fb3a3a
}
}
.btn-outline-red.focus, .btn-outline-red:focus, .btn-outline-red:hover {
.btn-outline-red.focus, .btn-outline-red:focus, .btn-outline-red:hover {
background: #fb3a3a;
background: #fb3a3a;
border-color: #fb3a3a;
border-color: #fb3a3a;
color: #ffffff;
color: #ffffff;
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)
}
}
.btn-outline-red.active, .btn-outline-red:active, .btn-outline-red:focus {
.btn-outline-red.active, .btn-outline-red:active, .btn-outline-red:focus {
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
-webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
background: #e6294b
background: #e6294b
}
}
.btn-outline-inverse {
.btn-outline-inverse {
color: #2f3d4a;
color: #2f3d4a;
background-color: transparent;
background-color: transparent;
border-color: #2f3d4a
border-color: #2f3d4a
}
}
.btn-outline-inverse.focus, .btn-outline-inverse:focus, .btn-outline-inverse:hover {
.btn-outline-inverse.focus, .btn-outline-inverse:focus, .btn-outline-inverse:hover {
background: #2f3d4a;
background: #2f3d4a;
border-color: #2f3d4a;
border-color: #2f3d4a;
color: #ffffff
color: #ffffff
}
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:focus, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:focus, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
background-color: #6352ce;
background-color: #6352ce;
border: 1px solid #6352ce
border: 1px solid #6352ce
}
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success.focus, .btn-success.focus:active, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success.focus, .btn-success.focus:active, .btn-success:active:focus, .btn-success:active:hover, .btn-success:focus, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {
background-color: #1eacbe;
background-color: #1eacbe;
border: 1px solid #1eacbe
border: 1px solid #1eacbe
}
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info.focus, .btn-info.focus:active, .btn-info:active:focus, .btn-info:active:hover, .btn-info:focus, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover {
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info.focus, .btn-info.focus:active, .btn-info:active:focus, .btn-info:active:hover, .btn-info:focus, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover {
background-color: #028ee1;
background-color: #028ee1;
border: 1px solid #028ee1
border: 1px solid #028ee1
}
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning.focus, .btn-warning.focus:active, .btn-warning:active:focus, .btn-warning:active:hover, .btn-warning:focus, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover {
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning.focus, .btn-warning.focus:active, .btn-warning:active:focus, .btn-warning:active:hover, .btn-warning:focus, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover {
background-color: #e9ab2e;
background-color: #e9ab2e;
border: 1px solid #e9ab2e
border: 1px solid #e9ab2e
}
}
.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger.focus, .btn-danger.focus:active, .btn-danger:active:focus, .btn-danger:active:hover, .btn-danger:focus, .open>.dropdown-toggle.btn-danger.focus, .open>.dropdown-toggle.btn-danger:focus, .open>.dropdown-toggle.btn-danger:hover {
.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger.focus, .btn-danger.focus:active, .btn-danger:active:focus, .btn-danger:active:hover, .btn-danger:focus, .open>.dropdown-toggle.btn-danger.focus, .open>.dropdown-toggle.btn-danger:focus, .open>.dropdown-toggle.btn-danger:hover {
background-color: #e6294b;
background-color: #e6294b;
border: 1px solid #e6294b
border: 1px solid #e6294b
}
}
.btn-inverse.active, .btn-inverse.focus, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .btn-inverse:hover, .open>.dropdown-toggle.btn-inverse {
.btn-inverse.active, .btn-inverse.focus, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .btn-inverse:hover, .open>.dropdown-toggle.btn-inverse {
background-color: #232a37;
background-color: #232a37;
border: 1px solid #232a37
border: 1px solid #232a37
}
}
.btn-red.active, .btn-red.focus, .btn-red:active, .btn-red:focus, .btn-red:hover, .btn-red:hover, .open>.dropdown-toggle.btn-red {
.btn-red.active, .btn-red.focus, .btn-red:active, .btn-red:focus, .btn-red:hover, .btn-red:hover, .open>.dropdown-toggle.btn-red {
background-color: #d61f1f;
background-color: #d61f1f;
border: 1px solid #d61f1f;
border: 1px solid #d61f1f;
color: #ffffff
color: #ffffff
}
}
.button-box .btn {
.button-box .btn {
margin: 0 8px 8px 0px
margin: 0 8px 8px 0px
}
}
.btn-label {
.btn-label {
background: rgba(0, 0, 0, 0.05);
background: rgba(0, 0, 0, 0.05);
display: inline-block;
display: inline-block;
margin: -6px 12px -6px -14px;
margin: -6px 12px -6px -14px;
padding: 7px 15px
padding: 7px 15px
}
}
.btn-facebook {
.btn-facebook {
color: #ffffff;
color: #ffffff;
background-color: #3b5998
background-color: #3b5998
}
}
.btn-twitter {
.btn-twitter {
color: #ffffff;
color: #ffffff;
background-color: #55acee
background-color: #55acee
}
}
.btn-linkedin {
.btn-linkedin {
color: #ffffff;
color: #ffffff;
background-color: #007bb6
background-color: #007bb6
}
}
.btn-dribbble {
.btn-dribbble {
color: #ffffff;
color: #ffffff;
background-color: #ea4c89
background-color: #ea4c89
}
}
.btn-googleplus {
.btn-googleplus {
color: #ffffff;
color: #ffffff;
background-color: #dd4b39
background-color: #dd4b39
}
}
.btn-instagram {
.btn-instagram {
color: #ffffff;
color: #ffffff;
background-color: #3f729b
background-color: #3f729b
}
}
.btn-pinterest {
.btn-pinterest {
color: #ffffff;
color: #ffffff;
background-color: #cb2027
background-color: #cb2027
}
}
.btn-dropbox {
.btn-dropbox {
color: #ffffff;
color: #ffffff;
background-color: #007ee5
background-color: #007ee5
}
}
.btn-flickr {
.btn-flickr {
color: #ffffff;
color: #ffffff;
background-color: #ff0084
background-color: #ff0084
}
}
.btn-tumblr {
.btn-tumblr {
color: #ffffff;
color: #ffffff;
background-color: #32506d
background-color: #32506d
}
}
.btn-skype {
.btn-skype {
color: #ffffff;
color: #ffffff;
background-color: #00aff0
background-color: #00aff0
}
}
.btn-youtube {
.btn-youtube {
color: #ffffff;
color: #ffffff;
background-color: #bb0000
background-color: #bb0000
}
}
.btn-github {
.btn-github {
color: #ffffff;
color: #ffffff;
background-color: #171515
background-color: #171515
}
}
.notify {
.notify {
position: relative;
position: relative;
top: -22px;
top: -22px;
right: -9px
right: -9px
}
}
.notify .heartbit {
.notify .heartbit {
position: absolute;
position: absolute;
top: -20px;
top: -20px;
right: -4px;
right: -4px;
height: 25px;
height: 25px;
width: 25px;
width: 25px;
z-index: 10;
z-index: 10;
border: 5px solid #ef5350;
border: 5px solid #ef5350;
border-radius: 70px;
border-radius: 70px;
-moz-animation: heartbit 1s ease-out;
-moz-animation: heartbit 1s ease-out;
-moz-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation: heartbit 1s ease-out;
-o-animation: heartbit 1s ease-out;
-o-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-webkit-animation: heartbit 1s ease-out;
-webkit-animation: heartbit 1s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
animation-iteration-count: infinite
}
}
.notify .point {
.notify .point {
width: 6px;
width: 6px;
height: 6px;
height: 6px;
-webkit-border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border-radius: 30px;
background-color: #ef5350;
background-color: #ef5350;
position: absolute;
position: absolute;
right: 6px;
right: 6px;
top: -10px
top: -10px
}
}
@-moz-keyframes heartbit {
@-moz-keyframes heartbit {
0% {
0% {
-moz-transform: scale(0);
-moz-transform: scale(0);
opacity: 0.0
opacity: 0.0
}
}
25% {
25% {
-moz-transform: scale(0.1);
-moz-transform: scale(0.1);
opacity: 0.1
opacity: 0.1
}
}
50% {
50% {
-moz-transform: scale(0.5);
-moz-transform: scale(0.5);
opacity: 0.3
opacity: 0.3
}
}
75% {
75% {
-moz-transform: scale(0.8);
-moz-transform: scale(0.8);
opacity: 0.5
opacity: 0.5
}
}
to {
to {
-moz-transform: scale(1);
-moz-transform: scale(1);
opacity: 0.0
opacity: 0.0
}
}
}
}
@-webkit-keyframes heartbit {
@-webkit-keyframes heartbit {
0% {
0% {
-webkit-transform: scale(0);
-webkit-transform: scale(0);
opacity: 0.0
opacity: 0.0
}
}
25% {
25% {
-webkit-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity: 0.1
opacity: 0.1
}
}
50% {
50% {
-webkit-transform: scale(0.5);
-webkit-transform: scale(0.5);
opacity: 0.3
opacity: 0.3
}
}
75% {
75% {
-webkit-transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 0.5
opacity: 0.5
}
}
to {
to {
-webkit-transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0
opacity: 0.0
}
}
}
}
.fileupload {
.fileupload {
overflow: hidden;
overflow: hidden;
position: relative
position: relative
}
}
.fileupload input.upload {
.fileupload input.upload {
cursor: pointer;
cursor: pointer;
filter: alpha(opacity=0);
filter: alpha(opacity=0);
font-size: 20px;
font-size: 20px;
margin: 0;
margin: 0;
opacity: 0;
opacity: 0;
padding: 0;
padding: 0;
position: absolute;
position: absolute;
right: 0;
right: 0;
top: 0
top: 0
}
}
.mega-dropdown {
.mega-dropdown {
position: static;
position: static;
width: 100%
width: 100%
}
}
.mega-dropdown .dropdown-menu {
.mega-dropdown .dropdown-menu {
width: 100%;
width: 100%;
padding: 30px;
padding: 30px;
margin-top: 0px
margin-top: 0px
}
}
.mega-dropdown ul {
.mega-dropdown ul {
padding: 0px
padding: 0px
}
}
.mega-dropdown ul li {
.mega-dropdown ul li {
list-style: none
list-style: none
}
}
.mega-dropdown .carousel-item .container {
.mega-dropdown .carousel-item .container {
padding: 0px
padding: 0px
}
}
.mega-dropdown .nav-accordion .card {
.mega-dropdown .nav-accordion .card {
margin-bottom: 1px
margin-bottom: 1px
}
}
.mega-dropdown .nav-accordion .card-header {
.mega-dropdown .nav-accordion .card-header {
background: #ffffff
background: #ffffff
}
}
.mega-dropdown .nav-accordion .card-header h5 {
.mega-dropdown .nav-accordion .card-header h5 {
margin: 0px
margin: 0px
}
}
.mega-dropdown .nav-accordion .card-header h5 a {
.mega-dropdown .nav-accordion .card-header h5 a {
text-decoration: none;
text-decoration: none;
color: #67757c
color: #67757c
}
}
ul.list-style-none {
ul.list-style-none {
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
ul.list-style-none li {
ul.list-style-none li {
list-style: none
list-style: none
}
}
ul.list-style-none li a {
ul.list-style-none li a {
color: #67757c;
color: #67757c;
padding: 8px 0px;
padding: 8px 0px;
display: block;
display: block;
text-decoration: none
text-decoration: none
}
}
ul.list-style-none li a:hover {
ul.list-style-none li a:hover {
color: #1976d2
color: #1976d2
}
}
.dropdown-item {
.dropdown-item {
padding: 8px 1rem;
padding: 8px 1rem;
color: #67757c
color: #67757c
}
}
.custom-select {
.custom-select {
background: url(../../assets/images/custom-select.png) right 0.75rem center no-repeat
background: url(../../assets/images/custom-select.png) right 0.75rem center no-repeat
}
}
textarea {
textarea {
resize: none
resize: none
}
}
.form-control {
.form-control {
color: #67757c;
color: #67757c;
min-height: 38px;
min-height: 38px;
display: initial
display: initial
}
}
.form-control-sm {
.form-control-sm {
min-height: 20px
min-height: 20px
}
}
.form-control:disabled, .form-control[readonly] {
.form-control:disabled, .form-control[readonly] {
opacity: 0.7
opacity: 0.7
}
}
.custom-control-input:focus~.custom-control-indicator {
.custom-control-input:focus~.custom-control-indicator {
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none
box-shadow: none
}
}
.custom-control-input:checked~.custom-control-indicator {
.custom-control-input:checked~.custom-control-indicator {
background-color: #26dad2
background-color: #26dad2
}
}
form label {
form label {
font-weight: 400
font-weight: 400
}
}
.form-group {
.form-group {
margin-bottom: 25px
margin-bottom: 25px
}
}
.form-horizontal label {
.form-horizontal label {
margin-bottom: 0px
margin-bottom: 0px
}
}
.form-control-static {
.form-control-static {
padding-top: 0px
padding-top: 0px
}
}
.form-bordered .form-group {
.form-bordered .form-group {
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
padding-bottom: 20px
padding-bottom: 20px
}
}
.card-no-border .card {
.card-no-border .card {
border: 0px;
border: 0px;
border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05)
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05)
}
}
.card-no-border .shadow-none {
.card-no-border .shadow-none {
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none
box-shadow: none
}
}
.card-outline-danger, .card-outline-info, .card-outline-primary, .card-outline-success, .card-outline-warning {
.card-outline-danger, .card-outline-info, .card-outline-primary, .card-outline-success, .card-outline-warning {
background: #ffffff
background: #ffffff
}
}
.card-fullscreen {
.card-fullscreen {
position: fixed;
position: fixed;
top: 0px;
top: 0px;
left: 0px;
left: 0px;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
z-index: 9999;
z-index: 9999;
overflow: auto
overflow: auto
}
}
.css-bar:after {
.css-bar:after {
z-index: 1
z-index: 1
}
}
.css-bar>i {
.css-bar>i {
z-index: 10
z-index: 10
}
}
.single-column .left-sidebar {
.single-column .left-sidebar {
display: none
display: none
}
}
.single-column .page-wrapper {
.single-column .page-wrapper {
margin-left: 0px
margin-left: 0px
}
}
.fix-width {
.fix-width {
width: 100%;
width: 100%;
max-width: 1170px;
max-width: 1170px;
margin: 0 auto
margin: 0 auto
}
}
.card-default .card-header {
.card-default .card-header {
background: #ffffff;
background: #ffffff;
border-bottom: 0px
border-bottom: 0px
}
}
.progress {
.progress {
height: auto
height: auto
}
}
.card-group {
.card-group {
margin-bottom: 30px
margin-bottom: 30px
}
}
.preloader {
.preloader {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
top: 0px;
top: 0px;
position: fixed;
position: fixed;
z-index: 99999;
z-index: 99999;
background: #fff
background: #fff
}
}
.preloader .cssload-speeding-wheel {
.preloader .cssload-speeding-wheel {
position: absolute;
position: absolute;
top: calc(50% - 3.5px);
top: calc(50% - 3.5px);
left: calc(50% - 3.5px)
left: calc(50% - 3.5px)
}
}
#main-wrapper {
#main-wrapper {
width: 100%
width: 100%
}
}
.boxed #main-wrapper {
.boxed #main-wrapper {
width: 100%;
width: 100%;
max-width: 1300px;
max-width: 1300px;
margin: 0 auto;
margin: 0 auto;
-webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1)
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1)
}
}
.boxed #main-wrapper .sidebar-footer {
.boxed #main-wrapper .sidebar-footer {
position: absolute
position: absolute
}
}
.boxed #main-wrapper .footer {
.boxed #main-wrapper .footer {
display: none
display: none
}
}
.page-wrapper {
.page-wrapper {
background: #eef5f9;
background: #eef5f9;
padding-bottom: 60px
padding-bottom: 60px
}
}
.container-fluid {
.container-fluid {
padding: 0 30px 25px 30px
padding: 0 30px 25px 30px
}
}
.topbar {
.topbar {
position: relative;
position: relative;
z-index: 50
z-index: 50
}
}
.topbar .top-navbar {
.topbar .top-navbar {
min-height: 50px;
min-height: 50px;
padding: 0px 15px 0 0
padding: 0px 15px 0 0
}
}
.topbar .top-navbar .dropdown-toggle:after {
.topbar .top-navbar .dropdown-toggle:after {
display: none
display: none
}
}
.topbar .top-navbar .navbar-header {
.topbar .top-navbar .navbar-header {
line-height: 45px;
line-height: 45px;
text-align: center
text-align: center
}
}
.topbar .top-navbar .navbar-header .navbar-brand {
.topbar .top-navbar .navbar-header .navbar-brand {
margin-right: 0px;
margin-right: 0px;
padding-bottom: 0px;
padding-bottom: 0px;
padding-top: 0px
padding-top: 0px
}
}
.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
display: none
display: none
}
}
.topbar .top-navbar .navbar-header .navbar-brand b {
.topbar .top-navbar .navbar-header .navbar-brand b {
line-height: 60px;
line-height: 60px;
display: inline-block
display: inline-block
}
}
.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
padding-left: .75rem;
padding-left: .75rem;
padding-right: .75rem;
padding-right: .75rem;
font-size: 15px;
font-size: 15px;
line-height: 40px
line-height: 40px
}
}
.topbar .top-navbar .navbar-nav>.nav-item.show {
.topbar .top-navbar .navbar-nav>.nav-item.show {
background: rgba(0, 0, 0, 0.05)
background: rgba(0, 0, 0, 0.05)
}
}
.topbar .profile-pic {
.topbar .profile-pic {
width: 30px;
width: 30px;
border-radius: 100%
border-radius: 100%
}
}
.topbar .dropdown-menu {
.topbar .dropdown-menu {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
border-color: rgba(120, 130, 140, 0.13)
border-color: rgba(120, 130, 140, 0.13)
}
}
.topbar .dropdown-menu .dropdown-item {
.topbar .dropdown-menu .dropdown-item {
padding: 7px 1.5rem
padding: 7px 1.5rem
}
}
.topbar ul.dropdown-user {
.topbar ul.dropdown-user {
padding: 0px;
padding: 0px;
min-width: 270px
min-width: 270px
}
}
.topbar ul.dropdown-user li {
.topbar ul.dropdown-user li {
list-style: none;
list-style: none;
padding: 0px;
padding: 0px;
margin: 0px
margin: 0px
}
}
.topbar ul.dropdown-user li.divider {
.topbar ul.dropdown-user li.divider {
height: 1px;
height: 1px;
margin: 9px 0;
margin: 9px 0;
overflow: hidden;
overflow: hidden;
background-color: rgba(120, 130, 140, 0.13)
background-color: rgba(120, 130, 140, 0.13)
}
}
.topbar ul.dropdown-user li .dw-user-box {
.topbar ul.dropdown-user li .dw-user-box {
padding: 10px 15px
padding: 10px 15px
}
}
.topbar ul.dropdown-user li .dw-user-box .u-img {
.topbar ul.dropdown-user li .dw-user-box .u-img {
width: 70px;
width: 70px;
display: inline-block;
display: inline-block;
vertical-align: top
vertical-align: top
}
}
.topbar ul.dropdown-user li .dw-user-box .u-img img {
.topbar ul.dropdown-user li .dw-user-box .u-img img {
width: 100%;
width: 100%;
border-radius: 5px
border-radius: 5px
}
}
.topbar ul.dropdown-user li .dw-user-box .u-text {
.topbar ul.dropdown-user li .dw-user-box .u-text {
display: inline-block;
display: inline-block;
padding-left: 10px
padding-left: 10px
}
}
.topbar ul.dropdown-user li .dw-user-box .u-text h4 {
.topbar ul.dropdown-user li .dw-user-box .u-text h4 {
margin: 0px;
margin: 0px;
font-size: 15px
font-size: 15px
}
}
.topbar ul.dropdown-user li .dw-user-box .u-text p {
.topbar ul.dropdown-user li .dw-user-box .u-text p {
margin-bottom: 2px;
margin-bottom: 2px;
font-size: 12px
font-size: 12px
}
}
.topbar ul.dropdown-user li .dw-user-box .u-text .btn {
.topbar ul.dropdown-user li .dw-user-box .u-text .btn {
color: #ffffff;
color: #ffffff;
padding: 5px 10px;
padding: 5px 10px;
display: inline-block
display: inline-block
}
}
.topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover {
.topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover {
background: #e6294b
background: #e6294b
}
}
.topbar ul.dropdown-user li a {
.topbar ul.dropdown-user li a {
padding: 9px 15px;
padding: 9px 15px;
display: block;
display: block;
color: #67757c
color: #67757c
}
}
.topbar ul.dropdown-user li a:hover {
.topbar ul.dropdown-user li a:hover {
background: #f2f4f8;
background: #f2f4f8;
color: #1976d2;
color: #1976d2;
text-decoration: none
text-decoration: none
}
}
.search-box .app-search {
.search-box .app-search {
position: absolute;
position: absolute;
margin: 0px;
margin: 0px;
display: block;
display: block;
z-index: 110;
z-index: 110;
width: 100%;
width: 100%;
top: -1px;
top: -1px;
-webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
display: none;
display: none;
left: 0px
left: 0px
}
}
.search-box .app-search input {
.search-box .app-search input {
width: 100.5%;
width: 100.5%;
padding: 20px 40px 20px 20px;
padding: 20px 40px 20px 20px;
border-radius: 0px;
border-radius: 0px;
font-size: 17px;
font-size: 17px;
-webkit-transition: 0.5s ease-in;
-webkit-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
transition: 0.5s ease-in;
height: 61px
height: 61px
}
}
.search-box .app-search input:focus {
.search-box .app-search input:focus {
border-color: #ffffff
border-color: #ffffff
}
}
.search-box .app-search .srh-btn {
.search-box .app-search .srh-btn {
position: absolute;
position: absolute;
top: 23px;
top: 23px;
cursor: pointer;
cursor: pointer;
background: #ffffff;
background: #ffffff;
width: 15px;
width: 15px;
height: 15px;
height: 15px;
right: 20px;
right: 20px;
font-size: 14px
font-size: 14px
}
}
.mini-sidebar .top-navbar .navbar-header {
.mini-sidebar .top-navbar .navbar-header {
width: 60px;
width: 60px;
text-align: center
text-align: center
}
}
.logo-center .top-navbar .navbar-header {
.logo-center .top-navbar .navbar-header {
position: absolute;
position: absolute;
left: 0;
left: 0;
right: 0;
right: 0;
margin: 0 auto
margin: 0 auto
}
}
.page-titles {
.page-titles {
background: #ffffff;
background: #ffffff;
margin: 0 0px 9px;
margin: 0 0px 9px;
padding: 15px 10px;
padding: 15px 10px;
position: relative;
position: relative;
z-index: 10;
z-index: 10;
-webkit-box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1)
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1)
}
}
.page-titles h3 {
.page-titles h3 {
margin-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px
margin-top: 0px
}
}
.page-titles .breadcrumb {
.page-titles .breadcrumb {
padding: 0px;
padding: 0px;
background: transparent;
background: transparent;
font-size: 14px
font-size: 14px
}
}
.page-titles .breadcrumb li {
.page-titles .breadcrumb li {
margin-top: 0px;
margin-top: 0px;
margin-bottom: 0px
margin-bottom: 0px
}
}
.page-titles .breadcrumb .breadcrumb-item+.breadcrumb-item:before {
.page-titles .breadcrumb .breadcrumb-item+.breadcrumb-item:before {
content: "\e649";
content: "\e649";
font-family: themify;
font-family: themify;
color: #a6b7bf;
color: #a6b7bf;
font-size: 11px
font-size: 11px
}
}
.page-titles .breadcrumb .breadcrumb-item.active {
.page-titles .breadcrumb .breadcrumb-item.active {
color: #99abb4
color: #99abb4
}
}
@-webkit-keyframes rotate {
@-webkit-keyframes rotate {
0% {
0% {
-webkit-transform: rotate(0deg)
-webkit-transform: rotate(0deg)
}
}
to {
to {
-webkit-transform: rotate(360deg)
-webkit-transform: rotate(360deg)
}
}
}
}
@-moz-keyframes rotate {
@-moz-keyframes rotate {
0% {
0% {
-moz-transform: rotate(0deg)
-moz-transform: rotate(0deg)
}
}
to {
to {
-moz-transform: rotate(360deg)
-moz-transform: rotate(360deg)
}
}
}
}
@keyframes rotate {
@keyframes rotate {
0% {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
transform: rotate(0deg)
}
}
to {
to {
-webkit-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
transform: rotate(360deg)
}
}
}
}
.right-side-toggle {
.right-side-toggle {
position: relative
position: relative
}
}
.right-side-toggle i {
.right-side-toggle i {
-webkit-transition-property: -webkit-transform;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-property: transform, -webkit-transform;
-o-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
transition-duration: 1s;
-webkit-animation-name: rotate;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-name: rotate;
animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-timing-function: linear;
position: absolute;
position: absolute;
top: 11px;
top: 11px;
left: 11px
left: 11px
}
}
.right-sidebar {
.right-sidebar {
position: fixed;
position: fixed;
right: -240px;
right: -240px;
width: 240px;
width: 240px;
display: none;
display: none;
z-index: 1100;
z-index: 1100;
background: #ffffff;
background: #ffffff;
top: 0px;
top: 0px;
padding-bottom: 20px;
padding-bottom: 20px;
height: 100%;
height: 100%;
-webkit-box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease
transition: all 0.3s ease
}
}
.right-sidebar .rpanel-title {
.right-sidebar .rpanel-title {
display: block;
display: block;
padding: 19px 20px;
padding: 19px 20px;
color: #ffffff;
color: #ffffff;
text-transform: uppercase;
text-transform: uppercase;
font-size: 15px;
font-size: 15px;
background: #1976d2
background: #1976d2
}
}
.right-sidebar .rpanel-title span {
.right-sidebar .rpanel-title span {
float: right;
float: right;
cursor: pointer;
cursor: pointer;
font-size: 11px
font-size: 11px
}
}
.right-sidebar .rpanel-title span:hover {
.right-sidebar .rpanel-title span:hover {
color: #ffffff
color: #ffffff
}
}
.right-sidebar .r-panel-body {
.right-sidebar .r-panel-body {
padding: 20px
padding: 20px
}
}
.right-sidebar .r-panel-body ul {
.right-sidebar .r-panel-body ul {
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
.right-sidebar .r-panel-body ul li {
.right-sidebar .r-panel-body ul li {
list-style: none;
list-style: none;
padding: 5px 0
padding: 5px 0
}
}
.shw-rside {
.shw-rside {
right: 0px;
right: 0px;
width: 240px;
width: 360px;
display: block
display: block
}
}
.chatonline img {
.chatonline img {
margin-right: 10px;
margin-right: 10px;
float: left;
float: left;
width: 30px
width: 30px
}
}
.chatonline li a {
.chatonline li a {
padding: 13px 0;
padding: 13px 0;
float: left;
float: left;
width: 100%
width: 100%
}
}
.chatonline li a span {
.chatonline li a span {
color: #67757c
color: #67757c
}
}
.chatonline li a span small {
.chatonline li a span small {
display: block;
display: block;
font-size: 10px
font-size: 10px
}
}
ul#themecolors {
ul#themecolors {
display: block
display: block
}
}
ul#themecolors li {
ul#themecolors li {
display: inline-block
display: inline-block
}
}
ul#themecolors li:first-child {
ul#themecolors li:first-child {
display: block
display: block
}
}
ul#themecolors li a {
ul#themecolors li a {
width: 50px;
width: 50px;
height: 50px;
height: 50px;
display: inline-block;
display: inline-block;
margin: 5px;
margin: 5px;
color: transparent;
color: transparent;
position: relative
position: relative
}
}
ul#themecolors li a.working:before {
ul#themecolors li a.working:before {
content: "\f00c";
content: "\f00c";
font-family: "FontAwesome";
font-family: "FontAwesome";
font-size: 18px;
font-size: 18px;
line-height: 50px;
line-height: 50px;
width: 50px;
width: 50px;
height: 50px;
height: 50px;
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
color: #ffffff;
color: #ffffff;
text-align: center
text-align: center
}
}
.default-theme {
.default-theme {
background: #99abb4
background: #99abb4
}
}
.green-theme {
.green-theme {
background: #26dad2
background: #26dad2
}
}
.yellow-theme {
.yellow-theme {
background: #ffb22b
background: #ffb22b
}
}
.red-theme {
.red-theme {
background: #ef5350
background: #ef5350
}
}
.blue-theme {
.blue-theme {
background: #1976d2
background: #1976d2
}
}
.purple-theme {
.purple-theme {
background: #7460ee
background: #7460ee
}
}
.megna-theme {
.megna-theme {
background: #00897b
background: #00897b
}
}
.default-dark-theme {
.default-dark-theme {
background: #263238;
background: #263238;
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #99abb4), color-stop(99%, #99abb4));
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #99abb4), color-stop(99%, #99abb4));
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);
background: linear-gradient(to right, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%)
background: linear-gradient(to right, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%)
}
}
.green-dark-theme {
.green-dark-theme {
background: #263238;
background: #263238;
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #00c292 23%, #26dad2 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #00c292 23%, #26dad2 99%);
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #26dad2), color-stop(99%, #26dad2));
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #26dad2), color-stop(99%, #26dad2));
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);
background: linear-gradient(to right, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%)
background: linear-gradient(to right, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%)
}
}
.yellow-dark-theme {
.yellow-dark-theme {
background: #263238;
background: #263238;
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #ef5350), color-stop(99%, #ef5350));
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #ef5350), color-stop(99%, #ef5350));
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: linear-gradient(to right, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%)
background: linear-gradient(to right, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%)
}
}
.blue-dark-theme {
.blue-dark-theme {
background: #263238;
background: #263238;
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%);
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%);
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #1976d2), color-stop(99%, #1976d2));
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #1976d2), color-stop(99%, #1976d2));
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%);
background: linear-gradient(to right, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%)
background: linear-gradient(to right, #263238 0%, #263238 23%, #1976d2 23%, #1976d2 99%)
}
}
.purple-dark-theme {
.purple-dark-theme {
background: #263238;
background: #263238;
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%);
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%);
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #7460ee), color-stop(99%, #7460ee));
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #7460ee), color-stop(99%, #7460ee));
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%);
background: linear-gradient(to right, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%)
background: linear-gradient(to right, #263238 0%, #263238 23%, #7460ee 23%, #7460ee 99%)
}
}
.megna-dark-theme {
.megna-dark-theme {
background: #263238;
background: #263238;
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #00897b), color-stop(99%, #00897b));
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #00897b), color-stop(99%, #00897b));
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);
background: linear-gradient(to right, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%)
background: linear-gradient(to right, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%)
}
}
.red-dark-theme {
.red-dark-theme {
background: #263238;
background: #263238;
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #ef5350), color-stop(99%, #ef5350));
background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #ef5350), color-stop(99%, #ef5350));
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: -o-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);
background: linear-gradient(to right, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%)
background: linear-gradient(to right, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%)
}
}
.page-titles {
.page-titles {
padding-bottom: 0px
padding-bottom: 0px
}
}
.footer {
.footer {
bottom: 0;
bottom: 0;
color: #67757c;
color: #67757c;
left: 0px;
left: 0px;
padding: 17px 15px;
padding: 17px 15px;
position: absolute;
position: absolute;
right: 0;
right: 0;
border-top: 1px solid rgba(120, 130, 140, 0.13);
border-top: 1px solid rgba(120, 130, 140, 0.13);
background: #ffffff
background: #ffffff
}
}
.card {
.card {
margin-bottom: 30px
margin-bottom: 30px
}
}
.card .card-subtitle {
.card .card-subtitle {
font-weight: 300;
font-weight: 300;
margin-bottom: 15px;
margin-bottom: 15px;
color: #99abb4
color: #99abb4
}
}
.card-inverse .card-bodyquote .blockquote-footer, .card-inverse .card-link, .card-inverse .card-subtitle, .card-inverse .card-text {
.card-inverse .card-bodyquote .blockquote-footer, .card-inverse .card-link, .card-inverse .card-subtitle, .card-inverse .card-text {
color: rgba(255, 255, 255, 0.65)
color: rgba(255, 255, 255, 0.65)
}
}
.card-success {
.card-success {
background: #26dad2;
background: #26dad2;
border-color: #26dad2
border-color: #26dad2
}
}
.card-danger {
.card-danger {
background: #ef5350;
background: #ef5350;
border-color: #ef5350
border-color: #ef5350
}
}
.card-warning {
.card-warning {
background: #ffb22b;
background: #ffb22b;
border-color: #ffb22b
border-color: #ffb22b
}
}
.card-info {
.card-info {
background: #1976d2;
background: #1976d2;
border-color: #1976d2
border-color: #1976d2
}
}
.card-primary {
.card-primary {
background: #5c4ac7;
background: #5c4ac7;
border-color: #5c4ac7
border-color: #5c4ac7
}
}
.card-dark {
.card-dark {
background: #2f3d4a;
background: #2f3d4a;
border-color: #2f3d4a
border-color: #2f3d4a
}
}
.card-megna {
.card-megna {
background: #00897b;
background: #00897b;
border-color: #00897b
border-color: #00897b
}
}
.button-group .btn {
.button-group .btn {
margin-bottom: 5px;
margin-bottom: 5px;
margin-right: 5px
margin-right: 5px
}
}
.no-button-group .btn {
.no-button-group .btn {
margin-bottom: 5px;
margin-bottom: 5px;
margin-right: 0px
margin-right: 0px
}
}
.btn .text-active {
.btn .text-active {
display: none
display: none
}
}
.btn.active .text-active {
.btn.active .text-active {
display: inline-block
display: inline-block
}
}
.btn.active .text {
.btn.active .text {
display: none
display: none
}
}
.card-actions {
.card-actions {
float: right
float: right
}
}
.card-actions a {
.card-actions a {
cursor: pointer;
cursor: pointer;
color: #67757c;
color: #67757c;
opacity: 0.7;
opacity: 0.7;
padding-left: 7px;
padding-left: 7px;
font-size: 13px
font-size: 13px
}
}
.card-actions a:hover {
.card-actions a:hover {
opacity: 1
opacity: 1
}
}
.card-columns .card {
.card-columns .card {
margin-bottom: 20px
margin-bottom: 20px
}
}
.collapsing {
.collapsing {
-webkit-transition: height .08s ease;
-webkit-transition: height .08s ease;
-o-transition: height .08s ease;
-o-transition: height .08s ease;
transition: height .08s ease
transition: height .08s ease
}
}
.card-info {
.card-info {
background: #1976d2;
background: #1976d2;
border-color: #1976d2
border-color: #1976d2
}
}
.card-primary {
.card-primary {
background: #5c4ac7;
background: #5c4ac7;
border-color: #5c4ac7
border-color: #5c4ac7
}
}
.card-outline-info {
.card-outline-info {
border-color: #1976d2
border-color: #1976d2
}
}
.card-outline-info .card-header {
.card-outline-info .card-header {
background: #1976d2;
background: #1976d2;
border-color: #1976d2
border-color: #1976d2
}
}
.card-outline-inverse {
.card-outline-inverse {
border-color: #2f3d4a
border-color: #2f3d4a
}
}
.card-outline-inverse .card-header {
.card-outline-inverse .card-header {
background: #2f3d4a;
background: #2f3d4a;
border-color: #2f3d4a
border-color: #2f3d4a
}
}
.card-outline-warning {
.card-outline-warning {
border-color: #ffb22b
border-color: #ffb22b
}
}
.card-outline-warning .card-header {
.card-outline-warning .card-header {
background: #ffb22b;
background: #ffb22b;
border-color: #ffb22b
border-color: #ffb22b
}
}
.card-outline-success {
.card-outline-success {
border-color: #26dad2
border-color: #26dad2
}
}
.card-outline-success .card-header {
.card-outline-success .card-header {
background: #26dad2;
background: #26dad2;
border-color: #26dad2
border-color: #26dad2
}
}
.card-outline-danger {
.card-outline-danger {
border-color: #ef5350
border-color: #ef5350
}
}
.card-outline-danger .card-header {
.card-outline-danger .card-header {
background: #ef5350;
background: #ef5350;
border-color: #ef5350
border-color: #ef5350
}
}
.card-outline-primary {
.card-outline-primary {
border-color: #5c4ac7
border-color: #5c4ac7
}
}
.card-outline-primary .card-header {
.card-outline-primary .card-header {
background: #5c4ac7;
background: #5c4ac7;
border-color: #5c4ac7
border-color: #5c4ac7
}
}
.bc-colored .breadcrumb-item, .bc-colored .breadcrumb-item a {
.bc-colored .breadcrumb-item, .bc-colored .breadcrumb-item a {
color: #ffffff
color: #ffffff
}
}
.bc-colored .breadcrumb-item.active, .bc-colored .breadcrumb-item a.active {
.bc-colored .breadcrumb-item.active, .bc-colored .breadcrumb-item a.active {
opacity: 0.7
opacity: 0.7
}
}
.bc-colored .breadcrumb-item+.breadcrumb-item:before {
.bc-colored .breadcrumb-item+.breadcrumb-item:before {
color: rgba(255, 255, 255, 0.4)
color: rgba(255, 255, 255, 0.4)
}
}
.breadcrumb {
.breadcrumb {
margin-bottom: 0px
margin-bottom: 0px
}
}
ul.list-icons {
ul.list-icons {
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
ul.list-icons li {
ul.list-icons li {
list-style: none;
list-style: none;
line-height: 30px;
line-height: 30px;
margin: 5px 0;
margin: 5px 0;
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
ul.list-icons li a {
ul.list-icons li a {
color: #67757c
color: #67757c
}
}
ul.list-icons li a:hover {
ul.list-icons li a:hover {
color: #1976d2
color: #1976d2
}
}
ul.list-icons li i {
ul.list-icons li i {
font-size: 13px;
font-size: 13px;
padding-right: 8px
padding-right: 8px
}
}
ul.list-inline li {
ul.list-inline li {
display: inline-block;
display: inline-block;
padding: 0 8px
padding: 0 8px
}
}
ul.two-part {
ul.two-part {
margin: 0px
margin: 0px
}
}
ul.two-part li {
ul.two-part li {
width: 48.8%
width: 48.8%
}
}
html body .accordion .card {
html body .accordion .card {
margin-bottom: 0px
margin-bottom: 0px
}
}
.flot-chart {
.flot-chart {
display: block;
display: block;
height: 400px
height: 400px
}
}
.flot-chart-content {
.flot-chart-content {
width: 100%;
width: 100%;
height: 100%
height: 100%
}
}
html body .flotTip, html body .jqstooltip {
html body .flotTip, html body .jqstooltip {
width: auto!important;
width: auto!important;
height: auto!important;
height: auto!important;
background: #263238;
background: #263238;
color: #ffffff;
color: #ffffff;
padding: 5px 10px
padding: 5px 10px
}
}
body .jqstooltip {
body .jqstooltip {
border-color: transparent;
border-color: transparent;
border-radius: 60px
border-radius: 60px
}
}
.chart {
.chart {
position: relative;
position: relative;
display: inline-block;
display: inline-block;
width: 100px;
width: 100px;
height: 100px;
height: 100px;
margin-top: 20px;
margin-top: 20px;
margin-bottom: 20px;
margin-bottom: 20px;
text-align: center
text-align: center
}
}
.chart canvas {
.chart canvas {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0
left: 0
}
}
.chart.chart-widget-pie {
.chart.chart-widget-pie {
margin-top: 5px;
margin-top: 5px;
margin-bottom: 5px
margin-bottom: 5px
}
}
.pie-chart>span {
.pie-chart>span {
left: 0;
left: 0;
margin-top: -2px;
margin-top: -2px;
position: absolute;
position: absolute;
right: 0;
right: 0;
text-align: center;
text-align: center;
top: 50%;
top: 50%;
-webkit-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
transform: translateY(-50%)
}
}
.chart>span>img {
.chart>span>img {
left: 0;
left: 0;
margin-top: -2px;
margin-top: -2px;
position: absolute;
position: absolute;
right: 0;
right: 0;
text-align: center;
text-align: center;
top: 50%;
top: 50%;
width: 60%;
width: 60%;
height: 60%;
height: 60%;
-webkit-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto
margin: 0 auto
}
}
.percent {
.percent {
display: inline-block;
display: inline-block;
line-height: 100px;
line-height: 100px;
z-index: 2;
z-index: 2;
font-weight: 600;
font-weight: 600;
font-size: 18px;
font-size: 18px;
color: #263238
color: #263238
}
}
.percent:after {
.percent:after {
content: '%';
content: '%';
margin-left: 0.1em;
margin-left: 0.1em;
font-size: .8em
font-size: .8em
}
}
.ct-charts {
.ct-charts {
position: relative
position: relative
}
}
.amp-pxl {
.amp-pxl {
position: relative
position: relative
}
}
.amp-pxl .ct-series-a .ct-bar {
.amp-pxl .ct-series-a .ct-bar {
stroke: #1976d2
stroke: #1976d2
}
}
.amp-pxl .ct-series-b .ct-bar {
.amp-pxl .ct-series-b .ct-bar {
stroke: #26dad2
stroke: #26dad2
}
}
.c3-chart-arcs-title, .c3-legend-item {
.c3-chart-arcs-title, .c3-legend-item {
font-family: "Poppins", sans-serif;
font-family: "Poppins", sans-serif;
fill: #67757c
fill: #67757c
}
}
html body #visitor .c3-chart-arcs-title {
html body #visitor .c3-chart-arcs-title {
font-size: 18px;
font-size: 18px;
fill: #99abb4
fill: #99abb4
}
}
.stylish-table thead th {
.stylish-table thead th {
font-weight: 400;
font-weight: 400;
color: #99abb4;
color: #99abb4;
border: 0px;
border: 0px;
border-bottom: 1px
border-bottom: 1px
}
}
.stylish-table tbody tr {
.stylish-table tbody tr {
border-left: 4px solid #ffffff
border-left: 4px solid #ffffff
}
}
.stylish-table tbody tr.active, .stylish-table tbody tr:hover {
.stylish-table tbody tr.active, .stylish-table tbody tr:hover {
border-left: 4px solid #1976d2
border-left: 4px solid #1976d2
}
}
.stylish-table tbody td {
.stylish-table tbody td {
vertical-align: middle
vertical-align: middle
}
}
.stylish-table tbody td h6 {
.stylish-table tbody td h6 {
font-weight: 500;
font-weight: 500;
margin-bottom: 0px;
margin-bottom: 0px;
white-space: nowrap
white-space: nowrap
}
}
.stylish-table tbody td small {
.stylish-table tbody td small {
line-height: 12px;
line-height: 12px;
white-space: nowrap
white-space: nowrap
}
}
.campaign {
.campaign {
height: 280px
height: 280px
}
}
.campaign .ct-series-a .ct-area {
.campaign .ct-series-a .ct-area {
fill-opacity: 0.2;
fill-opacity: 0.2;
fill: url(#gradient)
fill: url(#gradient)
}
}
.campaign .ct-series-a .ct-line, .campaign .ct-series-a .ct-point {
.campaign .ct-series-a .ct-line, .campaign .ct-series-a .ct-point {
stroke: #26dad2;
stroke: #26dad2;
stroke-width: 2px
stroke-width: 2px
}
}
.campaign .ct-series-b .ct-area {
.campaign .ct-series-b .ct-area {
fill: #1976d2;
fill: #1976d2;
fill-opacity: 0.1
fill-opacity: 0.1
}
}
.campaign .ct-series-b .ct-line, .campaign .ct-series-b .ct-point {
.campaign .ct-series-b .ct-line, .campaign .ct-series-b .ct-point {
stroke: #1976d2;
stroke: #1976d2;
stroke-width: 2px
stroke-width: 2px
}
}
.campaign .ct-series-a .ct-point, .campaign .ct-series-b .ct-point {
.campaign .ct-series-a .ct-point, .campaign .ct-series-b .ct-point {
stroke-width: 6px
stroke-width: 6px
}
}
.campaign2 .ct-series-a .ct-area {
.campaign2 .ct-series-a .ct-area {
fill-opacity: 0.2;
fill-opacity: 0.2;
fill: url(#gradient)
fill: url(#gradient)
}
}
.campaign2 .ct-series-a .ct-line, .campaign2 .ct-series-a .ct-point {
.campaign2 .ct-series-a .ct-line, .campaign2 .ct-series-a .ct-point {
stroke: #26dad2;
stroke: #26dad2;
stroke-width: 2px
stroke-width: 2px
}
}
.campaign2 .ct-series-b .ct-area {
.campaign2 .ct-series-b .ct-area {
fill: #1976d2;
fill: #1976d2;
fill-opacity: 0.1
fill-opacity: 0.1
}
}
.campaign2 .ct-series-b .ct-line, .campaign2 .ct-series-b .ct-point {
.campaign2 .ct-series-b .ct-line, .campaign2 .ct-series-b .ct-point {
stroke: #1976d2;
stroke: #1976d2;
stroke-width: 2px
stroke-width: 2px
}
}
.campaign2 .ct-series-a .ct-point, .campaign2 .ct-series-b .ct-point {
.campaign2 .ct-series-a .ct-point, .campaign2 .ct-series-b .ct-point {
stroke-width: 6px
stroke-width: 6px
}
}
.usage .ct-series-a .ct-line {
.usage .ct-series-a .ct-line {
stroke-width: 3px;
stroke-width: 3px;
stroke: rgba(255, 255, 255, 0.5)
stroke: rgba(255, 255, 255, 0.5)
}
}
.total-sales {
.total-sales {
position: relative
position: relative
}
}
.total-sales .chartist-tooltip {
.total-sales .chartist-tooltip {
background: #2f3d4a
background: #2f3d4a
}
}
.total-sales .ct-series-a .ct-bar {
.total-sales .ct-series-a .ct-bar {
stroke: #1976d2
stroke: #1976d2
}
}
.total-sales .ct-series-b .ct-bar {
.total-sales .ct-series-b .ct-bar {
stroke: #26dad2
stroke: #26dad2
}
}
.total-sales .ct-series-c .ct-bar {
.total-sales .ct-series-c .ct-bar {
stroke: #ef5350
stroke: #ef5350
}
}
.ct-chart {
.ct-chart {
position: relative
position: relative
}
}
.ct-chart .ct-series-a .ct-slice-donut {
.ct-chart .ct-series-a .ct-slice-donut {
stroke: #26dad2
stroke: #26dad2
}
}
.ct-chart .ct-series-b .ct-slice-donut {
.ct-chart .ct-series-b .ct-slice-donut {
stroke: #f2f4f8
stroke: #f2f4f8
}
}
.ct-chart .ct-series-c .ct-slice-donut {
.ct-chart .ct-series-c .ct-slice-donut {
stroke: #1976d2
stroke: #1976d2
}
}
#visitfromworld path.jvectormap-region.jvectormap-element {
#visitfromworld path.jvectormap-region.jvectormap-element {
stroke-width: 1px;
stroke-width: 1px;
stroke: #99abb4
stroke: #99abb4
}
}
.jvectormap-goback, .jvectormap-zoomin, .jvectormap-zoomout {
.jvectormap-goback, .jvectormap-zoomin, .jvectormap-zoomout {
background: #99abb4
background: #99abb4
}
}
.browser td {
.browser td {
vertical-align: middle;
vertical-align: middle;
padding-left: 0px
padding-left: 0px
}
}
#calendar .fc-today-button {
#calendar .fc-today-button {
display: none
display: none
}
}
.calender-sidebar {
.calender-sidebar {
background: rgba(0, 0, 0, 0.02)
background: rgba(0, 0, 0, 0.02)
}
}
.ecomm-donute svg text {
.ecomm-donute svg text {
font-family: "Poppins", sans-serif!important;
font-family: "Poppins", sans-serif!important;
font-size: 12px!important;
font-size: 12px!important;
font-weight: 500!important
font-weight: 500!important
}
}
.total-revenue4 {
.total-revenue4 {
position: relative
position: relative
}
}
.total-revenue4 .ct-series-a .ct-line {
.total-revenue4 .ct-series-a .ct-line {
stroke: #1976d2;
stroke: #1976d2;
stroke-width: 1px
stroke-width: 1px
}
}
.total-revenue4 .ct-series-a .ct-point {
.total-revenue4 .ct-series-a .ct-point {
stroke: #1976d2;
stroke: #1976d2;
stroke-width: 5px
stroke-width: 5px
}
}
.total-revenue4 .ct-series-b .ct-line {
.total-revenue4 .ct-series-b .ct-line {
stroke: #26dad2;
stroke: #26dad2;
stroke-width: 1px
stroke-width: 1px
}
}
.total-revenue4 .ct-series-b .ct-point {
.total-revenue4 .ct-series-b .ct-point {
stroke: #26dad2;
stroke: #26dad2;
stroke-width: 5px
stroke-width: 5px
}
}
.total-revenue4 .ct-series-a .ct-area {
.total-revenue4 .ct-series-a .ct-area {
fill: #1976d2;
fill: #1976d2;
fill-opacity: 0.2
fill-opacity: 0.2
}
}
.total-revenue4 .ct-series-b .ct-area {
.total-revenue4 .ct-series-b .ct-area {
fill: #26dad2;
fill: #26dad2;
fill-opacity: 0.2
fill-opacity: 0.2
}
}
.product-overview.table tbody tr td {
.product-overview.table tbody tr td {
vertical-align: middle
vertical-align: middle
}
}
.sparkchart {
.sparkchart {
margin-bottom: -2px
margin-bottom: -2px
}
}
.btn-file {
.btn-file {
overflow: hidden;
overflow: hidden;
position: relative;
position: relative;
vertical-align: middle
vertical-align: middle
}
}
.btn-file>input {
.btn-file>input {
position: absolute;
position: absolute;
top: 0;
top: 0;
right: 0;
right: 0;
margin: 0;
margin: 0;
opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
filter: alpha(opacity=0);
font-size: 23px;
font-size: 23px;
height: 100%;
height: 100%;
width: 100%;
width: 100%;
direction: ltr;
direction: ltr;
cursor: pointer;
cursor: pointer;
border-radius: 0px
border-radius: 0px
}
}
.fileinput .input-group-addon {
.fileinput .input-group-addon {
border: none;
border: none;
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
background: #ffffff;
background: #ffffff;
margin-bottom: 1px
margin-bottom: 1px
}
}
.fileinput .form-control {
.fileinput .form-control {
padding-top: 7px;
padding-top: 7px;
padding-bottom: 5px;
padding-bottom: 5px;
display: inline-block;
display: inline-block;
margin-bottom: 0px;
margin-bottom: 0px;
vertical-align: middle;
vertical-align: middle;
cursor: text
cursor: text
}
}
.fileinput .thumbnail {
.fileinput .thumbnail {
overflow: hidden;
overflow: hidden;
display: inline-block;
display: inline-block;
margin-bottom: 5px;
margin-bottom: 5px;
vertical-align: middle;
vertical-align: middle;
text-align: center
text-align: center
}
}
.fileinput .thumbnail>img {
.fileinput .thumbnail>img {
max-height: 100%
max-height: 100%
}
}
.fileinput .btn {
.fileinput .btn {
vertical-align: middle
vertical-align: middle
}
}
.fileinput-exists .fileinput-new, .fileinput-new .fileinput-exists {
.fileinput-exists .fileinput-new, .fileinput-new .fileinput-exists {
display: none
display: none
}
}
.fileinput-inline .fileinput-controls {
.fileinput-inline .fileinput-controls {
display: inline
display: inline
}
}
.fileinput-filename {
.fileinput-filename {
vertical-align: middle;
vertical-align: middle;
display: inline-block;
display: inline-block;
overflow: hidden
overflow: hidden
}
}
.form-control .fileinput-filename {
.form-control .fileinput-filename {
vertical-align: bottom
vertical-align: bottom
}
}
.fileinput.input-group>* {
.fileinput.input-group>* {
position: relative;
position: relative;
z-index: 2
z-index: 2
}
}
.fileinput.input-group>.btn-file {
.fileinput.input-group>.btn-file {
z-index: 1
z-index: 1
}
}
.product-review {
.product-review {
margin: 0px;
margin: 0px;
padding: 25px
padding: 25px
}
}
.product-review li {
.product-review li {
display: block;
display: block;
padding: 20px 0;
padding: 20px 0;
list-style: none
list-style: none
}
}
.product-review li .font, .product-review li span {
.product-review li .font, .product-review li span {
display: inline-block;
display: inline-block;
margin-left: 10px
margin-left: 10px
}
}
.social-profile {
.social-profile {
text-align: center;
text-align: center;
background: rgba(7, 10, 43, 0.8)
background: rgba(7, 10, 43, 0.8)
}
}
.customtab li a.nav-link, .profile-tab li a.nav-link {
.customtab li a.nav-link, .profile-tab li a.nav-link {
border: 0px;
border: 0px;
padding: 15px 20px;
padding: 15px 20px;
color: #67757c
color: #67757c
}
}
.customtab li a.nav-link.active, .profile-tab li a.nav-link.active {
.customtab li a.nav-link.active, .profile-tab li a.nav-link.active {
border-bottom: 2px solid #1976d2;
border-bottom: 2px solid #1976d2;
color: #1976d2
color: #1976d2
}
}
.customtab li a.nav-link:hover, .profile-tab li a.nav-link:hover {
.customtab li a.nav-link:hover, .profile-tab li a.nav-link:hover {
color: #1976d2
color: #1976d2
}
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: 100%
width: 100%
}
}
.bootstrap-select .dropdown-menu li a {
.bootstrap-select .dropdown-menu li a {
display: block;
display: block;
padding: 7px 20px;
padding: 7px 20px;
clear: both;
clear: both;
font-weight: 400;
font-weight: 400;
line-height: 1.42857143;
line-height: 1.42857143;
color: #67757c;
color: #67757c;
white-space: nowrap
white-space: nowrap
}
}
.bootstrap-select .dropdown-menu li a:focus, .bootstrap-select .dropdown-menu li a:hover {
.bootstrap-select .dropdown-menu li a:focus, .bootstrap-select .dropdown-menu li a:hover {
color: #1976d2;
color: #1976d2;
background: #f2f4f8
background: #f2f4f8
}
}
.bootstrap-select .show>.dropdown-menu {
.bootstrap-select .show>.dropdown-menu {
display: block
display: block
}
}
.bootstrap-select .dropdown-toggle.bs-placeholder:hover {
.bootstrap-select .dropdown-toggle.bs-placeholder:hover {
color: #ffffff
color: #ffffff
}
}
.bootstrap-touchspin .input-group-btn-vertical>.btn {
.bootstrap-touchspin .input-group-btn-vertical>.btn {
padding: 9px 10px
padding: 9px 10px
}
}
.select2-container--default .select2-selection--single {
.select2-container--default .select2-selection--single {
border-color: #b1b8bb;
border-color: #b1b8bb;
height: 38px
height: 38px
}
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px
line-height: 38px
}
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 33px
height: 33px
}
}
.input-form .btn {
.input-form .btn {
padding: 8px 12px
padding: 8px 12px
}
}
.form-material .form-group {
.form-material .form-group {
overflow: hidden
overflow: hidden
}
}
.form-material .form-control {
.form-material .form-control {
background-color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
background-position: center bottom, center calc(100% - 1px);
background-position: center bottom, center calc(100% - 1px);
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 0 2px, 100% 1px;
background-size: 0 2px, 100% 1px;
padding: 0;
padding: 0;
-webkit-transition: background 0s ease-out 0s;
-webkit-transition: background 0s ease-out 0s;
-o-transition: background 0s ease-out 0s;
-o-transition: background 0s ease-out 0s;
transition: background 0s ease-out 0s
transition: background 0s ease-out 0s
}
}
.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(rgba(120, 130, 140, 0.13)), to(rgba(120, 130, 140, 0.13)));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(rgba(120, 130, 140, 0.13)), to(rgba(120, 130, 140, 0.13)));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
border: 0 none;
border: 0 none;
border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
float: none
float: none
}
}
.form-material .form-control.focus, .form-material .form-control:focus {
.form-material .form-control.focus, .form-material .form-control:focus {
background-size: 100% 2px, 100% 1px;
background-size: 100% 2px, 100% 1px;
outline: 0 none;
outline: 0 none;
-webkit-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s
transition-duration: 0.3s
}
}
.form-control-line .form-group {
.form-control-line .form-group {
overflow: hidden
overflow: hidden
}
}
.form-control-line .form-control {
.form-control-line .form-control {
border: 0px;
border: 0px;
border-radius: 0px;
border-radius: 0px;
padding-left: 0px;
padding-left: 0px;
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
}
}
.form-control-line .form-control:focus {
.form-control-line .form-control:focus {
border-bottom: 1px solid #1976d2
border-bottom: 1px solid #1976d2
}
}
.floating-labels .form-group {
.floating-labels .form-group {
position: relative
position: relative
}
}
.floating-labels .form-control {
.floating-labels .form-control {
padding: 10px 10px 10px 0;
padding: 10px 10px 10px 0;
display: block;
display: block;
border: none;
border: none;
font-family: "Poppins", sans-serif;
font-family: "Poppins", sans-serif;
border-radius: 0px;
border-radius: 0px;
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
}
}
.floating-labels .form-control:focus {
.floating-labels .form-control:focus {
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none
box-shadow: none
}
}
.floating-labels select.form-control>option {
.floating-labels select.form-control>option {
font-size: 14px
font-size: 14px
}
}
.floating-labels .has-error .form-control {
.floating-labels .has-error .form-control {
border-bottom: 1px solid #ef5350
border-bottom: 1px solid #ef5350
}
}
.floating-labels .has-warning .form-control {
.floating-labels .has-warning .form-control {
border-bottom: 1px solid #ffb22b
border-bottom: 1px solid #ffb22b
}
}
.floating-labels .has-success .form-control {
.floating-labels .has-success .form-control {
border-bottom: 1px solid #26dad2
border-bottom: 1px solid #26dad2
}
}
.floating-labels .form-control:focus {
.floating-labels .form-control:focus {
outline: none;
outline: none;
border: none
border: none
}
}
.floating-labels label {
.floating-labels label {
color: #67757c;
color: #67757c;
position: absolute;
position: absolute;
cursor: auto;
cursor: auto;
top: 5px;
top: 5px;
-o-transition: 0.2s ease all;
-o-transition: 0.2s ease all;
transition: 0.2s ease all;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all
-webkit-transition: 0.2s ease all
}
}
.floating-labels .focused label {
.floating-labels .focused label {
top: -20px;
top: -20px;
font-size: 12px;
font-size: 12px;
color: #263238
color: #263238
}
}
.floating-labels .bar {
.floating-labels .bar {
position: relative;
position: relative;
display: block
display: block
}
}
.floating-labels .bar:after, .floating-labels .bar:before {
.floating-labels .bar:after, .floating-labels .bar:before {
content: '';
content: '';
height: 2px;
height: 2px;
width: 0;
width: 0;
bottom: 1px;
bottom: 1px;
position: absolute;
position: absolute;
background: #1976d2;
background: #1976d2;
-o-transition: 0.2s ease all;
-o-transition: 0.2s ease all;
transition: 0.2s ease all;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all
-webkit-transition: 0.2s ease all
}
}
.floating-labels .bar:before {
.floating-labels .bar:before {
left: 50%
left: 50%
}
}
.floating-labels .bar:after {
.floating-labels .bar:after {
right: 50%
right: 50%
}
}
.floating-labels .form-control:focus~.bar:after, .floating-labels .form-control:focus~.bar:before {
.floating-labels .form-control:focus~.bar:after, .floating-labels .form-control:focus~.bar:before {
width: 50%
width: 50%
}
}
.floating-labels .highlight {
.floating-labels .highlight {
position: absolute;
position: absolute;
height: 60%;
height: 60%;
width: 100px;
width: 100px;
top: 25%;
top: 25%;
left: 0;
left: 0;
pointer-events: none;
pointer-events: none;
opacity: 0.5
opacity: 0.5
}
}
.floating-labels .input-lg, .floating-labels .input-lg~label {
.floating-labels .input-lg, .floating-labels .input-lg~label {
font-size: 24px
font-size: 24px
}
}
.floating-labels .input-sm, .floating-labels .input-sm~label {
.floating-labels .input-sm, .floating-labels .input-sm~label {
font-size: 16px
font-size: 16px
}
}
.has-warning .bar:after, .has-warning .bar:before {
.has-warning .bar:after, .has-warning .bar:before {
background: #ffb22b
background: #ffb22b
}
}
.has-success .bar:after, .has-success .bar:before {
.has-success .bar:after, .has-success .bar:before {
background: #26dad2
background: #26dad2
}
}
.has-error .bar:after, .has-error .bar:before {
.has-error .bar:after, .has-error .bar:before {
background: #ef5350
background: #ef5350
}
}
.has-warning .form-control:focus~label, .has-warning .form-control:valid~label {
.has-warning .form-control:focus~label, .has-warning .form-control:valid~label {
color: #ffb22b
color: #ffb22b
}
}
.has-success .form-control:focus~label, .has-success .form-control:valid~label {
.has-success .form-control:focus~label, .has-success .form-control:valid~label {
color: #26dad2
color: #26dad2
}
}
.has-error .form-control:focus~label, .has-error .form-control:valid~label {
.has-error .form-control:focus~label, .has-error .form-control:valid~label {
color: #ef5350
color: #ef5350
}
}
.has-feedback label~.t-0 {
.has-feedback label~.t-0 {
top: 0
top: 0
}
}
.form-group.error input, .form-group.error select, .form-group.error textarea {
.form-group.error input, .form-group.error select, .form-group.error textarea {
border: 1px solid #ef5350
border: 1px solid #ef5350
}
}
.form-group.validate input, .form-group.validate select, .form-group.validate textarea {
.form-group.validate input, .form-group.validate select, .form-group.validate textarea {
border: 1px solid #26dad2
border: 1px solid #26dad2
}
}
.form-group.error .help-block ul {
.form-group.error .help-block ul {
padding: 0px;
padding: 0px;
color: #ef5350
color: #ef5350
}
}
.form-group.error .help-block ul li {
.form-group.error .help-block ul li {
list-style: none
list-style: none
}
}
.form-group.issue .help-block ul {
.form-group.issue .help-block ul {
padding: 0px;
padding: 0px;
color: #ffb22b
color: #ffb22b
}
}
.form-group.issue .help-block ul li {
.form-group.issue .help-block ul li {
list-style: none
list-style: none
}
}
.pagination-circle li.active a {
.pagination-circle li.active a {
background: #26dad2
background: #26dad2
}
}
.pagination-circle li a {
.pagination-circle li a {
width: 40px;
width: 40px;
height: 40px;
height: 40px;
background: #f2f4f8;
background: #f2f4f8;
border: 0px;
border: 0px;
text-align: center;
text-align: center;
border-radius: 100%
border-radius: 100%
}
}
.pagination-circle li a:first-child, .pagination-circle li a:last-child {
.pagination-circle li a:first-child, .pagination-circle li a:last-child {
border-radius: 100%
border-radius: 100%
}
}
.pagination-circle li a:hover {
.pagination-circle li a:hover {
background: #26dad2;
background: #26dad2;
color: #ffffff
color: #ffffff
}
}
.pagination-circle li.disabled a {
.pagination-circle li.disabled a {
background: #f2f4f8;
background: #f2f4f8;
color: rgba(120, 130, 140, 0.13)
color: rgba(120, 130, 140, 0.13)
}
}
.dropzone {
.dropzone {
border: 1px dashed #b1b8bb
border: 1px dashed #b1b8bb
}
}
.dropzone .dz-message {
.dropzone .dz-message {
padding: 5% 0;
padding: 5% 0;
margin: 0px
margin: 0px
}
}
.asColorPicker-dropdown {
.asColorPicker-dropdown {
max-width: 260px
max-width: 260px
}
}
.asColorPicker-trigger {
.asColorPicker-trigger {
position: absolute;
position: absolute;
top: 0;
top: 0;
right: -35px;
right: -35px;
height: 38px;
height: 38px;
width: 37px;
width: 37px;
border: 0
border: 0
}
}
.asColorPicker-clear {
.asColorPicker-clear {
display: none;
display: none;
position: absolute;
position: absolute;
top: 5px;
top: 5px;
right: 10px;
right: 10px;
text-decoration: none
text-decoration: none
}
}
table th {
table th {
font-weight: 400
font-weight: 400
}
}
.daterangepicker td.active, .daterangepicker td.active:hover {
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #1976d2
background-color: #1976d2
}
}
.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
background: #1976d2;
background: #1976d2;
color: #ffffff
color: #ffffff
}
}
.datepicker td, .datepicker th {
.datepicker td, .datepicker th {
padding: 5px 10px
padding: 5px 10px
}
}
.icheck-list, .icolors {
.icheck-list, .icolors {
padding: 0;
padding: 0;
margin: 0;
margin: 0;
list-style: none
list-style: none
}
}
.icolors>li {
.icolors>li {
padding: 0;
padding: 0;
margin: 2px;
margin: 2px;
float: left;
float: left;
display: inline-block;
display: inline-block;
height: 30px;
height: 30px;
width: 30px;
width: 30px;
background: #263238;
background: #263238;
text-align: center
text-align: center
}
}
.icolors>li.active:after {
.icolors>li.active:after {
content: "\2713 ";
content: "\2713 ";
color: #ffffff;
color: #ffffff;
line-height: 30px
line-height: 30px
}
}
.icolors>li:first-child {
.icolors>li:first-child {
margin-left: 0
margin-left: 0
}
}
.icolors>li.orange {
.icolors>li.orange {
background: #ef5350
background: #ef5350
}
}
.icolors>li.yellow {
.icolors>li.yellow {
background: #ffb22b
background: #ffb22b
}
}
.icolors>li.info {
.icolors>li.info {
background: #1976d2
background: #1976d2
}
}
.icolors>li.green {
.icolors>li.green {
background: #26dad2
background: #26dad2
}
}
.icolors>li.red {
.icolors>li.red {
background: #fb3a3a
background: #fb3a3a
}
}
.icolors>li.purple {
.icolors>li.purple {
background: #7460ee
background: #7460ee
}
}
.icolors>li.blue {
.icolors>li.blue {
background: #02bec9
background: #02bec9
}
}
.icheck-list {
.icheck-list {
float: left;
float: left;
padding-right: 50px;
padding-right: 50px;
padding-top: 10px
padding-top: 10px
}
}
.icheck-list li {
.icheck-list li {
padding-bottom: 5px
padding-bottom: 5px
}
}
.icheck-list li label {
.icheck-list li label {
padding-left: 10px
padding-left: 10px
}
}
.note-icon-caret, .note-popover {
.note-icon-caret, .note-popover {
display: none
display: none
}
}
.note-editor.note-frame {
.note-editor.note-frame {
border: 1px solid #b1b8bb
border: 1px solid #b1b8bb
}
}
.note-editor.note-frame .panel-heading {
.note-editor.note-frame .panel-heading {
padding: 6px 10px 10px;
padding: 6px 10px 10px;
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
}
}
.label {
.label {
display: inline-block
display: inline-block
}
}
.table th, .table thead th {
.table th, .table thead th {
border: 0px
border: 0px
}
}
.color-table.primary-table thead th {
.color-table.primary-table thead th {
background-color: #5c4ac7;
background-color: #5c4ac7;
color: #ffffff
color: #ffffff
}
}
.table-striped tbody tr:nth-of-type(odd) {
.table-striped tbody tr:nth-of-type(odd) {
background: #f2f4f8
background: #f2f4f8
}
}
.color-table.success-table thead th {
.color-table.success-table thead th {
background-color: #26dad2;
background-color: #26dad2;
color: #ffffff
color: #ffffff
}
}
.color-table.info-table thead th {
.color-table.info-table thead th {
background-color: #1976d2;
background-color: #1976d2;
color: #ffffff
color: #ffffff
}
}
.color-table.warning-table thead th {
.color-table.warning-table thead th {
background-color: #ffb22b;
background-color: #ffb22b;
color: #ffffff
color: #ffffff
}
}
.color-table.danger-table thead th {
.color-table.danger-table thead th {
background-color: #ef5350;
background-color: #ef5350;
color: #ffffff
color: #ffffff
}
}
.color-table.inverse-table thead th {
.color-table.inverse-table thead th {
background-color: #2f3d4a;
background-color: #2f3d4a;
color: #ffffff
color: #ffffff
}
}
.color-table.dark-table thead th {
.color-table.dark-table thead th {
background-color: #263238;
background-color: #263238;
color: #ffffff
color: #ffffff
}
}
.color-table.red-table thead th {
.color-table.red-table thead th {
background-color: #fb3a3a;
background-color: #fb3a3a;
color: #ffffff
color: #ffffff
}
}
.color-table.purple-table thead th {
.color-table.purple-table thead th {
background-color: #7460ee;
background-color: #7460ee;
color: #ffffff
color: #ffffff
}
}
.color-table.muted-table thead th {
.color-table.muted-table thead th {
background-color: #99abb4;
background-color: #99abb4;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.primary-bordered-table {
.color-bordered-table.primary-bordered-table {
border: 2px solid #5c4ac7
border: 2px solid #5c4ac7
}
}
.color-bordered-table.primary-bordered-table thead th {
.color-bordered-table.primary-bordered-table thead th {
background-color: #5c4ac7;
background-color: #5c4ac7;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.success-bordered-table {
.color-bordered-table.success-bordered-table {
border: 2px solid #26dad2
border: 2px solid #26dad2
}
}
.color-bordered-table.success-bordered-table thead th {
.color-bordered-table.success-bordered-table thead th {
background-color: #26dad2;
background-color: #26dad2;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.info-bordered-table {
.color-bordered-table.info-bordered-table {
border: 2px solid #1976d2
border: 2px solid #1976d2
}
}
.color-bordered-table.info-bordered-table thead th {
.color-bordered-table.info-bordered-table thead th {
background-color: #1976d2;
background-color: #1976d2;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.warning-bordered-table {
.color-bordered-table.warning-bordered-table {
border: 2px solid #ffb22b
border: 2px solid #ffb22b
}
}
.color-bordered-table.warning-bordered-table thead th {
.color-bordered-table.warning-bordered-table thead th {
background-color: #ffb22b;
background-color: #ffb22b;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.danger-bordered-table {
.color-bordered-table.danger-bordered-table {
border: 2px solid #ef5350
border: 2px solid #ef5350
}
}
.color-bordered-table.danger-bordered-table thead th {
.color-bordered-table.danger-bordered-table thead th {
background-color: #ef5350;
background-color: #ef5350;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.inverse-bordered-table {
.color-bordered-table.inverse-bordered-table {
border: 2px solid #2f3d4a
border: 2px solid #2f3d4a
}
}
.color-bordered-table.inverse-bordered-table thead th {
.color-bordered-table.inverse-bordered-table thead th {
background-color: #2f3d4a;
background-color: #2f3d4a;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.dark-bordered-table {
.color-bordered-table.dark-bordered-table {
border: 2px solid #263238
border: 2px solid #263238
}
}
.color-bordered-table.dark-bordered-table thead th {
.color-bordered-table.dark-bordered-table thead th {
background-color: #263238;
background-color: #263238;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.red-bordered-table {
.color-bordered-table.red-bordered-table {
border: 2px solid #fb3a3a
border: 2px solid #fb3a3a
}
}
.color-bordered-table.red-bordered-table thead th {
.color-bordered-table.red-bordered-table thead th {
background-color: #fb3a3a;
background-color: #fb3a3a;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.purple-bordered-table {
.color-bordered-table.purple-bordered-table {
border: 2px solid #7460ee
border: 2px solid #7460ee
}
}
.color-bordered-table.purple-bordered-table thead th {
.color-bordered-table.purple-bordered-table thead th {
background-color: #7460ee;
background-color: #7460ee;
color: #ffffff
color: #ffffff
}
}
.color-bordered-table.muted-bordered-table {
.color-bordered-table.muted-bordered-table {
border: 2px solid #99abb4
border: 2px solid #99abb4
}
}
.color-bordered-table.muted-bordered-table thead th {
.color-bordered-table.muted-bordered-table thead th {
background-color: #99abb4;
background-color: #99abb4;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-primary-table {
.full-color-table.full-primary-table {
background-color: #f1effd
background-color: #f1effd
}
}
.full-color-table.full-primary-table thead th {
.full-color-table.full-primary-table thead th {
background-color: #5c4ac7;
background-color: #5c4ac7;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-primary-table tbody td {
.full-color-table.full-primary-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-primary-table tr:hover {
.full-color-table.full-primary-table tr:hover {
background-color: #5c4ac7;
background-color: #5c4ac7;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-success-table {
.full-color-table.full-success-table {
background-color: #e8fdeb
background-color: #e8fdeb
}
}
.full-color-table.full-success-table thead th {
.full-color-table.full-success-table thead th {
background-color: #26dad2;
background-color: #26dad2;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-success-table tbody td {
.full-color-table.full-success-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-success-table tr:hover {
.full-color-table.full-success-table tr:hover {
background-color: #26dad2;
background-color: #26dad2;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-info-table {
.full-color-table.full-info-table {
background-color: #cfecfe
background-color: #cfecfe
}
}
.full-color-table.full-info-table thead th {
.full-color-table.full-info-table thead th {
background-color: #1976d2;
background-color: #1976d2;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-info-table tbody td {
.full-color-table.full-info-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-info-table tr:hover {
.full-color-table.full-info-table tr:hover {
background-color: #1976d2;
background-color: #1976d2;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-warning-table {
.full-color-table.full-warning-table {
background-color: #fff8ec
background-color: #fff8ec
}
}
.full-color-table.full-warning-table thead th {
.full-color-table.full-warning-table thead th {
background-color: #ffb22b;
background-color: #ffb22b;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-warning-table tbody td {
.full-color-table.full-warning-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-warning-table tr:hover {
.full-color-table.full-warning-table tr:hover {
background-color: #ffb22b;
background-color: #ffb22b;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-danger-table {
.full-color-table.full-danger-table {
background-color: #f9e7eb
background-color: #f9e7eb
}
}
.full-color-table.full-danger-table thead th {
.full-color-table.full-danger-table thead th {
background-color: #ef5350;
background-color: #ef5350;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-danger-table tbody td {
.full-color-table.full-danger-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-danger-table tr:hover {
.full-color-table.full-danger-table tr:hover {
background-color: #ef5350;
background-color: #ef5350;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-inverse-table {
.full-color-table.full-inverse-table {
background-color: #f6f6f6
background-color: #f6f6f6
}
}
.full-color-table.full-inverse-table thead th {
.full-color-table.full-inverse-table thead th {
background-color: #2f3d4a;
background-color: #2f3d4a;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-inverse-table tbody td {
.full-color-table.full-inverse-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-inverse-table tr:hover {
.full-color-table.full-inverse-table tr:hover {
background-color: #2f3d4a;
background-color: #2f3d4a;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-dark-table {
.full-color-table.full-dark-table {
background-color: rgba(43, 43, 43, 0.8)
background-color: rgba(43, 43, 43, 0.8)
}
}
.full-color-table.full-dark-table thead th {
.full-color-table.full-dark-table thead th {
background-color: #263238;
background-color: #263238;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-dark-table tbody td {
.full-color-table.full-dark-table tbody td {
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-dark-table tr:hover {
.full-color-table.full-dark-table tr:hover {
background-color: #263238;
background-color: #263238;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-red-table {
.full-color-table.full-red-table {
background-color: #f9e7eb
background-color: #f9e7eb
}
}
.full-color-table.full-red-table thead th {
.full-color-table.full-red-table thead th {
background-color: #fb3a3a;
background-color: #fb3a3a;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-red-table tbody td {
.full-color-table.full-red-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-red-table tr:hover {
.full-color-table.full-red-table tr:hover {
background-color: #fb3a3a;
background-color: #fb3a3a;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-purple-table {
.full-color-table.full-purple-table {
background-color: #f1effd
background-color: #f1effd
}
}
.full-color-table.full-purple-table thead th {
.full-color-table.full-purple-table thead th {
background-color: #7460ee;
background-color: #7460ee;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-purple-table tbody td {
.full-color-table.full-purple-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-purple-table tr:hover {
.full-color-table.full-purple-table tr:hover {
background-color: #7460ee;
background-color: #7460ee;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-muted-table {
.full-color-table.full-muted-table {
background-color: rgba(152, 166, 173, 0.2)
background-color: rgba(152, 166, 173, 0.2)
}
}
.full-color-table.full-muted-table thead th {
.full-color-table.full-muted-table thead th {
background-color: #99abb4;
background-color: #99abb4;
border: 0;
border: 0;
color: #ffffff
color: #ffffff
}
}
.full-color-table.full-muted-table tbody td {
.full-color-table.full-muted-table tbody td {
border: 0
border: 0
}
}
.full-color-table.full-muted-table tr:hover {
.full-color-table.full-muted-table tr:hover {
background-color: #99abb4;
background-color: #99abb4;
color: #ffffff
color: #ffffff
}
}
.dataTables_wrapper {
.dataTables_wrapper {
padding-top: 10px
padding-top: 10px
}
}
.dt-buttons {
.dt-buttons {
display: inline-block;
display: inline-block;
padding-top: 5px;
padding-top: 5px;
margin-bottom: 15px
margin-bottom: 15px
}
}
.dt-buttons .dt-button {
.dt-buttons .dt-button {
padding: 5px 15px;
padding: 5px 15px;
border-radius: 4px;
border-radius: 4px;
background: #1976d2;
background: #1976d2;
color: #ffffff;
color: #ffffff;
margin-right: 3px
margin-right: 3px
}
}
.dt-buttons .dt-button:hover {
.dt-buttons .dt-button:hover {
background: #2f3d4a
background: #2f3d4a
}
}
.dataTables_info, .dataTables_length {
.dataTables_info, .dataTables_length {
display: inline-block
display: inline-block
}
}
.dataTables_length {
.dataTables_length {
margin-top: 10px
margin-top: 10px
}
}
.dataTables_length select {
.dataTables_length select {
border: 0;
border: 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 0 2px, 100% 1px;
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: transparent;
-webkit-transition: background 0s ease-out;
-webkit-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
transition: background 0s ease-out;
transition: background 0s ease-out;
padding-bottom: 5px
padding-bottom: 5px
}
}
.dataTables_length select:focus {
.dataTables_length select:focus {
outline: none;
outline: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 100% 2px, 100% 1px;
background-size: 100% 2px, 100% 1px;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
-webkit-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s
transition-duration: 0.3s
}
}
.dataTables_filter {
.dataTables_filter {
float: right;
float: right;
margin-top: 10px
margin-top: 10px
}
}
.dataTables_filter input {
.dataTables_filter input {
border: 0;
border: 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 0 2px, 100% 1px;
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: transparent;
-webkit-transition: background 0s ease-out;
-webkit-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
transition: background 0s ease-out;
transition: background 0s ease-out;
float: none;
float: none;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
border-radius: 0;
border-radius: 0;
margin-left: 10px
margin-left: 10px
}
}
.dataTables_filter input:focus {
.dataTables_filter input:focus {
outline: none;
outline: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 100% 2px, 100% 1px;
background-size: 100% 2px, 100% 1px;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
-webkit-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s
transition-duration: 0.3s
}
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_desc_disabled {
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_desc_disabled {
/* background: transparent
/* background: transparent
background-color: #1976d2;
background-color: #1976d2;
color: #ffffff;*/
color: #ffffff;*/
}
}
.table thead
.table thead
{
{
background-color: #1976d2;
background-color: #1976d2;
color:#fff;
color:#fff;
}
}
table.dataTable thead .sorting_asc:after {
table.dataTable thead .sorting_asc:after {
content: "\f0de";
content: "\f0de";
margin-left: 10px;
margin-left: 10px;
font-family: fontawesome;
font-family: fontawesome;
cursor: pointer
cursor: pointer
}
}
table.dataTable thead .sorting_desc:after {
table.dataTable thead .sorting_desc:after {
content: "\f0dd";
content: "\f0dd";
margin-left: 10px;
margin-left: 10px;
font-family: fontawesome;
font-family: fontawesome;
cursor: pointer
cursor: pointer
}
}
table.dataTable thead .sorting:after {
table.dataTable thead .sorting:after {
content: "\f0dc";
content: "\f0dc";
margin-left: 10px;
margin-left: 10px;
font-family: fontawesome!important;
font-family: fontawesome!important;
cursor: pointer;
cursor: pointer;
color: rgba(50, 50, 50, 0.5)
color: rgba(50, 50, 50, 0.5)
}
}
.dataTables_wrapper .dataTables_paginate {
.dataTables_wrapper .dataTables_paginate {
float: right;
float: right;
text-align: right;
text-align: right;
padding-top: 0.25em
padding-top: 0.25em
}
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
.dataTables_wrapper .dataTables_paginate .paginate_button {
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: inline-block;
min-width: 1.5em;
min-width: 1.5em;
padding: 0.5em 1em;
padding: 0.5em 1em;
text-align: center;
text-align: center;
text-decoration: none;
text-decoration: none;
cursor: pointer;
cursor: pointer;
*cursor: hand;
*cursor: hand;
color: #67757c;
color: #67757c;
border: 1px solid #ddd
border: 1px solid #ddd
}
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #ffffff!important;
color: #ffffff!important;
border: 1px solid #1976d2;
border: 1px solid #1976d2;
background-color: #1976d2
background-color: #1976d2
}
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
cursor: default;
cursor: default;
color: #67757c;
color: #67757c;
border: 1px solid #ddd;
border: 1px solid #ddd;
background: transparent;
background: transparent;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none
box-shadow: none
}
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white;
color: white;
border: 1px solid #1976d2;
border: 1px solid #1976d2;
background-color: #1976d2
background-color: #1976d2
}
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
outline: none;
background-color: #67757c
background-color: #67757c
}
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
.dataTables_wrapper .dataTables_paginate .ellipsis {
padding: 0 1em
padding: 0 1em
}
}
.tablesaw-bar .btn-group label {
.tablesaw-bar .btn-group label {
color: #67757c!important
color: #67757c!important
}
}
.dt-bootstrap {
.dt-bootstrap {
display: block
display: block
}
}
.paging_simple_numbers .pagination .paginate_button {
.paging_simple_numbers .pagination .paginate_button {
padding: 0px;
padding: 0px;
background: #ffffff
background: #ffffff
}
}
.paging_simple_numbers .pagination .paginate_button:hover {
.paging_simple_numbers .pagination .paginate_button:hover {
background: #ffffff
background: #ffffff
}
}
.paging_simple_numbers .pagination .paginate_button a {
.paging_simple_numbers .pagination .paginate_button a {
padding: 2px 10px;
padding: 2px 10px;
border: 0px
border: 0px
}
}
.paging_simple_numbers .pagination .paginate_button.active a, .paging_simple_numbers .pagination .paginate_button:hover a {
.paging_simple_numbers .pagination .paginate_button.active a, .paging_simple_numbers .pagination .paginate_button:hover a {
background: #1976d2;
background: #1976d2;
color: #ffffff
color: #ffffff
}
}
#demo-show-entries {
#demo-show-entries {
border: 0;
border: 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 0 2px, 100% 1px;
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: transparent;
-webkit-transition: background 0s ease-out;
-webkit-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
transition: background 0s ease-out;
transition: background 0s ease-out;
padding-bottom: 5px;
padding-bottom: 5px;
color: #67757c
color: #67757c
}
}
#demo-show-entries:focus {
#demo-show-entries:focus {
outline: none;
outline: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 100% 2px, 100% 1px;
background-size: 100% 2px, 100% 1px;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
-webkit-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s
transition-duration: 0.3s
}
}
#demo-input-search2 {
#demo-input-search2 {
border: 0;
border: 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 0 2px, 100% 1px;
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: transparent;
-webkit-transition: background 0s ease-out;
-webkit-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
-o-transition: background 0s ease-out;
transition: background 0s ease-out;
transition: background 0s ease-out;
float: none;
float: none;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
border-radius: 0;
border-radius: 0;
margin-left: 10px;
margin-left: 10px;
color: #67757c
color: #67757c
}
}
#demo-input-search2:focus {
#demo-input-search2:focus {
outline: none;
outline: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(#b1b8bb, #b1b8bb);
background-size: 100% 2px, 100% 1px;
background-size: 100% 2px, 100% 1px;
-webkit-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
-webkit-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s
transition-duration: 0.3s
}
}
.footable .pagination li a {
.footable .pagination li a {
position: relative;
position: relative;
display: block;
display: block;
padding: .5rem .75rem;
padding: .5rem .75rem;
margin-left: -1px;
margin-left: -1px;
line-height: 1.25;
line-height: 1.25;
color: #0275d8;
color: #0275d8;
background-color: #ffffff;
background-color: #ffffff;
border: 1px solid #ddd
border: 1px solid #ddd
}
}
.footable .pagination li.active a {
.footable .pagination li.active a {
z-index: 2;
z-index: 2;
color: #fff;
color: #fff;
background-color: #0275d8;
background-color: #0275d8;
border-color: #0275d8
border-color: #0275d8
}
}
.footable .pagination li.disabled a {
.footable .pagination li.disabled a {
color: #636c72;
color: #636c72;
pointer-events: none;
pointer-events: none;
cursor: not-allowed;
cursor: not-allowed;
background-color: #ffffff;
background-color: #ffffff;
border-color: #ddd
border-color: #ddd
}
}
.footable .pagination li:first-child a {
.footable .pagination li:first-child a {
margin-left: 0;
margin-left: 0;
border-bottom-left-radius: .25rem;
border-bottom-left-radius: .25rem;
border-top-left-radius: .25rem
border-top-left-radius: .25rem
}
}
.footable-odd {
.footable-odd {
background: #f2f4f8
background: #f2f4f8
}
}
.icon-list-demo div {
.icon-list-demo div {
cursor: pointer;
cursor: pointer;
line-height: 60px;
line-height: 60px;
white-space: nowrap;
white-space: nowrap;
color: #67757c
color: #67757c
}
}
.icon-list-demo div:hover {
.icon-list-demo div:hover {
color: #263238
color: #263238
}
}
.icon-list-demo div p {
.icon-list-demo div p {
margin: 10px 0;
margin: 10px 0;
padding: 5px 0
padding: 5px 0
}
}
.icon-list-demo i {
.icon-list-demo i {
-webkit-transition: all 0.2s;
-webkit-transition: all 0.2s;
-webkit-transition: font-size .2s;
-webkit-transition: font-size .2s;
display: inline-block;
display: inline-block;
font-size: 18px;
font-size: 18px;
margin: 0 15px 0 10px;
margin: 0 15px 0 10px;
text-align: left;
text-align: left;
-o-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
transition: all 0.2s;
-o-transition: font-size .2s;
-o-transition: font-size .2s;
transition: font-size .2s;
transition: font-size .2s;
vertical-align: middle;
vertical-align: middle;
-webkit-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s
transition: all 0.3s ease 0s
}
}
.icon-list-demo .col-3, .icon-list-demo .col-md-4 {
.icon-list-demo .col-3, .icon-list-demo .col-md-4 {
border-radius: 4px
border-radius: 4px
}
}
.icon-list-demo .col-3:hover, .icon-list-demo .col-md-4:hover {
.icon-list-demo .col-3:hover, .icon-list-demo .col-md-4:hover {
background-color: #ebf3f5
background-color: #ebf3f5
}
}
.icon-list-demo .div:hover i {
.icon-list-demo .div:hover i {
font-size: 2em
font-size: 2em
}
}
.material-icon-list-demo .mdi {
.material-icon-list-demo .mdi {
font-size: 21px
font-size: 21px
}
}
.grid-stack-item-content {
.grid-stack-item-content {
background: #fff;
background: #fff;
color: #2b2b2b;
color: #2b2b2b;
text-align: center;
text-align: center;
font-size: 20px
font-size: 20px
}
}
.grid-stack>.grid-stack-item>.grid-stack-item-content {
.grid-stack>.grid-stack-item>.grid-stack-item-content {
border: 1px solid rgba(120, 130, 140, 0.13)
border: 1px solid rgba(120, 130, 140, 0.13)
}
}
.bootstrap-switch, .bootstrap-switch .bootstrap-switch-container {
.bootstrap-switch, .bootstrap-switch .bootstrap-switch-container {
border-radius: 2px
border-radius: 2px
}
}
.bootstrap-switch .bootstrap-switch-handle-on {
.bootstrap-switch .bootstrap-switch-handle-on {
border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px
border-top-left-radius: 2px
}
}
.bootstrap-switch .bootstrap-switch-handle-off {
.bootstrap-switch .bootstrap-switch-handle-off {
border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px
border-top-right-radius: 2px
}
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
color: #ffffff;
color: #ffffff;
background: #5c4ac7
background: #5c4ac7
}
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
color: #ffffff;
color: #ffffff;
background: #1976d2
background: #1976d2
}
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
color: #ffffff;
color: #ffffff;
background: #26dad2
background: #26dad2
}
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
color: #ffffff;
color: #ffffff;
background: #ffb22b
background: #ffb22b
}
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
color: #ffffff;
color: #ffffff;
background: #ef5350
background: #ef5350
}
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
color: #263238;
color: #263238;
background: #f2f4f8
background: #f2f4f8
}
}
.onoffswitch {
.onoffswitch {
position: relative;
position: relative;
width: 90px;
width: 90px;
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
-ms-user-select: none
-ms-user-select: none
}
}
.onoffswitch-checkbox {
.onoffswitch-checkbox {
display: none
display: none
}
}
.onoffswitch-label {
.onoffswitch-label {
display: block;
display: block;
overflow: hidden;
overflow: hidden;
cursor: pointer;
cursor: pointer;
border: 2px solid #26dad2;
border: 2px solid #26dad2;
border-radius: 20px
border-radius: 20px
}
}
.onoffswitch-inner {
.onoffswitch-inner {
display: block;
display: block;
width: 200%;
width: 200%;
margin-left: -100%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s
transition: margin 0.3s ease-in 0s
}
}
.onoffswitch-inner:after, .onoffswitch-inner:before {
.onoffswitch-inner:after, .onoffswitch-inner:before {
display: block;
display: block;
float: left;
float: left;
width: 50%;
width: 50%;
height: 30px;
height: 30px;
padding: 0;
padding: 0;
line-height: 30px;
line-height: 30px;
font-size: 14px;
font-size: 14px;
color: white;
color: white;
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
box-sizing: border-box
}
}
.onoffswitch-inner:before {
.onoffswitch-inner:before {
content: "ON";
content: "ON";
padding-left: 27px;
padding-left: 27px;
background-color: #26dad2;
background-color: #26dad2;
color: #FFFFFF
color: #FFFFFF
}
}
.onoffswitch-inner:after {
.onoffswitch-inner:after {
content: "OFF";
content: "OFF";
padding-right: 24px;
padding-right: 24px;
background-color: #EEEEEE;
background-color: #EEEEEE;
color: #999999;
color: #999999;
text-align: right
text-align: right
}
}
.onoffswitch-switch {
.onoffswitch-switch {
display: block;
display: block;
width: 23px;
width: 23px;
margin: 6px;
margin: 6px;
background: #FFFFFF;
background: #FFFFFF;
position: absolute;
position: absolute;
top: 0;
top: 0;
bottom: 0;
bottom: 0;
right: 56px;
right: 56px;
border: 2px solid #26dad2;
border: 2px solid #26dad2;
border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s
transition: all 0.3s ease-in 0s
}
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0
margin-left: 0
}
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px
right: 0px
}
}
.dp-selected[style] {
.dp-selected[style] {
background-color: #1976d2!important
background-color: #1976d2!important
}
}
.datepaginator-lg .pagination li a, .datepaginator-sm .pagination li a, .datepaginator .pagination li a {
.datepaginator-lg .pagination li a, .datepaginator-sm .pagination li a, .datepaginator .pagination li a {
padding: 0 5px;
padding: 0 5px;
height: 60px;
height: 60px;
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
float: left;
float: left;
position: relative
position: relative
}
}
.model_img {
.model_img {
cursor: pointer
cursor: pointer
}
}
.show-grid {
.show-grid {
margin-bottom: 10px;
margin-bottom: 10px;
padding: 0 15px
padding: 0 15px
}
}
.show-grid [class^=col-] {
.show-grid [class^=col-] {
padding-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-bottom: 10px;
border: 1px solid #b1b8bb;
border: 1px solid #b1b8bb;
background-color: #f2f4f8
background-color: #f2f4f8
}
}
.vtabs {
.vtabs {
display: table
display: table
}
}
.vtabs .tabs-vertical {
.vtabs .tabs-vertical {
width: 150px;
width: 150px;
border-bottom: 0px;
border-bottom: 0px;
border-right: 1px solid rgba(120, 130, 140, 0.13);
border-right: 1px solid rgba(120, 130, 140, 0.13);
display: table-cell;
display: table-cell;
vertical-align: top
vertical-align: top
}
}
.vtabs .tabs-vertical li .nav-link {
.vtabs .tabs-vertical li .nav-link {
color: #263238;
color: #263238;
margin-bottom: 10px;
margin-bottom: 10px;
border: 0px;
border: 0px;
border-radius: 4px 0 0 4px
border-radius: 4px 0 0 4px
}
}
.vtabs .tab-content {
.vtabs .tab-content {
display: table-cell;
display: table-cell;
padding: 20px;
padding: 10px;
vertical-align: top
vertical-align: top
}
}
.tabs-vertical li .nav-link.active, .tabs-vertical li .nav-link.active:focus, .tabs-vertical li .nav-link:hover {
.tabs-vertical li .nav-link.active, .tabs-vertical li .nav-link.active:focus, .tabs-vertical li .nav-link:hover {
background: #1976d2;
background: #1976d2;
border: 0px;
border: 0px;
color: #ffffff
color: #ffffff
}
}
.customvtab .tabs-vertical li .nav-link.active, .customvtab .tabs-vertical li .nav-link:focus, .customvtab .tabs-vertical li .nav-link:hover {
.customvtab .tabs-vertical li .nav-link.active, .customvtab .tabs-vertical li .nav-link:focus, .customvtab .tabs-vertical li .nav-link:hover {
background: #ffffff;
background: #ffffff;
border: 0px;
border: 0px;
border-right: 2px solid #1976d2;
border-right: 2px solid #1976d2;
margin-right: -1px;
margin-right: -1px;
color: #1976d2
color: #1976d2
}
}
.tabcontent-border {
.tabcontent-border {
border: 1px solid #ddd;
border: 1px solid #ddd;
border-top: 0px
border-top: 0px
}
}
.customtab2 li a.nav-link {
.customtab2 li a.nav-link {
border: 0px;
border: 0px;
margin-right: 3px;
margin-right: 3px;
color: #67757c
color: #67757c
}
}
.customtab2 li a.nav-link.active {
.customtab2 li a.nav-link.active {
background: #1976d2;
background: #1976d2;
color: #ffffff
color: #ffffff
}
}
.customtab2 li a.nav-link:hover {
.customtab2 li a.nav-link:hover {
color: #ffffff;
color: #ffffff;
background: #1976d2
background: #1976d2
}
}
.progress-bar.active, .progress.active .progress-bar {
.progress-bar.active, .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite
animation: progress-bar-stripes 2s linear infinite
}
}
.progress-vertical {
.progress-vertical {
min-height: 250px;
min-height: 250px;
height: 250px;
height: 250px;
position: relative;
position: relative;
display: inline-block;
display: inline-block;
margin-bottom: 0;
margin-bottom: 0;
margin-right: 20px
margin-right: 20px
}
}
.progress-vertical-bottom {
.progress-vertical-bottom {
min-height: 250px;
min-height: 250px;
height: 250px;
height: 250px;
position: relative;
position: relative;
display: inline-block;
display: inline-block;
margin-bottom: 0;
margin-bottom: 0;
margin-right: 20px;
margin-right: 20px;
-webkit-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg)
transform: rotate(180deg)
}
}
.progress-animated {
.progress-animated {
-webkit-animation-duration: 5s;
-webkit-animation-duration: 5s;
-webkit-animation-name: myanimation;
-webkit-animation-name: myanimation;
-webkit-transition: 5s all;
-webkit-transition: 5s all;
animation-duration: 5s;
animation-duration: 5s;
animation-name: myanimation;
animation-name: myanimation;
-o-transition: 5s all;
-o-transition: 5s all;
transition: 5s all
transition: 5s all
}
}
@-webkit-keyframes myanimation {
@-webkit-keyframes myanimation {
0% {
0% {
width: 0
width: 0
}
}
}
}
@keyframes myanimation {
@keyframes myanimation {
0% {
0% {
width: 0
width: 0
}
}
}
}
.jq-icon-info {
.jq-icon-info {
background-color: #1976d2;
background-color: #1976d2;
color: #ffffff
color: #ffffff
}
}
.jq-icon-success {
.jq-icon-success {
background-color: #26dad2;
background-color: #26dad2;
color: #ffffff
color: #ffffff
}
}
.jq-icon-error {
.jq-icon-error {
background-color: #ef5350;
background-color: #ef5350;
color: #ffffff
color: #ffffff
}
}
.jq-icon-warning {
.jq-icon-warning {
background-color: #ffb22b;
background-color: #ffb22b;
color: #ffffff
color: #ffffff
}
}
.alert-rounded {
.alert-rounded {
border-radius: 60px
border-radius: 60px
}
}
.list-group a.list-group-item:hover {
.list-group a.list-group-item:hover {
background: #f2f4f8
background: #f2f4f8
}
}
.list-group-item.active, .list-group .list-group-item.active:hover {
.list-group-item.active, .list-group .list-group-item.active:hover {
background: #1976d2;
background: #1976d2;
border-color: #1976d2
border-color: #1976d2
}
}
.list-group-item.disabled {
.list-group-item.disabled {
color: #99abb4;
color: #99abb4;
background: #f2f4f8
background: #f2f4f8
}
}
.media {
.media {
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
margin-bottom: 10px;
margin-bottom: 10px;
padding: 15px
padding: 15px
}
}
.el-element-overlay .white-box {
.el-element-overlay .white-box {
padding: 0px
padding: 0px
}
}
.el-element-overlay .el-card-item {
.el-element-overlay .el-card-item {
position: relative;
position: relative;
padding-bottom: 25px
padding-bottom: 25px
}
}
.el-element-overlay .el-card-item .el-card-avatar {
.el-element-overlay .el-card-item .el-card-avatar {
margin-bottom: 15px
margin-bottom: 15px
}
}
.el-element-overlay .el-card-item .el-card-content {
.el-element-overlay .el-card-item .el-card-content {
text-align: center
text-align: center
}
}
.el-element-overlay .el-card-item .el-card-content h3 {
.el-element-overlay .el-card-item .el-card-content h3 {
margin: 0px
margin: 0px
}
}
.el-element-overlay .el-card-item .el-card-content a {
.el-element-overlay .el-card-item .el-card-content a {
color: #67757c
color: #67757c
}
}
.el-element-overlay .el-card-item .el-card-content a:hover {
.el-element-overlay .el-card-item .el-card-content a:hover {
color: #1976d2
color: #1976d2
}
}
.el-element-overlay .el-card-item .el-overlay-1 {
.el-element-overlay .el-card-item .el-overlay-1 {
width: 100%;
width: 100%;
overflow: hidden;
overflow: hidden;
position: relative;
position: relative;
text-align: center;
text-align: center;
cursor: default
cursor: default
}
}
.el-element-overlay .el-card-item .el-overlay-1 img {
.el-element-overlay .el-card-item .el-overlay-1 img {
display: block;
display: block;
position: relative;
position: relative;
-webkit-transition: all .4s linear;
-webkit-transition: all .4s linear;
-o-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear;
transition: all .4s linear;
width: 100%;
width: 100%;
height: auto
height: auto
}
}
.el-element-overlay .el-card-item .el-overlay-1:hover img {
.el-element-overlay .el-card-item .el-overlay-1:hover img {
-ms-transform: scale(1.2) translateZ(0);
-ms-transform: scale(1.2) translateZ(0);
-webkit-transform: scale(1.2) translateZ(0)
-webkit-transform: scale(1.2) translateZ(0)
}
}
.el-element-overlay .el-card-item .el-overlay-1 .el-info {
.el-element-overlay .el-card-item .el-overlay-1 .el-info {
text-decoration: none;
text-decoration: none;
display: inline-block;
display: inline-block;
text-transform: uppercase;
text-transform: uppercase;
color: #ffffff;
color: #ffffff;
background-color: transparent;
background-color: transparent;
filter: alpha(opacity=0);
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 0;
padding: 0;
margin: auto;
margin: auto;
position: absolute;
position: absolute;
top: 50%;
top: 50%;
left: 0;
left: 0;
right: 0;
right: 0;
transform: translateY(-50%) translateZ(0);
transform: translateY(-50%) translateZ(0);
-webkit-transform: translateY(-50%) translateZ(0);
-webkit-transform: translateY(-50%) translateZ(0);
-ms-transform: translateY(-50%) translateZ(0)
-ms-transform: translateY(-50%) translateZ(0)
}
}
.el-element-overlay .el-card-item .el-overlay-1 .el-info>li {
.el-element-overlay .el-card-item .el-overlay-1 .el-info>li {
list-style: none;
list-style: none;
display: inline-block;
display: inline-block;
margin: 0 3px
margin: 0 3px
}
}
.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a {
.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a {
border-color: #ffffff;
border-color: #ffffff;
color: #ffffff;
color: #ffffff;
padding: 12px 15px 10px
padding: 12px 15px 10px
}
}
.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover {
.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover {
background: #1976d2;
background: #1976d2;
border-color: #1976d2
border-color: #1976d2
}
}
.el-element-overlay .el-card-item .el-overlay {
.el-element-overlay .el-card-item .el-overlay {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
position: absolute;
position: absolute;
overflow: hidden;
overflow: hidden;
top: 0;
top: 0;
left: 0;
left: 0;
opacity: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
transition: all .4s ease-in-out
}
}
.el-element-overlay .el-card-item .el-overlay-1:hover .el-overlay {
.el-element-overlay .el-card-item .el-overlay-1:hover .el-overlay {
opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
filter: alpha(opacity=100);
-webkit-transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0)
transform: translateZ(0)
}
}
.el-element-overlay .el-card-item .el-overlay-1 .scrl-dwn {
.el-element-overlay .el-card-item .el-overlay-1 .scrl-dwn {
top: -100%
top: -100%
}
}
.el-element-overlay .el-card-item .el-overlay-1 .scrl-up {
.el-element-overlay .el-card-item .el-overlay-1 .scrl-up {
top: 100%;
top: 100%;
height: 0px
height: 0px
}
}
.el-element-overlay .el-card-item .el-overlay-1:hover .scrl-dwn {
.el-element-overlay .el-card-item .el-overlay-1:hover .scrl-dwn {
top: 0px
top: 0px
}
}
.el-element-overlay .el-card-item .el-overlay-1:hover .scrl-up {
.el-element-overlay .el-card-item .el-overlay-1:hover .scrl-up {
top: 0px;
top: 0px;
height: 100%
height: 100%
}
}
.timeline {
.timeline {
position: relative;
position: relative;
padding: 20px 0 20px;
padding: 20px 0 20px;
list-style: none;
list-style: none;
max-width: 1200px;
max-width: 1200px;
margin: 0 auto
margin: 0 auto
}
}
.timeline:before {
.timeline:before {
content: " ";
content: " ";
position: absolute;
position: absolute;
top: 0;
top: 0;
bottom: 0;
bottom: 0;
left: 50%;
left: 50%;
width: 3px;
width: 3px;
margin-left: -1.5px;
margin-left: -1.5px;
background-color: #f2f4f8
background-color: #f2f4f8
}
}
.timeline>li {
.timeline>li {
position: relative;
position: relative;
margin-bottom: 20px
margin-bottom: 20px
}
}
.timeline>li:after, .timeline>li:before {
.timeline>li:after, .timeline>li:before {
content: " ";
content: " ";
display: table
display: table
}
}
.timeline>li:after {
.timeline>li:after {
clear: both
clear: both
}
}
.timeline>li:after, .timeline>li:before {
.timeline>li:after, .timeline>li:before {
content: " ";
content: " ";
display: table
display: table
}
}
.timeline>li:after {
.timeline>li:after {
clear: both
clear: both
}
}
.timeline>li>.timeline-panel {
.timeline>li>.timeline-panel {
float: left;
float: left;
position: relative;
position: relative;
width: 46%;
width: 46%;
padding: 20px;
padding: 20px;
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05)
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05)
}
}
.timeline>li>.timeline-panel:before {
.timeline>li>.timeline-panel:before {
content: " ";
content: " ";
display: inline-block;
display: inline-block;
position: absolute;
position: absolute;
top: 26px;
top: 26px;
right: -8px;
right: -8px;
border-top: 8px solid transparent;
border-top: 8px solid transparent;
border-right: 0 solid rgba(120, 130, 140, 0.13);
border-right: 0 solid rgba(120, 130, 140, 0.13);
border-bottom: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid rgba(120, 130, 140, 0.13)
border-left: 8px solid rgba(120, 130, 140, 0.13)
}
}
.timeline>li>.timeline-panel:after {
.timeline>li>.timeline-panel:after {
content: " ";
content: " ";
display: inline-block;
display: inline-block;
position: absolute;
position: absolute;
top: 27px;
top: 27px;
right: -7px;
right: -7px;
border-top: 7px solid transparent;
border-top: 7px solid transparent;
border-right: 0 solid #ffffff;
border-right: 0 solid #ffffff;
border-bottom: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #ffffff
border-left: 7px solid #ffffff
}
}
.timeline>li>.timeline-badge {
.timeline>li>.timeline-badge {
z-index: 10;
z-index: 10;
position: absolute;
position: absolute;
top: 16px;
top: 16px;
left: 50%;
left: 50%;
width: 50px;
width: 50px;
height: 50px;
height: 50px;
margin-left: -25px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
text-align: center;
text-align: center;
font-size: 1.4em;
font-size: 1.4em;
line-height: 50px;
line-height: 50px;
color: #fff;
color: #fff;
overflow: hidden
overflow: hidden
}
}
.timeline>li.timeline-inverted>.timeline-panel {
.timeline>li.timeline-inverted>.timeline-panel {
float: right
float: right
}
}
.timeline>li.timeline-inverted>.timeline-panel:before {
.timeline>li.timeline-inverted>.timeline-panel:before {
right: auto;
right: auto;
left: -8px;
left: -8px;
border-right-width: 8px;
border-right-width: 8px;
border-left-width: 0
border-left-width: 0
}
}
.timeline>li.timeline-inverted>.timeline-panel:after {
.timeline>li.timeline-inverted>.timeline-panel:after {
right: auto;
right: auto;
left: -7px;
left: -7px;
border-right-width: 7px;
border-right-width: 7px;
border-left-width: 0
border-left-width: 0
}
}
.timeline-badge.primary {
.timeline-badge.primary {
background-color: #5c4ac7
background-color: #5c4ac7
}
}
.timeline-badge.success {
.timeline-badge.success {
background-color: #26dad2
background-color: #26dad2
}
}
.timeline-badge.warning {
.timeline-badge.warning {
background-color: #ffb22b
background-color: #ffb22b
}
}
.timeline-badge.danger {
.timeline-badge.danger {
background-color: #ef5350
background-color: #ef5350
}
}
.timeline-badge.info {
.timeline-badge.info {
background-color: #1976d2
background-color: #1976d2
}
}
.timeline-title {
.timeline-title {
margin-top: 0;
margin-top: 0;
color: inherit;
color: inherit;
font-weight: 400
font-weight: 400
}
}
.timeline-body>p, .timeline-body>ul {
.timeline-body>p, .timeline-body>ul {
margin-bottom: 0
margin-bottom: 0
}
}
.timeline-body>p+p {
.timeline-body>p+p {
margin-top: 5px
margin-top: 5px
}
}
.cd-horizontal-timeline .events a {
.cd-horizontal-timeline .events a {
padding-bottom: 6px;
padding-bottom: 6px;
color: #1976d2
color: #1976d2
}
}
.cd-horizontal-timeline .events a.selected:after, .cd-horizontal-timeline .filling-line {
.cd-horizontal-timeline .events a.selected:after, .cd-horizontal-timeline .filling-line {
background: #1976d2
background: #1976d2
}
}
.cd-horizontal-timeline .events a.selected:after {
.cd-horizontal-timeline .events a.selected:after {
border-color: #1976d2
border-color: #1976d2
}
}
.myadmin-dd .dd-list .dd-item .dd-handle {
.myadmin-dd .dd-list .dd-item .dd-handle {
background: #ffffff;
background: #ffffff;
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
padding: 8px 16px;
padding: 8px 16px;
height: auto;
height: auto;
font-family: "Poppins", sans-serif;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-weight: 400;
border-radius: 0
border-radius: 0
}
}
.myadmin-dd-empty .dd-list .dd3-content {
.myadmin-dd-empty .dd-list .dd3-content {
height: auto;
height: auto;
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
padding: 8px 16px 8px 46px;
padding: 8px 16px 8px 46px;
background: #ffffff;
background: #ffffff;
font-weight: 400
font-weight: 400
}
}
.myadmin-dd-empty .dd-list .dd3-handle {
.myadmin-dd-empty .dd-list .dd3-handle {
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 0;
border-bottom: 0;
background: #ffffff;
background: #ffffff;
height: 36px;
height: 36px;
width: 36px
width: 36px
}
}
.dd3-handle:before {
.dd3-handle:before {
color: #67757c;
color: #67757c;
top: 7px
top: 7px
}
}
.ribbon-wrapper, .ribbon-wrapper-bottom, .ribbon-wrapper-reverse, .ribbon-wrapper-right-bottom {
.ribbon-wrapper, .ribbon-wrapper-bottom, .ribbon-wrapper-reverse, .ribbon-wrapper-right-bottom {
position: relative;
position: relative;
padding: 50px 15px 15px 15px
padding: 50px 15px 15px 15px
}
}
.ribbon-vwrapper {
.ribbon-vwrapper {
padding: 15px 15px 15px 50px;
padding: 15px 15px 15px 50px;
position: relative
position: relative
}
}
.ribbon-overflow {
.ribbon-overflow {
overflow: hidden
overflow: hidden
}
}
.ribbon-vwrapper-reverse {
.ribbon-vwrapper-reverse {
padding: 15px 50px 15px 15px
padding: 15px 50px 15px 15px
}
}
.ribbon-wrapper-bottom {
.ribbon-wrapper-bottom {
padding: 15px 15px 50px 50px
padding: 15px 15px 50px 50px
}
}
.ribbon-wrapper-right-bottom {
.ribbon-wrapper-right-bottom {
padding: 15px 50px 50px 15px
padding: 15px 50px 50px 15px
}
}
.ribbon-content {
.ribbon-content {
margin-bottom: 0px
margin-bottom: 0px
}
}
.ribbon {
.ribbon {
padding: 0 20px;
padding: 0 20px;
height: 30px;
height: 30px;
line-height: 30px;
line-height: 30px;
clear: left;
clear: left;
position: absolute;
position: absolute;
top: 12px;
top: 12px;
left: -2px;
left: -2px;
color: #ffffff
color: #ffffff
}
}
.ribbon-bookmark:before {
.ribbon-bookmark:before {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 100%;
left: 100%;
display: block;
display: block;
width: 0;
width: 0;
height: 0;
height: 0;
content: '';
content: '';
border: 15px solid #263238;
border: 15px solid #263238;
border-right: 10px solid transparent
border-right: 10px solid transparent
}
}
.ribbon-right {
.ribbon-right {
left: auto;
left: auto;
right: -2px
right: -2px
}
}
.ribbon-bookmark.ribbon-right:before {
.ribbon-bookmark.ribbon-right:before {
right: 100%;
right: 100%;
left: auto;
left: auto;
border-right: 15px solid #263238;
border-right: 15px solid #263238;
border-left: 10px solid transparent
border-left: 10px solid transparent
}
}
.ribbon-vertical-l, .ribbon-vertical-r {
.ribbon-vertical-l, .ribbon-vertical-r {
clear: none;
clear: none;
padding: 0 5px;
padding: 0 5px;
height: 70px;
height: 70px;
width: 30px;
width: 30px;
line-height: 70px;
line-height: 70px;
text-align: center;
text-align: center;
left: 12px;
left: 12px;
top: -2px
top: -2px
}
}
.ribbon-vertical-r {
.ribbon-vertical-r {
left: auto;
left: auto;
right: 12px
right: 12px
}
}
.ribbon-bookmark.ribbon-vertical-l:before, .ribbon-bookmark.ribbon-vertical-r:before {
.ribbon-bookmark.ribbon-vertical-l:before, .ribbon-bookmark.ribbon-vertical-r:before {
top: 100%;
top: 100%;
left: 0;
left: 0;
margin-top: -14px;
margin-top: -14px;
border-right: 15px solid #263238;
border-right: 15px solid #263238;
border-bottom: 10px solid transparent
border-bottom: 10px solid transparent
}
}
.ribbon-badge {
.ribbon-badge {
top: 15px;
top: 15px;
overflow: hidden;
overflow: hidden;
left: -90px;
left: -90px;
width: 100%;
width: 100%;
text-align: center;
text-align: center;
-webkit-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
transform: rotate(-45deg)
}
}
.ribbon-badge.ribbon-right {
.ribbon-badge.ribbon-right {
left: auto;
left: auto;
right: -90px;
right: -90px;
-webkit-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
transform: rotate(45deg)
}
}
.ribbon-badge.ribbon-bottom {
.ribbon-badge.ribbon-bottom {
top: auto;
top: auto;
bottom: 15px;
bottom: 15px;
-webkit-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
transform: rotate(45deg)
}
}
.ribbon-badge.ribbon-right.ribbon-bottom {
.ribbon-badge.ribbon-right.ribbon-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
transform: rotate(-45deg)
}
}
.ribbon-corner {
.ribbon-corner {
top: 0;
top: 0;
left: 0;
left: 0;
background-color: transparent!important;
background-color: transparent!important;
padding: 6px 0 0 10px
padding: 6px 0 0 10px
}
}
.ribbon-corner i {
.ribbon-corner i {
position: relative
position: relative
}
}
.ribbon-corner:before {
.ribbon-corner:before {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
width: 0;
width: 0;
height: 0;
height: 0;
content: '';
content: '';
border: 30px solid transparent;
border: 30px solid transparent;
border-top-color: #1976d2;
border-top-color: #1976d2;
border-left-color: #1976d2
border-left-color: #1976d2
}
}
.ribbon-corner.ribbon-right:before {
.ribbon-corner.ribbon-right:before {
right: 0;
right: 0;
left: auto;
left: auto;
border-right-color: #526069;
border-right-color: #526069;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-corner.ribbon-right {
.ribbon-corner.ribbon-right {
right: 0;
right: 0;
left: auto;
left: auto;
padding: 6px 10px 0 0
padding: 6px 10px 0 0
}
}
.ribbon-corner.ribbon-bottom:before {
.ribbon-corner.ribbon-bottom:before {
top: auto;
top: auto;
bottom: 0;
bottom: 0;
border-top-color: transparent;
border-top-color: transparent;
border-bottom-color: #526069
border-bottom-color: #526069
}
}
.ribbon-corner.ribbon-bottom {
.ribbon-corner.ribbon-bottom {
bottom: 0;
bottom: 0;
top: auto;
top: auto;
padding: 0 10px 6px 10px
padding: 0 10px 6px 10px
}
}
.ribbon-custom {
.ribbon-custom {
background: #1976d2
background: #1976d2
}
}
.ribbon-bookmark.ribbon-right.ribbon-custom:before {
.ribbon-bookmark.ribbon-right.ribbon-custom:before {
border-right-color: #1976d2;
border-right-color: #1976d2;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-custom:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-custom:before {
.ribbon-bookmark.ribbon-vertical-l.ribbon-custom:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-custom:before {
border-right-color: #1976d2;
border-right-color: #1976d2;
border-bottom-color: transparent
border-bottom-color: transparent
}
}
.ribbon-primary {
.ribbon-primary {
background: #5c4ac7
background: #5c4ac7
}
}
.ribbon-bookmark.ribbon-primary:before {
.ribbon-bookmark.ribbon-primary:before {
border-color: #5c4ac7;
border-color: #5c4ac7;
border-right-color: transparent
border-right-color: transparent
}
}
.ribbon-bookmark.ribbon-right.ribbon-primary:before {
.ribbon-bookmark.ribbon-right.ribbon-primary:before {
border-right-color: #5c4ac7;
border-right-color: #5c4ac7;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-primary:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-primary:before {
.ribbon-bookmark.ribbon-vertical-l.ribbon-primary:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-primary:before {
border-right-color: #5c4ac7;
border-right-color: #5c4ac7;
border-bottom-color: transparent
border-bottom-color: transparent
}
}
.ribbon-primary.ribbon-corner:before {
.ribbon-primary.ribbon-corner:before {
border-top-color: #5c4ac7;
border-top-color: #5c4ac7;
border-left-color: #5c4ac7
border-left-color: #5c4ac7
}
}
.ribbon-primary.ribbon-corner.ribbon-right:before {
.ribbon-primary.ribbon-corner.ribbon-right:before {
border-right-color: #5c4ac7;
border-right-color: #5c4ac7;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-primary.ribbon-corner.ribbon-bottom:before {
.ribbon-primary.ribbon-corner.ribbon-bottom:before {
border-top-color: transparent;
border-top-color: transparent;
border-bottom-color: #5c4ac7
border-bottom-color: #5c4ac7
}
}
.ribbon-success {
.ribbon-success {
background: #26dad2
background: #26dad2
}
}
.ribbon-bookmark.ribbon-success:before {
.ribbon-bookmark.ribbon-success:before {
border-color: #26dad2;
border-color: #26dad2;
border-right-color: transparent
border-right-color: transparent
}
}
.ribbon-bookmark.ribbon-right.ribbon-success:before {
.ribbon-bookmark.ribbon-right.ribbon-success:before {
border-right-color: #26dad2;
border-right-color: #26dad2;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-success:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-success:before {
.ribbon-bookmark.ribbon-vertical-l.ribbon-success:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-success:before {
border-right-color: #26dad2;
border-right-color: #26dad2;
border-bottom-color: transparent
border-bottom-color: transparent
}
}
.ribbon-success.ribbon-corner:before {
.ribbon-success.ribbon-corner:before {
border-top-color: #26dad2;
border-top-color: #26dad2;
border-left-color: #26dad2
border-left-color: #26dad2
}
}
.ribbon-success.ribbon-corner.ribbon-right:before {
.ribbon-success.ribbon-corner.ribbon-right:before {
border-right-color: #26dad2;
border-right-color: #26dad2;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-success.ribbon-corner.ribbon-bottom:before {
.ribbon-success.ribbon-corner.ribbon-bottom:before {
border-top-color: transparent;
border-top-color: transparent;
border-bottom-color: #26dad2
border-bottom-color: #26dad2
}
}
.ribbon-info {
.ribbon-info {
background: #1976d2
background: #1976d2
}
}
.ribbon-bookmark.ribbon-info:before {
.ribbon-bookmark.ribbon-info:before {
border-color: #1976d2;
border-color: #1976d2;
border-right-color: transparent
border-right-color: transparent
}
}
.ribbon-bookmark.ribbon-right.ribbon-info:before {
.ribbon-bookmark.ribbon-right.ribbon-info:before {
border-right-color: #1976d2;
border-right-color: #1976d2;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-info:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-info:before {
.ribbon-bookmark.ribbon-vertical-l.ribbon-info:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-info:before {
border-right-color: #1976d2;
border-right-color: #1976d2;
border-bottom-color: transparent
border-bottom-color: transparent
}
}
.ribbon-info.ribbon-corner:before {
.ribbon-info.ribbon-corner:before {
border-top-color: #1976d2;
border-top-color: #1976d2;
border-left-color: #1976d2
border-left-color: #1976d2
}
}
.ribbon-info.ribbon-corner.ribbon-right:before {
.ribbon-info.ribbon-corner.ribbon-right:before {
border-right-color: #1976d2;
border-right-color: #1976d2;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-info.ribbon-corner.ribbon-bottom:before {
.ribbon-info.ribbon-corner.ribbon-bottom:before {
border-top-color: transparent;
border-top-color: transparent;
border-bottom-color: #1976d2
border-bottom-color: #1976d2
}
}
.ribbon-warning {
.ribbon-warning {
background: #ffb22b
background: #ffb22b
}
}
.ribbon-bookmark.ribbon-warning:before {
.ribbon-bookmark.ribbon-warning:before {
border-color: #ffb22b;
border-color: #ffb22b;
border-right-color: transparent
border-right-color: transparent
}
}
.ribbon-bookmark.ribbon-right.ribbon-warning:before {
.ribbon-bookmark.ribbon-right.ribbon-warning:before {
border-right-color: #ffb22b;
border-right-color: #ffb22b;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-warning:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-warning:before {
.ribbon-bookmark.ribbon-vertical-l.ribbon-warning:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-warning:before {
border-right-color: #ffb22b;
border-right-color: #ffb22b;
border-bottom-color: transparent
border-bottom-color: transparent
}
}
.ribbon-warning.ribbon-corner:before {
.ribbon-warning.ribbon-corner:before {
border-top-color: #ffb22b;
border-top-color: #ffb22b;
border-left-color: #ffb22b
border-left-color: #ffb22b
}
}
.ribbon-warning.ribbon-corner.ribbon-right:before {
.ribbon-warning.ribbon-corner.ribbon-right:before {
border-right-color: #ffb22b;
border-right-color: #ffb22b;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-warning.ribbon-corner.ribbon-bottom:before {
.ribbon-warning.ribbon-corner.ribbon-bottom:before {
border-top-color: transparent;
border-top-color: transparent;
border-bottom-color: #ffb22b
border-bottom-color: #ffb22b
}
}
.ribbon-danger {
.ribbon-danger {
background: #ef5350
background: #ef5350
}
}
.ribbon-bookmark.ribbon-danger:before {
.ribbon-bookmark.ribbon-danger:before {
border-color: #ef5350;
border-color: #ef5350;
border-right-color: transparent
border-right-color: transparent
}
}
.ribbon-bookmark.ribbon-right.ribbon-danger:before {
.ribbon-bookmark.ribbon-right.ribbon-danger:before {
border-right-color: #ef5350;
border-right-color: #ef5350;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-danger:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-danger:before {
.ribbon-bookmark.ribbon-vertical-l.ribbon-danger:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-danger:before {
border-right-color: #ef5350;
border-right-color: #ef5350;
border-bottom-color: transparent
border-bottom-color: transparent
}
}
.ribbon-danger.ribbon-corner:before {
.ribbon-danger.ribbon-corner:before {
border-top-color: #ef5350;
border-top-color: #ef5350;
border-left-color: #ef5350
border-left-color: #ef5350
}
}
.ribbon-danger.ribbon-corner.ribbon-right:before {
.ribbon-danger.ribbon-corner.ribbon-right:before {
border-right-color: #ef5350;
border-right-color: #ef5350;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-danger.ribbon-corner.ribbon-bottom:before {
.ribbon-danger.ribbon-corner.ribbon-bottom:before {
border-top-color: transparent;
border-top-color: transparent;
border-bottom-color: #ef5350
border-bottom-color: #ef5350
}
}
.ribbon-default {
.ribbon-default {
background: #263238
background: #263238
}
}
.ribbon-bookmark.ribbon-default:before {
.ribbon-bookmark.ribbon-default:before {
border-color: #263238;
border-color: #263238;
border-right-color: transparent
border-right-color: transparent
}
}
.ribbon-bookmark.ribbon-right.ribbon-default:before {
.ribbon-bookmark.ribbon-right.ribbon-default:before {
border-right-color: #263238;
border-right-color: #263238;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-bookmark.ribbon-vertical-l.ribbon-default:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-default:before {
.ribbon-bookmark.ribbon-vertical-l.ribbon-default:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-default:before {
border-right-color: #263238;
border-right-color: #263238;
border-bottom-color: transparent
border-bottom-color: transparent
}
}
.ribbon-default.ribbon-corner:before {
.ribbon-default.ribbon-corner:before {
border-top-color: #263238;
border-top-color: #263238;
border-left-color: #263238
border-left-color: #263238
}
}
.ribbon-default.ribbon-corner.ribbon-right:before {
.ribbon-default.ribbon-corner.ribbon-right:before {
border-right-color: #263238;
border-right-color: #263238;
border-left-color: transparent
border-left-color: transparent
}
}
.ribbon-default.ribbon-corner.ribbon-bottom:before {
.ribbon-default.ribbon-corner.ribbon-bottom:before {
border-top-color: transparent;
border-top-color: transparent;
border-bottom-color: #263238
border-bottom-color: #263238
}
}
#idletimeout {
#idletimeout {
background: #1976d2;
background: #1976d2;
border: 3px solid #1976d2;
border: 3px solid #1976d2;
color: #fff;
color: #fff;
font-family: arial, sans-serif;
font-family: arial, sans-serif;
text-align: center;
text-align: center;
font-size: 12px;
font-size: 12px;
padding: 10px;
padding: 10px;
position: relative;
position: relative;
top: 0px;
top: 0px;
left: 0;
left: 0;
right: 0;
right: 0;
z-index: 100000;
z-index: 100000;
display: none
display: none
}
}
#idletimeout a {
#idletimeout a {
color: #ffffff;
color: #ffffff;
font-weight: bold
font-weight: bold
}
}
#idletimeout span {
#idletimeout span {
font-weight: bold
font-weight: bold
}
}
.mytooltip:hover .tooltip-content2, .mytooltip:hover .tooltip-content2 i {
.mytooltip:hover .tooltip-content2, .mytooltip:hover .tooltip-content2 i {
opacity: 1;
opacity: 1;
font-size: 18px;
font-size: 18px;
pointer-events: auto;
pointer-events: auto;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
}
}
.mytooltip:hover .tooltip-content4, .mytooltip:hover .tooltip-text2 {
.mytooltip:hover .tooltip-content4, .mytooltip:hover .tooltip-text2 {
pointer-events: auto;
pointer-events: auto;
opacity: 1;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
transform: translate3d(0, 0, 0)
}
}
.mytooltip {
.mytooltip {
display: inline;
display: inline;
position: relative;
position: relative;
z-index: 9999
z-index: 9999
}
}
.mytooltip:hover .tooltip-item:after {
.mytooltip:hover .tooltip-item:after {
pointer-events: auto
pointer-events: auto
}
}
.mytooltip:hover .tooltip-content {
.mytooltip:hover .tooltip-content {
pointer-events: auto;
pointer-events: auto;
opacity: 1;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0)
transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0)
}
}
.mytooltip:hover .tooltip-content3 {
.mytooltip:hover .tooltip-content3 {
opacity: 1;
opacity: 1;
pointer-events: auto;
pointer-events: auto;
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
transform: scale3d(1, 1, 1)
}
}
.mytooltip:hover .tooltip-item2 {
.mytooltip:hover .tooltip-item2 {
color: #ffffff;
color: #ffffff;
-webkit-transform: translate3d(0, -0.5em, 0);
-webkit-transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0)
transform: translate3d(0, -0.5em, 0)
}
}
.mytooltip:hover .tooltip-content5 {
.mytooltip:hover .tooltip-content5 {
opacity: 1;
opacity: 1;
pointer-events: auto;
pointer-events: auto;
-webkit-transition-delay: 0s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s
transition-delay: 0s
}
}
.mytooltip:hover .tooltip-text3 {
.mytooltip:hover .tooltip-text3 {
-webkit-transition-delay: 0s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
transform: scale3d(1, 1, 1)
}
}
.mytooltip:hover .tooltip-inner2 {
.mytooltip:hover .tooltip-inner2 {
-webkit-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
transform: translate3d(0, 0, 0)
}
}
.tooltip-item {
.tooltip-item {
background: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
cursor: pointer;
cursor: pointer;
display: inline-block;
display: inline-block;
font-weight: 500;
font-weight: 500;
padding: 0 10px
padding: 0 10px
}
}
.tooltip-item:after {
.tooltip-item:after {
content: '';
content: '';
position: absolute;
position: absolute;
width: 360px;
width: 360px;
height: 20px;
height: 20px;
bottom: 100%;
bottom: 100%;
left: 50%;
left: 50%;
pointer-events: none;
pointer-events: none;
-webkit-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
transform: translateX(-50%)
}
}
.tooltip-content {
.tooltip-content {
position: absolute;
position: absolute;
z-index: 9999;
z-index: 9999;
width: 360px;
width: 360px;
left: 50%;
left: 50%;
margin: 0 0 20px -180px;
margin: 0 0 20px -180px;
bottom: 100%;
bottom: 100%;
text-align: left;
text-align: left;
font-size: 14px;
font-size: 14px;
line-height: 30px;
line-height: 30px;
-webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
-webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
background: #2b2b2b;
background: #2b2b2b;
opacity: 0;
opacity: 0;
cursor: default;
cursor: default;
pointer-events: none
pointer-events: none
}
}
.tooltip-content img {
.tooltip-content img {
position: relative;
position: relative;
height: 140px;
height: 140px;
display: block;
display: block;
float: left;
float: left;
margin-right: 1em
margin-right: 1em
}
}
.tooltip-effect-5 .tooltip-content {
.tooltip-effect-5 .tooltip-content {
width: 180px;
width: 180px;
margin-left: -90px;
margin-left: -90px;
-webkit-transform-origin: 50% calc(106%);
-webkit-transform-origin: 50% calc(106%);
-ms-transform-origin: 50% calc(106%);
-ms-transform-origin: 50% calc(106%);
transform-origin: 50% calc(106%);
transform-origin: 50% calc(106%);
-webkit-transform: rotate3d(0, 0, 1, 15deg);
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
-o-transition: opacity 0.2s, transform 0.2s;
-o-transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
-webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
-webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
-o-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
-o-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39)
transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39)
}
}
.tooltip-effect-5 .tooltip-text {
.tooltip-effect-5 .tooltip-text {
padding: 1.4em
padding: 1.4em
}
}
.tooltip-content:after {
.tooltip-content:after {
content: '';
content: '';
top: 100%;
top: 100%;
left: 50%;
left: 50%;
border: solid transparent;
border: solid transparent;
height: 0;
height: 0;
width: 0;
width: 0;
position: absolute;
position: absolute;
pointer-events: none;
pointer-events: none;
border-color: transparent;
border-color: transparent;
border-top-color: #2a3035;
border-top-color: #2a3035;
border-width: 10px;
border-width: 10px;
margin-left: -10px
margin-left: -10px
}
}
.tooltip-text {
.tooltip-text {
font-size: 14px;
font-size: 14px;
line-height: 24px;
line-height: 24px;
display: block;
display: block;
padding: 1.31em 1.21em 1.21em 0;
padding: 1.31em 1.21em 1.21em 0;
color: #ffffff
color: #ffffff
}
}
.tooltip-content2 {
.tooltip-content2 {
position: absolute;
position: absolute;
z-index: 9999;
z-index: 9999;
width: 80px;
width: 80px;
height: 80px;
height: 80px;
padding-top: 25px;
padding-top: 25px;
left: 50%;
left: 50%;
margin-left: -40px;
margin-left: -40px;
bottom: 100%;
bottom: 100%;
border-radius: 50%;
border-radius: 50%;
text-align: center;
text-align: center;
background: #1976d2;
background: #1976d2;
color: #ffffff;
color: #ffffff;
opacity: 0;
opacity: 0;
margin-bottom: 20px;
margin-bottom: 20px;
cursor: default;
cursor: default;
pointer-events: none
pointer-events: none
}
}
.tooltip-content2 i {
.tooltip-content2 i {
opacity: 0
opacity: 0
}
}
.tooltip-effect-6 .tooltip-content2 {
.tooltip-effect-6 .tooltip-content2 {
-webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
-webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
-webkit-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-6 .tooltip-content2 i {
.tooltip-effect-6 .tooltip-content2 i {
-webkit-transform: scale3d(0, 0, 1);
-webkit-transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-6:hover .tooltip-content2 i {
.tooltip-effect-6:hover .tooltip-content2 i {
-webkit-transform: rotate3d(1, 1, 1, 0);
-webkit-transform: rotate3d(1, 1, 1, 0);
transform: rotate3d(1, 1, 1, 0)
transform: rotate3d(1, 1, 1, 0)
}
}
.tooltip-content2:after {
.tooltip-content2:after {
content: '';
content: '';
position: absolute;
position: absolute;
top: 100%;
top: 100%;
left: 50%;
left: 50%;
margin: -7px 0 0 -15px;
margin: -7px 0 0 -15px;
width: 30px;
width: 30px;
height: 20px;
height: 20px;
background: url(http://themedesigner.in/demo/admin-press/assets/images/tooltip/tooltip1.svg) no-repeat center center;
background: url(http://themedesigner.in/demo/admin-press/assets/images/tooltip/tooltip1.svg) no-repeat center center;
background-size: 100%
background-size: 100%
}
}
.tooltip-content3 {
.tooltip-content3 {
position: absolute;
position: absolute;
background: url(http://themedesigner.in/demo/admin-press/assets/images/tooltip/shape1.svg) no-repeat center bottom;
background: url(http://themedesigner.in/demo/admin-press/assets/images/tooltip/shape1.svg) no-repeat center bottom;
background-size: 100% 100%;
background-size: 100% 100%;
z-index: 9999;
z-index: 9999;
width: 200px;
width: 200px;
bottom: 100%;
bottom: 100%;
left: 50%;
left: 50%;
margin-left: -100px;
margin-left: -100px;
padding: 50px 30px;
padding: 50px 30px;
text-align: center;
text-align: center;
color: #ffffff;
color: #ffffff;
opacity: 0;
opacity: 0;
cursor: default;
cursor: default;
font-size: 14;
font-size: 14;
line-height: 27px;
line-height: 27px;
pointer-events: none;
pointer-events: none;
-webkit-transform: scale3d(0.1, 0.2, 1);
-webkit-transform: scale3d(0.1, 0.2, 1);
transform: scale3d(0.1, 0.2, 1);
transform: scale3d(0.1, 0.2, 1);
-webkit-transform-origin: 50% 120%;
-webkit-transform-origin: 50% 120%;
-ms-transform-origin: 50% 120%;
-ms-transform-origin: 50% 120%;
transform-origin: 50% 120%;
transform-origin: 50% 120%;
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, -webkit-transform 0.4s;
-o-transition: opacity 0.4s, transform 0.4s;
-o-transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
-webkit-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
-webkit-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
-o-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
-o-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1)
transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1)
}
}
.tooltip-content3:after {
.tooltip-content3:after {
content: '';
content: '';
position: absolute;
position: absolute;
width: 16px;
width: 16px;
height: 16px;
height: 16px;
left: 50%;
left: 50%;
margin-left: -8px;
margin-left: -8px;
top: 100%;
top: 100%;
background: #00aeef;
background: #00aeef;
-webkit-transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);
-webkit-transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);
transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg)
transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg)
}
}
.tooltip-item2 {
.tooltip-item2 {
color: #00aeef;
color: #00aeef;
cursor: pointer;
cursor: pointer;
z-index: 100;
z-index: 100;
position: relative;
position: relative;
display: inline-block;
display: inline-block;
font-weight: 500;
font-weight: 500;
-webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
-webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
-o-transition: background-color 0.3s, color 0.3s, transform 0.3s;
-o-transition: background-color 0.3s, color 0.3s, transform 0.3s;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
transition: background-color 0.3s, color 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: background-color 0.3s, color 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-content4 {
.tooltip-content4 {
position: absolute;
position: absolute;
z-index: 99;
z-index: 99;
width: 360px;
width: 360px;
left: 50%;
left: 50%;
margin-left: -180px;
margin-left: -180px;
bottom: -5px;
bottom: -5px;
text-align: left;
text-align: left;
background: #00aeef;
background: #00aeef;
opacity: 0;
opacity: 0;
font-size: 14px;
font-size: 14px;
line-height: 27px;
line-height: 27px;
padding: 1.5em;
padding: 1.5em;
color: #ffffff;
color: #ffffff;
border-bottom: 55px solid #2b2b2b;
border-bottom: 55px solid #2b2b2b;
cursor: default;
cursor: default;
pointer-events: none;
pointer-events: none;
border-radius: 5px;
border-radius: 5px;
-webkit-transform: translate3d(0, -0.5em, 0);
-webkit-transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-content4 a {
.tooltip-content4 a {
color: #2b2b2b
color: #2b2b2b
}
}
.tooltip-text2 {
.tooltip-text2 {
opacity: 0;
opacity: 0;
-webkit-transform: translate3d(0, 1.5em, 0);
-webkit-transform: translate3d(0, 1.5em, 0);
transform: translate3d(0, 1.5em, 0);
transform: translate3d(0, 1.5em, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-content5 {
.tooltip-content5 {
position: absolute;
position: absolute;
z-index: 9999;
z-index: 9999;
width: 300px;
width: 300px;
left: 50%;
left: 50%;
bottom: 100%;
bottom: 100%;
font-size: 20px;
font-size: 20px;
line-height: 1.4;
line-height: 1.4;
text-align: center;
text-align: center;
font-weight: 400;
font-weight: 400;
color: #ffffff;
color: #ffffff;
background: transparent;
background: transparent;
opacity: 0;
opacity: 0;
margin: 0 0 20px -150px;
margin: 0 0 20px -150px;
cursor: default;
cursor: default;
pointer-events: none;
pointer-events: none;
-webkit-transition: opacity 0.3s 0.3s;
-webkit-transition: opacity 0.3s 0.3s;
-o-transition: opacity 0.3s 0.3s;
-o-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s
transition: opacity 0.3s 0.3s
}
}
.tooltip-content5 span {
.tooltip-content5 span {
display: block
display: block
}
}
.tooltip-text3 {
.tooltip-text3 {
border-bottom: 10px solid #1976d2;
border-bottom: 10px solid #1976d2;
overflow: hidden;
overflow: hidden;
-webkit-transform: scale3d(0, 1, 1);
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.3s 0.3s;
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: -webkit-transform 0.3s 0.3s;
transition: -webkit-transform 0.3s 0.3s;
-o-transition: transform 0.3s 0.3s;
-o-transition: transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s
transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s
}
}
.tooltip-inner2 {
.tooltip-inner2 {
background: #2b2b2b;
background: #2b2b2b;
padding: 40px;
padding: 40px;
-webkit-transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
-o-transition: transform 0.3s;
-o-transition: transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s
transition: transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-content5:after {
.tooltip-content5:after {
content: '';
content: '';
bottom: -20px;
bottom: -20px;
left: 50%;
left: 50%;
border: solid transparent;
border: solid transparent;
height: 0;
height: 0;
width: 0;
width: 0;
position: absolute;
position: absolute;
pointer-events: none;
pointer-events: none;
border-color: transparent;
border-color: transparent;
border-top-color: #1976d2;
border-top-color: #1976d2;
border-width: 10px;
border-width: 10px;
margin-left: -10px
margin-left: -10px
}
}
.tooltip-effect-1 .tooltip-content {
.tooltip-effect-1 .tooltip-content {
-webkit-transform: translate3d(0, -10px, 0);
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
color: #ffffff
color: #ffffff
}
}
.tooltip-effect-2 .tooltip-content {
.tooltip-effect-2 .tooltip-content {
-webkit-transform-origin: 50% calc(110%);
-webkit-transform-origin: 50% calc(110%);
-ms-transform-origin: 50% calc(110%);
-ms-transform-origin: 50% calc(110%);
transform-origin: 50% calc(110%);
transform-origin: 50% calc(110%);
-webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
-webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
-o-transition: opacity 0.2s, transform 0.2s;
-o-transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
}
}
.tooltip-effect-3 .tooltip-content {
.tooltip-effect-3 .tooltip-content {
-webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
-webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-4 .tooltip-content {
.tooltip-effect-4 .tooltip-content {
-webkit-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale3d(0.7, 0.3, 1);
-webkit-transform: scale3d(0.7, 0.3, 1);
transform: scale3d(0.7, 0.3, 1);
transform: scale3d(0.7, 0.3, 1);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
-o-transition: opacity 0.2s, transform 0.2s;
-o-transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s
}
}
.tooltip.tooltip-effect-2:hover .tooltip-content {
.tooltip.tooltip-effect-2:hover .tooltip-content {
-webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
-webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
transform: perspective(1000px) rotate3d(1, 0, 0, 0deg)
transform: perspective(1000px) rotate3d(1, 0, 0, 0deg)
}
}
a.mytooltip {
a.mytooltip {
font-weight: 500;
font-weight: 500;
color: #1976d2
color: #1976d2
}
}
.tooltip-effect-7 .tooltip-content2 {
.tooltip-effect-7 .tooltip-content2 {
-webkit-transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-7 .tooltip-content2 i {
.tooltip-effect-7 .tooltip-content2 i {
-webkit-transform: translate3d(0, 15px, 0);
-webkit-transform: translate3d(0, 15px, 0);
transform: translate3d(0, 15px, 0);
transform: translate3d(0, 15px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-8 .tooltip-content2 {
.tooltip-effect-8 .tooltip-content2 {
-webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
-webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
-webkit-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-8 .tooltip-content2 i {
.tooltip-effect-8 .tooltip-content2 i {
-webkit-transform: scale3d(0, 0, 1);
-webkit-transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-9 .tooltip-content2 {
.tooltip-effect-9 .tooltip-content2 {
-webkit-transform: translate3d(0, -20px, 0);
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.tooltip-effect-9 .tooltip-content2 i {
.tooltip-effect-9 .tooltip-content2 i {
-webkit-transform: translate3d(0, 20px, 0);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s
}
}
.error-box {
.error-box {
height: 100%;
height: 100%;
position: fixed;
position: fixed;
background: url(../../assets/images/background/error-bg.jpg) no-repeat center center #fff;
background: url(../../assets/images/background/error-bg.jpg) no-repeat center center #fff;
width: 100%
width: 100%
}
}
.error-box .footer {
.error-box .footer {
width: 100%;
width: 100%;
left: 0px;
left: 0px;
right: 0px
right: 0px
}
}
.error-body {
.error-body {
padding-top: 5%
padding-top: 5%
}
}
.error-body h1 {
.error-body h1 {
font-size: 210px;
font-size: 210px;
font-weight: 900;
font-weight: 900;
line-height: 210px
line-height: 210px
}
}
.gmaps, .gmaps-panaroma {
.gmaps, .gmaps-panaroma {
height: 300px
height: 300px
}
}
.gmaps, .gmaps-panaroma {
.gmaps, .gmaps-panaroma {
height: 300px;
height: 300px;
background: #f2f4f8;
background: #f2f4f8;
border-radius: 3px
border-radius: 3px
}
}
.gmaps-overlay {
.gmaps-overlay {
display: block;
display: block;
text-align: center;
text-align: center;
color: #ffffff;
color: #ffffff;
font-size: 16px;
font-size: 16px;
line-height: 40px;
line-height: 40px;
background: #5c4ac7;
background: #5c4ac7;
border-radius: 4px;
border-radius: 4px;
padding: 10px 20px
padding: 10px 20px
}
}
.gmaps-overlay_arrow {
.gmaps-overlay_arrow {
left: 50%;
left: 50%;
margin-left: -16px;
margin-left: -16px;
width: 0;
width: 0;
height: 0;
height: 0;
position: absolute
position: absolute
}
}
.gmaps-overlay_arrow.above {
.gmaps-overlay_arrow.above {
bottom: -15px;
bottom: -15px;
border-left: 16px solid transparent;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid #5c4ac7
border-top: 16px solid #5c4ac7
}
}
.gmaps-overlay_arrow.below {
.gmaps-overlay_arrow.below {
top: -15px;
top: -15px;
border-left: 16px solid transparent;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid #5c4ac7
border-bottom: 16px solid #5c4ac7
}
}
.jvectormap-zoomin, .jvectormap-zoomout {
.jvectormap-zoomin, .jvectormap-zoomout {
width: 10px;
width: 10px;
height: 10px;
height: 10px;
line-height: 10px
line-height: 10px
}
}
.jvectormap-zoomout {
.jvectormap-zoomout {
top: 40px
top: 40px
}
}
.search-listing {
.search-listing {
padding: 0px;
padding: 0px;
margin: 0px
margin: 0px
}
}
.search-listing li {
.search-listing li {
list-style: none;
list-style: none;
padding: 15px 0;
padding: 15px 0;
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
}
}
.search-listing li h3 {
.search-listing li h3 {
margin: 0px;
margin: 0px;
font-size: 18px
font-size: 18px
}
}
.search-listing li h3 a {
.search-listing li h3 a {
color: #1976d2
color: #1976d2
}
}
.search-listing li h3 a:hover {
.search-listing li h3 a:hover {
text-decoration: underline
text-decoration: underline
}
}
.search-listing li a {
.search-listing li a {
color: #26dad2
color: #26dad2
}
}
.login-register {
.login-register {
background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center center;
background-position: center center;
height: 100%;
height: 100%;
width: 100%;
width: 100%;
padding: 5% 0;
padding: 5% 0;
position: fixed
position: fixed
}
}
.login-box {
.login-box {
width: 400px;
width: 400px;
margin: 0 auto
margin: 0 auto
}
}
.login-box .footer {
.login-box .footer {
width: 100%;
width: 100%;
left: 0px;
left: 0px;
right: 0px
right: 0px
}
}
.login-box .social {
.login-box .social {
display: block;
display: block;
margin-bottom: 30px
margin-bottom: 30px
}
}
#recoverform {
#recoverform {
display: none
display: none
}
}
.login-sidebar {
.login-sidebar {
padding: 0px;
padding: 0px;
margin-top: 0px
margin-top: 0px
}
}
.login-sidebar .login-box {
.login-sidebar .login-box {
right: 0px;
right: 0px;
position: absolute;
position: absolute;
height: 100%
height: 100%
}
}
.minimal-faq .card {
.minimal-faq .card {
border: 0px
border: 0px
}
}
.minimal-faq .card .card-header {
.minimal-faq .card .card-header {
background: #ffffff;
background: #ffffff;
padding: 20px 0;
padding: 20px 0;
margin-top: 10px
margin-top: 10px
}
}
.minimal-faq .card .card-body {
.minimal-faq .card .card-body {
padding: 15px 0px
padding: 15px 0px
}
}
.pricing-box {
.pricing-box {
position: relative;
position: relative;
text-align: center;
text-align: center;
margin-top: 30px
margin-top: 30px
}
}
.featured-plan {
.featured-plan {
margin-top: 0px
margin-top: 0px
}
}
.featured-plan .pricing-body {
.featured-plan .pricing-body {
padding: 60px 0;
padding: 60px 0;
background: #ebf3f5;
background: #ebf3f5;
border: 1px solid #ddd
border: 1px solid #ddd
}
}
.featured-plan .price-table-content .price-row {
.featured-plan .price-table-content .price-row {
border-top: 1px solid rgba(120, 130, 140, 0.13)
border-top: 1px solid rgba(120, 130, 140, 0.13)
}
}
.pricing-body {
.pricing-body {
border-radius: 0px;
border-radius: 0px;
border-top: 1px solid rgba(120, 130, 140, 0.13);
border-top: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 5px solid rgba(120, 130, 140, 0.13);
border-bottom: 5px solid rgba(120, 130, 140, 0.13);
vertical-align: middle;
vertical-align: middle;
padding: 30px 0;
padding: 30px 0;
position: relative
position: relative
}
}
.pricing-body h2 {
.pricing-body h2 {
position: relative;
position: relative;
font-size: 56px;
font-size: 56px;
margin: 20px 0 10px;
margin: 20px 0 10px;
font-weight: 500
font-weight: 500
}
}
.pricing-body h2 span {
.pricing-body h2 span {
position: absolute;
position: absolute;
font-size: 15px;
font-size: 15px;
top: -10px;
top: -10px;
margin-left: -10px
margin-left: -10px
}
}
.price-table-content .price-row {
.price-table-content .price-row {
padding: 20px 0;
padding: 20px 0;
border-top: 1px solid rgba(120, 130, 140, 0.13)
border-top: 1px solid rgba(120, 130, 140, 0.13)
}
}
.pricing-plan {
.pricing-plan {
padding: 0 15px
padding: 0 15px
}
}
.pricing-plan .no-padding {
.pricing-plan .no-padding {
padding: 0px
padding: 0px
}
}
.price-lable {
.price-lable {
position: absolute;
position: absolute;
top: -10px;
top: -10px;
padding: 5px 10px;
padding: 5px 10px;
margin: 0 auto;
margin: 0 auto;
display: inline-block;
display: inline-block;
width: 100px;
width: 100px;
left: 0px;
left: 0px;
right: 0px
right: 0px
}
}
.chat-main-box {
.chat-main-box {
position: relative;
position: relative;
overflow: hidden
overflow: hidden
}
}
.chat-main-box .chat-left-aside {
.chat-main-box .chat-left-aside {
position: relative;
position: relative;
width: 250px;
width: 250px;
float: left;
float: left;
z-index: 9;
z-index: 9;
top: 0px;
top: 0px;
border-right: 1px solid rgba(120, 130, 140, 0.13)
border-right: 1px solid rgba(120, 130, 140, 0.13)
}
}
.chat-main-box .chat-left-aside .open-panel {
.chat-main-box .chat-left-aside .open-panel {
display: none;
display: none;
cursor: pointer;
cursor: pointer;
position: absolute;
position: absolute;
left: -webkit-calc(100% - 1px);
left: -webkit-calc(100% - 1px);
top: 50%;
top: 50%;
z-index: 100;
z-index: 100;
background-color: #fff;
background-color: #fff;
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
border-radius: 0 100px 100px 0;
border-radius: 0 100px 100px 0;
line-height: 1;
line-height: 1;
padding: 15px 8px 15px 4px
padding: 15px 8px 15px 4px
}
}
.chat-main-box .chat-left-aside .chat-left-inner {
.chat-main-box .chat-left-aside .chat-left-inner {
position: relative
position: relative
}
}
.chat-main-box .chat-left-aside .chat-left-inner .form-control {
.chat-main-box .chat-left-aside .chat-left-inner .form-control {
height: 60px;
height: 60px;
padding: 15px;
padding: 15px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(rgba(120, 130, 140, 0.13)), to(rgba(120, 130, 140, 0.13)));
background-image: -webkit-gradient(linear, left top, left bottom, from(#1976d2), to(#1976d2)), -webkit-gradient(linear, left top, left bottom, from(rgba(120, 130, 140, 0.13)), to(rgba(120, 130, 140, 0.13)));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: -webkit-linear-gradient(#1976d2, #1976d2), -webkit-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: -o-linear-gradient(#1976d2, #1976d2), -o-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13))
background-image: linear-gradient(#1976d2, #1976d2), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13))
}
}
.chat-main-box .chat-left-aside .chat-left-inner .style-none {
.chat-main-box .chat-left-aside .chat-left-inner .style-none {
padding: 0px
padding: 0px
}
}
.chat-main-box .chat-left-aside .chat-left-inner .style-none li {
.chat-main-box .chat-left-aside .chat-left-inner .style-none li {
list-style: none;
list-style: none;
overflow: hidden
overflow: hidden
}
}
.chat-main-box .chat-left-aside .chat-left-inner .style-none li a {
.chat-main-box .chat-left-aside .chat-left-inner .style-none li a {
padding: 20px
padding: 20px
}
}
.chat-main-box .chat-left-aside .chat-left-inner .style-none li a.active, .chat-main-box .chat-left-aside .chat-left-inner .style-none li a:hover {
.chat-main-box .chat-left-aside .chat-left-inner .style-none li a.active, .chat-main-box .chat-left-aside .chat-left-inner .style-none li a:hover {
background: #ebf3f5
background: #ebf3f5
}
}
.chat-main-box .chat-right-aside {
.chat-main-box .chat-right-aside {
width: calc(100% - 250px);
width: calc(100% - 250px);
float: left
float: left
}
}
.chat-main-box .chat-right-aside .chat-list {
.chat-main-box .chat-right-aside .chat-list {
max-height: none;
max-height: none;
height: 100%;
height: 100%;
padding-top: 40px
padding-top: 40px
}
}
.chat-main-box .chat-right-aside .chat-list .chat-text {
.chat-main-box .chat-right-aside .chat-list .chat-text {
border-radius: 6px
border-radius: 6px
}
}
.chat-main-box .chat-right-aside .send-chat-box {
.chat-main-box .chat-right-aside .send-chat-box {
position: relative
position: relative
}
}
.chat-main-box .chat-right-aside .send-chat-box .form-control {
.chat-main-box .chat-right-aside .send-chat-box .form-control {
border: none;
border: none;
border-top: 1px solid rgba(120, 130, 140, 0.13);
border-top: 1px solid rgba(120, 130, 140, 0.13);
resize: none;
resize: none;
height: 80px;
height: 80px;
padding-right: 180px
padding-right: 180px
}
}
.chat-main-box .chat-right-aside .send-chat-box .form-control:focus {
.chat-main-box .chat-right-aside .send-chat-box .form-control:focus {
border-color: rgba(120, 130, 140, 0.13)
border-color: rgba(120, 130, 140, 0.13)
}
}
.chat-main-box .chat-right-aside .send-chat-box .custom-send {
.chat-main-box .chat-right-aside .send-chat-box .custom-send {
position: absolute;
position: absolute;
right: 20px;
right: 20px;
bottom: 10px
bottom: 10px
}
}
.chat-main-box .chat-right-aside .send-chat-box .custom-send .cst-icon {
.chat-main-box .chat-right-aside .send-chat-box .custom-send .cst-icon {
color: #67757c;
color: #67757c;
margin-right: 10px
margin-right: 10px
}
}
.inbox-panel .list-group .list-group-item {
.inbox-panel .list-group .list-group-item {
border: 0px;
border: 0px;
border-radius: 0px;
border-radius: 0px;
border-left: 3px solid transparent
border-left: 3px solid transparent
}
}
.inbox-panel .list-group .list-group-item a {
.inbox-panel .list-group .list-group-item a {
color: #67757c
color: #67757c
}
}
.inbox-panel .list-group .list-group-item.active, .inbox-panel .list-group .list-group-item:hover {
.inbox-panel .list-group .list-group-item.active, .inbox-panel .list-group .list-group-item:hover {
background: #f2f4f8;
background: #f2f4f8;
border-left: 3px solid #1976d2
border-left: 3px solid #1976d2
}
}
.inbox-center .unread td {
.inbox-center .unread td {
font-weight: 400
font-weight: 400
}
}
.inbox-center td {
.inbox-center td {
vertical-align: middle;
vertical-align: middle;
white-space: nowrap
white-space: nowrap
}
}
.inbox-center a {
.inbox-center a {
color: #67757c;
color: #67757c;
padding: 2px 0 3px 0;
padding: 2px 0 3px 0;
overflow: hidden;
overflow: hidden;
vertical-align: middle;
vertical-align: middle;
-o-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
white-space: nowrap;
display: inline-block
display: inline-block
}
}
.inbox-center .checkbox {
.inbox-center .checkbox {
margin-top: -13px;
margin-top: -13px;
height: 20px
height: 20px
}
}
.calendar-events {
.calendar-events {
padding: 8px 10px;
padding: 8px 10px;
border: 1px solid #ffffff;
border: 1px solid #ffffff;
cursor: move
cursor: move
}
}
.calendar-events:hover {
.calendar-events:hover {
border: 1px dashed rgba(120, 130, 140, 0.13)
border: 1px dashed rgba(120, 130, 140, 0.13)
}
}
.calendar-events i {
.calendar-events i {
margin-right: 8px
margin-right: 8px
}
}
.contact-page-aside {
.contact-page-aside {
position: relative
position: relative
}
}
.left-aside {
.left-aside {
position: absolute;
position: absolute;
border-right: 1px solid rgba(120, 130, 140, 0.13);
border-right: 1px solid rgba(120, 130, 140, 0.13);
padding: 20px;
padding: 20px;
width: 250px;
width: 250px;
height: 100%
height: 100%
}
}
.right-aside {
.right-aside {
padding: 20px;
padding: 20px;
margin-left: 250px
margin-left: 250px
}
}
.contact-list td {
.contact-list td {
vertical-align: middle;
vertical-align: middle;
padding: 25px 10px
padding: 25px 10px
}
}
.contact-list td img {
.contact-list td img {
width: 30px
width: 30px
}
}
.list-style-none {
.list-style-none {
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
.list-style-none li {
.list-style-none li {
list-style: none;
list-style: none;
margin: 0px
margin: 0px
}
}
.list-style-none li.box-label a {
.list-style-none li.box-label a {
font-weight: 500
font-weight: 500
}
}
.list-style-none li.divider {
.list-style-none li.divider {
margin: 10px 0;
margin: 10px 0;
height: 1px;
height: 1px;
background: rgba(120, 130, 140, 0.13)
background: rgba(120, 130, 140, 0.13)
}
}
.list-style-none li a {
.list-style-none li a {
padding: 15px 10px;
padding: 15px 10px;
display: block;
display: block;
color: #67757c
color: #67757c
}
}
.list-style-none li a:hover {
.list-style-none li a:hover {
color: #1976d2
color: #1976d2
}
}
.list-style-none li a span {
.list-style-none li a span {
float: right
float: right
}
}
.slimScrollBar {
.slimScrollBar {
z-index: 10!important
z-index: 10!important
}
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
display: block
display: block
}
}
.plugin-details {
.plugin-details {
display: none
display: none
}
}
.plugin-details-active {
.plugin-details-active {
display: block
display: block
}
}
.earning-box h6 {
.earning-box h6 {
font-weight: 500;
font-weight: 500;
margin-bottom: 0px;
margin-bottom: 0px;
white-space: nowrap
white-space: nowrap
}
}
.earning-box td, .earning-box th {
.earning-box td, .earning-box th {
vertical-align: middle
vertical-align: middle
}
}
.jsgrid-pager-current-page, .jsgrid-pager-nav-button a, .jsgrid-pager-page a {
.jsgrid-pager-current-page, .jsgrid-pager-nav-button a, .jsgrid-pager-page a {
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: inline-block;
min-width: 1.5em;
min-width: 1.5em;
padding: 0.5em 1em;
padding: 0.5em 1em;
text-align: center;
text-align: center;
text-decoration: none;
text-decoration: none;
cursor: pointer;
cursor: pointer;
color: #67757c;
color: #67757c;
border: 1px solid #ddd
border: 1px solid #ddd
}
}
.jsgrid-pager-nav-button a:hover, .jsgrid-pager-page a:hover {
.jsgrid-pager-nav-button a:hover, .jsgrid-pager-page a:hover {
background-color: #1976d2;
background-color: #1976d2;
color: #ffffff
color: #ffffff
}
}
.jsgrid-pager-current-page {
.jsgrid-pager-current-page {
background-color: #1976d2;
background-color: #1976d2;
color: #ffffff
color: #ffffff
}
}
.jsgrid-pager-nav-button, .jsgrid-pager-page {
.jsgrid-pager-nav-button, .jsgrid-pager-page {
padding: 0
padding: 0
}
}
.jsgrid-pager-page.jsgrid-pager-current-page {
.jsgrid-pager-page.jsgrid-pager-current-page {
padding: 0.5em 1em!important
padding: 0.5em 1em!important
}
}
.left-sidebar {
.left-sidebar {
position: absolute;
position: absolute;
width: 240px;
width: 240px;
height: 100%;
height: 100%;
top: 0px;
top: 0px;
z-index: 20;
z-index: 20;
padding-top: 60px;
padding-top: 60px;
background: #fff;
background: #fff;
-webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08)
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08)
}
}
.fix-sidebar .left-sidebar {
.fix-sidebar .left-sidebar {
position: fixed
position: fixed
}
}
.user-profile {
.user-profile {
position: relative;
position: relative;
background-size: cover
background-size: cover
}
}
.user-profile .setpos {
.user-profile .setpos {
top: -47px;
top: -47px;
right: -3px
right: -3px
}
}
.user-profile .profile-img {
.user-profile .profile-img {
width: 70px;
width: 70px;
margin: 0 auto;
margin: 0 auto;
padding: 10px 0 5px 0;
padding: 10px 0 5px 0;
border-radius: 100%
border-radius: 100%
}
}
.user-profile .profile-img img {
.user-profile .profile-img img {
width: 100%;
width: 100%;
padding: 5px;
padding: 5px;
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
border-radius: 100%
border-radius: 100%
}
}
.user-profile .profile-text {
.user-profile .profile-text {
padding: 5px 0px;
padding: 5px 0px;
position: relative;
position: relative;
text-align: center
text-align: center
}
}
.user-profile .profile-text>a {
.user-profile .profile-text>a {
color: #99abb4;
color: #99abb4;
padding: 0 5px
padding: 0 5px
}
}
.user-profile .profile-text>a:hover {
.user-profile .profile-text>a:hover {
color: #1976d2
color: #1976d2
}
}
.user-profile .profile-text>a:after {
.user-profile .profile-text>a:after {
display: none
display: none
}
}
.user-profile .dropdown-menu {
.user-profile .dropdown-menu {
left: 0px;
left: 0px;
right: 0px;
right: 0px;
top: 62px!important;
top: 62px!important;
width: 180px;
width: 180px;
margin: 0 auto
margin: 0 auto
}
}
.sidebar-footer {
.sidebar-footer {
position: fixed;
position: fixed;
z-index: 10;
z-index: 10;
bottom: 0px;
bottom: 0px;
left: 0px;
left: 0px;
-webkit-transition: 0.2s ease-out;
-webkit-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
transition: 0.2s ease-out;
transition: 0.2s ease-out;
width: 240px;
width: 240px;
background: #fff;
background: #fff;
border-top: 1px solid rgba(120, 130, 140, 0.13)
border-top: 1px solid rgba(120, 130, 140, 0.13)
}
}
.sidebar-footer a {
.sidebar-footer a {
padding: 15px;
padding: 15px;
width: 33.333337%;
width: 33.333337%;
float: left;
float: left;
text-align: center;
text-align: center;
font-size: 18px
font-size: 18px
}
}
.scroll-sidebar {
.scroll-sidebar {
padding-bottom: 60px
padding-bottom: 60px
}
}
.collapse.in {
.collapse.in {
display: block
display: block
}
}
.sidebar-nav {
.sidebar-nav {
background: #fff;
background: #fff;
padding: 0px
padding: 0px
}
}
.sidebar-nav ul {
.sidebar-nav ul {
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
.sidebar-nav ul li {
.sidebar-nav ul li {
list-style: none
list-style: none
}
}
.sidebar-nav ul li a {
.sidebar-nav ul li a {
color: #607d8b;
color: #607d8b;
padding: 8px 35px 8px 15px;
padding: 8px 35px 8px 15px;
display: block;
display: block;
font-size: 14px
font-size: 14px
}
}
.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
color: #1976d2
color: #1976d2
}
}
.sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i {
.sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i {
color: #1976d2
color: #1976d2
}
}
.sidebar-nav ul li a.active {
.sidebar-nav ul li a.active {
font-weight: 500;
font-weight: 500;
color: #263238
color: #263238
}
}
.sidebar-nav ul li ul {
.sidebar-nav ul li ul {
padding-left: 28px
padding-left: 28px
}
}
.sidebar-nav ul li ul li a {
.sidebar-nav ul li ul li a {
padding: 7px 35px 7px 15px
padding: 7px 35px 7px 15px
}
}
.sidebar-nav ul li ul ul {
.sidebar-nav ul li ul ul {
padding-left: 15px
padding-left: 15px
}
}
.sidebar-nav ul li.nav-small-cap {
.sidebar-nav ul li.nav-small-cap {
font-size: 12px;
font-size: 12px;
margin-bottom: 0px;
margin-bottom: 0px;
padding: 14px 14px 14px 20px;
padding: 14px 14px 14px 20px;
color: #263238;
color: #263238;
font-weight: 500
font-weight: 500
}
}
.sidebar-nav ul li.nav-devider {
.sidebar-nav ul li.nav-devider {
height: 1px;
height: 1px;
background: rgba(120, 130, 140, 0.13);
background: rgba(120, 130, 140, 0.13);
display: block;
display: block;
margin: 20px 0
margin: 20px 0
}
}
.sidebar-nav>ul>li>a {
.sidebar-nav>ul>li>a {
border-left: 3px solid transparent
border-left: 3px solid transparent
}
}
.sidebar-nav>ul>li>a i {
.sidebar-nav>ul>li>a i {
width: 27px;
width: 27px;
font-size: 19px;
font-size: 19px;
display: inline-block;
display: inline-block;
vertical-align: middle;
vertical-align: middle;
color: #99abb4
color: #99abb4
}
}
.sidebar-nav>ul>li>a .label {
.sidebar-nav>ul>li>a .label {
float: right;
float: right;
margin-top: 6px
margin-top: 6px
}
}
.sidebar-nav>ul>li>a.active {
.sidebar-nav>ul>li>a.active {
font-weight: 400;
font-weight: 400;
background: #242933;
background: #242933;
color: #26c6da
color: #26c6da
}
}
.sidebar-nav>ul>li {
.sidebar-nav>ul>li {
margin-bottom: 5px
margin-bottom: 5px
}
}
.sidebar-nav>ul>li.active>a {
.sidebar-nav>ul>li.active>a {
color: #1976d2;
color: #1976d2;
font-weight: 500;
font-weight: 500;
border-left: 3px solid #1976d2
border-left: 3px solid #1976d2
}
}
.sidebar-nav>ul>li.active>a i {
.sidebar-nav>ul>li.active>a i {
color: #1976d2
color: #1976d2
}
}
.sidebar-nav .has-arrow {
.sidebar-nav .has-arrow {
position: relative
position: relative
}
}
.sidebar-nav .has-arrow:after {
.sidebar-nav .has-arrow:after {
position: absolute;
position: absolute;
content: '';
content: '';
width: 7px;
width: 7px;
height: 7px;
height: 7px;
border-width: 1px 0 0 1px;
border-width: 1px 0 0 1px;
border-style: solid;
border-style: solid;
border-color: #607d8b;
border-color: #607d8b;
right: 1em;
right: 1em;
-webkit-transform: rotate(135deg) translate(0, -50%);
-webkit-transform: rotate(135deg) translate(0, -50%);
-ms-transform: rotate(135deg) translate(0, -50%);
-ms-transform: rotate(135deg) translate(0, -50%);
-o-transform: rotate(135deg) translate(0, -50%);
-o-transform: rotate(135deg) translate(0, -50%);
transform: rotate(135deg) translate(0, -50%);
transform: rotate(135deg) translate(0, -50%);
-webkit-transform-origin: top;
-webkit-transform-origin: top;
-ms-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
transform-origin: top;
top: 47%;
top: 47%;
-webkit-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out
transition: all .3s ease-out
}
}
.sidebar-nav .active>.has-arrow:after, .sidebar-nav .has-arrow[aria-expanded=true]:after, .sidebar-nav li>.has-arrow.active:after {
.sidebar-nav .active>.has-arrow:after, .sidebar-nav .has-arrow[aria-expanded=true]:after, .sidebar-nav li>.has-arrow.active:after {
-webkit-transform: rotate(-135deg) translate(0, -50%);
-webkit-transform: rotate(-135deg) translate(0, -50%);
-ms-transform: rotate(-135deg) translate(0, -50%);
-ms-transform: rotate(-135deg) translate(0, -50%);
-o-transform: rotate(-135deg) translate(0, -50%);
-o-transform: rotate(-135deg) translate(0, -50%);
top: 45%;
top: 45%;
width: 7px;
width: 7px;
transform: rotate(-135deg) translate(0, -50%)
transform: rotate(-135deg) translate(0, -50%)
}
}
@media (min-width:768px) {
@media (min-width:768px) {
.mini-sidebar .sidebar-nav #sidebarnav li {
.mini-sidebar .sidebar-nav #sidebarnav li {
position: relative
position: relative
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li>ul {
.mini-sidebar .sidebar-nav #sidebarnav>li>ul {
position: absolute;
position: absolute;
left: 60px;
left: 60px;
top: 45px;
top: 45px;
width: 200px;
width: 200px;
z-index: 1001;
z-index: 1001;
background: #f2f6f8;
background: #f2f6f8;
display: none;
display: none;
padding-left: 1px
padding-left: 1px
}
}
.mini-sidebar .user-profile .profile-img {
.mini-sidebar .user-profile .profile-img {
width: 50px
width: 50px
}
}
.mini-sidebar .user-profile .profile-img .setpos {
.mini-sidebar .user-profile .profile-img .setpos {
top: -35px
top: -35px
}
}
.mini-sidebar.fix-sidebar .left-sidebar {
.mini-sidebar.fix-sidebar .left-sidebar {
position: absolute
position: absolute
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul {
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul {
height: auto!important;
height: auto!important;
overflow: auto
overflow: auto
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul, .mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul.collapse {
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul, .mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul.collapse {
display: block
display: block
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li>a.has-arrow:after {
.mini-sidebar .sidebar-nav #sidebarnav>li>a.has-arrow:after {
display: none
display: none
}
}
.mini-sidebar .left-sidebar {
.mini-sidebar .left-sidebar {
width: 60px
width: 60px
}
}
.mini-sidebar .user-profile {
.mini-sidebar .user-profile {
padding-bottom: 15px;
padding-bottom: 15px;
width: 60px;
width: 60px;
margin-bottom: 7px
margin-bottom: 7px
}
}
.mini-sidebar .user-profile .profile-img {
.mini-sidebar .user-profile .profile-img {
padding: 15px 0 0 0;
padding: 15px 0 0 0;
margin: 0px 0 0 6px
margin: 0px 0 0 6px
}
}
.mini-sidebar .user-profile .profile-img:before {
.mini-sidebar .user-profile .profile-img:before {
top: 15px
top: 15px
}
}
.mini-sidebar .scroll-sidebar {
.mini-sidebar .scroll-sidebar {
padding-bottom: 0px;
padding-bottom: 0px;
position: absolute;
position: absolute;
overflow-x: hidden!important
overflow-x: hidden!important
}
}
.mini-sidebar .hide-menu, .mini-sidebar .nav-small-cap, .mini-sidebar .sidebar-footer, .mini-sidebar .user-profile .profile-text, .mini-sidebar>.label {
.mini-sidebar .hide-menu, .mini-sidebar .nav-small-cap, .mini-sidebar .sidebar-footer, .mini-sidebar .user-profile .profile-text, .mini-sidebar>.label {
display: none
display: none
}
}
.mini-sidebar .nav-devider {
.mini-sidebar .nav-devider {
width: 60px
width: 60px
}
}
.mini-sidebar .sidebar-nav {
.mini-sidebar .sidebar-nav {
background: transparent
background: transparent
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li>a {
.mini-sidebar .sidebar-nav #sidebarnav>li>a {
padding: 9px 18px;
padding: 9px 18px;
width: 50px
width: 50px
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
width: 260px;
width: 260px;
background: #f2f6f8
background: #f2f6f8
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a .hide-menu {
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a .hide-menu {
display: inline
display: inline
}
}
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a .label {
.mini-sidebar .sidebar-nav #sidebarnav>li:hover>a .label {
display: none
display: none
}
}
}
}
@media (max-width:767px) {
@media (max-width:767px) {
.mini-sidebar .left-sidebar {
.mini-sidebar .left-sidebar {
position: fixed
position: fixed
}
}
.mini-sidebar .left-sidebar, .mini-sidebar .sidebar-footer {
.mini-sidebar .left-sidebar, .mini-sidebar .sidebar-footer {
left: -240px
left: -240px
}
}
.mini-sidebar.show-sidebar .left-sidebar, .mini-sidebar.show-sidebar .sidebar-footer {
.mini-sidebar.show-sidebar .left-sidebar, .mini-sidebar.show-sidebar .sidebar-footer {
left: 0px
left: 0px
}
}
}
}
.topbar .top-navbar .mailbox {
.topbar .top-navbar .mailbox {
width: 300px
width: 300px
}
}
.topbar .top-navbar .mailbox ul {
.topbar .top-navbar .mailbox ul {
padding: 0px
padding: 0px
}
}
.topbar .top-navbar .mailbox ul li {
.topbar .top-navbar .mailbox ul li {
list-style: none
list-style: none
}
}
.mailbox ul li .drop-title {
.mailbox ul li .drop-title {
font-weight: 500;
font-weight: 500;
padding: 11px 20px 15px;
padding: 11px 20px 15px;
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
}
}
.mailbox ul li .nav-link {
.mailbox ul li .nav-link {
border-top: 1px solid rgba(120, 130, 140, 0.13);
border-top: 1px solid rgba(120, 130, 140, 0.13);
padding-top: 15px
padding-top: 15px
}
}
.mailbox .message-center {
.mailbox .message-center {
height: 200px;
height: 200px;
overflow: auto;
overflow: auto;
position: relative
position: relative
}
}
.mailbox .message-center a {
.mailbox .message-center a {
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
display: block;
display: block;
text-decoration: none;
text-decoration: none;
padding: 9px 15px
padding: 9px 15px
}
}
.mailbox .message-center a:hover {
.mailbox .message-center a:hover {
background: #f2f4f8
background: #f2f4f8
}
}
.mailbox .message-center a div {
.mailbox .message-center a div {
white-space: normal
white-space: normal
}
}
.mailbox .message-center a .user-img {
.mailbox .message-center a .user-img {
width: 40px;
width: 40px;
position: relative;
position: relative;
display: inline-block;
display: inline-block;
margin: 0 10px 15px 0
margin: 0 10px 15px 0
}
}
.mailbox .message-center a .user-img img {
.mailbox .message-center a .user-img img {
width: 100%
width: 100%
}
}
.mailbox .message-center a .user-img .profile-status {
.mailbox .message-center a .user-img .profile-status {
border: 2px solid #ffffff;
border: 2px solid #ffffff;
border-radius: 50%;
border-radius: 50%;
display: inline-block;
display: inline-block;
height: 10px;
height: 10px;
left: 30px;
left: 30px;
position: absolute;
position: absolute;
top: 1px;
top: 1px;
width: 10px
width: 10px
}
}
.mailbox .message-center a .user-img .online {
.mailbox .message-center a .user-img .online {
background: #26dad2
background: #26dad2
}
}
.mailbox .message-center a .user-img .busy {
.mailbox .message-center a .user-img .busy {
background: #ef5350
background: #ef5350
}
}
.mailbox .message-center a .user-img .away {
.mailbox .message-center a .user-img .away {
background: #ffb22b
background: #ffb22b
}
}
.mailbox .message-center a .user-img .offline {
.mailbox .message-center a .user-img .offline {
background: #ffb22b
background: #ffb22b
}
}
.mailbox .message-center a .mail-contnet {
.mailbox .message-center a .mail-contnet {
display: inline-block;
display: inline-block;
width: 75%;
width: 75%;
vertical-align: middle
vertical-align: middle
}
}
.mailbox .message-center a .mail-contnet h5 {
.mailbox .message-center a .mail-contnet h5 {
margin: 5px 0px 0
margin: 5px 0px 0
}
}
.mailbox .message-center a .mail-contnet .mail-desc, .mailbox .message-center a .mail-contnet .time {
.mailbox .message-center a .mail-contnet .mail-desc, .mailbox .message-center a .mail-contnet .time {
font-size: 12px;
font-size: 12px;
display: block;
display: block;
margin: 1px 0;
margin: 1px 0;
-o-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden;
color: #67757c;
color: #67757c;
white-space: nowrap
white-space: nowrap
}
}
.analytics-info li span {
.analytics-info li span {
font-size: 24px;
font-size: 24px;
vertical-align: middle
vertical-align: middle
}
}
.stats-row {
.stats-row {
margin-bottom: 20px
margin-bottom: 20px
}
}
.stats-row .stat-item {
.stats-row .stat-item {
display: inline-block;
display: inline-block;
padding-right: 15px
padding-right: 15px
}
}
.stats-row .stat-item+.stat-item {
.stats-row .stat-item+.stat-item {
padding-left: 15px;
padding-left: 15px;
border-left: 1px solid rgba(120, 130, 140, 0.13)
border-left: 1px solid rgba(120, 130, 140, 0.13)
}
}
.city-weather-days {
.city-weather-days {
margin: 0px
margin: 0px
}
}
.city-weather-days li {
.city-weather-days li {
text-align: center;
text-align: center;
padding: 15px 0
padding: 15px 0
}
}
.city-weather-days li span {
.city-weather-days li span {
display: block;
display: block;
padding: 10px 0 0;
padding: 10px 0 0;
color: #99abb4
color: #99abb4
}
}
.city-weather-days li i {
.city-weather-days li i {
display: block;
display: block;
font-size: 20px;
font-size: 20px;
color: #1976d2
color: #1976d2
}
}
.city-weather-days li h3 {
.city-weather-days li h3 {
font-weight: 300;
font-weight: 300;
margin-top: 5px
margin-top: 5px
}
}
.comment-widgets {
.comment-widgets {
position: relative;
position: relative;
margin-bottom: 10px
margin-bottom: 10px
}
}
.comment-widgets .comment-row {
.comment-widgets .comment-row {
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
padding: 15px
padding: 15px
}
}
.comment-widgets .comment-row:last-child {
.comment-widgets .comment-row:last-child {
border-bottom: 0px
border-bottom: 0px
}
}
.comment-widgets .comment-row.active, .comment-widgets .comment-row:hover {
.comment-widgets .comment-row.active, .comment-widgets .comment-row:hover {
background: rgba(0, 0, 0, 0.02)
background: rgba(0, 0, 0, 0.02)
}
}
.comment-text {
.comment-text {
padding: 15px 15px 15px 20px;
padding: 15px 15px 15px 20px;
width: 80%
width: 80%
}
}
.comment-text.active .comment-footer .action-icons, .comment-text:hover .comment-footer .action-icons {
.comment-text.active .comment-footer .action-icons, .comment-text:hover .comment-footer .action-icons {
visibility: visible
visibility: visible
}
}
.comment-text p {
.comment-text p {
max-height: 50px;
max-height: 50px;
width: 100%;
width: 100%;
overflow: hidden
overflow: hidden
}
}
.comment-footer .action-icons {
.comment-footer .action-icons {
visibility: hidden
visibility: hidden
}
}
.comment-footer .action-icons a {
.comment-footer .action-icons a {
padding-left: 7px;
padding-left: 7px;
vertical-align: middle;
vertical-align: middle;
color: #99abb4
color: #99abb4
}
}
.comment-footer .action-icons a.active, .comment-footer .action-icons a:hover {
.comment-footer .action-icons a.active, .comment-footer .action-icons a:hover {
color: #1976d2
color: #1976d2
}
}
.todo-list li {
.todo-list li {
border: 0px;
border: 0px;
margin-bottom: 0px;
margin-bottom: 0px;
padding: 20px 15px 15px 0px
padding: 20px 15px 15px 0px
}
}
.todo-list li .checkbox {
.todo-list li .checkbox {
width: 100%
width: 100%
}
}
.todo-list li .checkbox label {
.todo-list li .checkbox label {
font-weight: 400;
font-weight: 400;
color: #455a64
color: #455a64
}
}
.todo-list li:last-child {
.todo-list li:last-child {
border-bottom: 0px
border-bottom: 0px
}
}
.todo-list li .assignedto {
.todo-list li .assignedto {
padding: 0px 0 0 27px;
padding: 0px 0 0 27px;
margin: 0px
margin: 0px
}
}
.todo-list li .assignedto li {
.todo-list li .assignedto li {
list-style: none;
list-style: none;
padding: 0px;
padding: 0px;
display: inline-block;
display: inline-block;
border: 0px;
border: 0px;
margin-right: 2px
margin-right: 2px
}
}
.todo-list li .assignedto li img {
.todo-list li .assignedto li img {
width: 30px;
width: 30px;
border-radius: 100%
border-radius: 100%
}
}
.todo-list li .item-date {
.todo-list li .item-date {
padding-left: 25px;
padding-left: 25px;
font-size: 12px;
font-size: 12px;
display: inline-block
display: inline-block
}
}
.list-task .task-done span {
.list-task .task-done span {
text-decoration: line-through
text-decoration: line-through
}
}
.chat-list {
.chat-list {
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
.chat-list li {
.chat-list li {
list-style: none;
list-style: none;
margin-top: 30px
margin-top: 30px
}
}
.chat-list li .chat-img {
.chat-list li .chat-img {
display: inline-block;
display: inline-block;
width: 45px;
width: 45px;
vertical-align: top
vertical-align: top
}
}
.chat-list li .chat-img img {
.chat-list li .chat-img img {
width: 45px;
width: 45px;
border-radius: 100%
border-radius: 100%
}
}
.chat-list li .chat-content {
.chat-list li .chat-content {
width: calc(100% - 140px);
width: calc(100% - 140px);
display: inline-block;
display: inline-block;
padding-left: 15px
padding-left: 15px
}
}
.chat-list li .chat-content h5 {
.chat-list li .chat-content h5 {
color: #263238
color: #263238
}
}
.chat-list li .chat-content .box {
.chat-list li .chat-content .box {
display: inline-block;
display: inline-block;
margin-bottom: 10px;
margin-bottom: 10px;
position: relative
position: relative
}
}
.chat-list li .chat-content .box:after {
.chat-list li .chat-content .box:after {
right: 99%;
right: 99%;
top: 0;
top: 0;
border: solid transparent;
border: solid transparent;
content: " ";
content: " ";
height: 0;
height: 0;
width: 0;
width: 0;
position: absolute;
position: absolute;
pointer-events: none;
pointer-events: none;
border-top-color: #cfecfe;
border-top-color: #cfecfe;
border-width: 8px;
border-width: 8px;
margin-left: -1px;
margin-left: -1px;
border-right-color: #cfecfe
border-right-color: #cfecfe
}
}
.chat-list li .chat-time {
.chat-list li .chat-time {
display: block;
display: block;
text-align: right;
text-align: right;
width: 80px;
width: 80px;
margin-left: 28px;
margin-left: 28px;
font-size: 10px;
font-size: 10px;
color: #99abb4
color: #99abb4
}
}
.chat-list li.odd .chat-content {
.chat-list li.odd .chat-content {
text-align: right;
text-align: right;
width: calc(100% - 90px)
width: calc(100% - 90px)
}
}
.chat-list li.odd .box {
.chat-list li.odd .box {
clear: both
clear: both
}
}
.chat-list li.odd+.odd {
.chat-list li.odd+.odd {
margin-top: 0px
margin-top: 0px
}
}
.chat-list li.reverse {
.chat-list li.reverse {
text-align: right
text-align: right
}
}
.chat-list li.reverse .box:after {
.chat-list li.reverse .box:after {
left: 99%;
left: 99%;
right: auto;
right: auto;
border-right-color: transparent;
border-right-color: transparent;
border-left-color: #f6f6f6;
border-left-color: #f6f6f6;
border-top-color: #f6f6f6
border-top-color: #f6f6f6
}
}
.chat-list li.reverse .chat-time {
.chat-list li.reverse .chat-time {
text-align: right;
text-align: right;
margin-left: auto;
margin-left: auto;
margin-right: 65px
margin-right: 65px
}
}
.chat-list li.reverse .chat-content {
.chat-list li.reverse .chat-content {
padding-left: 0px;
padding-left: 0px;
padding-right: 15px
padding-right: 15px
}
}
.message-box ul li .drop-title {
.message-box ul li .drop-title {
font-weight: 500;
font-weight: 500;
padding: 11px 20px 15px;
padding: 11px 20px 15px;
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
border-bottom: 1px solid rgba(120, 130, 140, 0.13)
}
}
.message-box ul li .nav-link {
.message-box ul li .nav-link {
border-top: 1px solid rgba(120, 130, 140, 0.13);
border-top: 1px solid rgba(120, 130, 140, 0.13);
padding-top: 15px
padding-top: 15px
}
}
.message-box .message-widget {
.message-box .message-widget {
position: relative
position: relative
}
}
.message-box .message-widget a {
.message-box .message-widget a {
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
display: block;
display: block;
text-decoration: none;
text-decoration: none;
padding: 9px 15px
padding: 9px 15px
}
}
.message-box .message-widget a:hover {
.message-box .message-widget a:hover {
background: #f2f4f8
background: #f2f4f8
}
}
.message-box .message-widget a:last-child {
.message-box .message-widget a:last-child {
border-bottom: 0px
border-bottom: 0px
}
}
.message-box .message-widget a div {
.message-box .message-widget a div {
white-space: normal
white-space: normal
}
}
.message-box .message-widget a .user-img {
.message-box .message-widget a .user-img {
width: 45px;
width: 45px;
position: relative;
position: relative;
display: inline-block;
display: inline-block;
margin: 0 10px 15px 0
margin: 0 10px 15px 0
}
}
.message-box .message-widget a .user-img img {
.message-box .message-widget a .user-img img {
width: 100%
width: 100%
}
}
.message-box .message-widget a .user-img .profile-status {
.message-box .message-widget a .user-img .profile-status {
border: 2px solid #ffffff;
border: 2px solid #ffffff;
border-radius: 50%;
border-radius: 50%;
display: inline-block;
display: inline-block;
height: 10px;
height: 10px;
left: 33px;
left: 33px;
position: absolute;
position: absolute;
top: -1px;
top: -1px;
width: 10px
width: 10px
}
}
.message-box .message-widget a .user-img .online {
.message-box .message-widget a .user-img .online {
background: #26dad2
background: #26dad2
}
}
.message-box .message-widget a .user-img .busy {
.message-box .message-widget a .user-img .busy {
background: #ef5350
background: #ef5350
}
}
.message-box .message-widget a .user-img .away {
.message-box .message-widget a .user-img .away {
background: #ffb22b
background: #ffb22b
}
}
.message-box .message-widget a .user-img .offline {
.message-box .message-widget a .user-img .offline {
background: #ffb22b
background: #ffb22b
}
}
.message-box .message-widget a .mail-contnet {
.message-box .message-widget a .mail-contnet {
display: inline-block;
display: inline-block;
width: 73%;
width: 73%;
vertical-align: middle
vertical-align: middle
}
}
.message-box .message-widget a .mail-contnet h5 {
.message-box .message-widget a .mail-contnet h5 {
margin: 5px 0px 0
margin: 5px 0px 0
}
}
.message-box .message-widget a .mail-contnet .mail-desc, .message-box .message-widget a .mail-contnet .time {
.message-box .message-widget a .mail-contnet .mail-desc, .message-box .message-widget a .mail-contnet .time {
font-size: 12px;
font-size: 12px;
display: block;
display: block;
margin: 1px 0;
margin: 1px 0;
-o-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden;
color: #67757c;
color: #67757c;
white-space: nowrap
white-space: nowrap
}
}
.calendar {
.calendar {
float: left;
float: left;
margin-bottom: 0px
margin-bottom: 0px
}
}
.fc-view {
.fc-view {
margin-top: 30px
margin-top: 30px
}
}
.none-border .modal-footer {
.none-border .modal-footer {
border-top: none
border-top: none
}
}
.fc-toolbar {
.fc-toolbar {
margin-bottom: 5px;
margin-bottom: 5px;
margin-top: 15px
margin-top: 15px
}
}
.fc-toolbar h2 {
.fc-toolbar h2 {
font-size: 18px;
font-size: 18px;
font-weight: 500;
font-weight: 500;
line-height: 30px;
line-height: 30px;
text-transform: uppercase
text-transform: uppercase
}
}
.fc-day {
.fc-day {
background: #ffffff
background: #ffffff
}
}
.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active, .fc-toolbar .ui-state-hover, .fc-toolbar button:focus, .fc-toolbar button:hover {
.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active, .fc-toolbar .ui-state-hover, .fc-toolbar button:focus, .fc-toolbar button:hover {
z-index: 0
z-index: 0
}
}
.fc-widget-header {
.fc-widget-header {
border: 0px!important
border: 0px!important
}
}
.fc-widget-content {
.fc-widget-content {
border-color: rgba(120, 130, 140, 0.13)!important
border-color: rgba(120, 130, 140, 0.13)!important
}
}
.fc th.fc-widget-header {
.fc th.fc-widget-header {
color: #67757c;
color: #67757c;
font-size: 13px;
font-size: 13px;
font-weight: 300;
font-weight: 300;
line-height: 20px;
line-height: 20px;
padding: 7px 0px;
padding: 7px 0px;
text-transform: uppercase
text-transform: uppercase
}
}
.fc th.fc-sat, .fc th.fc-sun, .fc th.fc-thu, .fc th.fc-tue {
.fc th.fc-sat, .fc th.fc-sun, .fc th.fc-thu, .fc th.fc-tue {
background: #f2f7f8
background: #f2f7f8
}
}
.fc th.fc-fri, .fc th.fc-mon, .fc th.fc-wed {
.fc th.fc-fri, .fc th.fc-mon, .fc th.fc-wed {
background: #f2f7f8
background: #f2f7f8
}
}
.fc-view {
.fc-view {
margin-top: 0px
margin-top: 0px
}
}
.fc-toolbar {
.fc-toolbar {
margin: 0px;
margin: 0px;
padding: 24px 0px
padding: 24px 0px
}
}
.fc-button {
.fc-button {
background: #ffffff;
background: #ffffff;
border: 1px solid rgba(120, 130, 140, 0.13);
border: 1px solid rgba(120, 130, 140, 0.13);
color: #67757c;
color: #67757c;
text-transform: capitalize
text-transform: capitalize
}
}
.fc-button:hover {
.fc-button:hover {
background: #f2f4f8;
background: #f2f4f8;
opacity: 0.8
opacity: 0.8
}
}
.fc-text-arrow {
.fc-text-arrow {
font-family: inherit;
font-family: inherit;
font-size: 16px
font-size: 16px
}
}
.fc-state-hover {
.fc-state-hover {
background: #F5F5F5
background: #F5F5F5
}
}
.fc-unthemed .fc-today {
.fc-unthemed .fc-today {
border: 1px solid #ef5350;
border: 1px solid #ef5350;
background: #f2f4f8!important
background: #f2f4f8!important
}
}
.fc-state-highlight {
.fc-state-highlight {
background: #f0f0f0
background: #f0f0f0
}
}
.fc-cell-overlay {
.fc-cell-overlay {
background: #f0f0f0
background: #f0f0f0
}
}
.fc-unthemed .fc-today {
.fc-unthemed .fc-today {
background: #ffffff
background: #ffffff
}
}
.fc-event {
.fc-event {
border-radius: 0px;
border-radius: 0px;
border: none;
border: none;
cursor: move;
cursor: move;
color: #ffffff!important;
color: #ffffff!important;
font-size: 13px;
font-size: 13px;
margin: 1px -1px 0 -1px;
margin: 1px -1px 0 -1px;
padding: 5px 5px;
padding: 5px 5px;
text-align: center;
text-align: center;
background: #1976d2
background: #1976d2
}
}
.calendar-event {
.calendar-event {
cursor: move;
cursor: move;
margin: 10px 5px 0 0;
margin: 10px 5px 0 0;
padding: 6px 10px;
padding: 6px 10px;
display: inline-block;
display: inline-block;
color: #ffffff;
color: #ffffff;
min-width: 140px;
min-width: 140px;
text-align: center;
text-align: center;
background: #1976d2
background: #1976d2
}
}
.calendar-event a {
.calendar-event a {
float: right;
float: right;
opacity: 0.6;
opacity: 0.6;
font-size: 10px;
font-size: 10px;
margin: 4px 0 0 10px;
margin: 4px 0 0 10px;
color: #ffffff
color: #ffffff
}
}
.fc-basic-view td.fc-week-number span {
.fc-basic-view td.fc-week-number span {
padding-right: 5px
padding-right: 5px
}
}
.fc-basic-view .fc-day-number {
.fc-basic-view .fc-day-number {
padding: 10px 15px;
padding: 10px 15px;
display: inline-block
display: inline-block
}
}
.steamline {
.steamline {
position: relative;
position: relative;
border-left: 1px solid rgba(120, 130, 140, 0.13);
border-left: 1px solid rgba(120, 130, 140, 0.13);
margin-left: 20px
margin-left: 20px
}
}
.steamline .sl-left {
.steamline .sl-left {
float: left;
float: left;
margin-left: -20px;
margin-left: -20px;
z-index: 1;
z-index: 1;
width: 40px;
width: 40px;
line-height: 40px;
line-height: 40px;
text-align: center;
text-align: center;
height: 40px;
height: 40px;
border-radius: 100%;
border-radius: 100%;
color: #ffffff;
color: #ffffff;
background: #263238;
background: #263238;
margin-right: 15px
margin-right: 15px
}
}
.steamline .sl-left img {
.steamline .sl-left img {
max-width: 40px
max-width: 40px
}
}
.steamline .sl-right {
.steamline .sl-right {
padding-left: 50px
padding-left: 50px
}
}
.steamline .sl-right .desc, .steamline .sl-right .inline-photos {
.steamline .sl-right .desc, .steamline .sl-right .inline-photos {
margin-bottom: 30px
margin-bottom: 30px
}
}
.steamline .sl-item {
.steamline .sl-item {
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
margin: 20px 0
margin: 20px 0
}
}
.sl-date {
.sl-date {
font-size: 10px;
font-size: 10px;
color: #99abb4
color: #99abb4
}
}
.time-item {
.time-item {
border-color: rgba(120, 130, 140, 0.13);
border-color: rgba(120, 130, 140, 0.13);
padding-bottom: 1px;
padding-bottom: 1px;
position: relative
position: relative
}
}
.time-item:before {
.time-item:before {
content: " ";
content: " ";
display: table
display: table
}
}
.time-item:after {
.time-item:after {
background-color: #ffffff;
background-color: #ffffff;
border-color: rgba(120, 130, 140, 0.13);
border-color: rgba(120, 130, 140, 0.13);
border-radius: 10px;
border-radius: 10px;
border-style: solid;
border-style: solid;
border-width: 2px;
border-width: 2px;
bottom: 0;
bottom: 0;
content: '';
content: '';
height: 14px;
height: 14px;
left: 0;
left: 0;
margin-left: -8px;
margin-left: -8px;
position: absolute;
position: absolute;
top: 5px;
top: 5px;
width: 14px
width: 14px
}
}
.time-item-item:after {
.time-item-item:after {
content: " ";
content: " ";
display: table
display: table
}
}
.item-info {
.item-info {
margin-bottom: 15px;
margin-bottom: 15px;
margin-left: 15px
margin-left: 15px
}
}
.item-info p {
.item-info p {
margin-bottom: 10px!important
margin-bottom: 10px!important
}
}
.feeds {
.feeds {
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
.feeds li {
.feeds li {
list-style: none;
list-style: none;
padding: 10px;
padding: 10px;
display: block
display: block
}
}
.feeds li:hover {
.feeds li:hover {
background: #ebf3f5
background: #ebf3f5
}
}
.feeds li>div {
.feeds li>div {
width: 40px;
width: 40px;
height: 40px;
height: 40px;
margin-right: 5px;
margin-right: 5px;
display: inline-block;
display: inline-block;
text-align: center;
text-align: center;
vertical-align: middle;
vertical-align: middle;
border-radius: 100%
border-radius: 100%
}
}
.feeds li>div i {
.feeds li>div i {
line-height: 40px
line-height: 40px
}
}
.feeds li span {
.feeds li span {
float: right;
float: right;
width: auto;
width: auto;
font-size: 12px
font-size: 12px
}
}
.vert .carousel-item-next.carousel-item-left, .vert .carousel-item-prev.carousel-item-right {
.vert .carousel-item-next.carousel-item-left, .vert .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
transform: translate3d(0, 0, 0)
}
}
.vert .active.carousel-item-right, .vert .carousel-item-next {
.vert .active.carousel-item-right, .vert .carousel-item-next {
-webkit-transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100% 0)
transform: translate3d(0, 100% 0)
}
}
.vert .active.carousel-item-left, .vert .carousel-item-prev {
.vert .active.carousel-item-left, .vert .carousel-item-prev {
-webkit-transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
transform: translate3d(0, -100%, 0)
}
}
.social-widget .soc-header {
.social-widget .soc-header {
padding: 15px;
padding: 15px;
text-align: center;
text-align: center;
font-size: 36px;
font-size: 36px;
color: #fff
color: #fff
}
}
.social-widget .soc-header.box-facebook {
.social-widget .soc-header.box-facebook {
background: #3b5998
background: #3b5998
}
}
.social-widget .soc-header.box-twitter {
.social-widget .soc-header.box-twitter {
background: #00aced
background: #00aced
}
}
.social-widget .soc-header.box-google {
.social-widget .soc-header.box-google {
background: #f86c6b
background: #f86c6b
}
}
.social-widget .soc-header.box-linkedin {
.social-widget .soc-header.box-linkedin {
background: #4875b4
background: #4875b4
}
}
.social-widget .soc-content {
.social-widget .soc-content {
display: -webkit-box;
display: -webkit-box;
display: -ms-flexbox;
display: -ms-flexbox;
display: flex;
display: flex;
text-align: center
text-align: center
}
}
.social-widget .soc-content div {
.social-widget .soc-content div {
padding: 10px
padding: 10px
}
}
.social-widget .soc-content div h3 {
.social-widget .soc-content div h3 {
margin-bottom: 0px
margin-bottom: 0px
}
}
.gaugejs-box {
.gaugejs-box {
position: relative;
position: relative;
margin: 0 auto
margin: 0 auto
}
}
.gaugejs-box canvas.gaugejs {
.gaugejs-box canvas.gaugejs {
width: 100%!important;
width: 100%!important;
height: auto!important
height: auto!important
}
}
.social-profile-first {
.social-profile-first {
text-align: center;
text-align: center;
padding-top: 22%;
padding-top: 22%;
margin-bottom: 96px
margin-bottom: 96px
}
}
.social-profile-first.bg-over {
.social-profile-first.bg-over {
background: rgba(56, 83, 161, 0.7)
background: rgba(56, 83, 161, 0.7)
}
}
.social-profile-first .middle {
.social-profile-first .middle {
vertical-align: middle
vertical-align: middle
}
}
.country-state {
.country-state {
list-style: none;
list-style: none;
margin: 0;
margin: 0;
padding: 0 0 0 10px
padding: 0 0 0 10px
}
}
.country-state li {
.country-state li {
margin-top: 30px;
margin-top: 30px;
margin-bottom: 10px
margin-bottom: 10px
}
}
.country-state h2 {
.country-state h2 {
margin-bottom: 0px;
margin-bottom: 0px;
font-weight: 400
font-weight: 400
}
}
.profiletimeline {
.profiletimeline {
position: relative;
position: relative;
padding-left: 40px;
padding-left: 40px;
margin-right: 10px;
margin-right: 10px;
border-left: 1px solid rgba(120, 130, 140, 0.13);
border-left: 1px solid rgba(120, 130, 140, 0.13);
margin-left: 30px
margin-left: 30px
}
}
.profiletimeline .sl-left {
.profiletimeline .sl-left {
float: left;
float: left;
margin-left: -60px;
margin-left: -60px;
z-index: 1;
z-index: 1;
margin-right: 15px
margin-right: 15px
}
}
.profiletimeline .sl-left img {
.profiletimeline .sl-left img {
max-width: 40px
max-width: 40px
}
}
.profiletimeline .sl-item {
.profiletimeline .sl-item {
margin-top: 8px;
margin-top: 8px;
margin-bottom: 30px
margin-bottom: 30px
}
}
.profiletimeline .sl-date {
.profiletimeline .sl-date {
font-size: 12px;
font-size: 12px;
color: #99abb4
color: #99abb4
}
}
.profiletimeline .time-item {
.profiletimeline .time-item {
border-color: rgba(120, 130, 140, 0.13);
border-color: rgba(120, 130, 140, 0.13);
padding-bottom: 1px;
padding-bottom: 1px;
position: relative
position: relative
}
}
.profiletimeline .time-item:before {
.profiletimeline .time-item:before {
content: " ";
content: " ";
display: table
display: table
}
}
.profiletimeline .time-item:after {
.profiletimeline .time-item:after {
background-color: #ffffff;
background-color: #ffffff;
border-color: rgba(120, 130, 140, 0.13);
border-color: rgba(120, 130, 140, 0.13);
border-radius: 10px;
border-radius: 10px;
border-style: solid;
border-style: solid;
border-width: 2px;
border-width: 2px;
bottom: 0;
bottom: 0;
content: '';
content: '';
height: 14px;
height: 14px;
left: 0;
left: 0;
margin-left: -8px;
margin-left: -8px;
position: absolute;
position: absolute;
top: 5px;
top: 5px;
width: 14px
width: 14px
}
}
.profiletimeline .time-item-item:after {
.profiletimeline .time-item-item:after {
content: " ";
content: " ";
display: table
display: table
}
}
.profiletimeline .item-info {
.profiletimeline .item-info {
margin-bottom: 15px;
margin-bottom: 15px;
margin-left: 15px
margin-left: 15px
}
}
.profiletimeline .item-info p {
.profiletimeline .item-info p {
margin-bottom: 10px!important
margin-bottom: 10px!important
}
}
.blog-widget {
.blog-widget {
margin-top: 30px
margin-top: 30px
}
}
.blog-widget .blog-image img {
.blog-widget .blog-image img {
border-radius: 4px;
border-radius: 4px;
margin-top: -45px;
margin-top: -45px;
margin-bottom: 20px;
margin-bottom: 20px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2)
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2)
}
}
.weather-small h1 {
.weather-small h1 {
line-height: 30px
line-height: 30px
}
}
.weather-small sup {
.weather-small sup {
font-size: 60%
font-size: 60%
}
}
.little-profile .pro-img {
.little-profile .pro-img {
margin-top: -80px;
margin-top: -80px;
margin-bottom: 20px
margin-bottom: 20px
}
}
.little-profile .pro-img img {
.little-profile .pro-img img {
width: 128px;
width: 128px;
height: 128px;
height: 128px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 100%
border-radius: 100%
}
}
.contact-box {
.contact-box {
position: relative
position: relative
}
}
.contact-box .add-ct-btn {
.contact-box .add-ct-btn {
position: absolute;
position: absolute;
right: 4px;
right: 4px;
top: -46px
top: -46px
}
}
.contact-box .contact-widget>a {
.contact-box .contact-widget>a {
padding: 15px 10px
padding: 15px 10px
}
}
.contact-box .contact-widget>a .user-img {
.contact-box .contact-widget>a .user-img {
margin-bottom: 0px!important
margin-bottom: 0px!important
}
}
@media (min-width:1600px) {
@media (min-width:1600px) {
.col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11, .col-xlg-12 {
.col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11, .col-xlg-12 {
float: left
float: left
}
}
.col-xlg-12 {
.col-xlg-12 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
max-width: 100%
}
}
.col-xlg-11 {
.col-xlg-11 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.66666667%;
-webkit-flex: 0 0 91.66666667%;
-ms-flex: 0 0 91.66666667%;
-ms-flex: 0 0 91.66666667%;
flex: 0 0 91.66666667%;
flex: 0 0 91.66666667%;
max-width: 91.66666667%
max-width: 91.66666667%
}
}
.col-xlg-10 {
.col-xlg-10 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.33333333%;
-webkit-flex: 0 0 83.33333333%;
-ms-flex: 0 0 83.33333333%;
-ms-flex: 0 0 83.33333333%;
flex: 0 0 83.33333333%;
flex: 0 0 83.33333333%;
max-width: 83.33333333%
max-width: 83.33333333%
}
}
.col-xlg-9 {
.col-xlg-9 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
max-width: 75%
}
}
.col-xlg-8 {
.col-xlg-8 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.66666667%;
-webkit-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
-ms-flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
flex: 0 0 66.66666667%;
max-width: 66.66666667%
max-width: 66.66666667%
}
}
.col-xlg-7 {
.col-xlg-7 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.33333333%;
-webkit-flex: 0 0 58.33333333%;
-ms-flex: 0 0 58.33333333%;
-ms-flex: 0 0 58.33333333%;
flex: 0 0 58.33333333%;
flex: 0 0 58.33333333%;
max-width: 58.33333333%
max-width: 58.33333333%
}
}
.col-xlg-6 {
.col-xlg-6 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
max-width: 50%
}
}
.col-xlg-5 {
.col-xlg-5 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.66666667%;
-webkit-flex: 0 0 41.66666667%;
-ms-flex: 0 0 41.66666667%;
-ms-flex: 0 0 41.66666667%;
flex: 0 0 41.66666667%;
flex: 0 0 41.66666667%;
max-width: 41.66666667%
max-width: 41.66666667%
}
}
.col-xlg-4 {
.col-xlg-4 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333333%;
-webkit-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
-ms-flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
flex: 0 0 33.33333333%;
max-width: 33.33333333%
max-width: 33.33333333%
}
}
.col-xlg-3 {
.col-xlg-3 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
max-width: 25%
}
}
.col-xlg-2 {
.col-xlg-2 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.66666667%;
-webkit-flex: 0 0 16.66666667%;
-ms-flex: 0 0 16.66666667%;
-ms-flex: 0 0 16.66666667%;
flex: 0 0 16.66666667%;
flex: 0 0 16.66666667%;
max-width: 16.66666667%
max-width: 16.66666667%
}
}
.col-xlg-1 {
.col-xlg-1 {
-webkit-box-flex: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.33333333%;
-webkit-flex: 0 0 8.33333333%;
-ms-flex: 0 0 8.33333333%;
-ms-flex: 0 0 8.33333333%;
flex: 0 0 8.33333333%;
flex: 0 0 8.33333333%;
max-width: 8.33333333%
max-width: 8.33333333%
}
}
.col-xlg-pull-12 {
.col-xlg-pull-12 {
right: 100%
right: 100%
}
}
.col-xlg-pull-11 {
.col-xlg-pull-11 {
right: 91.66666667%
right: 91.66666667%
}
}
.col-xlg-pull-10 {
.col-xlg-pull-10 {
right: 83.33333333%
right: 83.33333333%
}
}
.col-xlg-pull-9 {
.col-xlg-pull-9 {
right: 75%
right: 75%
}
}
.col-xlg-pull-8 {
.col-xlg-pull-8 {
right: 66.66666667%
right: 66.66666667%
}
}
.col-xlg-pull-7 {
.col-xlg-pull-7 {
right: 58.33333333%
right: 58.33333333%
}
}
.col-xlg-pull-6 {
.col-xlg-pull-6 {
right: 50%
right: 50%
}
}
.col-xlg-pull-5 {
.col-xlg-pull-5 {
right: 41.66666667%
right: 41.66666667%
}
}
.col-xlg-pull-4 {
.col-xlg-pull-4 {
right: 33.33333333%
right: 33.33333333%
}
}
.col-xlg-pull-3 {
.col-xlg-pull-3 {
right: 25%
right: 25%
}
}
.col-xlg-pull-2 {
.col-xlg-pull-2 {
right: 16.66666667%
right: 16.66666667%
}
}
.col-xlg-pull-1 {
.col-xlg-pull-1 {
right: 8.33333333%
right: 8.33333333%
}
}
.col-xlg-pull-0 {
.col-xlg-pull-0 {
right: auto
right: auto
}
}
.col-xlg-push-12 {
.col-xlg-push-12 {
left: 100%
left: 100%
}
}
.col-xlg-push-11 {
.col-xlg-push-11 {
left: 91.66666667%
left: 91.66666667%
}
}
.col-xlg-push-10 {
.col-xlg-push-10 {
left: 83.33333333%
left: 83.33333333%
}
}
.col-xlg-push-9 {
.col-xlg-push-9 {
left: 75%
left: 75%
}
}
.col-xlg-push-8 {
.col-xlg-push-8 {
left: 66.66666667%
left: 66.66666667%
}
}
.col-xlg-push-7 {
.col-xlg-push-7 {
left: 58.33333333%
left: 58.33333333%
}
}
.col-xlg-push-6 {
.col-xlg-push-6 {
left: 50%
left: 50%
}
}
.col-xlg-push-5 {
.col-xlg-push-5 {
left: 41.66666667%
left: 41.66666667%
}
}
.col-xlg-push-4 {
.col-xlg-push-4 {
left: 33.33333333%
left: 33.33333333%
}
}
.col-xlg-push-3 {
.col-xlg-push-3 {
left: 25%
left: 25%
}
}
.col-xlg-push-2 {
.col-xlg-push-2 {
left: 16.66666667%
left: 16.66666667%
}
}
.col-xlg-push-1 {
.col-xlg-push-1 {
left: 8.33333333%
left: 8.33333333%
}
}
.col-xlg-push-0 {
.col-xlg-push-0 {
left: auto
left: auto
}
}
.offset-xlg-12 {
.offset-xlg-12 {
margin-left: 100%
margin-left: 100%
}
}
.offset-xlg-11 {
.offset-xlg-11 {
margin-left: 91.66666667%
margin-left: 91.66666667%
}
}
.offset-xlg-10 {
.offset-xlg-10 {
margin-left: 83.33333333%
margin-left: 83.33333333%
}
}
.offset-xlg-9 {
.offset-xlg-9 {
margin-left: 75%
margin-left: 75%
}
}
.offset-xlg-8 {
.offset-xlg-8 {
margin-left: 66.66666667%
margin-left: 66.66666667%
}
}
.offset-xlg-7 {
.offset-xlg-7 {
margin-left: 58.33333333%
margin-left: 58.33333333%
}
}
.offset-xlg-6 {
.offset-xlg-6 {
margin-left: 50%
margin-left: 50%
}
}
.offset-xlg-5 {
.offset-xlg-5 {
margin-left: 41.66666667%
margin-left: 41.66666667%
}
}
.offset-xlg-4 {
.offset-xlg-4 {
margin-left: 33.33333333%
margin-left: 33.33333333%
}
}
.offset-xlg-3 {
.offset-xlg-3 {
margin-left: 25%
margin-left: 25%
}
}
.offset-xlg-2 {
.offset-xlg-2 {
margin-left: 16.66666667%
margin-left: 16.66666667%
}
}
.offset-xlg-1 {
.offset-xlg-1 {
margin-left: 8.33333333%
margin-left: 8.33333333%
}
}
.offset-xlg-0 {
.offset-xlg-0 {
margin-left: 0
margin-left: 0
}
}
}
}
.col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11, .col-xlg-12 {
.col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11, .col-xlg-12 {
position: relative;
position: relative;
min-height: 1px;
min-height: 1px;
padding-right: 15px;
padding-right: 15px;
padding-left: 15px
padding-left: 15px
}
}
.bootstrap-touchspin .input-group-btn {
.bootstrap-touchspin .input-group-btn {
-webkit-box-align: normal;
-webkit-box-align: normal;
-ms-flex-align: normal;
-ms-flex-align: normal;
align-items: normal
align-items: normal
}
}
.form-control-danger, .form-control-success, .form-control-warning {
.form-control-danger, .form-control-success, .form-control-warning {
padding-right: 2.25rem;
padding-right: 2.25rem;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center right .5625rem;
background-position: center right .5625rem;
-webkit-background-size: 1.125rem 1.125rem;
-webkit-background-size: 1.125rem 1.125rem;
background-size: 1.125rem 1.125rem
background-size: 1.125rem 1.125rem
}
}
.has-success .col-form-label, .has-success .custom-control, .has-success .form-check-label, .has-success .form-control-feedback, .has-success .form-control-label {
.has-success .col-form-label, .has-success .custom-control, .has-success .form-check-label, .has-success .form-control-feedback, .has-success .form-control-label {
color: #26dad2
color: #26dad2
}
}
.has-success .form-control-success {
.has-success .form-control-success {
background-image: url(http://themedesigner.in/demo/admin-press/assets/images/icon/success.svg)
background-image: url(http://themedesigner.in/demo/admin-press/assets/images/icon/success.svg)
}
}
.has-success .form-control {
.has-success .form-control {
border-color: #26dad2
border-color: #26dad2
}
}
.has-warning .col-form-label, .has-warning .custom-control, .has-warning .form-check-label, .has-warning .form-control-feedback, .has-warning .form-control-label {
.has-warning .col-form-label, .has-warning .custom-control, .has-warning .form-check-label, .has-warning .form-control-feedback, .has-warning .form-control-label {
color: #ffb22b
color: #ffb22b
}
}
.has-warning .form-control-warning {
.has-warning .form-control-warning {
background-image: url(http://themedesigner.in/demo/admin-press/assets/images/icon/warning.svg)
background-image: url(http://themedesigner.in/demo/admin-press/assets/images/icon/warning.svg)
}
}
.has-warning .form-control {
.has-warning .form-control {
border-color: #ffb22b
border-color: #ffb22b
}
}
.has-danger .col-form-label, .has-danger .custom-control, .has-danger .form-check-label, .has-danger .form-control-feedback, .has-danger .form-control-label {
.has-danger .col-form-label, .has-danger .custom-control, .has-danger .form-check-label, .has-danger .form-control-feedback, .has-danger .form-control-label {
color: #ef5350
color: #ef5350
}
}
.has-danger .form-control-danger {
.has-danger .form-control-danger {
background-image: url(http://themedesigner.in/demo/admin-press/assets/images/icon/danger.svg)
background-image: url(http://themedesigner.in/demo/admin-press/assets/images/icon/danger.svg)
}
}
.has-danger .form-control {
.has-danger .form-control {
border-color: #ef5350
border-color: #ef5350
}
}
.input-group-addon [type=checkbox]:checked, .input-group-addon [type=checkbox]:not(:checked), .input-group-addon [type=radio]:checked, .input-group-addon [type=radio]:not(:checked) {
.input-group-addon [type=checkbox]:checked, .input-group-addon [type=checkbox]:not(:checked), .input-group-addon [type=radio]:checked, .input-group-addon [type=radio]:not(:checked) {
position: initial;
position: initial;
opacity: 1
opacity: 1
}
}
.invisible {
.invisible {
visibility: hidden!important
visibility: hidden!important
}
}
.hidden-xs-up {
.hidden-xs-up {
display: none!important
display: none!important
}
}
@media (max-width:575px) {
@media (max-width:575px) {
.hidden-xs-down {
.hidden-xs-down {
display: none!important
display: none!important
}
}
}
}
@media (min-width:576px) {
@media (min-width:576px) {
.hidden-sm-up {
.hidden-sm-up {
display: none!important
display: none!important
}
}
}
}
@media (max-width:767px) {
@media (max-width:767px) {
.hidden-sm-down {
.hidden-sm-down {
display: none!important
display: none!important
}
}
}
}
@media (min-width:768px) {
@media (min-width:768px) {
.hidden-md-up {
.hidden-md-up {
display: none!important
display: none!important
}
}
}
}
@media (max-width:991px) {
@media (max-width:991px) {
.hidden-md-down {
.hidden-md-down {
display: none!important
display: none!important
}
}
}
}
@media (min-width:992px) {
@media (min-width:992px) {
.hidden-lg-up {
.hidden-lg-up {
display: none!important
display: none!important
}
}
}
}
@media (max-width:1199px) {
@media (max-width:1199px) {
.hidden-lg-down {
.hidden-lg-down {
display: none!important
display: none!important
}
}
}
}
@media (min-width:1200px) {
@media (min-width:1200px) {
.hidden-xl-up {
.hidden-xl-up {
display: none!important
display: none!important
}
}
}
}
.hidden-xl-down {
.hidden-xl-down {
display: none!important
display: none!important
}
}
.card-inverse .card-blockquote, .card-inverse .card-footer, .card-inverse .card-header, .card-inverse .card-title {
.card-inverse .card-blockquote, .card-inverse .card-footer, .card-inverse .card-header, .card-inverse .card-title {
color: #ffffff
color: #ffffff
}
}
@media (min-width:1650px) {
@media (min-width:1650px) {
.widget-app-columns {
.widget-app-columns {
-webkit-column-count: 3;
-webkit-column-count: 3;
column-count: 3
column-count: 3
}
}
.campaign {
.campaign {
height: 365px!important
height: 365px!important
}
}
}
}
@media (max-width:1370px) {
@media (max-width:1370px) {
.widget-app-columns {
.widget-app-columns {
-webkit-column-count: 2;
-webkit-column-count: 2;
column-count: 2
column-count: 2
}
}
}
}
@media (min-width:1024px) {
@media (min-width:1024px) {
.page-wrapper {
.page-wrapper {
/* margin-left: 240px */
/* margin-left: 240px */
}
}
.footer {
.footer {
/* left: 240px */
/* left: 240px */
}
}
}
}
@media (max-width:1023px) {
@media (max-width:1023px) {
.page-wrapper {
.page-wrapper {
margin-left: 60px;
margin-left: 60px;
-webkit-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in
transition: 0.2s ease-in
}
}
.footer {
.footer {
left: 60px
left: 60px
}
}
.widget-app-columns {
.widget-app-columns {
-webkit-column-count: 1;
-webkit-column-count: 1;
column-count: 1
column-count: 1
}
}
.inbox-center a {
.inbox-center a {
width: 200px
width: 200px
}
}
}
}
@media (min-width:768px) {
@media (min-width:768px) {
.navbar-header {
.navbar-header {
width: 240px;
width: 240px;
-ms-flex-negative: 0;
-ms-flex-negative: 0;
flex-shrink: 0
flex-shrink: 0
}
}
.navbar-header .navbar-brand {
.navbar-header .navbar-brand {
padding-top: 0px
padding-top: 0px
}
}
.page-titles .breadcrumb {
.page-titles .breadcrumb {
float: right
float: right
}
}
.card-group .card:first-child, .card-group .card:not(:first-child):not(:last-child) {
.card-group .card:first-child, .card-group .card:not(:first-child):not(:last-child) {
border-right: 1px solid rgba(0, 0, 0, 0.03)
border-right: 1px solid rgba(0, 0, 0, 0.03)
}
}
.material-icon-list-demo .icons div {
.material-icon-list-demo .icons div {
width: 33%;
width: 33%;
padding: 15px;
padding: 15px;
display: inline-block;
display: inline-block;
line-height: 40px
line-height: 40px
}
}
.mini-sidebar .page-wrapper {
.mini-sidebar .page-wrapper {
margin-left: 60px
margin-left: 60px
}
}
.mini-sidebar .footer {
.mini-sidebar .footer {
left: 60px
left: 60px
}
}
.flex-wrap {
.flex-wrap {
-ms-flex-wrap: nowrap!important;
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
-webkit-flex-wrap: nowrap!important
-webkit-flex-wrap: nowrap!important
}
}
}
}
@media (max-width:767px) {
@media (max-width:767px) {
.topbar {
.topbar {
position: fixed;
position: fixed;
width: 100%
width: 100%
}
}
.topbar .top-navbar {
.topbar .top-navbar {
padding-right: 15px;
padding-right: 15px;
-webkit-box-orient: horizontal;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center
-webkit-align-items: center
}
}
.topbar .top-navbar .navbar-collapse {
.topbar .top-navbar .navbar-collapse {
display: -webkit-box;
display: -webkit-box;
display: -ms-flexbox;
display: -ms-flexbox;
display: flex;
display: flex;
width: 100%
width: 100%
}
}
.topbar .top-navbar .navbar-nav {
.topbar .top-navbar .navbar-nav {
-webkit-box-orient: horizontal;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
flex-direction: row
}
}
.topbar .top-navbar .navbar-nav>.nav-item.show {
.topbar .top-navbar .navbar-nav>.nav-item.show {
position: static
position: static
}
}
.topbar .top-navbar .navbar-nav>.nav-item.show .dropdown-menu {
.topbar .top-navbar .navbar-nav>.nav-item.show .dropdown-menu {
width: 100%;
width: 100%;
margin-top: 0px
margin-top: 0px
}
}
.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
padding-left: .50rem;
padding-left: .50rem;
padding-right: .50rem
padding-right: .50rem
}
}
.topbar .top-navbar .navbar-nav .dropdown-menu {
.topbar .top-navbar .navbar-nav .dropdown-menu {
position: absolute
position: absolute
}
}
.mega-dropdown .dropdown-menu {
.mega-dropdown .dropdown-menu {
height: 480px;
height: 480px;
overflow: auto
overflow: auto
}
}
.mini-sidebar .page-wrapper {
.mini-sidebar .page-wrapper {
margin-left: 0px;
margin-left: 0px;
padding-top: 60px
padding-top: 60px
}
}
.comment-text .comment-footer .action-icons {
.comment-text .comment-footer .action-icons {
display: block;
display: block;
padding: 10px 0
padding: 10px 0
}
}
.vtabs .tabs-vertical {
.vtabs .tabs-vertical {
width: auto
width: auto
}
}
.footer {
.footer {
left: 0px
left: 0px
}
}
.material-icon-list-demo .icons div {
.material-icon-list-demo .icons div {
width: 100%
width: 100%
}
}
.error-page .footer {
.error-page .footer {
position: fixed;
position: fixed;
bottom: 0px;
bottom: 0px;
z-index: 10
z-index: 10
}
}
.error-box {
.error-box {
position: relative;
position: relative;
padding-bottom: 60px
padding-bottom: 60px
}
}
.error-body {
.error-body {
padding-top: 10%
padding-top: 10%
}
}
.error-body h1 {
.error-body h1 {
font-size: 100px;
font-size: 100px;
font-weight: 600;
font-weight: 600;
line-height: 100px
line-height: 100px
}
}
.login-register {
.login-register {
position: relative;
position: relative;
overflow: hidden
overflow: hidden
}
}
.login-box {
.login-box {
width: 90%
width: 90%
}
}
.login-sidebar {
.login-sidebar {
padding: 10% 0
padding: 10% 0
}
}
.login-sidebar .login-box {
.login-sidebar .login-box {
position: relative
position: relative
}
}
.chat-main-box .chat-left-aside {
.chat-main-box .chat-left-aside {
left: -250px;
left: -250px;
position: absolute;
position: absolute;
-webkit-transition: 0.5s ease-in;
-webkit-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
transition: 0.5s ease-in;
background: #ffffff
background: #ffffff
}
}
.chat-main-box .chat-left-aside.open-pnl {
.chat-main-box .chat-left-aside.open-pnl {
left: 0px
left: 0px
}
}
.chat-main-box .chat-left-aside .open-panel {
.chat-main-box .chat-left-aside .open-panel {
display: block
display: block
}
}
.chat-main-box .chat-right-aside {
.chat-main-box .chat-right-aside {
width: 100%
width: 100%
}
}
ul.timeline:before {
ul.timeline:before {
left: 40px
left: 40px
}
}
ul.timeline>li>.timeline-panel {
ul.timeline>li>.timeline-panel {
width: calc(100% - 90px)
width: calc(100% - 90px)
}
}
ul.timeline>li>.timeline-badge {
ul.timeline>li>.timeline-badge {
top: 16px;
top: 16px;
left: 15px;
left: 15px;
margin-left: 0
margin-left: 0
}
}
ul.timeline>li>.timeline-panel {
ul.timeline>li>.timeline-panel {
float: right
float: right
}
}
ul.timeline>li>.timeline-panel:before {
ul.timeline>li>.timeline-panel:before {
right: auto;
right: auto;
left: -15px;
left: -15px;
border-right-width: 15px;
border-right-width: 15px;
border-left-width: 0
border-left-width: 0
}
}
ul.timeline>li>.timeline-panel:after {
ul.timeline>li>.timeline-panel:after {
right: auto;
right: auto;
left: -14px;
left: -14px;
border-right-width: 14px;
border-right-width: 14px;
border-left-width: 0
border-left-width: 0
}
}
.left-aside {
.left-aside {
width: 100%;
width: 100%;
position: relative;
position: relative;
border: 0px
border: 0px
}
}
.right-aside {
.right-aside {
margin-left: 0px
margin-left: 0px
}
}
.flex-wrap {
.flex-wrap {
-ms-flex-wrap: wrap!important;
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important;
flex-wrap: wrap!important;
-webkit-flex-wrap: wrap!important
-webkit-flex-wrap: wrap!important
}
}
.chat-list li .chat-content {
.chat-list li .chat-content {
width: calc(100% - 80px)
width: calc(100% - 80px)
}
}
}
}
.preloader {
.preloader {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
top: 0px;
top: 0px;
position: fixed;
position: fixed;
z-index: 99999;
z-index: 99999;
background: #fff
background: #fff
}
}
.preloader .cssload-speeding-wheel {
.preloader .cssload-speeding-wheel {
position: absolute;
position: absolute;
top: calc(50% - 3.5px);
top: calc(50% - 3.5px);
left: calc(50% - 3.5px)
left: calc(50% - 3.5px)
}
}
[type=radio]:checked, [type=radio]:not(:checked) {
[type=radio]:checked, [type=radio]:not(:checked) {
position: absolute;
position: absolute;
left: -9999px;
left: -9999px;
opacity: 0
opacity: 0
}
}
[type=radio]:checked+label, [type=radio]:not(:checked)+label {
[type=radio]:checked+label, [type=radio]:not(:checked)+label {
position: relative;
position: relative;
padding-left: 35px;
padding-left: 35px;
cursor: pointer;
cursor: pointer;
display: inline-block;
display: inline-block;
height: 25px;
height: 25px;
line-height: 25px;
line-height: 25px;
font-size: 1rem;
font-size: 1rem;
-webkit-transition: .28s ease;
-webkit-transition: .28s ease;
-o-transition: .28s ease;
-o-transition: .28s ease;
transition: .28s ease;
transition: .28s ease;
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-user-select: none;
user-select: none
user-select: none
}
}
[type=radio]+label:after, [type=radio]+label:before {
[type=radio]+label:after, [type=radio]+label:before {
content: '';
content: '';
position: absolute;
position: absolute;
left: 0;
left: 0;
top: 0;
top: 0;
margin: 4px;
margin: 4px;
width: 16px;
width: 16px;
height: 16px;
height: 16px;
z-index: 0;
z-index: 0;
-webkit-transition: .28s ease;
-webkit-transition: .28s ease;
-o-transition: .28s ease;
-o-transition: .28s ease;
transition: .28s ease
transition: .28s ease
}
}
[type=radio].with-gap:checked+label:after, [type=radio].with-gap:checked+label:before, [type=radio]:checked+label:after, [type=radio]:checked+label:before, [type=radio]:not(:checked)+label:after, [type=radio]:not(:checked)+label:before {
[type=radio].with-gap:checked+label:after, [type=radio].with-gap:checked+label:before, [type=radio]:checked+label:after, [type=radio]:checked+label:before, [type=radio]:not(:checked)+label:after, [type=radio]:not(:checked)+label:before {
border-radius: 50%
border-radius: 50%
}
}
[type=radio]:not(:checked)+label:after, [type=radio]:not(:checked)+label:before {
[type=radio]:not(:checked)+label:after, [type=radio]:not(:checked)+label:before {
border: 1px solid #b1b8bb
border: 1px solid #b1b8bb
}
}
[type=radio]:not(:checked)+label:after {
[type=radio]:not(:checked)+label:after {
z-index: -1;
z-index: -1;
-webkit-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
transform: scale(0)
}
}
[type=radio]:checked+label:before {
[type=radio]:checked+label:before {
border: 2px solid transparent;
border: 2px solid transparent;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap:checked+label:after, [type=radio].with-gap:checked+label:before, [type=radio]:checked+label:after {
[type=radio].with-gap:checked+label:after, [type=radio].with-gap:checked+label:before, [type=radio]:checked+label:after {
border: 2px solid #26a69a
border: 2px solid #26a69a
}
}
[type=radio].with-gap:checked+label:after, [type=radio]:checked+label:after {
[type=radio].with-gap:checked+label:after, [type=radio]:checked+label:after {
background-color: #26a69a;
background-color: #26a69a;
z-index: 0
z-index: 0
}
}
[type=radio]:checked+label:after {
[type=radio]:checked+label:after {
-webkit-transform: scale(1.02);
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02)
transform: scale(1.02)
}
}
[type=radio].with-gap:checked+label:after {
[type=radio].with-gap:checked+label:after {
-webkit-transform: scale(0.5);
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5)
transform: scale(0.5)
}
}
[type=radio].tabbed:focus+label:before {
[type=radio].tabbed:focus+label:before {
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap:disabled:checked+label:before {
[type=radio].with-gap:disabled:checked+label:before {
border: 2px solid rgba(0, 0, 0, 0.26);
border: 2px solid rgba(0, 0, 0, 0.26);
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap:disabled:checked+label:after {
[type=radio].with-gap:disabled:checked+label:after {
border: none;
border: none;
background-color: rgba(0, 0, 0, 0.26)
background-color: rgba(0, 0, 0, 0.26)
}
}
[type=radio]:disabled:checked+label:before, [type=radio]:disabled:not(:checked)+label:before {
[type=radio]:disabled:checked+label:before, [type=radio]:disabled:not(:checked)+label:before {
background-color: transparent;
background-color: transparent;
border-color: rgba(0, 0, 0, 0.26);
border-color: rgba(0, 0, 0, 0.26);
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio]:disabled+label {
[type=radio]:disabled+label {
color: rgba(0, 0, 0, 0.26)
color: rgba(0, 0, 0, 0.26)
}
}
[type=radio]:disabled:not(:checked)+label:before {
[type=radio]:disabled:not(:checked)+label:before {
border-color: rgba(0, 0, 0, 0.26)
border-color: rgba(0, 0, 0, 0.26)
}
}
[type=radio]:disabled:checked+label:after {
[type=radio]:disabled:checked+label:after {
background-color: rgba(0, 0, 0, 0.26);
background-color: rgba(0, 0, 0, 0.26);
border-color: #BDBDBD
border-color: #BDBDBD
}
}
form p {
form p {
margin-bottom: 10px;
margin-bottom: 10px;
text-align: left
text-align: left
}
}
form p:last-child {
form p:last-child {
margin-bottom: 0
margin-bottom: 0
}
}
[type=checkbox]:checked, [type=checkbox]:not(:checked) {
[type=checkbox]:checked, [type=checkbox]:not(:checked) {
position: absolute;
position: absolute;
/* left: -9999px;
/* left: -9999px;
opacity: 0 */
opacity: 0 */
}
}
[type=checkbox] {}
[type=checkbox] {}
[type=checkbox]+label {
[type=checkbox]+label {
position: relative;
position: relative;
padding-left: 35px;
padding-left: 35px;
cursor: pointer;
cursor: pointer;
display: inline-block;
display: inline-block;
height: 25px;
height: 25px;
line-height: 25px;
line-height: 25px;
font-size: 1rem;
font-size: 1rem;
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
-ms-user-select: none
}
}
[type=checkbox]+label:before, [type=checkbox]:not(.filled-in)+label:after {
[type=checkbox]+label:before, [type=checkbox]:not(.filled-in)+label:after {
content: '';
content: '';
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
width: 18px;
width: 18px;
height: 18px;
height: 18px;
z-index: 0;
z-index: 0;
border: 1px solid #b1b8bb;
border: 1px solid #b1b8bb;
border-radius: 1px;
border-radius: 1px;
margin-top: 2px;
margin-top: 2px;
-webkit-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-o-transition: .2s;
transition: .2s
transition: .2s
}
}
[type=checkbox]:not(.filled-in)+label:after {
[type=checkbox]:not(.filled-in)+label:after {
border: 0;
border: 0;
-webkit-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
transform: scale(0)
}
}
[type=checkbox]:not(:checked):disabled+label:before {
[type=checkbox]:not(:checked):disabled+label:before {
border: none;
border: none;
background-color: rgba(0, 0, 0, 0.26)
background-color: rgba(0, 0, 0, 0.26)
}
}
[type=checkbox].tabbed:focus+label:after {
[type=checkbox].tabbed:focus+label:after {
-webkit-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transform: scale(1);
border: 0;
border: 0;
border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1)
background-color: rgba(0, 0, 0, 0.1)
}
}
[type=checkbox]:checked+label:before {
[type=checkbox]:checked+label:before {
top: -4px;
top: -4px;
left: -5px;
left: -5px;
width: 12px;
width: 12px;
height: 22px;
height: 22px;
border-top: 2px solid transparent;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #26a69a;
border-right: 2px solid #26a69a;
border-bottom: 2px solid #26a69a;
border-bottom: 2px solid #26a69a;
-webkit-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%
transform-origin: 100% 100%
}
}
[type=checkbox]:checked:disabled+label:before {
[type=checkbox]:checked:disabled+label:before {
border-right: 2px solid rgba(0, 0, 0, 0.26);
border-right: 2px solid rgba(0, 0, 0, 0.26);
border-bottom: 2px solid rgba(0, 0, 0, 0.26)
border-bottom: 2px solid rgba(0, 0, 0, 0.26)
}
}
[type=checkbox]:indeterminate+label:before {
[type=checkbox]:indeterminate+label:before {
top: -11px;
top: -11px;
left: -12px;
left: -12px;
width: 10px;
width: 10px;
height: 22px;
height: 22px;
border-top: none;
border-top: none;
border-left: none;
border-left: none;
border-right: 2px solid #26a69a;
border-right: 2px solid #26a69a;
border-bottom: none;
border-bottom: none;
-webkit-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transform: rotate(90deg);
-webkit-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%
transform-origin: 100% 100%
}
}
[type=checkbox]:indeterminate:disabled+label:before {
[type=checkbox]:indeterminate:disabled+label:before {
border-right: 2px solid rgba(0, 0, 0, 0.26);
border-right: 2px solid rgba(0, 0, 0, 0.26);
background-color: transparent
background-color: transparent
}
}
[type=checkbox].filled-in+label:after {
[type=checkbox].filled-in+label:after {
border-radius: 2px
border-radius: 2px
}
}
[type=checkbox].filled-in+label:after, [type=checkbox].filled-in+label:before {
[type=checkbox].filled-in+label:after, [type=checkbox].filled-in+label:before {
content: '';
content: '';
left: 0;
left: 0;
position: absolute;
position: absolute;
-webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-o-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-o-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
z-index: 1
z-index: 1
}
}
[type=checkbox].filled-in:not(:checked)+label:before {
[type=checkbox].filled-in:not(:checked)+label:before {
width: 0;
width: 0;
height: 0;
height: 0;
border: 3px solid transparent;
border: 3px solid transparent;
left: 6px;
left: 6px;
top: 10px;
top: 10px;
-webkit-transform: rotateZ(37deg);
-webkit-transform: rotateZ(37deg);
-ms-transform: rotate(37deg);
-ms-transform: rotate(37deg);
transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 20% 40%;
-webkit-transform-origin: 20% 40%;
-ms-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%
transform-origin: 100% 100%
}
}
[type=checkbox].filled-in:not(:checked)+label:after {
[type=checkbox].filled-in:not(:checked)+label:after {
height: 20px;
height: 20px;
width: 20px;
width: 20px;
background-color: transparent;
background-color: transparent;
border: 1px solid #b1b8bb;
border: 1px solid #b1b8bb;
top: 0px;
top: 0px;
z-index: 0
z-index: 0
}
}
[type=checkbox].filled-in:checked+label:before {
[type=checkbox].filled-in:checked+label:before {
top: 0;
top: 0;
left: 1px;
left: 1px;
width: 8px;
width: 8px;
height: 13px;
height: 13px;
border-top: 2px solid transparent;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotateZ(37deg);
-webkit-transform: rotateZ(37deg);
-ms-transform: rotate(37deg);
-ms-transform: rotate(37deg);
transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%
transform-origin: 100% 100%
}
}
[type=checkbox].filled-in:checked+label:after {
[type=checkbox].filled-in:checked+label:after {
top: 0;
top: 0;
width: 20px;
width: 20px;
height: 20px;
height: 20px;
border: 2px solid #26a69a;
border: 2px solid #26a69a;
background-color: #26a69a;
background-color: #26a69a;
z-index: 0
z-index: 0
}
}
[type=checkbox].filled-in.tabbed:focus+label:after {
[type=checkbox].filled-in.tabbed:focus+label:after {
border-radius: 2px;
border-radius: 2px;
border-color: #5a5a5a;
border-color: #5a5a5a;
background-color: rgba(0, 0, 0, 0.1)
background-color: rgba(0, 0, 0, 0.1)
}
}
[type=checkbox].filled-in.tabbed:checked:focus+label:after {
[type=checkbox].filled-in.tabbed:checked:focus+label:after {
border-radius: 2px;
border-radius: 2px;
background-color: #26a69a;
background-color: #26a69a;
border-color: #26a69a
border-color: #26a69a
}
}
[type=checkbox].filled-in:disabled:not(:checked)+label:before {
[type=checkbox].filled-in:disabled:not(:checked)+label:before {
background-color: transparent;
background-color: transparent;
border: 2px solid transparent
border: 2px solid transparent
}
}
[type=checkbox].filled-in:disabled:not(:checked)+label:after {
[type=checkbox].filled-in:disabled:not(:checked)+label:after {
border-color: transparent;
border-color: transparent;
background-color: #BDBDBD
background-color: #BDBDBD
}
}
[type=checkbox].filled-in:disabled:checked+label:before {
[type=checkbox].filled-in:disabled:checked+label:before {
background-color: transparent
background-color: transparent
}
}
[type=checkbox].filled-in:disabled:checked+label:after {
[type=checkbox].filled-in:disabled:checked+label:after {
background-color: #BDBDBD;
background-color: #BDBDBD;
border-color: #BDBDBD
border-color: #BDBDBD
}
}
.switch, .switch * {
.switch, .switch * {
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-khtml-user-select: none;
-ms-user-select: none
-ms-user-select: none
}
}
.switch label {
.switch label {
cursor: pointer
cursor: pointer
}
}
.switch label input[type=checkbox] {
.switch label input[type=checkbox] {
opacity: 0;
opacity: 0;
width: 0;
width: 0;
height: 0
height: 0
}
}
.switch label input[type=checkbox]:checked+.lever {
.switch label input[type=checkbox]:checked+.lever {
background-color: #84c7c1
background-color: #84c7c1
}
}
.switch label input[type=checkbox]:checked+.lever:after {
.switch label input[type=checkbox]:checked+.lever:after {
background-color: #26a69a;
background-color: #26a69a;
left: 24px
left: 24px
}
}
.switch label .lever {
.switch label .lever {
content: "";
content: "";
display: inline-block;
display: inline-block;
position: relative;
position: relative;
width: 40px;
width: 40px;
height: 15px;
height: 15px;
background-color: #818181;
background-color: #818181;
border-radius: 15px;
border-radius: 15px;
margin-right: 10px;
margin-right: 10px;
-webkit-transition: background 0.3s ease;
-webkit-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
transition: background 0.3s ease;
vertical-align: middle;
vertical-align: middle;
margin: 0 16px
margin: 0 16px
}
}
.switch label .lever:after {
.switch label .lever:after {
content: "";
content: "";
position: absolute;
position: absolute;
display: inline-block;
display: inline-block;
width: 21px;
width: 21px;
height: 21px;
height: 21px;
background-color: #F1F1F1;
background-color: #F1F1F1;
border-radius: 21px;
border-radius: 21px;
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
left: -5px;
top: -3px;
top: -3px;
-webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease;
-webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease;
transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease;
transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease;
-o-transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
-o-transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease
}
}
input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever:after, input[type=checkbox]:checked:not(:disabled)~.lever:active:after {
input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever:after, input[type=checkbox]:checked:not(:disabled)~.lever:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1)
}
}
input[type=checkbox]:not(:disabled).tabbed:focus~.lever:after, input[type=checkbox]:not(:disabled)~.lever:active:after {
input[type=checkbox]:not(:disabled).tabbed:focus~.lever:after, input[type=checkbox]:not(:disabled)~.lever:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08)
}
}
.switch input[type=checkbox][disabled]+.lever {
.switch input[type=checkbox][disabled]+.lever {
cursor: default
cursor: default
}
}
.switch label input[type=checkbox][disabled]+.lever:after, .switch label input[type=checkbox][disabled]:checked+.lever:after {
.switch label input[type=checkbox][disabled]+.lever:after, .switch label input[type=checkbox][disabled]:checked+.lever:after {
background-color: #BDBDBD
background-color: #BDBDBD
}
}
.scale-up {
.scale-up {
-webkit-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
transform: scale(0);
display: inline-block;
display: inline-block;
-webkit-transform-origin: right 0px;
-webkit-transform-origin: right 0px;
-ms-transform-origin: right 0px;
-ms-transform-origin: right 0px;
transform-origin: right 0px
transform-origin: right 0px
}
}
.scale-up-left {
.scale-up-left {
-webkit-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
transform: scale(0);
display: inline-block;
display: inline-block;
-webkit-transform-origin: left 0px;
-webkit-transform-origin: left 0px;
-ms-transform-origin: left 0px;
-ms-transform-origin: left 0px;
transform-origin: left 0px
transform-origin: left 0px
}
}
.show>.scale-up {
.show>.scale-up {
-webkit-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transform: scale(1);
-webkit-transform-origin: right 0px;
-webkit-transform-origin: right 0px;
-ms-transform-origin: right 0px;
-ms-transform-origin: right 0px;
transform-origin: right 0px
transform-origin: right 0px
}
}
.show>.scale-up-left {
.show>.scale-up-left {
-ms-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transform: scale(1);
-webkit-transform: scale(1);
-webkit-transform: scale(1);
-webkit-transform-origin: left 0px;
-webkit-transform-origin: left 0px;
-ms-transform-origin: left 0px;
-ms-transform-origin: left 0px;
transform-origin: left 0px
transform-origin: left 0px
}
}
.card {
.card {
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px
border-radius: 4px
}
}
.well, pre {
.well, pre {
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1)
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1)
}
}
.page-titles .justify-content-end:last-child .d-flex {
.page-titles .justify-content-end:last-child .d-flex {
margin-right: 10px
margin-right: 10px
}
}
.btn-circle.right-side-toggle {
.btn-circle.right-side-toggle {
position: fixed;
position: fixed;
top: 94px;
top: 94px;
right: 20px;
right: 20px;
padding: 18px;
padding: 18px;
z-index: 10;
z-index: 10;
}
}
@-webkit-keyframes ripple {
@-webkit-keyframes ripple {
0% {
0% {
-webkit-box-shadow: 0px 0px 0px 1px transparent;
-webkit-box-shadow: 0px 0px 0px 1px transparent;
box-shadow: 0px 0px 0px 1px transparent
box-shadow: 0px 0px 0px 1px transparent
}
}
50% {
50% {
-webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1)
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1)
}
}
to {
to {
-webkit-box-shadow: 0px 0px 0px 15px transparent;
-webkit-box-shadow: 0px 0px 0px 15px transparent;
box-shadow: 0px 0px 0px 15px transparent
box-shadow: 0px 0px 0px 15px transparent
}
}
}
}
@keyframes ripple {
@keyframes ripple {
0% {
0% {
-webkit-box-shadow: 0px 0px 0px 1px transparent;
-webkit-box-shadow: 0px 0px 0px 1px transparent;
box-shadow: 0px 0px 0px 1px transparent
box-shadow: 0px 0px 0px 1px transparent
}
}
50% {
50% {
-webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1)
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1)
}
}
to {
to {
-webkit-box-shadow: 0px 0px 0px 15px transparent;
-webkit-box-shadow: 0px 0px 0px 15px transparent;
box-shadow: 0px 0px 0px 15px transparent
box-shadow: 0px 0px 0px 15px transparent
}
}
}
}
.bootstrap-select.btn-group .dropdown-menu {
.bootstrap-select.btn-group .dropdown-menu {
margin-top: -40px;
margin-top: -40px;
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1)
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1)
}
}
.demo-checkbox label, .demo-radio-button label {
.demo-checkbox label, .demo-radio-button label {
min-width: 200px;
min-width: 200px;
margin-bottom: 20px
margin-bottom: 20px
}
}
.demo-swtich .demo-switch-title, .demo-swtich .switch {
.demo-swtich .demo-switch-title, .demo-swtich .switch {
width: 150px;
width: 150px;
margin-bottom: 10px;
margin-bottom: 10px;
display: inline-block
display: inline-block
}
}
[type=checkbox]+label {
[type=checkbox]+label {
padding-left: 26px;
padding-left: 26px;
height: 25px;
height: 25px;
line-height: 21px;
line-height: 21px;
font-weight: normal
font-weight: normal
}
}
[type=checkbox]:checked+label:before {
[type=checkbox]:checked+label:before {
top: -4px;
top: -4px;
left: -2px;
left: -2px;
width: 11px;
width: 11px;
height: 19px
height: 19px
}
}
[type=checkbox]:checked.chk-col-red+label:before {
[type=checkbox]:checked.chk-col-red+label:before {
border-right: 2px solid #fb3a3a;
border-right: 2px solid #fb3a3a;
border-bottom: 2px solid #fb3a3a
border-bottom: 2px solid #fb3a3a
}
}
[type=checkbox]:checked.chk-col-pink+label:before {
[type=checkbox]:checked.chk-col-pink+label:before {
border-right: 2px solid #E91E63;
border-right: 2px solid #E91E63;
border-bottom: 2px solid #E91E63
border-bottom: 2px solid #E91E63
}
}
[type=checkbox]:checked.chk-col-purple+label:before {
[type=checkbox]:checked.chk-col-purple+label:before {
border-right: 2px solid #7460ee;
border-right: 2px solid #7460ee;
border-bottom: 2px solid #7460ee
border-bottom: 2px solid #7460ee
}
}
[type=checkbox]:checked.chk-col-deep-purple+label:before {
[type=checkbox]:checked.chk-col-deep-purple+label:before {
border-right: 2px solid #673AB7;
border-right: 2px solid #673AB7;
border-bottom: 2px solid #673AB7
border-bottom: 2px solid #673AB7
}
}
[type=checkbox]:checked.chk-col-indigo+label:before {
[type=checkbox]:checked.chk-col-indigo+label:before {
border-right: 2px solid #3F51B5;
border-right: 2px solid #3F51B5;
border-bottom: 2px solid #3F51B5
border-bottom: 2px solid #3F51B5
}
}
[type=checkbox]:checked.chk-col-blue+label:before {
[type=checkbox]:checked.chk-col-blue+label:before {
border-right: 2px solid #02bec9;
border-right: 2px solid #02bec9;
border-bottom: 2px solid #02bec9
border-bottom: 2px solid #02bec9
}
}
[type=checkbox]:checked.chk-col-light-blue+label:before {
[type=checkbox]:checked.chk-col-light-blue+label:before {
border-right: 2px solid #03A9F4;
border-right: 2px solid #03A9F4;
border-bottom: 2px solid #03A9F4
border-bottom: 2px solid #03A9F4
}
}
[type=checkbox]:checked.chk-col-cyan+label:before {
[type=checkbox]:checked.chk-col-cyan+label:before {
border-right: 2px solid #00BCD4;
border-right: 2px solid #00BCD4;
border-bottom: 2px solid #00BCD4
border-bottom: 2px solid #00BCD4
}
}
[type=checkbox]:checked.chk-col-teal+label:before {
[type=checkbox]:checked.chk-col-teal+label:before {
border-right: 2px solid #009688;
border-right: 2px solid #009688;
border-bottom: 2px solid #009688
border-bottom: 2px solid #009688
}
}
[type=checkbox]:checked.chk-col-green+label:before {
[type=checkbox]:checked.chk-col-green+label:before {
border-right: 2px solid #26c6da;
border-right: 2px solid #26c6da;
border-bottom: 2px solid #26c6da
border-bottom: 2px solid #26c6da
}
}
[type=checkbox]:checked.chk-col-light-green+label:before {
[type=checkbox]:checked.chk-col-light-green+label:before {
border-right: 2px solid #8BC34A;
border-right: 2px solid #8BC34A;
border-bottom: 2px solid #8BC34A
border-bottom: 2px solid #8BC34A
}
}
[type=checkbox]:checked.chk-col-lime+label:before {
[type=checkbox]:checked.chk-col-lime+label:before {
border-right: 2px solid #CDDC39;
border-right: 2px solid #CDDC39;
border-bottom: 2px solid #CDDC39
border-bottom: 2px solid #CDDC39
}
}
[type=checkbox]:checked.chk-col-yellow+label:before {
[type=checkbox]:checked.chk-col-yellow+label:before {
border-right: 2px solid #ffe821;
border-right: 2px solid #ffe821;
border-bottom: 2px solid #ffe821
border-bottom: 2px solid #ffe821
}
}
[type=checkbox]:checked.chk-col-amber+label:before {
[type=checkbox]:checked.chk-col-amber+label:before {
border-right: 2px solid #FFC107;
border-right: 2px solid #FFC107;
border-bottom: 2px solid #FFC107
border-bottom: 2px solid #FFC107
}
}
[type=checkbox]:checked.chk-col-orange+label:before {
[type=checkbox]:checked.chk-col-orange+label:before {
border-right: 2px solid #FF9800;
border-right: 2px solid #FF9800;
border-bottom: 2px solid #FF9800
border-bottom: 2px solid #FF9800
}
}
[type=checkbox]:checked.chk-col-deep-orange+label:before {
[type=checkbox]:checked.chk-col-deep-orange+label:before {
border-right: 2px solid #FF5722;
border-right: 2px solid #FF5722;
border-bottom: 2px solid #FF5722
border-bottom: 2px solid #FF5722
}
}
[type=checkbox]:checked.chk-col-brown+label:before {
[type=checkbox]:checked.chk-col-brown+label:before {
border-right: 2px solid #795548;
border-right: 2px solid #795548;
border-bottom: 2px solid #795548
border-bottom: 2px solid #795548
}
}
[type=checkbox]:checked.chk-col-grey+label:before {
[type=checkbox]:checked.chk-col-grey+label:before {
border-right: 2px solid #9E9E9E;
border-right: 2px solid #9E9E9E;
border-bottom: 2px solid #9E9E9E
border-bottom: 2px solid #9E9E9E
}
}
[type=checkbox]:checked.chk-col-blue-grey+label:before {
[type=checkbox]:checked.chk-col-blue-grey+label:before {
border-right: 2px solid #607D8B;
border-right: 2px solid #607D8B;
border-bottom: 2px solid #607D8B
border-bottom: 2px solid #607D8B
}
}
[type=checkbox]:checked.chk-col-black+label:before {
[type=checkbox]:checked.chk-col-black+label:before {
border-right: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000
border-bottom: 2px solid #000000
}
}
[type=checkbox]:checked.chk-col-white+label:before {
[type=checkbox]:checked.chk-col-white+label:before {
border-right: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff
border-bottom: 2px solid #ffffff
}
}
[type=checkbox].filled-in:checked+label:after {
[type=checkbox].filled-in:checked+label:after {
top: 0;
top: 0;
width: 20px;
width: 20px;
height: 20px;
height: 20px;
border: 2px solid #26a69a;
border: 2px solid #26a69a;
background-color: #26a69a;
background-color: #26a69a;
z-index: 0
z-index: 0
}
}
[type=checkbox].filled-in:checked+label:before {
[type=checkbox].filled-in:checked+label:before {
border-right: 2px solid #fff!important;
border-right: 2px solid #fff!important;
border-bottom: 2px solid #fff!important
border-bottom: 2px solid #fff!important
}
}
[type=checkbox].filled-in:checked.chk-col-red+label:after {
[type=checkbox].filled-in:checked.chk-col-red+label:after {
border: 2px solid #fb3a3a;
border: 2px solid #fb3a3a;
background-color: #fb3a3a
background-color: #fb3a3a
}
}
[type=checkbox].filled-in:checked.chk-col-pink+label:after {
[type=checkbox].filled-in:checked.chk-col-pink+label:after {
border: 2px solid #E91E63;
border: 2px solid #E91E63;
background-color: #E91E63
background-color: #E91E63
}
}
[type=checkbox].filled-in:checked.chk-col-purple+label:after {
[type=checkbox].filled-in:checked.chk-col-purple+label:after {
border: 2px solid #7460ee;
border: 2px solid #7460ee;
background-color: #7460ee
background-color: #7460ee
}
}
[type=checkbox].filled-in:checked.chk-col-deep-purple+label:after {
[type=checkbox].filled-in:checked.chk-col-deep-purple+label:after {
border: 2px solid #673AB7;
border: 2px solid #673AB7;
background-color: #673AB7
background-color: #673AB7
}
}
[type=checkbox].filled-in:checked.chk-col-indigo+label:after {
[type=checkbox].filled-in:checked.chk-col-indigo+label:after {
border: 2px solid #3F51B5;
border: 2px solid #3F51B5;
background-color: #3F51B5
background-color: #3F51B5
}
}
[type=checkbox].filled-in:checked.chk-col-blue+label:after {
[type=checkbox].filled-in:checked.chk-col-blue+label:after {
border: 2px solid #02bec9;
border: 2px solid #02bec9;
background-color: #02bec9
background-color: #02bec9
}
}
[type=checkbox].filled-in:checked.chk-col-light-blue+label:after {
[type=checkbox].filled-in:checked.chk-col-light-blue+label:after {
border: 2px solid #03A9F4;
border: 2px solid #03A9F4;
background-color: #03A9F4
background-color: #03A9F4
}
}
[type=checkbox].filled-in:checked.chk-col-cyan+label:after {
[type=checkbox].filled-in:checked.chk-col-cyan+label:after {
border: 2px solid #00BCD4;
border: 2px solid #00BCD4;
background-color: #00BCD4
background-color: #00BCD4
}
}
[type=checkbox].filled-in:checked.chk-col-teal+label:after {
[type=checkbox].filled-in:checked.chk-col-teal+label:after {
border: 2px solid #009688;
border: 2px solid #009688;
background-color: #009688
background-color: #009688
}
}
[type=checkbox].filled-in:checked.chk-col-green+label:after {
[type=checkbox].filled-in:checked.chk-col-green+label:after {
border: 2px solid #26c6da;
border: 2px solid #26c6da;
background-color: #26c6da
background-color: #26c6da
}
}
[type=checkbox].filled-in:checked.chk-col-light-green+label:after {
[type=checkbox].filled-in:checked.chk-col-light-green+label:after {
border: 2px solid #8BC34A;
border: 2px solid #8BC34A;
background-color: #8BC34A
background-color: #8BC34A
}
}
[type=checkbox].filled-in:checked.chk-col-lime+label:after {
[type=checkbox].filled-in:checked.chk-col-lime+label:after {
border: 2px solid #CDDC39;
border: 2px solid #CDDC39;
background-color: #CDDC39
background-color: #CDDC39
}
}
[type=checkbox].filled-in:checked.chk-col-yellow+label:after {
[type=checkbox].filled-in:checked.chk-col-yellow+label:after {
border: 2px solid #ffe821;
border: 2px solid #ffe821;
background-color: #ffe821
background-color: #ffe821
}
}
[type=checkbox].filled-in:checked.chk-col-amber+label:after {
[type=checkbox].filled-in:checked.chk-col-amber+label:after {
border: 2px solid #FFC107;
border: 2px solid #FFC107;
background-color: #FFC107
background-color: #FFC107
}
}
[type=checkbox].filled-in:checked.chk-col-orange+label:after {
[type=checkbox].filled-in:checked.chk-col-orange+label:after {
border: 2px solid #FF9800;
border: 2px solid #FF9800;
background-color: #FF9800
background-color: #FF9800
}
}
[type=checkbox].filled-in:checked.chk-col-deep-orange+label:after {
[type=checkbox].filled-in:checked.chk-col-deep-orange+label:after {
border: 2px solid #FF5722;
border: 2px solid #FF5722;
background-color: #FF5722
background-color: #FF5722
}
}
[type=checkbox].filled-in:checked.chk-col-brown+label:after {
[type=checkbox].filled-in:checked.chk-col-brown+label:after {
border: 2px solid #795548;
border: 2px solid #795548;
background-color: #795548
background-color: #795548
}
}
[type=checkbox].filled-in:checked.chk-col-grey+label:after {
[type=checkbox].filled-in:checked.chk-col-grey+label:after {
border: 2px solid #9E9E9E;
border: 2px solid #9E9E9E;
background-color: #9E9E9E
background-color: #9E9E9E
}
}
[type=checkbox].filled-in:checked.chk-col-blue-grey+label:after {
[type=checkbox].filled-in:checked.chk-col-blue-grey+label:after {
border: 2px solid #607D8B;
border: 2px solid #607D8B;
background-color: #607D8B
background-color: #607D8B
}
}
[type=checkbox].filled-in:checked.chk-col-black+label:after {
[type=checkbox].filled-in:checked.chk-col-black+label:after {
border: 2px solid #000000;
border: 2px solid #000000;
background-color: #000000
background-color: #000000
}
}
[type=checkbox].filled-in:checked.chk-col-white+label:after {
[type=checkbox].filled-in:checked.chk-col-white+label:after {
border: 2px solid #ffffff;
border: 2px solid #ffffff;
background-color: #ffffff
background-color: #ffffff
}
}
[type=radio]:not(:checked)+label {
[type=radio]:not(:checked)+label {
padding-left: 26px;
padding-left: 26px;
height: 25px;
height: 25px;
line-height: 25px;
line-height: 25px;
font-weight: normal
font-weight: normal
}
}
[type=radio]:checked+label {
[type=radio]:checked+label {
padding-left: 26px;
padding-left: 26px;
height: 25px;
height: 25px;
line-height: 25px;
line-height: 25px;
font-weight: normal
font-weight: normal
}
}
[type=radio].radio-col-red:checked+label:after {
[type=radio].radio-col-red:checked+label:after {
background-color: #fb3a3a;
background-color: #fb3a3a;
border-color: #fb3a3a;
border-color: #fb3a3a;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-pink:checked+label:after {
[type=radio].radio-col-pink:checked+label:after {
background-color: #E91E63;
background-color: #E91E63;
border-color: #E91E63;
border-color: #E91E63;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-purple:checked+label:after {
[type=radio].radio-col-purple:checked+label:after {
background-color: #7460ee;
background-color: #7460ee;
border-color: #7460ee;
border-color: #7460ee;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-deep-purple:checked+label:after {
[type=radio].radio-col-deep-purple:checked+label:after {
background-color: #673AB7;
background-color: #673AB7;
border-color: #673AB7;
border-color: #673AB7;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-indigo:checked+label:after {
[type=radio].radio-col-indigo:checked+label:after {
background-color: #3F51B5;
background-color: #3F51B5;
border-color: #3F51B5;
border-color: #3F51B5;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-blue:checked+label:after {
[type=radio].radio-col-blue:checked+label:after {
background-color: #02bec9;
background-color: #02bec9;
border-color: #02bec9;
border-color: #02bec9;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-light-blue:checked+label:after {
[type=radio].radio-col-light-blue:checked+label:after {
background-color: #03A9F4;
background-color: #03A9F4;
border-color: #03A9F4;
border-color: #03A9F4;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-cyan:checked+label:after {
[type=radio].radio-col-cyan:checked+label:after {
background-color: #00BCD4;
background-color: #00BCD4;
border-color: #00BCD4;
border-color: #00BCD4;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-teal:checked+label:after {
[type=radio].radio-col-teal:checked+label:after {
background-color: #009688;
background-color: #009688;
border-color: #009688;
border-color: #009688;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-green:checked+label:after {
[type=radio].radio-col-green:checked+label:after {
background-color: #26c6da;
background-color: #26c6da;
border-color: #26c6da;
border-color: #26c6da;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-light-green:checked+label:after {
[type=radio].radio-col-light-green:checked+label:after {
background-color: #8BC34A;
background-color: #8BC34A;
border-color: #8BC34A;
border-color: #8BC34A;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-lime:checked+label:after {
[type=radio].radio-col-lime:checked+label:after {
background-color: #CDDC39;
background-color: #CDDC39;
border-color: #CDDC39;
border-color: #CDDC39;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-yellow:checked+label:after {
[type=radio].radio-col-yellow:checked+label:after {
background-color: #ffe821;
background-color: #ffe821;
border-color: #ffe821;
border-color: #ffe821;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-amber:checked+label:after {
[type=radio].radio-col-amber:checked+label:after {
background-color: #FFC107;
background-color: #FFC107;
border-color: #FFC107;
border-color: #FFC107;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-orange:checked+label:after {
[type=radio].radio-col-orange:checked+label:after {
background-color: #FF9800;
background-color: #FF9800;
border-color: #FF9800;
border-color: #FF9800;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-deep-orange:checked+label:after {
[type=radio].radio-col-deep-orange:checked+label:after {
background-color: #FF5722;
background-color: #FF5722;
border-color: #FF5722;
border-color: #FF5722;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-brown:checked+label:after {
[type=radio].radio-col-brown:checked+label:after {
background-color: #795548;
background-color: #795548;
border-color: #795548;
border-color: #795548;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-grey:checked+label:after {
[type=radio].radio-col-grey:checked+label:after {
background-color: #9E9E9E;
background-color: #9E9E9E;
border-color: #9E9E9E;
border-color: #9E9E9E;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-blue-grey:checked+label:after {
[type=radio].radio-col-blue-grey:checked+label:after {
background-color: #607D8B;
background-color: #607D8B;
border-color: #607D8B;
border-color: #607D8B;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-black:checked+label:after {
[type=radio].radio-col-black:checked+label:after {
background-color: #000000;
background-color: #000000;
border-color: #000000;
border-color: #000000;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].radio-col-white:checked+label:after {
[type=radio].radio-col-white:checked+label:after {
background-color: #ffffff;
background-color: #ffffff;
border-color: #ffffff;
border-color: #ffffff;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-red:checked+label:before {
[type=radio].with-gap.radio-col-red:checked+label:before {
border: 2px solid #fb3a3a;
border: 2px solid #fb3a3a;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-red:checked+label:after {
[type=radio].with-gap.radio-col-red:checked+label:after {
background-color: #fb3a3a;
background-color: #fb3a3a;
border: 2px solid #fb3a3a;
border: 2px solid #fb3a3a;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-pink:checked+label:before {
[type=radio].with-gap.radio-col-pink:checked+label:before {
border: 2px solid #E91E63;
border: 2px solid #E91E63;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-pink:checked+label:after {
[type=radio].with-gap.radio-col-pink:checked+label:after {
background-color: #E91E63;
background-color: #E91E63;
border: 2px solid #E91E63;
border: 2px solid #E91E63;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-purple:checked+label:before {
[type=radio].with-gap.radio-col-purple:checked+label:before {
border: 2px solid #7460ee;
border: 2px solid #7460ee;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-purple:checked+label:after {
[type=radio].with-gap.radio-col-purple:checked+label:after {
background-color: #7460ee;
background-color: #7460ee;
border: 2px solid #7460ee;
border: 2px solid #7460ee;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-deep-purple:checked+label:before {
[type=radio].with-gap.radio-col-deep-purple:checked+label:before {
border: 2px solid #673AB7;
border: 2px solid #673AB7;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-deep-purple:checked+label:after {
[type=radio].with-gap.radio-col-deep-purple:checked+label:after {
background-color: #673AB7;
background-color: #673AB7;
border: 2px solid #673AB7;
border: 2px solid #673AB7;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-indigo:checked+label:before {
[type=radio].with-gap.radio-col-indigo:checked+label:before {
border: 2px solid #3F51B5;
border: 2px solid #3F51B5;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-indigo:checked+label:after {
[type=radio].with-gap.radio-col-indigo:checked+label:after {
background-color: #3F51B5;
background-color: #3F51B5;
border: 2px solid #3F51B5;
border: 2px solid #3F51B5;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-blue:checked+label:before {
[type=radio].with-gap.radio-col-blue:checked+label:before {
border: 2px solid #02bec9;
border: 2px solid #02bec9;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-blue:checked+label:after {
[type=radio].with-gap.radio-col-blue:checked+label:after {
background-color: #02bec9;
background-color: #02bec9;
border: 2px solid #02bec9;
border: 2px solid #02bec9;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-light-blue:checked+label:before {
[type=radio].with-gap.radio-col-light-blue:checked+label:before {
border: 2px solid #03A9F4;
border: 2px solid #03A9F4;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-light-blue:checked+label:after {
[type=radio].with-gap.radio-col-light-blue:checked+label:after {
background-color: #03A9F4;
background-color: #03A9F4;
border: 2px solid #03A9F4;
border: 2px solid #03A9F4;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-cyan:checked+label:before {
[type=radio].with-gap.radio-col-cyan:checked+label:before {
border: 2px solid #00BCD4;
border: 2px solid #00BCD4;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-cyan:checked+label:after {
[type=radio].with-gap.radio-col-cyan:checked+label:after {
background-color: #00BCD4;
background-color: #00BCD4;
border: 2px solid #00BCD4;
border: 2px solid #00BCD4;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-teal:checked+label:before {
[type=radio].with-gap.radio-col-teal:checked+label:before {
border: 2px solid #009688;
border: 2px solid #009688;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-teal:checked+label:after {
[type=radio].with-gap.radio-col-teal:checked+label:after {
background-color: #009688;
background-color: #009688;
border: 2px solid #009688;
border: 2px solid #009688;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-green:checked+label:before {
[type=radio].with-gap.radio-col-green:checked+label:before {
border: 2px solid #26c6da;
border: 2px solid #26c6da;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-green:checked+label:after {
[type=radio].with-gap.radio-col-green:checked+label:after {
background-color: #26c6da;
background-color: #26c6da;
border: 2px solid #26c6da;
border: 2px solid #26c6da;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-light-green:checked+label:before {
[type=radio].with-gap.radio-col-light-green:checked+label:before {
border: 2px solid #8BC34A;
border: 2px solid #8BC34A;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-light-green:checked+label:after {
[type=radio].with-gap.radio-col-light-green:checked+label:after {
background-color: #8BC34A;
background-color: #8BC34A;
border: 2px solid #8BC34A;
border: 2px solid #8BC34A;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-lime:checked+label:before {
[type=radio].with-gap.radio-col-lime:checked+label:before {
border: 2px solid #CDDC39;
border: 2px solid #CDDC39;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-lime:checked+label:after {
[type=radio].with-gap.radio-col-lime:checked+label:after {
background-color: #CDDC39;
background-color: #CDDC39;
border: 2px solid #CDDC39;
border: 2px solid #CDDC39;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-yellow:checked+label:before {
[type=radio].with-gap.radio-col-yellow:checked+label:before {
border: 2px solid #ffe821;
border: 2px solid #ffe821;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-yellow:checked+label:after {
[type=radio].with-gap.radio-col-yellow:checked+label:after {
background-color: #ffe821;
background-color: #ffe821;
border: 2px solid #ffe821;
border: 2px solid #ffe821;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-amber:checked+label:before {
[type=radio].with-gap.radio-col-amber:checked+label:before {
border: 2px solid #FFC107;
border: 2px solid #FFC107;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-amber:checked+label:after {
[type=radio].with-gap.radio-col-amber:checked+label:after {
background-color: #FFC107;
background-color: #FFC107;
border: 2px solid #FFC107;
border: 2px solid #FFC107;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-orange:checked+label:before {
[type=radio].with-gap.radio-col-orange:checked+label:before {
border: 2px solid #FF9800;
border: 2px solid #FF9800;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-orange:checked+label:after {
[type=radio].with-gap.radio-col-orange:checked+label:after {
background-color: #FF9800;
background-color: #FF9800;
border: 2px solid #FF9800;
border: 2px solid #FF9800;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-deep-orange:checked+label:before {
[type=radio].with-gap.radio-col-deep-orange:checked+label:before {
border: 2px solid #FF5722;
border: 2px solid #FF5722;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-deep-orange:checked+label:after {
[type=radio].with-gap.radio-col-deep-orange:checked+label:after {
background-color: #FF5722;
background-color: #FF5722;
border: 2px solid #FF5722;
border: 2px solid #FF5722;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-brown:checked+label:before {
[type=radio].with-gap.radio-col-brown:checked+label:before {
border: 2px solid #795548;
border: 2px solid #795548;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-brown:checked+label:after {
[type=radio].with-gap.radio-col-brown:checked+label:after {
background-color: #795548;
background-color: #795548;
border: 2px solid #795548;
border: 2px solid #795548;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-grey:checked+label:before {
[type=radio].with-gap.radio-col-grey:checked+label:before {
border: 2px solid #9E9E9E;
border: 2px solid #9E9E9E;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-grey:checked+label:after {
[type=radio].with-gap.radio-col-grey:checked+label:after {
background-color: #9E9E9E;
background-color: #9E9E9E;
border: 2px solid #9E9E9E;
border: 2px solid #9E9E9E;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-blue-grey:checked+label:before {
[type=radio].with-gap.radio-col-blue-grey:checked+label:before {
border: 2px solid #607D8B;
border: 2px solid #607D8B;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-blue-grey:checked+label:after {
[type=radio].with-gap.radio-col-blue-grey:checked+label:after {
background-color: #607D8B;
background-color: #607D8B;
border: 2px solid #607D8B;
border: 2px solid #607D8B;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-black:checked+label:before {
[type=radio].with-gap.radio-col-black:checked+label:before {
border: 2px solid #000000;
border: 2px solid #000000;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-black:checked+label:after {
[type=radio].with-gap.radio-col-black:checked+label:after {
background-color: #000000;
background-color: #000000;
border: 2px solid #000000;
border: 2px solid #000000;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-white:checked+label:before {
[type=radio].with-gap.radio-col-white:checked+label:before {
border: 2px solid #ffffff;
border: 2px solid #ffffff;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
[type=radio].with-gap.radio-col-white:checked+label:after {
[type=radio].with-gap.radio-col-white:checked+label:after {
background-color: #ffffff;
background-color: #ffffff;
border: 2px solid #ffffff;
border: 2px solid #ffffff;
-webkit-animation: ripple 0.2s linear forwards;
-webkit-animation: ripple 0.2s linear forwards;
animation: ripple 0.2s linear forwards
animation: ripple 0.2s linear forwards
}
}
.switch label {
.switch label {
font-weight: normal;
font-weight: normal;
font-size: 13px
font-size: 13px
}
}
.switch label .lever {
.switch label .lever {
margin: 0 14px
margin: 0 14px
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-red:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-red:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(251, 58, 58, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(251, 58, 58, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(251, 58, 58, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(251, 58, 58, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-red {
.switch label input[type=checkbox]:checked+.lever.switch-col-red {
background-color: rgba(251, 58, 58, 0.5)
background-color: rgba(251, 58, 58, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-red:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-red:after {
background-color: #fb3a3a
background-color: #fb3a3a
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-pink:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-pink:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-pink {
.switch label input[type=checkbox]:checked+.lever.switch-col-pink {
background-color: rgba(233, 30, 99, 0.5)
background-color: rgba(233, 30, 99, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-pink:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-pink:after {
background-color: #E91E63
background-color: #E91E63
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-purple:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-purple:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(116, 96, 238, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(116, 96, 238, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(116, 96, 238, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(116, 96, 238, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-purple {
.switch label input[type=checkbox]:checked+.lever.switch-col-purple {
background-color: rgba(116, 96, 238, 0.5)
background-color: rgba(116, 96, 238, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-purple:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-purple:after {
background-color: #7460ee
background-color: #7460ee
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-deep-purple:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-deep-purple:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-purple {
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-purple {
background-color: rgba(103, 58, 183, 0.5)
background-color: rgba(103, 58, 183, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-purple:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-purple:after {
background-color: #673AB7
background-color: #673AB7
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-indigo:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-indigo:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-indigo {
.switch label input[type=checkbox]:checked+.lever.switch-col-indigo {
background-color: rgba(63, 81, 181, 0.5)
background-color: rgba(63, 81, 181, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-indigo:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-indigo:after {
background-color: #3F51B5
background-color: #3F51B5
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-blue:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-blue:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(2, 190, 201, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(2, 190, 201, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(2, 190, 201, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(2, 190, 201, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-blue {
.switch label input[type=checkbox]:checked+.lever.switch-col-blue {
background-color: rgba(2, 190, 201, 0.5)
background-color: rgba(2, 190, 201, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-blue:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-blue:after {
background-color: #02bec9
background-color: #02bec9
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-light-blue:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-light-blue:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-light-blue {
.switch label input[type=checkbox]:checked+.lever.switch-col-light-blue {
background-color: rgba(3, 169, 244, 0.5)
background-color: rgba(3, 169, 244, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-light-blue:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-light-blue:after {
background-color: #03A9F4
background-color: #03A9F4
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-cyan:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-cyan:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-cyan {
.switch label input[type=checkbox]:checked+.lever.switch-col-cyan {
background-color: rgba(0, 188, 212, 0.5)
background-color: rgba(0, 188, 212, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-cyan:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-cyan:after {
background-color: #00BCD4
background-color: #00BCD4
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-teal:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-teal:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-teal {
.switch label input[type=checkbox]:checked+.lever.switch-col-teal {
background-color: rgba(0, 150, 136, 0.5)
background-color: rgba(0, 150, 136, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-teal:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-teal:after {
background-color: #009688
background-color: #009688
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-green:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-green:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 198, 218, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 198, 218, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 198, 218, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 198, 218, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-green {
.switch label input[type=checkbox]:checked+.lever.switch-col-green {
background-color: rgba(38, 198, 218, 0.5)
background-color: rgba(38, 198, 218, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-green:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-green:after {
background-color: #26c6da
background-color: #26c6da
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-light-green:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-light-green:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-light-green {
.switch label input[type=checkbox]:checked+.lever.switch-col-light-green {
background-color: rgba(139, 195, 74, 0.5)
background-color: rgba(139, 195, 74, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-light-green:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-light-green:after {
background-color: #8BC34A
background-color: #8BC34A
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-lime:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-lime:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-lime {
.switch label input[type=checkbox]:checked+.lever.switch-col-lime {
background-color: rgba(205, 220, 57, 0.5)
background-color: rgba(205, 220, 57, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-lime:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-lime:after {
background-color: #CDDC39
background-color: #CDDC39
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-yellow:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-yellow:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 232, 33, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 232, 33, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 232, 33, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 232, 33, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-yellow {
.switch label input[type=checkbox]:checked+.lever.switch-col-yellow {
background-color: rgba(255, 232, 33, 0.5)
background-color: rgba(255, 232, 33, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-yellow:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-yellow:after {
background-color: #ffe821
background-color: #ffe821
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-amber:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-amber:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-amber {
.switch label input[type=checkbox]:checked+.lever.switch-col-amber {
background-color: rgba(255, 193, 7, 0.5)
background-color: rgba(255, 193, 7, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-amber:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-amber:after {
background-color: #FFC107
background-color: #FFC107
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-orange:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-orange:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-orange {
.switch label input[type=checkbox]:checked+.lever.switch-col-orange {
background-color: rgba(255, 152, 0, 0.5)
background-color: rgba(255, 152, 0, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-orange:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-orange:after {
background-color: #FF9800
background-color: #FF9800
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-deep-orange:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-deep-orange:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-orange {
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-orange {
background-color: rgba(255, 87, 34, 0.5)
background-color: rgba(255, 87, 34, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-orange:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-deep-orange:after {
background-color: #FF5722
background-color: #FF5722
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-brown:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-brown:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-brown {
.switch label input[type=checkbox]:checked+.lever.switch-col-brown {
background-color: rgba(121, 85, 72, 0.5)
background-color: rgba(121, 85, 72, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-brown:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-brown:after {
background-color: #795548
background-color: #795548
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-grey:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-grey:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-grey {
.switch label input[type=checkbox]:checked+.lever.switch-col-grey {
background-color: rgba(158, 158, 158, 0.5)
background-color: rgba(158, 158, 158, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-grey:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-grey:after {
background-color: #9E9E9E
background-color: #9E9E9E
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-blue-grey:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-blue-grey:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-blue-grey {
.switch label input[type=checkbox]:checked+.lever.switch-col-blue-grey {
background-color: rgba(96, 125, 139, 0.5)
background-color: rgba(96, 125, 139, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-blue-grey:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-blue-grey:after {
background-color: #607D8B
background-color: #607D8B
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-black:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-black:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-black {
.switch label input[type=checkbox]:checked+.lever.switch-col-black {
background-color: rgba(0, 0, 0, 0.5)
background-color: rgba(0, 0, 0, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-black:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-black:after {
background-color: #000000
background-color: #000000
}
}
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-white:active:after {
.switch label input[type=checkbox]:checked:not(:disabled)~.lever.switch-col-white:active:after {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1)
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-white {
.switch label input[type=checkbox]:checked+.lever.switch-col-white {
background-color: rgba(255, 255, 255, 0.5)
background-color: rgba(255, 255, 255, 0.5)
}
}
.switch label input[type=checkbox]:checked+.lever.switch-col-white:after {
.switch label input[type=checkbox]:checked+.lever.switch-col-white:after {
background-color: #ffffff
background-color: #ffffff
}
}
M src/main/resources/static/customol/js/identify.js
+2 −2
var map;
var map;
var maxFeatures =10;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var zoomOnRowClick = true;
var hlightFeatures = true;
var hlightFeatures = true;
var clickEvent;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
source: new ol.source.Vector()
});
});
var latitude;
var latitude;
var logitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
function identify(maps)
{
{
map=maps;
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
Groupcountt=i+1;
var groupnamee=layerr.get('name');
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
if(groupnamee=='Identify')
{
{
var groupcontentt='';
var groupcontentt='';
groupcontentt+='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
subGroupcountt=j+1;
var basecontentt = '';
var basecontentt = '';
let layernamee=sublayerr.get('name');
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><label for="visiblee'+i+j+'"> <input id="visiblee'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layernamee+'</label> </div>';
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><input id="visiblee'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visiblee'+i+j+'"> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
bindInputss('#layerr' + i + j, sublayerr);
});
});
$('#layerscountt'+i).append(subGroupcountt);
$('#layerscountt'+i).append(subGroupcountt);
}
}
}
}
});
});
$('#groupscountt').append(Groupcountt);
$('#groupscountt').append(Groupcountt);
}
}
function bindInputss(layerid, layer)
function bindInputss(layerid, layer)
{
{
var visibilityInput = $(layerid + ' input.visible');
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
layer.setVisible(this.checked);
if(layer.getVisible()==true)
if(layer.getVisible()==true)
{
{
activateClick(layer);
activateClick(layer);
}
}
else{
else{
deactivateClick();
deactivateClick();
}
}
});
});
visibilityInput.prop('checked', layer.getVisible());
visibilityInput.prop('checked', layer.getVisible());
}
}
function findlayeByName(layer, key, value) {
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
if (layer.get(key) === value) {
return layer;
return layer;
}
}
// Find recursively if it is a group
// Find recursively if it is a group
if (layer.getLayers) {
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
result = findlayeByName(layers[i], key, value);
if (result) {
if (result) {
return result;
return result;
}
}
}
}
}
}
return null;
return null;
}
}
function addHoverLayer()
function addHoverLayer()
{
{
if (placeholder) {
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
hoverLayer.setStyle(hoverStyle);
}
}
if (highlightFeatures) {
if (highlightFeatures) {
map.addLayer(hoverLayer);
map.addLayer(hoverLayer);
}
}
}
}
function activateClick(layer)
function activateClick(layer)
{
{
console.log(layer)
console.log(layer)
var layername=layer.get('name');
var layername=layer.get('name');
// hoverLayer.getSource().clear();
// hoverLayer.getSource().clear();
deactivateClick();
deactivateClick();
clickEvent = (evt) =>
clickEvent = (evt) =>
{
{
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
latitude= lonlat[0];
logitude=lonlat[1];
logitude=lonlat[1];
features = [];
features = [];
filterdata=[];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
{
var url = layer.getSource().getFeatureInfoUrl(
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
evt.coordinate,
map.getView().getResolution(),
map.getView().getResolution(),
'EPSG:3857', {
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
'INFO_FORMAT' : 'application/json',
});
});
if (url)
if (url)
{
{
$.get(url, function(response) {
$.get(url, function(response) {
response = JSON.parse(response);
response = JSON.parse(response);
{
{
{
{
const a=response.features.map(x=>x.properties)[0];
const a=response.features.map(x=>x.properties)[0];
console.log(a);
console.log(a);
if(layername=='Rail')
if(layername=='Rail')
{
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
}
if(layername=='National Highway')
if(layername=='National Highway')
{
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
}
if(layername=='Airport')
if(layername=='Airport')
{
{
content.innerHTML = '<p style="color:green;">Location:<span style="color:black">' + a.descriptio + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
content.innerHTML = '<p style="color:green;">Location:<span style="color:black">' + a.descriptio + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
}
if(layername=='Monument')
if(layername=='Monument')
{
{
content.innerHTML = '<p style="color:green;">Desc:<span style="color:black">' + a.description_mn + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p><p style="color:green;">State:<span style="color:black">' + a.state + '</span></p><p style="color:green;">Circle:<span style="color:black">' + a.circle + '</span></p><p style="color:green;">Sr No:<span style="color:black">' + a.user_id + '</span></p> <button onclick="myFunction()">More Infromation</button>';
content.innerHTML = '<p style="color:green;">Desc:<span style="color:black">' + a.description_mn + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p><p style="color:green;">State:<span style="color:black">' + a.state + '</span></p><p style="color:green;">Circle:<span style="color:black">' + a.circle + '</span></p><p style="color:green;">Sr No:<span style="color:black">' + a.user_id + '</span></p> <button onclick="myFunction()">More Infromation</button>';
}
}
overlay.setPosition(evt.coordinate);
overlay.setPosition(evt.coordinate);
}
}
}
}
});
});
}
}
else{
else{
alert("NOt Suported");
alert("NOt Suported");
}
}
}
}
else
else
{
{
alert('Currently only WMS query is supported. Please select another layer!')
alert('Currently only WMS query is supported. Please select another layer!')
}
}
};
};
map.on('singleclick', clickEvent);
map.on('singleclick', clickEvent);
}
}
function myFunction(){
function myFunction(){
window.location = '/monumentform.jsp';
window.location = '/monumentform.jsp';
}
}
function setCursor(cursorType) {
function setCursor(cursorType) {
if (map) {
if (map) {
const target = map.getTarget();
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
jTarget.css('cursor', cursorType);
}
}
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
{
const styles = source.getParams().hasOwnProperty('STYLES')
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
? source.getParams().STYLES
: '';
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
// STYLES: styles
});
});
// return url;
// return url;
}
}
M src/main/resources/static/customol/js/layerSwitcher.js
+2 −2
function switchlayers(map)
function switchlayers(map)
{
{
var Groupcount=0;
var Groupcount=0;
bindallopacity();
bindallopacity();
map.getLayers().forEach(function (layer, i) {
map.getLayers().forEach(function (layer, i) {
Groupcount=i+1;
Groupcount=i+1;
var groupname=layer.get('name');
var groupname=layer.get('name');
var groupcontent='';
var groupcontent='';
groupcontent+='';
groupcontent+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+i+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choice'+i+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layer'+i+'"></div> <div id="'+'slider-range-min'+i+'" ></div></div></div>';
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+i+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+i+'"></span><i style="position: absolute;right: 17px;" class="ti-arrow-circle-down"></i></a></h5></div><div id="basemap-choice'+i+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layer'+i+'"></div> <div id="'+'slider-range-min'+i+'" ></div></div></div>';
$('#groups').append($(groupcontent));
$('#groups').append($(groupcontent));
bindInputs('#layer' + i, layer);
bindInputs('#layer' + i, layer);
var subGroupcount=0;
var subGroupcount=0;
if (layer instanceof ol.layer.Group) {
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function (sublayer, j) {
layer.getLayers().forEach(function (sublayer, j) {
subGroupcount=j+1;
subGroupcount=j+1;
var basecontent = '';
var basecontent = '';
let layername=sublayer.get('name');
let layername=sublayer.get('name');
basecontent += '<div class="togglebutton" id="layer'+i+j+'"><label for="visible'+i+j+'"> <input id="visible'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layername+'</label> <input id="opacity" class="opacity" type="range" min="0" max="1" step="0.01"/></div>';
basecontent += '<div class="togglebutton" id="layer'+i+j+'"><input id="visible'+i+j+'" type="checkbox" class="visible" style=" display: contents;"/><label for="visible'+i+j+'"> '+layername+'</label> <input id="opacity" class="opacity" type="range" min="0" max="1" step="0.01"/></div>';
$('#layer'+i).append($(basecontent));
$('#layer'+i).append($(basecontent));
bindInputs('#layer' + i + j, sublayer);
bindInputs('#layer' + i + j, sublayer);
});
});
$('#layerscount'+i).append(subGroupcount);
$('#layerscount'+i).append(subGroupcount);
}
}
});
});
$('#groupscount').append(Groupcount);
$('#groupscount').append(Groupcount);
}
}
function bindallopacity()
function bindallopacity()
{
{
$('#opacity').hide();
$('#opacity').hide();
var allopacity=$('#allopacity');
var allopacity=$('#allopacity');
allopacity.on('change', function () {
allopacity.on('change', function () {
});
});
}
}
function bindInputs(layerid, layer) {
function bindInputs(layerid, layer) {
var visibilityInput = $(layerid + ' input.visible');
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
layer.setVisible(this.checked);
});
});
visibilityInput.prop('checked', layer.getVisible());
visibilityInput.prop('checked', layer.getVisible());
var opacityInput = $(layerid + ' input.opacity');
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function () {
opacityInput.on('input change', function () {
layer.setOpacity(parseFloat(this.value));
layer.setOpacity(parseFloat(this.value));
});
});
opacityInput.val(String(layer.getOpacity()));
opacityInput.val(String(layer.getOpacity()));
}
}
M src/main/resources/static/customol/js/main.js
+2 −2
///**
///**
// * Elements that make up the popup.
// * Elements that make up the popup.
// */
// */
//var container = document.getElementById('popup');
//var container = document.getElementById('popup');
//var content = document.getElementById('popup-content');
//var content = document.getElementById('popup-content');
//var closer = document.getElementById('popup-closer');
//var closer = document.getElementById('popup-closer');
//
//
///**
///**
// * Create an overlay to anchor the popup to the map.
// * Create an overlay to anchor the popup to the map.
// */
// */
//var overlay = new ol.Overlay({
//var overlay = new ol.Overlay({
// element: container,
// element: container,
// autoPan: true,
// autoPan: true,
// autoPanAnimation: {
// autoPanAnimation: {
// duration: 250,
// duration: 250,
// },
// },
//});
//});
//
//
///**
///**
// * Add a click handler to hide the popup.
// * Add a click handler to hide the popup.
// * @return {boolean} Don't follow the href.
// * @return {boolean} Don't follow the href.
// */
// */
//closer.onclick = function () {
//closer.onclick = function () {
// overlay.setPosition(undefined);
// overlay.setPosition(undefined);
// closer.blur();
// closer.blur();
// return false;
// return false;
//};
//};
//
//
//window.onload=init;
//window.onload=init;
//
//
/**
/**
* Elements that make up the popup.
* Elements that make up the popup.
*/
*/
var container = document.getElementById('popup');
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var closer = document.getElementById('popup-closer');
/**
/**
* Create an overlay to anchor the popup to the map.
* Create an overlay to anchor the popup to the map.
*/
*/
var overlay = new ol.Overlay({
var overlay = new ol.Overlay({
element: container,
element: container,
autoPan: true,
autoPan: true,
autoPanAnimation: {
autoPanAnimation: {
duration: 250,
duration: 250,
},
},
});
});
/**
/**
* Add a click handler to hide the popup.
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
* @return {boolean} Don't follow the href.
*/
*/
closer.onclick = function () {
closer.onclick = function () {
overlay.setPosition(undefined);
overlay.setPosition(undefined);
closer.blur();
closer.blur();
return false;
return false;
};
};
window.onload=init;
window.onload=init;
function init()
function init()
{
{
let india=[ 81.191694, 23.8086 ];
let india=[ 81.191694, 23.8086 ];
//let jalandhar=[75.57917,31.32556];
//let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
var map = new ol.Map({
overlays: [overlay],
overlays: [overlay],
target: 'target-map',
target: 'target-map',
view: new ol.View({
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.5,
zoom:4.5,
// zoom :10,
// zoom :10,
minZoom:4,
minZoom:4,
maxZoom: 17
maxZoom: 17
}),
}),
layers:[
layers:[
CommonlayersGroup,indianMapLayersGroup,
CommonlayersGroup,indianMapLayersGroup,
transportLayerGroup,IdentifyLayerGroup,satelliteGroup
transportLayerGroup,IdentifyLayerGroup,satelliteGroup
],
],
controls: ol.control.defaults({
controls: ol.control.defaults({
zoom: false,
zoom: false,
attribution: false,
attribution: false,
rotate: false
rotate: false
}).extend([]),
}).extend([]),
// new ol.control.FullScreen()
// new ol.control.FullScreen()
});
});
// var olGM = new olgm.OLGoogleMaps({map: map});
// var olGM = new olgm.OLGoogleMaps({map: map});
//var gmap = olGM.getGoogleMapsMap();
//var gmap = olGM.getGoogleMapsMap();
//CommonlayersGroup,
//CommonlayersGroup,
//measure(map);
//measure(map);
controllers(map);
controllers(map);
//navigation(map);
navigation(map);
//switchlayers(map);
switchlayers(map);
getMousePosition(map);
getMousePosition(map);
scaleline(map);
scaleline(map);
//exportpdf(map);
//exportpdf(map);
identify(map);
identify(map);
//addGeom(map);
//addGeom(map);
//geocoder(map);
//geocoder(map);
}
}
//
//
//function init()
//function init()
//{
//{
//
//
//var map = new ol.Map({
//var map = new ol.Map({
// overlays: [overlay],
// overlays: [overlay],
// target: 'target-map',
// target: 'target-map',
//
//
// view: new ol.View({
// view: new ol.View({
// center : ol.proj.transform([ 81.191694, 23.8086 ], 'EPSG:4326','EPSG:3857'),
// center : ol.proj.transform([ 81.191694, 23.8086 ], 'EPSG:4326','EPSG:3857'),
// zoom :4.5,
// zoom :4.5,
// minZoom:4,
// minZoom:4,
// maxZoom: 17
// maxZoom: 17
// }),
// }),
// layers:[
// layers:[
// CommonlayersGroup,indianMapLayersGroup,
// CommonlayersGroup,indianMapLayersGroup,
// transportLayerGroup,IdentifyLayerGroup,satelliteGroup,
// transportLayerGroup,IdentifyLayerGroup,satelliteGroup,
// ],
// ],
// controls: ol.control.defaults({
// controls: ol.control.defaults({
// zoom: true,
// zoom: true,
// attribution: false,
// attribution: false,
// rotate: false
// rotate: false
// }).extend([]),
// }).extend([]),
// // new ol.control.FullScreen()
// // new ol.control.FullScreen()
//
//
//
//
// });
// });
// // var olGM = new olgm.OLGoogleMaps({map: map});
// // var olGM = new olgm.OLGoogleMaps({map: map});
////var gmap = olGM.getGoogleMapsMap();
////var gmap = olGM.getGoogleMapsMap();
////CommonlayersGroup,
////CommonlayersGroup,
//measure(map);
//measure(map);
//controllers(map);
//controllers(map);
//navigation(map);
//navigation(map);
//switchlayers(map);
//switchlayers(map);
//getMousePosition(map);
//getMousePosition(map);
//scaleline(map);
//scaleline(map);
//exportpdf(map);
//exportpdf(map);
//identify(map);
//identify(map);
//addGeom(map);
//addGeom(map);
//
//
//
//
//
//
//
//
//
//
//}
//}
A src/main/resources/static/customol/js/mainn.js
+79 −0
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
window.onload=init;
function init()
{
let india=[ 81.191694, 23.8086 ];
let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
overlays: [overlay],
target: 'target-maps',
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.0,
// zoom :9.5,
minZoom:4,
maxZoom: 17
}),
layers:[
z
],
controls: ol.control.defaults({
zoom: false,
attribution: true,
rotate: false
}).extend([]),
// new ol.control.FullScreen()
});
legend(map);
geom(map);
//buffer(map);
controllers(map);
navigation(map);
switchlayers(map);
getMousePosition(map);
scaleline(map);
exportpdf(map);
identify(map);
//addGeom(map);
commonfunctions(map);
//swipe(map);
//geocoder(map);
}
A src/main/resources/static/customol/jsnew/LayersGroup/IdentifyLayerGroup.js
+29 −0
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
//var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var wmsurl='https://gis.ncog.gov.in/GeoserverWebAPI/wms62'
var IdentifyLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'park_boundary_iis',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'Park Boundry',
visible:false
}),
],
name : 'Identify'
});
A src/main/resources/static/customol/jsnew/LayersGroup/commonlayersGroup.js
+43 −0
var CommonlayersGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
visible : false,
preload : Infinity,
opacity: 1,
source : new ol.source.BingMaps(
{
key : 'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'Aerial'
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
}),
name : 'Aerial'
}),
new ol.layer.Tile({
visible : false,
preload : Infinity,
source : new ol.source.BingMaps({
key :'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
imagerySet : 'AerialWithLabels',
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
}),
name : 'Aerial+Labels'
}),
new ol.layer.Tile({
visible : false,
source : new ol.source.OSM(),
name : 'OSM'
}),
new ol.layer.Tile({
visible : true,
source: new ol.source.TileImage({url: 'http://maps.google.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0'}),
name : 'Google Map'
})
],
name : 'Basemaps'
});
A src/main/resources/static/customol/jsnew/LayersGroup/geomGroup.js
+27 −0
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='http://localhost:8080/geoserver/PostgresSql/wms'
var geomLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :'http://localhost:8080/geoserver/PostgresSql/wms',
// crossOrigin: 'anonymous',
params : {
'LAYERS' : 'geom',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: false,
//maxResolution : 256,
name : 'Geom',
visible:true
}),
],
name : 'GeomGroup'
});
A src/main/resources/static/customol/jsnew/LayersGroup/indianmapLayersGroup.js
+86 −0
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms';
//var wmsurl='https://gis.ncog.gov.in/GeoserverWebAPI/wms62'
var st="STCODE11='03'";
var di="dtcode11 ='037'";
var ta="dtcode11 ='037'";
var vil="DT_2011 ='037'";
var indianMapLayersGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'VillageIndia',
format_options:'dpi:180',
version : '1.1.1',
// CQL_FILTER : vil
}
}),
showLegend: true,
maxResolution : 256,
name : 'Village',
visible:true
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : wmsurl,//'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'TalukaIndia',
version : '1.1.1',format_options:'dpi:110',
// CQL_FILTER : ta
}
}),
showLegend: true,
maxResolution : 1024,
name : 'Taluka',
visible:true
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'DistrictIndia',
// CQL_FILTER : di,
version : '1.1.1',format_options:'dpi:110'
//version : '1.1.1',CQL_FILTER : 'dtcode11 IN (001,003,004)' ,format_options:'dpi:110'
}
}),
showLegend: true,
maxResolution : 2048,
name : 'District',
visible:true
})
,
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
layers : 'StateIndia',
// CQL_FILTER : st,
version : '1.1.1',format_options:'dpi:110',
//CQL_FILTER : di
//version : '1.1.1',CQL_FILTER : 'STCODE11 IN (01,02,004)' ,format_options:'dpi:110'
}
}),
styles:'IndiaState',
showLegend: true,
visible:true,
name : 'State'
}),
],
name : 'India Boundaries'
});
A src/main/resources/static/customol/jsnew/LayersGroup/transportGroup.js
+58 −0
//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS';
var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'
var transportLayerGroup = new ol.layer.Group({
layers : [
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_airport_location_basemap',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: false,
//maxResolution : 256,
name : 'Airport',
visible:false
}),
new ol.layer.Tile({
source : new ol.source.TileWMS({
url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
crossOrigin: 'anonymous',
params : {
'LAYERS' : 'india_nhai',
format_options:'dpi:180',
version : '1.1.1',
STYLES:''
}
}),
showLegend: true,
//maxResolution : 256,
name : 'National Highway',
visible:false
}),
// new ol.layer.Tile({
// source : new ol.source.TileWMS({
// url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms',
// crossOrigin: 'anonymous',
// params : {
// 'LAYERS' : 'plot_boundary_new',
// format_options:'dpi:180',
// version : '1.1.1',
// STYLES:''
// }
// }),
// showLegend: true,
// //maxResolution : 256,
// name : 'Dehgam',
// visible:true
// })
],
name : 'Transport'
});
A src/main/resources/static/customol/jsnew/buffer/buffer.js
+185 −0
var map;
var clickEvent;
var range = document.getElementById('range');
var value=document.getElementById('bufferrange').defaultValue;
var selecterange=value;
function buffer(m)
{
map=m;
range.innerHTML=value;
}
$("#buffer").bind("click", function() {
activatebuffer();
});
function activatebuffer()
{
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) => {
// map.removeLayer(vectorLayer_buffer);
// vectorSource.getSource().clear();
var features=[];
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
var lat= lonlat[0];
var lon=lonlat[1];
var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().setCenter(ol.proj.transform([lat, lon], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(12);
getvillagebuffer(lat,lon,selecterange);
console.log(value)
var point = new ol.geom.Circle(ol.proj.transform([lat,lon],'EPSG:4326', 'EPSG:3857'),selecterange*1210);
console.log(point.getCenter());
console.log(point);
var pointFeature = new ol.Feature(point);
features.push(pointFeature);
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326',
features: features
});
var vectorLayer_buffer = new ol.layer.Vector({
source : vectorSource,
style : customStyleFunction()
});
console.log(vectorLayer_buffer)
map.addLayer(vectorLayer_buffer);
};
map.on('singleclick', clickEvent);
}
function customStyleFunction()
{
return [ new ol.style.Style({
fill : new ol.style.Fill({
opacity : 0.6,
color : 'rgba(255,255,204,0.3)'
}),
stroke : new ol.style.Stroke({
width : 2,
color : 'red',
radius : 1
}),
image : new ol.style.Circle({
fill : new ol.style.Fill({
color : 'rgba(51, 204, 255,0.3)'
}),
stroke : new ol.style.Stroke({
width : 1,
color : 'blue'
}),
radius : 3
}),
})];
}
var bufferrange=$('#bufferrange');
bufferrange.on('change', function () {
range.innerHTML = '';
if(this.value!=="")
{
range.innerHTML = this.value ;
selecterange=this.value;
}
});
function getvillagebuffer(lat,lon,value)
{
var features = [];
var j=getBuffer(lat,lon,value);
if(j!="") {
var data={"lat":lat,"lon":lon,"range":value};
var dataObjectString = JSON.stringify(data);
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('bufferReport?data='+enc,"_blank");
console.log(j);
var geomP, feature;
for (var i = 0; i < j.length; i++) {
latitude=j[i].lon;
longitude=j[i].lat;
geomP = new ol.geom.Point(ol.proj.transform([latitude, longitude ], 'EPSG:4326', 'EPSG:3857'));
feature = new ol.Feature(geomP);
features.push(feature);
}
var point_geom = new ol.geom.Point(
[20, 20]
);
point_feature.setGeometry(point_geom);
var vector_layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature]
})
})
map.addLayer(vector_layer);
var vectorSource = new ol.source.Vector({
features : features
});
var vectorLayer = new ol.layer.Vector({
source : vectorSource,
style : customStyleFunction()
});
console.log(vectorLayer);
map.addLayer(vectorLayer);
};
}
A src/main/resources/static/customol/jsnew/buffer/bufferReport.js
+126 −0
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("data");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let lat=d.lat;
let lon=d.lon;
let range=d.range;
var j=getBuffer(lat,lon,range);
if(j) {
loadtable(j);
};
});
function loadtable(data)
{
if ( $.fn.DataTable.isDataTable( '#BufferReportList' ) ) {
$("#BufferReportList").dataTable().fnDestroy();
$('#BufferReportList').empty();
}
var gid=data.map(x=>x.gid);
console.log(gid);
var table=$('#BufferReportList').DataTable({
pageLength : 10,
dom: 'Bfrtip',
'processing': true,
"data":data ,
columns : [{
title : 'SR_NO',
data : 'gid'
}, {
title : 'First Name',
data : 'firstname'
}, {
title : 'Last Name',
data : 'lastname'
}, {
title : 'STATE',
data : 'statename'
}, {
title : 'DISTRICT',
data : 'distictname',
}, {
title : 'TALUKA',
data : 'talukaname',
},{
title : 'VILLAGE',
data : 'villagename',
}
,{title : 'Action',
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger btn-sm " id="delete">Delete </button>'
},{title : 'Action',
data: null,
className: "center",
defaultContent: '<button class="btn btn-primary btn-sm" id="update">Update </button>'
}
]
});
$('#BufferReportList tbody').on('click', 'button#update', function ()
{
var data = table.row( $(this).closest('tr') ).data();
id=data['gid'];
$("#editId").val(id);
$("#editASIMonumentFrom").submit();
} )
$('#BufferReportList tbody').on('click', 'button#delete', function ()
{
var data = table.row( $(this).closest('tr') ).data();
id=data['gid'];
var data=DeleteGeomreportbyId(id);
loadtable(data);
location.reload();
} )
}
A src/main/resources/static/customol/jsnew/commonfunctions/Base64.js
+125 −0
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
decode: function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
_utf8_encode: function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
_utf8_decode: function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
A src/main/resources/static/customol/jsnew/commonfunctions/clear.js
+24 −0
var map;
function clear(m)
{
map=m;
}
function deactivateClick()
{
setCurser('');
if (clickEvent) {
map.un('singleclick', clickEvent);
}
}
function setCurser(cursorType){
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
A src/main/resources/static/customol/jsnew/commonfunctions/commonfunctions.js
+15 −0
var map;
function commonfunctions(m)
{
map=m;
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
A src/main/resources/static/customol/jsnew/controllers/controllers.js
+100 −0
var map;
function controllers(maps)
{
map=maps;
}
function zoomIn()
{
map.getView().animate({
zoom: map.getView().getZoom() + 1,
duration: 500
});
}
function zoomOut()
{
map.getView().animate({
zoom: map.getView().getZoom() - 1,
duration: 500
});
}
function defaultmap()
{
//for Gujarat
// var extent = [ 66.9973, 19.4081, 75.5887, 24.9398];
//for India
var extent = [68.17665, 7.96553, 97.40256, 35.49401];
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent);
map.getView().animate({
zoom: 4.7,
duration: 600
});
}
function fullscreen()
{
var elem = document.getElementById('target-map');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
function geolocation()
{
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(showPosition);
// } else {
// alert( "Geolocation is not supported by this browser.");
// }
var geolocation = new ol.Geolocation({
tracking: true
});
geolocation.on('change:position', function() {
var coordinate = geolocation.getPosition();
let lat=coordinate[1];
let lon=coordinate[0];
if(lat!=null && lon!=null)
{
var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857');
var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]];
map.getView().fit(extent,map.getSize());
}
else
{
alert("Position not found");
}
// map.getView().setCenter(coordinate);
});
}
function showPosition(position) {
alert(position)
var l= "Latitude: " + position.coords.latitude ;
var lon="<br>Longitude: " + position.coords.longitude;
}
A src/main/resources/static/customol/jsnew/controllers/mouse-position.js
+36 −0
function getMousePosition(map)
{
var latnong=fromLotlong(map.getView().getCenter());
var pointerMoveListener = map.on('pointermove', (evt) => {
if (evt.dragging)
{
return;
}
else
{
latnong = fromLotlong(evt.coordinate);
document.getElementById("latlon").innerHTML=latnong;
}
});
document.getElementById("latlon").innerHTML=latnong;
function fromLotlong(coords)
{
let lonlat = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326');
let formattedLatlong= [];
return formattedLatlong=lonlat.map(x=>x.toFixed(4));
}
}
A src/main/resources/static/customol/jsnew/controllers/scaleline.js
+13 −0
function scaleline(map)
{
let target = map.getTarget();
console.log(target);
const scaleLineControl = new ol.control.ScaleLine({
target: document.getElementById(scale),
});
map.addControl(scaleLineControl);
}
A src/main/resources/static/customol/jsnew/export/exportpdf.js
+129 −0
function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}function exportpdf(map)
{
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
var mapCanvas = document.createElement('canvas');
mapCanvas.width = width;
mapCanvas.height = height;
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
if (canvas.width > 0) {
var opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
var transform = canvas.style.transform;
// Get the transform parameters from the style's transform matrix
var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
// Apply the transform to the export map context
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
});
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
}
A src/main/resources/static/customol/jsnew/findbylocation/findbylocation.js
+206 −0
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function findbylocation(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateClick(layer);
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
hoverLayer.getSource().clear();
deactivateClick();
clickEvent = (evt) => {
console.log(vectorLayer6);
// if(layer!=null)
/* {
features = layer.getSource().getFeatures();
features.forEach((feature) => {
layer.getSource().removeFeature(feature);
}); */
// }
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const url = _getFeatureInfoUrl(
layer.getSource(),
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
);
}
/* if (url)
{
$.get(url, function(response)
{
response = JSON.parse(response);
var a= response.features[0].properties.vill_id
if (data.hasOwnProperty('features'))
{
// convert the GeoJSON response to Feature array
features = geojson.readFeatures(data);
features.forEach((feat) => {
const props = { ...feat.getProperties() };
console.log(props.dist_id);
});
}
});
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}*/
};
map.on('singleclick', clickEvent);
}
function deactivateClick() {
setCursor('');
if (clickEvent) {
map.un('singleclick', sclickEvent);
}
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function _getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
/* const url = source.getSource().getGetFeatureInfoUrl(
coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'}); */
const url = source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
/* const url = source.getGetFeatureInfoUrl(coordinate, resolution, 'EPSG:3857',
{'INFO_FORMAT': 'application/json'})*/
return url;
}
A src/main/resources/static/customol/jsnew/geocoder/geocoder.js
+40 −0
var map;
function geocoder(m)
{
map=m;
var geocoder = new Geocoder('nominatim', {
provider : 'osm',
key : ' AIzaSyClQ0GOW55zhw4PvFh73FyGLHdSd4bJfpM',
lang : 'en',
//targetType: 'text-input',
placeholder : 'Search location',
autoComplete: true,
limit : 5,
keepOpen : false
});
map.addControl(geocoder);
//Listen when an address is chosen
geocoder.on('addresschosen', function(evt){
var feature = evt.feature,
coord = evt.coordinate,
address = evt.address;
geocoder.getSource().clear();
geocoder.getSource().addFeature(feature);
// some popup solution
content.innerHTML = '<p>'+ address.formatted +'</p>';
overlay.setPosition(coord);
});
}
A src/main/resources/static/customol/jsnew/geom/addGeom.js
+317 −0
var map;
var clickEvent;
var vectorLayer6=ol.layer.Vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var vectorSource;
var zoomOnRowClick;
var maxFeatures;
var highlightFeatures;
var cursorStyle;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var pointStyle =[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
];
function addGeom(m)
{
map=m;
maxFeatures = 1;
cursorStyle = 'crosshair';
zoomOnRowClick = true;
highlightFeatures = true;
addHoverLayer();
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
}
$("#geom").bind("click", function() {
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
pointLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if(pointStyle)
{
pointLayer.setStyle(pointStyle);
}
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) =>
{
// onFeatureSelected(evt);
// if(vectorLayer6!=null)
// {
// var f = vectorLayer6.getSource().getFeatures();
// f.forEach((fe) => {
// vectorLayer6.getSource().removeFeature(fe);
// });
//}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
document.getElementById("lat").value =lat;
document.getElementById("lon").value =lon;
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
})
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function onFeatureSelected(evt= ol.Feature) {
console.log(evt);
hoverLayer.getSource().clear();
if (evt !== null)
{
// const projCode: string = this.selected.getLayer().getSource().getProjection().getCode();
const viewProjCode = map.getView().getProjection().getCode();
const projCode='EPSG:3857';
// const projCode='EPSG:4326';
const feat = evt.clone();
feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode));
hoverLayer.getSource().addFeature(feat);
map.getView().fit(feat.getGeometry().getExtent(), {
duration: 500
});
}
}
function removeHoverLayer() {
map.removeLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
A src/main/resources/static/customol/jsnew/geom/addGeomNew.js
+319 −0
var map;
var clickEvent;
var vectorLayer6=ol.layer.Vector;
var features= ol.Feature[10];
var geojson = new ol.format.GeoJSON;
var hoverLayer =ol.layer.Vector;
var vectorSource;
var zoomOnRowClick;
var maxFeatures;
var highlightFeatures;
var cursorStyle;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var pointStyle =[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
];
function addGeom(m)
{
map=m;
maxFeatures = 1;
cursorStyle = 'crosshair';
zoomOnRowClick = true;
highlightFeatures = true;
addHoverLayer();
}
$("#geom").bind("click", function() {
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
activateGeomLayer(layer);
});
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
pointLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if(pointStyle)
{
pointLayer.setStyle(pointStyle);
}
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function customStyleFunction ()
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
}
function activateGeomLayer(layer)
{
console.log(layer);
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
deactivateClick();
setCursor(cursorStyle);
clickEvent = (evt) =>
{
// onFeatureSelected(evt);
// if(vectorLayer6!=null)
// {
// var f = vectorLayer6.getSource().getFeatures();
// f.forEach((fe) => {
// vectorLayer6.getSource().removeFeature(fe);
// });
//}
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,);
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
hoverLayer.getSource().clear();
pointLayer.getSource().clear();
features = geojson.readFeatures(response);
demo.showSwal('success-message');
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
let villageName=a.VIL_NAME11;
//selectedstate(stateCode);
//selecteddistrict(districtCode);
//selectedtaluka(talukaCode);
//selectedvillage(villageCode);
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
//console.log(b);
var enc = Base64.encode(dataObjectString);
console.log(enc);
window.open('addgeom?id='+enc,"_blank");
})
}
}
else
{
alert(
'Currently only WMS query is supported. Please select another layer!'
);
}
}
map.on('singleclick', clickEvent);
}
function onFeatureSelected(evt= ol.Feature) {
console.log(evt);
hoverLayer.getSource().clear();
if (evt !== null)
{
// const projCode: string = this.selected.getLayer().getSource().getProjection().getCode();
const viewProjCode = map.getView().getProjection().getCode();
const projCode='EPSG:3857';
// const projCode='EPSG:4326';
const feat = evt.clone();
feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode));
hoverLayer.getSource().addFeature(feat);
map.getView().fit(feat.getGeometry().getExtent(), {
duration: 500
});
}
}
function removeHoverLayer() {
map.removeLayer(hoverLayer);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
A src/main/resources/static/customol/jsnew/geom/geom.js
+389 −0
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geometryType='Point';
var precision = 2;
var cursorStyle = 'pointer';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var sourceDraw = new ol.source.Vector();
var vectorDraw = new ol.layer.Vector({
source: sourceDraw,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
});
function geom(m)
{
map=m
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
// activateDraw();
}
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
geometryType=gtype;
activateDraw();
}
function activateDraw()
{
deactivateDraw();
map.addLayer(layers);
var wkt = new ol.format.WKT();
//setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: vectorDraw.getSource(),
type: geometryType,
});
draw.on('drawstart', (e) => {
map.removeLayer(vectorDraw);
sourceDraw.clear();//
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
map.addLayer(vectorDraw);
let area=getLengthOrArea(feature);
let cords=Addpolygongeometry(feature);
addGeom(cords,modifiedWKT,area);
const feat = new ol.Feature({
geometry: e.target
}
);
getLengthOrArea(feat);
});
draw.setActive(true);
map.addInteraction(draw);
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
sourceDraw.clear();
} catch (error) {}
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function Addpolygongeometry(feature)
{
let cordinate = '';
switch (geometryType) {
case 'LineString':
try {
cordinate = feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
case 'Polygon':
try {
cordinate =feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
case 'Square':
try {
cordinate =feature.getGeometry().getFirstCoordinate();
} catch (error) {}
break;
default:
try {
cordinate = feature.getGeometry().getCoordinates();
} catch (error) {}
break;
}
// if (cordinate !== '') {
// cordinate += cordinate;
// }
return cordinate;
}
function addGeom(cords,wkt,area)
{
console.log(cords);
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(cords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
cords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
// const extent=feat.getGeometry().getExtent();
// hoverLayer.getSource().addFeature(feat);
//map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
//const extent=a.getGeometry().getExtent();
////alert(extent);
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
console.log(a);
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('addgeom?id='+enc,"_blank");
})
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m &sup2;';
}
return value;
}
A src/main/resources/static/customol/jsnew/geom/geomForm.js
+121 −0
$(document).ready(function() {
var url_string = window.location;
var url = new URL(url_string);
var data = url.searchParams.get("id");
var d=JSON.parse(Base64.decode(data));
console.log(d);
let stateCode=d.stateCode;
let districtCode=d.districtCode;
let talukaCode=d.talukaCode;
let villageCode=d.villageCode;
let lat=d.lat;
let lon=d.lon;
let wkt=d.wkt;
loadstate(stateCode);
loaddistrict(stateCode,districtCode);
loadtaluka(districtCode,talukaCode);
loadvillage(talukaCode,villageCode);
document.getElementById("lat").value =lat.toFixed(4);
document.getElementById("lon").value =lon.toFixed(4);
document.getElementById("wktGeom").value = wkt;
});
function loadstate(stateCode)
{
var stateId_Hidden=stateCode;
var j=getState();
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
if (stateId_Hidden == j[i].statecode)
{
options += '<option value="' + j[i].statecode + '" selected="selected">' + j[i].statename+ '</option>';
}
else {
options += '<option value="' + j[i].statecode + '">' + j[i].statename+ '</option>';
}
}
$("select#selectedstate").html(options);
}
function loaddistrict(stateCode,districtCode)
{
var distictId_Hidden=districtCode;
var j=getDistrict(stateCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (distictId_Hidden == j[i].districtcode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].districtcode + '" selected="selected">' + j[i].districtname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].districtcode + '">' + j[i].districtname+ '</option>';
}
}
$("select#selecteddistrict").html(options);
}
function loadtaluka(districtCode,talukaCode)
{
var talukaId_Hidden=talukaCode;
var j=getTalukas(districtCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (talukaId_Hidden == j[i].talukacode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].talukacode + '" selected="selected">' + j[i].talukaname+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].talukacode + '">' + j[i].talukaname+ '</option>';
}
}
$("select#selectedtaluka").html(options);
}
function loadvillage(talukaCode,villageCode)
{
var villageId_Hidden=villageCode;
var j=getVillage(talukaCode);
var options = '<option value="' + "--Select--" + '" disabled selected>'+"--Select--" + '</option>';
for (var i = 0; i < j.length; i++) {
// alert( " j[i].stcode11 == " + j[i].stcode11);
if (villageId_Hidden == j[i].villagecode)
{
// alert("if"+stateId_Hidden);
options += '<option value="' + j[i].villagecode + '" selected="selected">' + j[i].villagename+ '</option>';
// loadDistrict(j[i].stcode11);
}
else {
options += '<option value="' + j[i].villagecode + '">' + j[i].villagename+ '</option>';
}
}
$("select#selectedvillage").html(options);
}
A src/main/resources/static/customol/jsnew/geom/measureNEW.js
+415 −0
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geojson = new ol.format.GeoJSON;
var geometryType = 'Point';
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var maxFeatures=1;
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
activateDraw(geometryType);
}
function activateDraw(geometryType)
{
hoverLayer.getSource().clear();
// vectorDraw.getSource().clear();
var wkt = new ol.format.WKT();
//deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
var sourceDraw = new ol.source.Vector();
var vectorDraw = new ol.layer.Vector({
source: sourceDraw,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
}),
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'red'
})
})
})
});
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
draw= new ol.interaction.Draw({
source: vectorDraw.getSource(),
type: geometryType,
// style: (feature) => {
// return getStyle(feature);
// }
});
map.addInteraction(draw);
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
map.addLayer(vectorDraw);
let coords= feature.getGeometry().getCoordinates();
let firstcoords= feature.getGeometry().getFirstCoordinate();
let area=getLengthOrArea(feature);
//console.log(wkt);
alctivateLayer(modifiedWKT,area,firstcoords)
const feat = new ol.Feature({
geometry: e.target
}
);
map.removeInteraction(draw);
});
draw.setActive(true);
}
function alctivateLayer(wkt,area,firstcoords)
{
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
firstcoords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
features = geojson.readFeatures(response);
features.forEach((feat) => {
console.log(feat)
const extent=feat.getGeometry().getExtent();
hoverLayer.getSource().addFeature(feat);
map.getView().fit(extent,{ duration: 600});
const props = { ...feat.getProperties() };
console.log(props)
});
//const extent=a.getGeometry().getExtent();
////alert(extent);
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('monument?id='+enc,"_blank");
})
}
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
addHoverLayer();
// activateDraw(geometryType)
}
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
map.addLayer(pointLayer);
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m &sup2;';
displayradious.innerHTML = value+ ' m';
}
return value;
}
A src/main/resources/static/customol/jsnew/geom/measureold.js
+335 −0
var map;
var layers=new ol.layer.Vector;
var feature=new ol.Feature;
var geojson = new ol.format.GeoJSON;
var geometryType='Point';
var precision = 2;
var cursorStyle = 'crosshair';
var fillColor = [255, 255, 255, 0.5];
var strokeColor = [72, 72, 72, 1];
var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1];
var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7];
var font = 'normal 14px Arial';
var maxFeatures=1;
var draw;
var displaylength = document.getElementById('distance');
var displayarea = document.getElementById('area');
var displayradious = document.getElementById('radious');
function selectedType(gtype)
{
displaylength.innerHTML = '';
displayarea.innerHTML = '';
displayradious.innerHTML = '';
geometryType=gtype;
}
function activateDraw()
{
var wkt = new ol.format.WKT();
deactivateDraw();
map.addLayer(layers);
setCursor(cursorStyle);
draw= new ol.interaction.Draw({
source: layers.getSource(),
type: geometryType,
style: (feature) => {
return getStyle(feature);
}
});
draw.on('drawstart', (e) => {
layers.getSource().clear();
});
map.addInteraction(draw);
draw.on('drawend', (e) => {
let feature = e.feature;
let featureClone = feature.clone();
featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
modifiedWKT = wkt.writeFeature(featureClone);
let coords= feature.getGeometry().getCoordinates();
let firstcoords= feature.getGeometry().getFirstCoordinate();
let area=getLengthOrArea(feature);
//console.log(wkt);
alctivateLayer(modifiedWKT,area,firstcoords)
const feat = new ol.Feature({
geometry: e.target
}
);
map.removeInteraction(draw);
});
draw.setActive(true);
}
function alctivateLayer(wkt,area,firstcoords)
{
var layer = findlayeByName(map.getLayerGroup(), 'name','Village');
var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
const styles = layer.getSource().getParams().STYLES;
const url = layer.getSource().getFeatureInfoUrl(
firstcoords,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT' : 'application/json',
'FEATURE_COUNT': maxFeatures,
'STYLES': styles
}
);
if (url) {
$.get(url, function(response) {
var response = JSON.parse(response);
const a=response.features.map(x=>x.properties)[0];
let lat=latitude;
let lon=logitude;
let stateCode=a.ST_2011;
let districtCode=a.DT_2011;
let talukaCode=a.SDT_2011;
let villageCode=a.VIL_2011;
var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt};
var dataObjectString = JSON.stringify(data);
//var b=$.base64.encode("hello");
console.log(dataObjectString);
var enc = Base64.encode(dataObjectString);
window.open('monument?id='+enc,"_blank");
})
}
}
function deactivateDraw() {
setCursor('');
value = null;
try {
map.removeInteraction(draw);
layers.getSource().clear();
map.removeLayer(layers);
} catch (error) {}
}
function measure(m)
{
map=m
// Read user-defined parameters
units= map.getView().getProjection().getUnits();
layers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: (feature ) => {
return getStyle(feature);
}
});
activateDraw();
}
function getStyle(feature)
{
return [
new ol.style.Style({
fill: new ol.style.Fill({
color:fillColor
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: strokeColor,
width: 2,
lineDash: [5, 5]
}),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
text: getLengthOrArea(feature),
font: font,
fill: new ol.style.Fill({
color: textColor
}),
offsetX: 0,
offsetY: 0,
rotation: 0,
stroke: new ol.style.Stroke({
color: textOutlineColor,
width: 3
})
})
})
];
}
function setCursor(cursorType)
{
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getLengthOrArea(feature)
{
let value = '';
const geom= feature.getGeometry();
switch (geometryType)
{
case 'LineString':
try {
value = parseFloat(geom.getLength().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Polygon':
try {
value = parseFloat(geom.getArea().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
case 'Circle':
try {
value = parseFloat(geom.getRadius().toString())
.toFixed(precision)
.toString();
} catch (error) {}
break;
default:
break;
}
if (value !== '')
{
value = value;
displaylength.innerHTML = value + ' m';
displayarea.innerHTML = value + ' m &sup2;';
displayradious.innerHTML = value+ ' m';
}
return value;
}
A src/main/resources/static/customol/jsnew/googleapi/googlemaps copy.js
+38 −0
// function myMap() {
// var directionsDisplay = new google.maps.DirectionsRenderer();
// var map;
// var mapProp= {
// center:new google.maps.LatLng(23.232683,72.641768),
// zoom:4.5,
// };
// map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
// directionsDisplay.setMap(map);
// google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
// }
// function calcRoute()
// {
// var directionsService = new google.maps.DirectionsService();
// var directionsDisplay = new google.maps.DirectionsRenderer();
// var start = new google.maps.LatLng(23.1508, 72.3600);
// var end = new google.maps.LatLng(23.1642, 72.6549);
// var request = {
// origin: start,
// destination: end,
// travelMode: google.maps.TravelMode.DRIVING
// };
// directionsService.route(request, function(response, status) {
// if (status == google.maps.DirectionsStatus.OK) {
// directionsDisplay.setDirections(response);
// directionsDisplay.setMap(map);
// } else {
// alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
// }
// });
// }
A src/main/resources/static/customol/jsnew/googleapi/googlemaps.js
+43 −0
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 4.5 ,
center:new google.maps.LatLng(23.232683,72.641768),
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
}
function calcRoute() {
var start = new google.maps.LatLng(23.1508, 72.3600);
var end = new google.maps.LatLng(23.1642, 72.6549);
var bounds = new google.maps.LatLngBounds();
bounds.extend(start);
bounds.extend(end);
map.fitBounds(bounds);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
A src/main/resources/static/customol/jsnew/identify/identify.js
+261 −0
var map;
var maxFeatures =1;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><label for="visiblee'+i+j+'"> <input id="visiblee'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
// deactivateClick();
clickEvent = (evt) =>
{
var coordinate = evt.coordinate;
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
const styles = layer.getSource().getParams().STYLES;
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
FEATURE_COUNT: maxFeatures,
STYLES: styles
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Park Boundry')
{
content.innerHTML = '<p style="color:green;">Statename:<span style="color:black">' + a.st_name + '</span></p><p style="color:green;">District:<span style="color:black">' + a.dist_name + '</span></p><p style="color:green;">Taluka:<span style="color:black">' + a.sub_dist + '</span></p><p style="color:green;">Village:<span style="color:black">' + a.vname + '</span></p><p style="color:green;">Park Name:<span style="color:black">' + a.park_name + '</span></p><p style="color:green;">Park Type:<span style="color:black">' + a.park_type + '</span></p>';
}
overlay.setPosition(coordinate);
// overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
A src/main/resources/static/customol/jsnew/identify/identifyfortwo.js
+255 −0
var map;
var maxFeatures =10;
var cursorStyle = 'crosshair';
var placeholder = 'Select query layer';
var zoomOnRowClick = true;
var hlightFeatures = true;
var clickEvent;
var vectorLayer6= new ol.layer.Vector;
var features= new ol.Feature;
var hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var latitude;
var logitude;
var geojson=new ol.format.GeoJSON();
var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo;
function identify(maps)
{
map=maps;
var layer = findlayeByName(map.getLayerGroup(), 'name','Airport');
var Groupcountt=0;
map.getLayers().forEach(function (layerr, i) {
Groupcountt=i+1;
var groupnamee=layerr.get('name');
if(groupnamee=='Identify')
{
var groupcontentt='';
groupcontentt+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontentt +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" aria-expanded="true" href="#basemap-choicee'+i+'" aria-controls="collapseOne" class="collapsed">'+groupnamee+':<span id="'+'layerscountt'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choicee'+i+'" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionn" style=""><div class="card-body" id="'+'layerr'+i+'"></div> </div></div>';
$('#groupss').append($(groupcontentt));
bindInputs('#layerr' + i, layerr);
var subGroupcountt=0;
if (layerr instanceof ol.layer.Group) {
layerr.getLayers().forEach(function (sublayerr, j) {
subGroupcountt=j+1;
var basecontentt = '';
let layernamee=sublayerr.get('name');
basecontentt += '<div class="togglebutton" id="layerr'+i+j+'"><label for="visiblee'+i+j+'"> <input id="visiblee'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layernamee+'</label> </div>';
$('#layerr'+i).append($(basecontentt));
bindInputss('#layerr' + i + j, sublayerr);
});
$('#layerscountt'+i).append(subGroupcountt);
}
}
});
$('#groupscountt').append(Groupcountt);
}
function bindInputss(layerid, layer)
{
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
if(layer.getVisible()==true)
{
activateClick(layer);
}
else{
deactivateClick();
}
});
visibilityInput.prop('checked', layer.getVisible());
}
function findlayeByName(layer, key, value) {
if (layer.get(key) === value) {
return layer;
}
// Find recursively if it is a group
if (layer.getLayers) {
var layers = layer.getLayers().getArray(), len = layers.length, result;
for (var i = 0; i < len; i++) {
result = findlayeByName(layers[i], key, value);
if (result) {
return result;
}
}
}
return null;
}
function addHoverLayer()
{
if (placeholder) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(hoverLayer);
}
}
function activateClick(layer)
{
console.log(layer)
var layername=layer.get('name');
// hoverLayer.getSource().clear();
console.log(layername);
deactivateClick();
clickEvent = (evt) =>
{
let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
latitude= lonlat[0];
logitude=lonlat[1];
features = [];
filterdata=[];
if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile)
{
var url = layer.getSource().getFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
'EPSG:3857', {
'INFO_FORMAT' : 'application/json',
});
if (url)
{
$.get(url, function(response) {
response = JSON.parse(response);
{
{
const a=response.features.map(x=>x.properties)[0];
console.log(a);
if(layername=='Rail')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.bsid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='National Highway')
{
content.innerHTML = '<p style="color:green;">ID:<span style="color:black">' + a.objectid + '</span></p><p style="color:green;">Name:<span style="color:black">' + a.name + '</span></p>';
}
if(layername=='Park Boundry')
{
content.innerHTML = '<p style="color:green;">Statename:<span style="color:black">' + a.st_name + '</span></p><p style="color:green;">District:<span style="color:black">' + a.dist_name + '</span></p><p style="color:green;">Taluka:<span style="color:black">' + a.sub_dist + '</span></p><p style="color:green;">Village:<span style="color:black">' + a.vname + '</span></p><p style="color:green;">Park Name:<span style="color:black">' + a.park_name + '</span></p><p style="color:green;">Park Type:<span style="color:black">' + a.park_type + '</span></p>';
}
overlay.setPosition(evt.coordinate);
}
}
});
}
else{
alert("NOt Suported");
}
}
else
{
alert('Currently only WMS query is supported. Please select another layer!')
}
};
map.on('singleclick', clickEvent);
}
function setCursor(cursorType) {
if (map) {
const target = map.getTarget();
// jQuery hack to convert the mouse cursor to a crosshair
const jTarget = typeof target === 'string' ? $('#' + target) : $(target);
jTarget.css('cursor', cursorType);
}
}
function getFeatureInfoUrl( source,coordinate,resolution, srs)
{
const styles = source.getParams().hasOwnProperty('STYLES')
? source.getParams().STYLES
: '';
return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{
INFO_FORMAT: 'application/json',
// FEATURE_COUNT: maxFeatures,
// STYLES: styles
});
// return url;
}
A src/main/resources/static/customol/jsnew/layerswitcher/layerSwitcher old.js
+95 −0
function switchlayers(map)
{
const layerGroups = map.getLayers().getArray();
const groupCount=layerGroups.length
$('#groupscount').append(groupCount);
const groupcount=layerGroups.length;
for(var j=0;j<layerGroups.length;j++)
{
var groupname=layerGroups[j].get('name');
var groupcontent='';
groupcontent+='';
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+j+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+j+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choice'+j+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layers'+j+'"></div> <div id="'+'slider-range-min'+j+'" ></div></div></div>';
$('#groups').append($(groupcontent));
if(layerGroups[j].getVisible()==true)
{
let sublayers=new Array();
for(var i=0;i<layerGroups[j].getLayers().getArray().length;i++)
{
sublayers.push(layerGroups[j].getLayers().getArray()[i]);
}
getlayersfunction(sublayers,j);
sublayers=[];
}
}
function getlayersfunction(sublayers,ind)
{
$.each(sublayers, function(index)
{
var basecontent = '';
var layer = this.getProperties();
console.log(layer.name+"-"+layer.visible);
if(layer.visible==true) {
basecontent += '<div class="togglebutton"><label ><input id="check'+ind+'" type="checkbox" name="radio-basemap" checked=""><span class="toggle"></span>'+layer.name+'</label></div>';
}
else
{
basecontent += '<div class="togglebutton"><label ><input id="check'+ind+'" type="checkbox" name="radio-basemap" ><span class="toggle"></span>'+layer.name+'</label></div>';
}
$('#layers'+ind).append($(basecontent));
});
$('#layerscount'+ind).append(sublayers.length);
}
}
A src/main/resources/static/customol/jsnew/layerswitcher/layerSwitcher.js
+82 −0
function switchlayers(map)
{
var Groupcount=0;
bindallopacity();
map.getLayers().forEach(function (layer, i) {
Groupcount=i+1;
var groupname=layer.get('name');
if(groupname!=undefined && groupname!='Identify')
{
var groupcontent='';
groupcontent+='';
// <span class="togglebutton" id=layer'+i+'"><label for="visible'+i+'"><input id="visible'+i+'" class="visible" type="checkbox"/><span class="toggle"></span></label></span>
groupcontent +=' <div class="card-collapse" ><div class="card-header" role="tab" id="headingOne"><h5 class="mb-0"> <a data-toggle="collapse" href="#basemap-choice'+i+'" aria-controls="collapseOne" class="collapsed">'+groupname+':<span id="'+'layerscount'+i+'"></span><i class="material-icons">keyboard_arrow_down</i></a></h5></div><div id="basemap-choice'+i+'" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body" id="'+'layer'+i+'"></div> <div id="'+'slider-range-min'+i+'" ></div></div></div>';
$('#groups').append($(groupcontent));
bindInputs('#layer' + i, layer);
var subGroupcount=0;
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function (sublayer, j) {
subGroupcount=j+1;
var basecontent = '';
let layername=sublayer.get('name');
basecontent += '<div class="togglebutton" id="layer'+i+j+'"><label for="visible'+i+j+'"> <input id="visible'+i+j+'" type="checkbox" class="visible" /> <span class="toggle"></span>'+layername+'</label> <input id="opacity" class="opacity" type="range" min="0" max="1" step="0.01"/></div>';
$('#layer'+i).append($(basecontent));
bindInputs('#layer' + i + j, sublayer);
});
$('#layerscount'+i).append(subGroupcount);
}
}
});
$('#groupscount').append(Groupcount);
}
function bindallopacity()
{
$('#opacity').hide();
var allopacity=$('#allopacity');
allopacity.on('change', function () {
});
}
function bindInputs(layerid, layer) {
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function () {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
A src/main/resources/static/customol/jsnew/legend/legend.js
+58 −0
var map;
var legendImg;
var ImageArray=[];
function legend(m)
{
map=m;
// map.getLayers().forEach(function (grouplayers) {
// grouplayers.getLayers().forEach(function (layer) {
// if(layer.getVisible()==true)
// {
// console.log(layer);
// // const layername = layer.params["LAYERS"] ;
// // console.log(layername);
// }
// });
// });
// const grouplayers = map.getLayers().getArray();
// grouplayers.forEach((sublayers) => {
// // alert(sublayers.get('name'));
// sublayers.forEach((layer) => {
// if(layer.getVisible()==true)
// {
// alert(layer.get('name'));
// // const layername = layer.getSource().getParams().LAYERS ;
// // this.legendImg = gidcGisUrl + '?REQUEST=GetLegendGraphic&sld_version=1.0.0&layer=' + layername + '&format= image/png &legend_options=fontSize:13;fontName:san-sarif;bgColor:0xffffff;forceLabels:on'+'&WIDTH=12&HEIGHT=12&Scale=1';
// //this.ImageArray.push( this.legendImg);
// }
// });
// });
}
function updateLegend(layer) {
let layername=layer.getSource().getParams().LAYERS;
var graphicUrl = '?REQUEST=GetLegendGraphic&sld_version=1.0.0&layer=' + layername + '&format= image/png &legend_options=fontSize:13;fontName:san-sarif;bgColor:0xffffff;forceLabels:on'+'&WIDTH=12&HEIGHT=12&Scale=1';
var img = document.getElementById('legend');
img.src = graphicUrl;
};
A src/main/resources/static/customol/jsnew/main.js
+80 −0
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
window.onload=init;
function init()
{
let india=[ 81.191694, 23.8086 ];
let jalandhar=[75.57917,31.32556];
var map = new ol.Map({
overlays: [overlay],
target: 'target-maps',
view: new ol.View({
center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'),
zoom:4.0,
// zoom :9.5,
minZoom:4,
maxZoom: 17
}),
layers:[
CommonlayersGroup,indianMapLayersGroup,
IdentifyLayerGroup,geomLayerGroup
],
controls: ol.control.defaults({
zoom: false,
attribution: true,
rotate: false
}).extend([]),
// new ol.control.FullScreen()
});
legend(map);
geom(map);
//buffer(map);
controllers(map);
navigation(map);
switchlayers(map);
getMousePosition(map);
scaleline(map);
exportpdf(map);
identify(map);
//addGeom(map);
commonfunctions(map);
//swipe(map);
//geocoder(map);
}
A src/main/resources/static/customol/jsnew/navigation/navigation.js
+581 −0
var map
var GisUrl='https://gis.ncog.gov.in/GISWeb/wms';
var hoverLayer =ol.layer.Vector;
var geojson = new ol.format.GeoJSON;
var vectorSource;
var hoverStyle= [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 0, 0.5]
}),
stroke: new ol.style.Stroke({
color: [0,204,0,1],
width: 4
})
})
];
var statelist=[];
var districtlist=[];
var talukalist=[];
var villagelist=[];
var cql;
var Alllayers=[];
var Alllayersname= [];
var layersname="Village,Taluka,District,State";
var layer="VillageIndia,TalukaIndia,DistrictIndia,StateIndia";
function navigation(m)
{
map=m;
zoomOnRowClick = true;
highlightFeatures = true;
getstate();
addHoverLayer();
}
function addHoverLayer()
{
hoverLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
if (hoverStyle) {
hoverLayer.setStyle(hoverStyle);
}
if (highlightFeatures) {
map.addLayer(this.hoverLayer);
}
}
function getstate()
{
statelist=[];
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getState();
if(j)
{
var statename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].statecode+ '" >'
+ j[i].statename + '</option>';
statelist.push({"statecode":j[i].statecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#state").html(options);
}
$("#state").change(function(){
var selectedstatecode = $(this).children("option:selected").val();
var s=statelist.find(x=>x.statecode==selectedstatecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removestatelayer(selectedstatecode);
getDistricts(selectedstatecode);
var vectorSource = new ol.source.Vector({
url: 'https://gis.ncog.gov.in/GISWeb/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:StateIndia&PROPERTYNAME=geom,stcode11&CQL_FILTER=stcode11=%27'+selectedstatecode +'%27&maxFeatures=50&outputFormat=json',
format :new ol.format.GeoJSON()
});
var vectorLayer1 = new ol.layer.Vector({
source: vectorSource,
style: customStyleFunction,
});
map.addLayer(vectorLayer1);
})
}
function customStyleFunction()
{
return [new styles.Style({
stroke: new styles.Stroke({
color: '#00ff00',
width: 2
})
})];
}
function zoom(extent)
{
extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent), { duration: 200 };
}
function clearmap()
{
const layers = map.getLayers().getArray();
layers.forEach((layer) => {
if(layer.getVisible()==true)
{
layer.setVisible(false)
}
});
}
function removestatelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="STCODE11="+selectedcode;
}
else if (Alllayers[j]=="VillageIndia")
{
cql="ST_2011="+selectedcode;
}
else
{
cql="stcode11="+selectedcode;
}
if (Alllayers[j]=="VillageIndia")
{
new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS' : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
})
}
else if (Alllayers[j]=="TalukaIndia")
{
var new_lyr =
new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
// name : Alllayersname[j]
})
}
else
{
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url :GisUrl,
// crossOrigin: 'anonymous',
params : {
'LAYERS': Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
// name : Alllayersname[j]
})
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getDistricts(selectedstatecode)
{
if(selectedstatecode!=null)
{
districtlist=[];
talukalist=[];
villagelist=[];
var options="";
var j=getDistrict(selectedstatecode);
if(j)
{
var districtname="";
for ( var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].districtcode+ '" >'
+ j[i].districtname + '</option>';
districtlist.push({"districtcode":j[i].districtcode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
$("select#district").html(options);
}
$("#district").change(function(){
var selecteddistrictcode = $(this).children("option:selected").val();
var s=districtlist.find(x=>x.districtcode==selecteddistrictcode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removedistrictlayer(selecteddistrictcode)
getTaluka(selecteddistrictcode)
});
}
}
function removedistrictlayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="DTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="DT_2011='"+selectedcode+"'";
}
else
{
cql="dtcode11='"+selectedcode+"'";
}
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution :800,
});
}
else
{
// alert("else...."+Alllayers[j]);
// alert("cql...."+cql_dist);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 256,
});
}
// newlyr=new_lyr;
map.addLayer(new_lyr);
}
}
function getTaluka(selecteddistrictcode)
{
if(selecteddistrictcode!=null)
{
talukalist=[];
villagelist=[];
var options="";
var j=getTalukas(selecteddistrictcode)
if(j)
{
var talukaname="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].talukacode!=null)
{
options += '<option value="' + j[i].talukacode+ '" >'
+ j[i].talukaname + '</option>';
talukalist.push({"talukacode":j[i].talukacode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#taluka").html(options);
}
}
$("#taluka").change(function(){
var selectedtalukacode = $(this).children("option:selected").val();
getVillages(selectedtalukacode);
var s=talukalist.find(x=>x.talukacode==selectedtalukacode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removetalukalayer(selectedtalukacode);
})
}
function removetalukalayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if ( Alllayers[j]=="TalukaIndia")
{
cql="SDTCODE11='"+selectedcode+"'";
}
else if (Alllayers[j]=="VillageIndia")
{
cql="SDT_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 856,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
//maxResolution : 1024,//1024,
});
}
map.addLayer(new_lyr);
}
}
function getVillages(selectedtalukacode)
{
var options="";
var j=getVillage(selectedtalukacode)
if(j)
{
var villagename="";
// options=' <option disabled selected>State</option>';
for ( var i = 0; i < j.length; i++) {
if(j[i].villagecode!=null)
{
options += '<option value="' + j[i].villagecode+ '" >'
+ j[i].villagename + '</option>';
villagelist.push({"villagecode":j[i].villagecode,"minx":j[i].minx,"miny":j[i].miny,"maxx":j[i].maxx,"maxy":j[i].maxy});
}
}
$("select#village").html(options);
}
}
$("#village").change(function(){
var selectedvillagecode = $(this).children("option:selected").val();
var s=villagelist.find(x=>x.villagecode==selectedvillagecode);
var extent=[s.minx,s.miny,s.maxx,s.maxy];
zoom(extent);
removevillagelayer(selectedvillagecode);
})
function removevillagelayer(selectedcode)
{
clearmap();
Alllayersname=layersname.split(',');
Alllayers=layer.split(',');
for (var j=0;j<Alllayers.length;j++)
{
if (Alllayers[j]=="VillageIndia")
{
cql="VIL_2011='"+selectedcode+"'";
}
/* else
{
cql="dtcode11='"+dist+"'";
}*/
// alert("district...."+Alllayers[j])
if (Alllayers[j]=="VillageIndia")
{
// alert("if...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 256,
});
}
else if (Alllayers[j]=="TalukaIndia")
{
// alert("else ifff...."+Alllayers[j]);
var new_lyr = new ol.layer.Tile({
source : new ol.source.TileWMS({
url : GisUrl,
params : {
layers : Alllayers[j],
CQL_FILTER :cql,
version : '1.1.1',
transparent : 'true'
}
}),
maxResolution : 800,//1024,
});
}
map.addLayer(new_lyr);
}
}
A src/main/resources/static/customol/jsnew/services/services.js
+137 −0
var apiurl="https://api3.ncog.gov.in/BaseRest/";
function getState()
{
var data=null;
$.ajax({
url:apiurl+"getstate",
method:"POST",
dtaType:"json",
async: false,
data:{},
success:function(j)
{
data=j;
},
error:function (error)
{
alert(error);
}
});
return data;
}
function getDistrict(id)
{
//var code={};
// code.statecode=id;
// var codobject=JSON.stringify(code);
var data=null;
$.ajax({
url:apiurl+"getdistrict/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getTalukas(id)
{
// var code={};
/// code.districtcode=id;
// var codobject=JSON.stringify(code);
var options="";
var data=null;
$.ajax({
url:apiurl+"gettaluka/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getVillage(id)
{
// var code={};
// code.talukacode=id;
// var codobject=JSON.stringify(code);
var options="";
var data=null;
$.ajax({
url:apiurl+"getvillage/"+id,
method:"POST",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
function getBuffer(lat,lon,range)
{
var data=null;
$.ajax({
url:"/buffer/"+lat+"/"+lon+"/"+range,
method:"GET",
async: false,
contentType:"application/json;charset=utf-8",
// data:codobject,
success:function(j)
{
data=j;
},
error:function(error)
{
alert(error);
}
});
return data;
}
A src/main/resources/static/customol/jsnew/swipe/swipe.js
+44 −0
var map;
function swipe(m)
{
map=m;
var aerial = findlayeByName(map.getLayerGroup(), 'name','Aerial');
console.log(aerial.get('name'));
startswipe(aerial)
}
function startswipe(aerial)
{
var swipe = document.getElementById('swipe');
aerial.on('prerender', function (event) {
var ctx = event.context;
var mapSize = map.getSize();
var width = mapSize[0] * (swipe.value / 100);
var tl = getRenderPixel(event, [width, 0]);
var tr = getRenderPixel(event, [mapSize[0], 0]);
var bl = getRenderPixel(event, [width, mapSize[1]]);
var br = getRenderPixel(event, mapSize);
ctx.save();
ctx.beginPath();
ctx.moveTo(tl[0], tl[1]);
ctx.lineTo(bl[0], bl[1]);
ctx.lineTo(br[0], br[1]);
ctx.lineTo(tr[0], tr[1]);
ctx.closePath();
ctx.clip();
});
aerial.on('postrender', function (event) {
var ctx = event.context;
ctx.restore();
});
swipe.addEventListener(
'input',
function () {
map.render();
},
false
);
}
M src/main/webapp/views/attributenew.jsp
+66 −46
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:32 GMT -->
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:32 GMT -->
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/bisag_logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/bisag_logo.png">
<title>SDIS</title>
<title>SDIS</title>
<!-- Bootstrap Core CSS -->
<!-- Bootstrap Core CSS -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- chartist CSS -->
<!-- chartist CSS -->
<link href="assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
<link href="assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
<link href="assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
<link href="assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
<link href="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
<link href="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
<!-- morris CSS -->
<!-- morris CSS -->
<link href="assets/plugins/morrisjs/morris.css" rel="stylesheet">
<link href="assets/plugins/morrisjs/morris.css" rel="stylesheet">
<!-- Vector CSS -->
<!-- Vector CSS -->
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet" />
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet" />
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- You can change the theme colors from here -->
<!-- You can change the theme colors from here -->
<link href="assets/css/colors/blue.css" id="theme" rel="stylesheet">
<link href="assets/css/colors/blue.css" id="theme" rel="stylesheet">
<link href="ol/ol.css" rel="stylesheet">
<link href="ol/ol.css" rel="stylesheet">
<link href="customol/css/customOlStyle.css" rel="stylesheet" />
<link href="customol/css/customOlStyle.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<![endif]-->
</head>
</head>
<body class="fix-header fix-sidebar card-no-border">
<body class="fix-header fix-sidebar card-no-border">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="preloader">
<div class="preloader">
<svg class="circular" viewBox="25 25 50 50">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div id="main-wrapper">
<div id="main-wrapper">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<header class="topbar" style="background: #1976d2;">
<header class="topbar" style="background: #1976d2;">
<nav class="navbar top-navbar navbar-expand-md navbar-light">
<nav class="navbar top-navbar navbar-expand-md navbar-light">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Logo -->
<!-- Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="navbar-header">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<a class="navbar-brand" href="index.html">
<!-- Logo icon --><b>
<!-- Logo icon --><b>
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!-- Dark Logo icon -->
<!-- Dark Logo icon -->
<!-- <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> -->
<!-- <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> -->
<!-- Light Logo icon -->
<!-- Light Logo icon -->
<!-- <img src="assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> -->
<!-- <img src="assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> -->
</b>
</b>
<!--End Logo icon -->
<!--End Logo icon -->
<!-- Logo text --><span>
<!-- Logo text --><span>
<!-- dark Logo text -->
<!-- dark Logo text -->
<img src="assets/images/bisag_logo.png" alt="homepage" class="dark-logo" style="height: 48px;" />
<img src="assets/images/bisag_logo.png" alt="homepage" class="dark-logo" style="height: 48px;" />
<!-- Light Logo text -->
<!-- Light Logo text -->
<img src="assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
<img src="assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Logo -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="navbar-collapse">
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto mt-md-0">
<ul class="navbar-nav mr-auto mt-md-0">
<!-- This is -->
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Comment -->
<!-- Comment -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-message"></i>
<a class="nav-link dropdown-toggle text-muted text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-message"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
</a>
<div class="dropdown-menu mailbox animated slideInUp">
<div class="dropdown-menu mailbox animated slideInUp">
<ul>
<ul>
<li>
<li>
<div class="drop-title">Notifications</div>
<div class="drop-title">Notifications</div>
</li>
</li>
<li>
<li>
<div class="message-center">
<div class="message-center">
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
<div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
<h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
<div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
<h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
<div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
<h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
<div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</a>
</div>
</div>
</li>
</li>
<li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</li>
</ul>
</ul>
</div>
</div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Comment -->
<!-- End Comment -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
</a>
<div class="dropdown-menu mailbox animated slideInUp" aria-labelledby="2">
<div class="dropdown-menu mailbox animated slideInUp" aria-labelledby="2">
<ul>
<ul>
<li>
<li>
<div class="drop-title">You have 4 new messages</div>
<div class="drop-title">You have 4 new messages</div>
</li>
</li>
<li>
<li>
<div class="message-center">
<div class="message-center">
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
<h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
<h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
</a>
</a>
<!-- Message -->
<!-- Message -->
<a href="#">
<a href="#">
<div class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
<div class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
<div class="mail-contnet">
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</a>
</div>
</div>
</li>
</li>
<li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</li>
</ul>
</ul>
</div>
</div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Messages -->
<!-- End Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-view-grid"></i></a>
<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-view-grid"></i></a>
<div class="dropdown-menu animated slideInUp">
<div class="dropdown-menu animated slideInUp">
<ul class="mega-dropdown-menu row">
<ul class="mega-dropdown-menu row">
<li class="col-lg-3 col-xlg-2 m-b-30">
<li class="col-lg-3 col-xlg-2 m-b-30">
<h4 class="m-b-20">CAROUSEL</h4>
<h4 class="m-b-20">CAROUSEL</h4>
<!-- CAROUSEL -->
<!-- CAROUSEL -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="carousel-item active">
<div class="container"> <img class="d-block img-fluid" src="assets/images/big/img1.jpg" alt="First slide"></div>
<div class="container"> <img class="d-block img-fluid" src="assets/images/big/img1.jpg" alt="First slide"></div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img2.jpg" alt="Second slide"></div>
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img2.jpg" alt="Second slide"></div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img3.jpg" alt="Third slide"></div>
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img3.jpg" alt="Third slide"></div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
<!-- End CAROUSEL -->
<!-- End CAROUSEL -->
</li>
</li>
<li class="col-lg-3 m-b-30">
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">ACCORDION</h4>
<h4 class="m-b-20">ACCORDION</h4>
<!-- Accordian -->
<!-- Accordian -->
<div id="accordion" class="nav-accordion" role="tablist" aria-multiselectable="true">
<div id="accordion" class="nav-accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
Collapsible Group Item #1
</a>
</a>
</h5> </div>
</h5> </div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high. </div>
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high. </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
Collapsible Group Item #2
</a>
</a>
</h5> </div>
</h5> </div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
Collapsible Group Item #3
</a>
</a>
</h5> </div>
</h5> </div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</li>
<li class="col-lg-3 m-b-30">
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">CONTACT US</h4>
<h4 class="m-b-20">CONTACT US</h4>
<!-- Contact -->
<!-- Contact -->
<form>
<form>
<div class="form-group">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputname1" placeholder="Enter Name"> </div>
<input type="text" class="form-control" id="exampleInputname1" placeholder="Enter Name"> </div>
<div class="form-group">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email"> </div>
<input type="email" class="form-control" placeholder="Enter email"> </div>
<div class="form-group">
<div class="form-group">
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea>
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea>
</div>
</div>
<button type="submit" class="btn btn-info">Submit</button>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</form>
</li>
</li>
<li class="col-lg-3 col-xlg-4 m-b-30">
<li class="col-lg-3 col-xlg-4 m-b-30">
<h4 class="m-b-20">List style</h4>
<h4 class="m-b-20">List style</h4>
<!-- List style -->
<!-- List style -->
<ul class="list-style-none">
<ul class="list-style-none">
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> You can give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> You can give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Forth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Forth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another fifth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another fifth link</a></li>
</ul>
</ul>
</li>
</li>
</ul>
</ul>
</div>
</div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Messages -->
<!-- End Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</ul>
</ul>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- User profile and search -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Search -->
<!-- Search -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item hidden-sm-down search-box"> <a class="nav-link hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-search"></i></a>
<li class="nav-item hidden-sm-down search-box"> <a class="nav-link hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-search"></i></a>
<form class="app-search">
<form class="app-search">
<input type="text" class="form-control" placeholder="Search & enter"> <a class="srh-btn"><i class="ti-close"></i></a> </form>
<input type="text" class="form-control" placeholder="Search & enter"> <a class="srh-btn"><i class="ti-close"></i></a> </form>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Language -->
<!-- Language -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-us"></i></a>
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-us"></i></a>
<div class="dropdown-menu dropdown-menu-right scale-up"> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-in"></i> India</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-fr"></i> French</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-cn"></i> China</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-de"></i> Dutch</a> </div>
<div class="dropdown-menu dropdown-menu-right scale-up"> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-in"></i> India</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-fr"></i> French</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-cn"></i> China</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-de"></i> Dutch</a> </div>
</li>
</li>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Profile -->
<!-- Profile -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-power-off"></i> </a>
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-power-off"></i> </a>
<div class="dropdown-menu dropdown-menu-right scale-up">
<div class="dropdown-menu dropdown-menu-right scale-up">
<ul class="dropdown-user">
<ul class="dropdown-user">
<li><a href="/logout"><i class="fa fa-power-off"></i> Logout</a></li>
<li><a href="/logout"><i class="fa fa-power-off"></i> Logout</a></li>
</ul>
</ul>
</div>
</div>
</li>
</li>
</ul>
</ul>
</div>
</div>
</nav>
</nav>
</header>
</header>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="page-wrapper">
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="row page-titles">
<div class="row page-titles">
<button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
<button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<div class="container-fluid">
<div class="container-fluid">
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<div class="row">
<div class="row">
<div class="col-lg-4 col-xlg-3">
<div class="col-lg-4 col-xlg-3">
<div class="card">
<div class="card">
<div class="card-body bg-inverse" style="background: url(../assets/images/background/user-info.jpg) / cover;">
<div class="card-body bg-inverse" style="background: url(../assets/images/background/user-info.jpg) / cover;">
<h3 class="text-white card-title">Filter</h3>
<h3 class="text-white card-title">Filter</h3>
</div>
</div>
<div class="card-body">
<div class="card-body">
<div class="message-box contact-box">
<div class="message-box contact-box">
<div class="message-widget contact-widget">
<div class="message-widget contact-widget">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home5" role="tab" aria-controls="home5" aria-expanded="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Attribute</span></a> </li>
<li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home5" role="tab" aria-controls="home5" aria-expanded="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Attribute</span></a> </li>
<li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Spatial</span></a></li>
<li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Spatial</span></a></li>
</ul>
</ul>
<div class="tab-content tabcontent-border p-20" id="myTabContent">
<div class="tab-content tabcontent-border p-20" id="myTabContent">
<div role="tabpanel" class="tab-pane fade show active" id="home5" aria-labelledby="home-tab">
<div role="tabpanel" class="tab-pane fade show active" id="home5" aria-labelledby="home-tab">
<form id ="filterform" >
<form id ="filterform" >
<input name="localIdFrom" style="border:2px solid black" id="localIdFrom" type="hidden" placeholder="From" >
<input name="localIdFrom" style="border:2px solid black" id="localIdFrom" type="hidden" placeholder="From" >
<input style =" width:120px;" id="localIdTo" name="localIdTo" type="hidden" placeholder="To" >
<input style =" width:120px;" id="localIdTo" name="localIdTo" type="hidden" placeholder="To" >
Satellite
Satellite
<select name="satelite" id="satelite" class="form-control" >
<select name="satelite" id="satelite" class="form-control" >
<option selected disabled>Choose one</option>
<option selected disabled>Choose one</option>
<option value="CARTOSAT-1">CARTOSAT-1</option>
<option value="CARTOSAT-1">CARTOSAT-1</option>
<option value="CARTOSAT-2">CARTOSAT-2</option>
<option value="CARTOSAT-2">CARTOSAT-2</option>
<option value="CARTOSAT-2D">CARTOSAT-2D</option>
<option value="CARTOSAT-2D">CARTOSAT-2D</option>
<option value="CARTOSAT-2E">CARTOSAT-2E</option>
<option value="CARTOSAT-2E">CARTOSAT-2E</option>
<option value="IKONOS">IKONOS</option>
<option value="IKONOS">IKONOS</option>
<option value="IRS-1A">IRS-1A</option>
<option value="IRS-1A">IRS-1A</option>
<option value="IRS-1B">IRS-1B</option>
<option value="IRS-1B">IRS-1B</option>
<option value="IRS-1C">IRS-1C</option>
<option value="IRS-1C">IRS-1C</option>
<option value="IRS-1D">IRS-1D</option>
<option value="IRS-1D">IRS-1D</option>
<option value="IRS-P3">IRS-P3</option>
<option value="IRS-P3">IRS-P3</option>
<option value="IRS-P4">IRS-P4</option>
<option value="IRS-P4">IRS-P4</option>
<option value="IRS-P6">IRS-P6</option>
<option value="IRS-P6">IRS-P6</option>
<option value="IRS-R2">IRS-R2</option>
<option value="IRS-R2">IRS-R2</option>
<option value="IRS-R2A">IRS-R2A</option>
<option value="IRS-R2A">IRS-R2A</option>
<option value="OCEANSAT-2">OCEANSAT-2</option>
<option value="OCEANSAT-2">OCEANSAT-2</option>
<option value="RISAT-1">RISAT-1</option>
<option value="RISAT-1">RISAT-1</option>
</select>
</select>
<br><br>
<br><br>
Sensor
Sensor
<select name="sensors" id="sensors" class="form-control">
<select name="sensors" id="sensors" class="form-control">
<optgroup >
<optgroup >
<option selected disabled>Choose one</option>
<option selected disabled>Choose one</option>
<option value="AW">AW</option>
<option value="AW">AW</option>
<option value="L1">L1</option>
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L4">L4</option>
<option value="MX">MX</option>
<option value="MX">MX</option>
<option value="OCM">OCM</option>
<option value="OCM">OCM</option>
<option value="PAN">PAN</option>
<option value="PAN">PAN</option>
<option value="PAN/MSI">PAN/MSI</option>
<option value="PAN/MSI">PAN/MSI</option>
<option value="SAR">SAR</option>
<option value="SAR">SAR</option>
<option value="WIF">WIF</option>
<option value="WIF">WIF</option>
</optgroup>
</optgroup>
</select>
</select>
<br><br>
<br><br>
Date :
Date :
<br>
<br>
From
From
<input name="dateOfPassFrom" style =" width:120px;" class="form-control" placeholder="From" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassFrom" value="2020-12-01" >
<input name="dateOfPassFrom" style =" width:120px;" class="form-control" placeholder="From" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassFrom" value="2020-12-01" >
To
To
<input name="dateOfPassTo" style =" width:120px;" class="form-control" placeholder="To" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassTo" value="2020-12-31" >
<input name="dateOfPassTo" style =" width:120px;" class="form-control" placeholder="To" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassTo" value="2020-12-31" >
<br><br>
<br><br>
Path
Path
<input name="pathFrom" class="form-control" style =" width:120px;margin-left:10px" id="pathFrom" type="number" placeholder="From">
<input name="pathFrom" class="form-control" style =" width:120px;margin-left:10px" id="pathFrom" type="number" placeholder="From">
<span>-</span>
<span>-</span>
<input name="pathTo" class="form-control" style =" width:120px;" id="pathTo" type="number" placeholder="To">
<input name="pathTo" class="form-control" style =" width:120px;" id="pathTo" type="number" placeholder="To">
<br><br>
<br><br>
Row
Row
<input name="rowFrom" class="form-control" id="rowFrom" type="number" placeholder="From">
<input name="rowFrom" class="form-control" id="rowFrom" type="number" placeholder="From">
<input name="rowTo" class="form-control" style ="" id="rowTo" type="number" placeholder="To">
<input name="rowTo" class="form-control" style ="" id="rowTo" type="number" placeholder="To">
<br><br>
<br><br>
<div class="modal-footer">
<div class="modal-footer">
<button id="filter" value="val_1" name="but1" class="btn btn-rounded btn-outline-info">Filter</button>
<button id="filter" value="val_1" name="but1" class="btn btn-rounded btn-outline-info">Filter</button>
<!-- <input value="Submit" type="submit" onclick="filterData()"> -->
<!-- <input value="Submit" type="submit" onclick="filterData()"> -->
<button id="reset" name="reset" onclick="resetForm()" class="btn btn-rounded btn-outline-info">Reset</button>
<button id="reset" name="reset" onclick="resetForm()" class="btn btn-rounded btn-outline-info">Reset</button>
</div>
</div>
</form>
</form>
</div>
</div>
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab">
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab">
<form id ="filterform1">
<form id ="filterform1">
<div >
<div >
<h5 >Select Special Type</h5>
<h5 >Select Special Type</h5>
<select name="selectnone" class="form-control" id="selectnone" onchange="changeFunc();">
<select name="selectnone" class="form-control" id="selectnone" onchange="changeFunc();">
<option value="selectnone">Select None</option>
<option value="selectnone">Select None</option>
<option value="city">City</option>
<option value="city">City</option>
<option value="point">Point</option>
<option value="point">Point</option>
<option value="administrator">Administrator Boundaries</option>
<option value="administrator">Administrator Boundaries</option>
<option value="rectangular">Rectangular Extent</option>
<option value="rectangular">Rectangular Extent</option>
</select>
</select>
</div>
</div>
<br><input style ="display:none;" id="cityname" class="form-control" type="text" name="gid" placeholder="city name" >
<br><input style ="display:none;" id="cityname" class="form-control" type="text" name="gid" placeholder="city name" >
<div id="search-result"></div>
<div id="search-result"></div>
<div class="clear"></div>
<div class="clear"></div>
<div class="modal-footer">
<div class="modal-footer">
<button id="cityfilter" type="button" class="btn btn-rounded btn-outline-info" onclick="onclicktaluka()">Filter</button>
<button id="cityfilter" type="button" class="btn btn-rounded btn-outline-info" onclick="onclicktaluka()">Filter</button>
<button id="reset2" name="reset2" onclick="resetForm1()" class="btn btn-rounded btn-outline-info">Reset</button>
<button id="reset2" name="reset2" onclick="resetForm1()" class="btn btn-rounded btn-outline-info">Reset</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-xlg-9">
<div class="col-lg-8 col-xlg-9">
<div class="card">
<div class="card">
<!-- <div class="card-body"> -->
<!-- <div class="card-body"> -->
<div id="target-map" style="width:100%!important; height:680px;"></div>
<div id="target-map" style="width:100%!important; height:680px;"></div>
<div id="latlon" class="latlon"></div>
<div id="latlon" class="latlon"></div>
<div id="scale" class="scale-line"></div>
<div id="scale" class="scale-line"></div>
<div id="location"
<div id="location"
style="width: 24px; height: 24px; font-size: 24px;">
style="width: 24px; height: 24px; font-size: 24px;">
<div id="popup" class="ol-popup">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
<div id="popup-content"></div>
</div>
</div>
</div>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<!-- Row -->
<div class="row">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="card">
<div class="card">
<div class="card-body">
<div class="card-body">
<div class="table-responsive">
<div class="table-responsive">
<table id="getASIReportList" class="table color-table " style="height: 335px;"></table >
<table id="getASIReportList" class="table color-table " style="height: 335px;"></table >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<!-- Row -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<!-- .right-sidebar -->
<div class="right-sidebar">
<div class="right-sidebar" >
<div class="slimscrollright">
<div class="slimscrollright">
<div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="r-panel-body">
<div class="r-panel-body">
<ul id="themecolors" class="m-t-20">
<li><b>With Light sidebar</b></li>
<li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
<div class="vtabs ">
<li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
<ul class="nav nav-tabs tabs-vertical" role="tablist" style="width: 50px;">
<li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home9" role="tab"><span><i class="ti-layers-alt"></i></span></a> </li>
<li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile9" role="tab"><span><i class="ti-location-arrow"></i></span></a> </li>
<li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages9" role="tab"><span><i class="ti-location-pin"></i></span></a> </li>
<li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
</ul>
<li class="d-block m-t-30"><b>With Dark sidebar</b></li>
<!-- Tab panes -->
<li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
<div class="tab-content">
<li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
<div class="tab-pane active" id="home9" role="tabpanel">
<li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
<div class="ribbon-wrapper card" style="width:280px;">
<li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Layers</h3>
<li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
<div id="groups"></div>
<li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
</ul>
</div>
<ul class="m-t-20 chatonline">
</div>
<li><b>Chat option</b></li>
<div class="tab-pane " id="profile9" role="tabpanel">
<li>
<div class="ribbon-wrapper card" style="width:280px;">
<a href="javascript:void(0)"><img src="assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Navigation</h3>
</li>
<div class="col-lg-12 col-md-6 col-sm-3">
<li>
<select id="state" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
<a href="javascript:void(0)"><img src="assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
<!-- <option disabled selected>State</option> -->
</li>
<li>
</select>
<a href="javascript:void(0)"><img src="assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
</div>
</li>
<div class="col-lg-12 col-md-6 col-sm-3">
<li>
<select id="district" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
<a href="javascript:void(0)"><img src="assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
</li>
<li>
</select>
<a href="javascript:void(0)"><img src="assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
</div>
</li>
<li>
<div class="col-lg-12 col-md-6 col-sm-3">
<a href="javascript:void(0)"><img src="assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
<select id="taluka" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
</select>
</li>
</div>
<li>
<div class="col-lg-12 col-md-6 col-sm-3">
<a href="javascript:void(0)"><img src="assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
<select id="village" class="form-control" data-style="btn btn-primary btn-round" title="Single Select">
</li>
</ul>
</select>
</div>
</div>
</div>
<div class="tab-pane " id="messages9" role="tabpanel">
<div class="ribbon-wrapper card" style="width:280px;">
<h3 class="ribbon ribbon-bookmark ribbon-info" style=" width: 240px;top:0px;">Identify</h3>
<div id="groupss">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- footer -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<footer class="footer">
<footer class="footer">
© 2021 Developed by BISAG-N
© 2021 Developed by BISAG-N
</footer>
</footer>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End footer -->
<!-- End footer -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- All Jquery -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<!-- Bootstrap tether Core JavaScript -->
<script src="assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<!-- slimscrollbar scrollbar JavaScript -->
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<!--Wave Effects -->
<!--Wave Effects -->
<script src="assets/js/waves.js"></script>
<script src="assets/js/waves.js"></script>
<!--Menu sidebar -->
<!--Menu sidebar -->
<script src="assets/js/sidebarmenu.js"></script>
<script src="assets/js/sidebarmenu.js"></script>
<!--stickey kit -->
<!--stickey kit -->
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<!--stickey kit -->
<!--stickey kit -->
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<!--Custom JavaScript -->
<!--Custom JavaScript -->
<script src="assets/js/custom.min.js"></script>
<script src="assets/js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- chartist chart -->
<!-- chartist chart -->
<script src="assets/plugins/chartist-js/dist/chartist.min.js"></script>
<script src="assets/plugins/chartist-js/dist/chartist.min.js"></script>
<script src="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"></script>
<script src="assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js"></script>
<!--morris JavaScript -->
<!--morris JavaScript -->
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script src="assets/plugins/morrisjs/morris.min.js"></script>
<script src="assets/plugins/morrisjs/morris.min.js"></script>
<!-- Vector map JavaScript -->
<!-- Vector map JavaScript -->
<script src="assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script src="assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script src="assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="assets/js/dashboard2.js"></script>
<script src="assets/js/dashboard2.js"></script>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<script src="assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
<script src="assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
<script src="ol/ol.js"></script>
<script src="ol/ol.js"></script>
<script src="customol/js/clear.js"></script>
<script src="customol/js/clear.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/exportpdf.js"></script>
<script src="customol/js/exportpdf.js"></script>
<script src="customol/js/measure.js"></script>
<script src="customol/js/measure.js"></script>
<script src="customol/js/controllers.js"></script>
<script src="customol/js/controllers.js"></script>
<script src="customol/js/navigation.js"></script>
<script src="customol/js/navigation.js"></script>
<script src="customol/js/scaleline.js"></script>
<script src="customol/js/scaleline.js"></script>
<script src="customol/js/mouse-position.js"></script>
<script src="customol/js/mouse-position.js"></script>
<script src="customol/js/layerSwitcher.js"></script>
<script src="customol/js/layerSwitcher.js"></script>
<script src="customol/js/findbylocation.js"></script>
<!-- <script src="customol/js/findbylocation.js"></script> -->
<script src="customol/js/LayersGroup/indianmapLayersGroup.js"></script>
<script src="customol/js/LayersGroup/indianmapLayersGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/transportGroup.js"></script>
<script src="customol/js/LayersGroup/transportGroup.js"></script>
<script src="customol/js/LayersGroup/IdentifyLayerGroup.js"></script>
<script src="customol/js/LayersGroup/IdentifyLayerGroup.js"></script>
<script src="customol/js/addGeom.js"></script>
<script src="customol/js/addGeom.js"></script>
<script src="customol/js/main.js"></script>
<script src="customol/js/main.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/Base64.js"></script>
<script src="customol/js/Base64.js"></script>
<script src="customol/js/geomForm.js"></script>
<script src="customol/js/geomForm.js"></script>
<script src="mis/js/services/misservices.js"></script>
<script src="mis/js/services/misservices.js"></script>
<script src="mis/js/customscripts/search.js"></script>
<script src="mis/js/customscripts/search.js"></script>
<script src=https://code.jquery.com/jquery-3.5.1.js></script>
<!-- <script src=https://code.jquery.com/jquery-3.5.1.js></script> -->
<script src=https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js></script>
<script src=https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js></script>
<script src="mis/js/customscripts/tables.js"></script>
<script src="mis/js/customscripts/tables.js"></script>
<script src="mis/js/customscripts/filter.js"></script>
<script src="mis/js/customscripts/filter.js"></script>
</body>
</body>
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:40 GMT -->
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:40 GMT -->
</html>
</html>
A src/main/webapp/views/map.jsp
+722 −0
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:11:28 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png">
<title>Admin Press Admin Template - The Ultimate Bootstrap 4 Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- morris CSS -->
<link href="assets/plugins/morrisjs/morris.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="assets/css/colors/blue.css" id="theme" rel="stylesheet">
<link href="ol/ol.css" rel="stylesheet">
<link href="customol/css/customOlStyle.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="fix-header fix-sidebar card-no-border">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar" style="background: #1976d2;">
<nav class="navbar top-navbar navbar-expand-md navbar-light">
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<!-- Logo icon --><b>
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!-- Dark Logo icon -->
<!-- <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> -->
<!-- Light Logo icon -->
<!-- <img src="assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> -->
</b>
<!--End Logo icon -->
<!-- Logo text --><span>
<!-- dark Logo text -->
<img src="assets/images/bisag_logo.png" alt="homepage" class="dark-logo" style="height: 48px;" />
<!-- Light Logo text -->
<img src="assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto mt-md-0">
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- Comment -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-message"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
<div class="dropdown-menu mailbox animated slideInUp">
<ul>
<li>
<div class="drop-title">Notifications</div>
</li>
<li>
<div class="message-center">
<!-- Message -->
<a href="#">
<div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
<div class="mail-contnet">
<h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
<div class="mail-contnet">
<h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
<div class="mail-contnet">
<h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</div>
</li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Comment -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
<div class="dropdown-menu mailbox animated slideInUp" aria-labelledby="2">
<ul>
<li>
<div class="drop-title">You have 4 new messages</div>
</li>
<li>
<div class="message-center">
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
<div class="mail-contnet">
<h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
<div class="mail-contnet">
<h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</div>
</li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- ============================================================== -->
<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-view-grid"></i></a>
<div class="dropdown-menu animated slideInUp">
<ul class="mega-dropdown-menu row">
<li class="col-lg-3 col-xlg-2 m-b-30">
<h4 class="m-b-20">CAROUSEL</h4>
<!-- CAROUSEL -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container"> <img class="d-block img-fluid" src="assets/images/big/img1.jpg" alt="First slide"></div>
</div>
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img2.jpg" alt="Second slide"></div>
</div>
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="assets/images/big/img3.jpg" alt="Third slide"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
<!-- End CAROUSEL -->
</li>
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">ACCORDION</h4>
<!-- Accordian -->
<div id="accordion" class="nav-accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5> </div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high. </div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5> </div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5> </div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</li>
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">CONTACT US</h4>
<!-- Contact -->
<form>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputname1" placeholder="Enter Name"> </div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email"> </div>
<div class="form-group">
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</li>
<li class="col-lg-3 col-xlg-4 m-b-30">
<h4 class="m-b-20">List style</h4>
<!-- List style -->
<ul class="list-style-none">
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> You can give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Forth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another fifth link</a></li>
</ul>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Messages -->
<!-- ============================================================== -->
</ul>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item hidden-sm-down search-box"> <a class="nav-link hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-search"></i></a>
<form class="app-search">
<input type="text" class="form-control" placeholder="Search & enter"> <a class="srh-btn"><i class="ti-close"></i></a> </form>
</li>
<!-- ============================================================== -->
<!-- Language -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-us"></i></a>
<div class="dropdown-menu dropdown-menu-right scale-up"> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-in"></i> India</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-fr"></i> French</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-cn"></i> China</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-de"></i> Dutch</a> </div>
</li>
<!-- ============================================================== -->
<!-- Profile -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-power-off"></i> </a>
<div class="dropdown-menu dropdown-menu-right scale-up">
<ul class="dropdown-user">
<li><a href="/logout"><i class="fa fa-power-off"></i> Logout</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- End User profile text-->
<!-- Sidebar navigation-->
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
<div class="col-md-5 align-self-center">
<h3 class="text-themecolor">Dashboard</h3>
</div>
<div class="col-md-7 align-self-center">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
<div>
<button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<!-- Row -->
<div class="row">
<div class="col-lg-4 col-xlg-3">
<div class="card">
<div class="card-body bg-inverse" style="background: url(../assets/images/background/user-info.jpg) / cover;">
<h3 class="text-white card-title">Filter</h3>
</div>
<div class="card-body">
<div class="message-box contact-box">
<div class="message-widget contact-widget">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home5" role="tab" aria-controls="home5" aria-expanded="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Attribute</span></a> </li>
<li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Spatial</span></a></li>
</ul>
<div class="tab-content tabcontent-border p-20" id="myTabContent">
<div role="tabpanel" class="tab-pane fade show active" id="home5" aria-labelledby="home-tab">
<form id ="filterform" >
<input name="localIdFrom" style="border:2px solid black" id="localIdFrom" type="hidden" placeholder="From" >
<input style =" width:120px;" id="localIdTo" name="localIdTo" type="hidden" placeholder="To" >
Satellite
<select name="satelite" id="satelite" class="form-control" >
<option selected disabled>Choose one</option>
<option value="CARTOSAT-1">CARTOSAT-1</option>
<option value="CARTOSAT-2">CARTOSAT-2</option>
<option value="CARTOSAT-2D">CARTOSAT-2D</option>
<option value="CARTOSAT-2E">CARTOSAT-2E</option>
<option value="IKONOS">IKONOS</option>
<option value="IRS-1A">IRS-1A</option>
<option value="IRS-1B">IRS-1B</option>
<option value="IRS-1C">IRS-1C</option>
<option value="IRS-1D">IRS-1D</option>
<option value="IRS-P3">IRS-P3</option>
<option value="IRS-P4">IRS-P4</option>
<option value="IRS-P6">IRS-P6</option>
<option value="IRS-R2">IRS-R2</option>
<option value="IRS-R2A">IRS-R2A</option>
<option value="OCEANSAT-2">OCEANSAT-2</option>
<option value="RISAT-1">RISAT-1</option>
</select>
<br><br>
Sensor
<select name="sensors" id="sensors" class="form-control">
<optgroup >
<option selected disabled>Choose one</option>
<option value="AW">AW</option>
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="MX">MX</option>
<option value="OCM">OCM</option>
<option value="PAN">PAN</option>
<option value="PAN/MSI">PAN/MSI</option>
<option value="SAR">SAR</option>
<option value="WIF">WIF</option>
</optgroup>
</select>
<br><br>
Date :
<br>
From
<input name="dateOfPassFrom" style =" width:120px;" class="form-control" placeholder="From" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassFrom" value="2020-12-01" >
To
<input name="dateOfPassTo" style =" width:120px;" class="form-control" placeholder="To" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="dateOfPassTo" value="2020-12-31" >
<br><br>
Path
<input name="pathFrom" class="form-control" style =" width:120px;margin-left:10px" id="pathFrom" type="number" placeholder="From">
<span>-</span>
<input name="pathTo" class="form-control" style =" width:120px;" id="pathTo" type="number" placeholder="To">
<br><br>
Row
<input name="rowFrom" class="form-control" id="rowFrom" type="number" placeholder="From">
<input name="rowTo" class="form-control" style ="" id="rowTo" type="number" placeholder="To">
<br><br>
<div class="modal-footer">
<button id="filter" value="val_1" name="but1" class="btn btn-rounded btn-outline-info">Filter</button>
<!-- <input value="Submit" type="submit" onclick="filterData()"> -->
<button id="reset" name="reset" onclick="resetForm()" class="btn btn-rounded btn-outline-info">Reset</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab">
<form id ="filterform1">
<div >
<h5 >Select Special Type</h5>
<select name="selectnone" class="form-control" id="selectnone" onchange="changeFunc();">
<option value="selectnone">Select None</option>
<option value="city">City</option>
<option value="point">Point</option>
<option value="administrator">Administrator Boundaries</option>
<option value="rectangular">Rectangular Extent</option>
</select>
</div>
<br><input style ="display:none;" id="cityname" class="form-control" type="text" name="gid" placeholder="city name" >
<div id="search-result"></div>
<div class="clear"></div>
<div class="modal-footer">
<button id="cityfilter" type="button" class="btn btn-rounded btn-outline-info" onclick="onclicktaluka()">Filter</button>
<button id="reset2" name="reset2" onclick="resetForm1()" class="btn btn-rounded btn-outline-info">Reset</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-xlg-9">
<div class="card">
<!-- <div class="card-body"> -->
<div id="target-map" style="width:100%!important; height:680px;"></div>
<div id="latlon" class="latlon"></div>
<div id="scale" class="scale-line"></div>
<div id="location"
style="width: 24px; height: 24px; font-size: 24px;">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
<!-- Row -->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="getASIReportList" class="table color-table " style="height: 335px;"></table >
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<div class="right-sidebar">
<div class="slimscrollright">
<div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="r-panel-body">
<ul id="themecolors" class="m-t-20">
<li><b>With Light sidebar</b></li>
<li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
<li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
<li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
<li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
<li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
<li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
<li class="d-block m-t-30"><b>With Dark sidebar</b></li>
<li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
<li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
<li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
<li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
<li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
<li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
</ul>
<ul class="m-t-20 chatonline">
<li><b>Chat option</b></li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer">
© 2019 Admin Press Admin by themedesigner.in
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="assets/js/jquery.slimscroll.js"></script>
<!--Wave Effects -->
<script src="assets/js/waves.js"></script>
<!--Menu sidebar -->
<script src="assets/js/sidebarmenu.js"></script>
<!--stickey kit -->
<script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<!--Custom JavaScript -->
<script src="assets/js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--sparkline JavaScript -->
<script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<!--morris JavaScript -->
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script src="assets/plugins/morrisjs/morris.min.js"></script>
<!-- Chart JS -->
<script src="assets/js/dashboard1.js"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
<script src="ol/ol.js"></script>
<script src="customol/js/clear.js"></script>
<script src="customol/js/identify.js"></script>
<script src="customol/js/exportpdf.js"></script>
<script src="customol/js/measure.js"></script>
<script src="customol/js/controllers.js"></script>
<script src="customol/js/navigation.js"></script>
<script src="customol/js/scaleline.js"></script>
<script src="customol/js/mouse-position.js"></script>
<script src="customol/js/layerSwitcher.js"></script>
<script src="customol/js/findbylocation.js"></script>
<script src="customol/js/LayersGroup/indianmapLayersGroup.js"></script>
<script src="customol/js/LayersGroup/satelliteGroup.js"></script>
<script src="customol/js/LayersGroup/commonlayersGroup.js"></script>
<script src="customol/js/LayersGroup/transportGroup.js"></script>
<script src="customol/js/LayersGroup/IdentifyLayerGroup.js"></script>
<script src="customol/js/addGeom.js"></script>
<script src="customol/js/main.js"></script>
<script src="customol/js/services/services.js"></script>
<script src="customol/js/Base64.js"></script>
<script src="customol/js/geomForm.js"></script>
<script src="mis/js/services/misservices.js"></script>
<script src="mis/js/customscripts/search.js"></script>
<!-- <script src=https://code.jquery.com/jquery-3.5.1.js></script> -->
<script src=https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js></script>
<script src=https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js></script>
<script src="mis/js/customscripts/tables.js"></script>
<script src="mis/js/customscripts/filter.js"></script>
</body>
<!-- Mirrored from themedesigner.in/demo/admin-press/main/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 04 May 2019 05:15:28 GMT -->
</html>