diff --git a/pom.xml b/pom.xml index 0556ac9c0..fdd5c989a 100644 --- a/pom.xml +++ b/pom.xml @@ -59,6 +59,11 @@ vue 2.5.16 + + org.webjars + font-awesome + 5.8.2 + org.springframework.boot diff --git a/src/main/java/io/codeka/gaia/Gaia.java b/src/main/java/io/codeka/gaia/Gaia.java index 3d4201389..90fea7e28 100644 --- a/src/main/java/io/codeka/gaia/Gaia.java +++ b/src/main/java/io/codeka/gaia/Gaia.java @@ -3,6 +3,7 @@ import io.codeka.gaia.bo.TerraformModule; import io.codeka.gaia.bo.TerraformVariable; import io.codeka.gaia.repository.TerraformModuleRepository; +import io.codeka.gaia.repository.TerraformStateRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.CommandLineRunner; import org.springframework.boot.SpringApplication; @@ -21,25 +22,32 @@ public static void main(String[] args) { } @Bean - CommandLineRunner cli(@Autowired TerraformModuleRepository repository){ + @Autowired + CommandLineRunner cli(TerraformModuleRepository repository, TerraformStateRepository terraformStateRepository){ return args -> { + repository.deleteAll(); + terraformStateRepository.deleteAll(); + // create dummy module for tests var module = new TerraformModule(); module.setId("e01f9925-a559-45a2-8a55-f93dc434c676"); - module.setName("test 1"); - module.setDescription("a dummy module"); - module.setGitRepositoryUrl("https://github.com/dummy"); - module.setDirectory("dummy"); + module.setName("terraform-docker-mongo"); + module.setDescription("A sample terraform \uD83C\uDF0D module for running a mongodb \uD83C\uDF43 database inside a docker \uD83D\uDC33 container"); + module.setGitRepositoryUrl("https://github.com/juwit/terraform-docker-mongo.git"); + module.setDirectory(""); module.setGitBranch("master"); var tvar = new TerraformVariable(); - tvar.setName("dummy_var"); - tvar.setDescription("a dummy var description"); - tvar.setDefaultValue("a dummy value"); + tvar.setName("mongo_container_name"); + tvar.setDescription("the name of the docker container"); - module.setVariables(List.of(tvar)); + var tvar2 = new TerraformVariable(); + tvar2.setName("mongo_exposed_port"); + tvar2.setDescription("the exposed port of the mongo container"); + tvar2.setDefaultValue("27017"); + + module.setVariables(List.of(tvar, tvar2)); - repository.deleteAll(); repository.saveAll(List.of(module)); }; } diff --git a/src/main/java/io/codeka/gaia/controller/IndexController.java b/src/main/java/io/codeka/gaia/controller/IndexController.java new file mode 100644 index 000000000..ad939256b --- /dev/null +++ b/src/main/java/io/codeka/gaia/controller/IndexController.java @@ -0,0 +1,24 @@ +package io.codeka.gaia.controller; + +import io.codeka.gaia.repository.TerraformModuleRepository; +import org.springframework.stereotype.Controller; +import org.springframework.ui.Model; +import org.springframework.web.bind.annotation.GetMapping; + +@Controller +public class IndexController { + + private TerraformModuleRepository moduleRepository; + + public IndexController(TerraformModuleRepository moduleRepository) { + this.moduleRepository = moduleRepository; + } + + @GetMapping("/") + String index(Model model){ + var moduleCount = this.moduleRepository.count(); + model.addAttribute("moduleCount", moduleCount); + return "index"; + } + +} diff --git a/src/main/resources/static/css/animate.css b/src/main/resources/static/css/animate.css new file mode 100755 index 000000000..d18405406 --- /dev/null +++ b/src/main/resources/static/css/animate.css @@ -0,0 +1,2373 @@ +/*------------------------------------------------------------------ + File Name: animate.css +-------------------------------------------------------------------*/ + +@charset "UTF-8"; +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} +@-webkit-keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + -ms-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + -ms-transform: translateY(-15px); + transform: translateY(-15px); + } +} +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; +} +@-webkit-keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +.flash { + -webkit-animation-name: flash; + animation-name: flash; +} +/*== originally authored by Nick Pettit - https://github.com/nickpettit/glide ==*/ + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; +} +@-webkit-keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} +@keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + -ms-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(10px); + } +} +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + 40% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 60% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + 80% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} +@keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + -ms-transform: rotate(15deg); + transform: rotate(15deg); + } + 40% { + -webkit-transform: rotate(-10deg); + -ms-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 60% { + -webkit-transform: rotate(5deg); + -ms-transform: rotate(5deg); + transform: rotate(5deg); + } + 80% { + -webkit-transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + transform: rotate(-5deg); + } + 100% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } +} +.swing { + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; +} +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} +@keyframes tada { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + -ms-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + -ms-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + -ms-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + -ms-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} +.tada { + -webkit-animation-name: tada; + animation-name: tada; +} +/*== originally authored by Nick Pettit - https://github.com/nickpettit/glide ==*/ + +@-webkit-keyframes wobble { + 0% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 15% { + -webkit-transform: translateX(-25%) rotate(-5deg); + transform: translateX(-25%) rotate(-5deg); + } + 30% { + -webkit-transform: translateX(20%) rotate(3deg); + transform: translateX(20%) rotate(3deg); + } + 45% { + -webkit-transform: translateX(-15%) rotate(-3deg); + transform: translateX(-15%) rotate(-3deg); + } + 60% { + -webkit-transform: translateX(10%) rotate(2deg); + transform: translateX(10%) rotate(2deg); + } + 75% { + -webkit-transform: translateX(-5%) rotate(-1deg); + transform: translateX(-5%) rotate(-1deg); + } + 100% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} +@keyframes wobble { + 0% { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + } + 15% { + -webkit-transform: translateX(-25%) rotate(-5deg); + -ms-transform: translateX(-25%) rotate(-5deg); + transform: translateX(-25%) rotate(-5deg); + } + 30% { + -webkit-transform: translateX(20%) rotate(3deg); + -ms-transform: translateX(20%) rotate(3deg); + transform: translateX(20%) rotate(3deg); + } + 45% { + -webkit-transform: translateX(-15%) rotate(-3deg); + -ms-transform: translateX(-15%) rotate(-3deg); + transform: translateX(-15%) rotate(-3deg); + } + 60% { + -webkit-transform: translateX(10%) rotate(2deg); + -ms-transform: translateX(10%) rotate(2deg); + transform: translateX(10%) rotate(2deg); + } + 75% { + -webkit-transform: translateX(-5%) rotate(-1deg); + -ms-transform: translateX(-5%) rotate(-1deg); + transform: translateX(-5%) rotate(-1deg); + } + 100% { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + } +} +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; +} +@-webkit-keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + transform: scale(1.05); + } + 70% { + -webkit-transform: scale(.9); + transform: scale(.9); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.3); + -ms-transform: scale(.3); + transform: scale(.3); + } + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); + } + 70% { + -webkit-transform: scale(.9); + -ms-transform: scale(.9); + transform: scale(.9); + } + 100% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; +} +@-webkit-keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + transform: translateY(30px); + } + 80% { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + -ms-transform: translateY(30px); + transform: translateY(30px); + } + 80% { + -webkit-transform: translateY(-10px); + -ms-transform: translateY(-10px); + transform: translateY(-10px); + } + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; +} +@-webkit-keyframes bounceInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + transform: translateX(30px); + } + 80% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes bounceInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + -ms-transform: translateX(30px); + transform: translateX(30px); + } + 80% { + -webkit-transform: translateX(-10px); + -ms-transform: translateX(-10px); + transform: translateX(-10px); + } + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} +@-webkit-keyframes bounceInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + transform: translateX(-30px); + } + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes bounceInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + -ms-transform: translateX(-30px); + transform: translateX(-30px); + } + 80% { + -webkit-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(10px); + } + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; +} +@-webkit-keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 80% { + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + -ms-transform: translateY(-30px); + transform: translateY(-30px); + } + 80% { + -webkit-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.bounceInUp { + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp; +} +@-webkit-keyframes bounceOut { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 25% { + -webkit-transform: scale(.95); + transform: scale(.95); + } + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } +} +@keyframes bounceOut { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 25% { + -webkit-transform: scale(.95); + -ms-transform: scale(.95); + transform: scale(.95); + } + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.3); + -ms-transform: scale(.3); + transform: scale(.3); + } +} +.bounceOut { + -webkit-animation-name: bounceOut; + animation-name: bounceOut; +} +@-webkit-keyframes bounceOutDown { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } +} +@keyframes bounceOutDown { + 0% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } +} +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown; +} +@-webkit-keyframes bounceOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} +@keyframes bounceOutLeft { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} +@-webkit-keyframes bounceOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} +@keyframes bounceOutRight { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); + } + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } +} +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} +@-webkit-keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} +@keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } +} +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } +} +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } +} +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); + } +} +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } +} +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + } +} +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } +} +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } +} +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} +@-webkit-keyframes flip { + 0% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 80% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 100% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} +@keyframes flip { + 0% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 80% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 100% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} +.animated.flip { + -webkit-backface-visibility: visible; + -ms-backface-visibility: visible; + backface-visibility: visible; + -webkit-animation-name: flip; + animation-name: flip; +} +@-webkit-keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + transform: perspective(400px) rotateX(-10deg); + } + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + } + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +@keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + -ms-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + -ms-transform: perspective(400px) rotateX(-10deg); + transform: perspective(400px) rotateX(-10deg); + } + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + -ms-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + } + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + -ms-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +.flipInX { + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX; +} +@-webkit-keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + transform: perspective(400px) rotateY(-10deg); + } + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + } + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +@keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + -ms-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + -ms-transform: perspective(400px) rotateY(-10deg); + transform: perspective(400px) rotateY(-10deg); + } + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + -ms-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + } + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + -ms-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +.flipInY { + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY; +} +@-webkit-keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} +@keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + -ms-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + -ms-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} +.flipOutX { + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; +} +@-webkit-keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +@keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + -ms-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + -ms-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +.flipOutY { + -webkit-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; +} +@-webkit-keyframes lightSpeedIn { + 0% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } + 60% { + -webkit-transform: translateX(-20%) skewX(30deg); + transform: translateX(-20%) skewX(30deg); + opacity: 1; + } + 80% { + -webkit-transform: translateX(0%) skewX(-15deg); + transform: translateX(0%) skewX(-15deg); + opacity: 1; + } + 100% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } +} +@keyframes lightSpeedIn { + 0% { + -webkit-transform: translateX(100%) skewX(-30deg); + -ms-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } + 60% { + -webkit-transform: translateX(-20%) skewX(30deg); + -ms-transform: translateX(-20%) skewX(30deg); + transform: translateX(-20%) skewX(30deg); + opacity: 1; + } + 80% { + -webkit-transform: translateX(0%) skewX(-15deg); + -ms-transform: translateX(0%) skewX(-15deg); + transform: translateX(0%) skewX(-15deg); + opacity: 1; + } + 100% { + -webkit-transform: translateX(0%) skewX(0deg); + -ms-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } +} +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} +@-webkit-keyframes lightSpeedOut { + 0% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } +} +@keyframes lightSpeedOut { + 0% { + -webkit-transform: translateX(0%) skewX(0deg); + -ms-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: translateX(100%) skewX(-30deg); + -ms-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } +} +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +@-webkit-keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +@keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(-200deg); + -ms-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn; +} +@-webkit-keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +@keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; +} +@-webkit-keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +@keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; +} +@-webkit-keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +@keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; +} +@-webkit-keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +@keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; +} +@-webkit-keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0; + } +} +@keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(200deg); + -ms-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0; + } +} +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut; +} +@-webkit-keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} +@keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; +} +@-webkit-keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} +@keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} +@-webkit-keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} +@keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; +} +@-webkit-keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} +@keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + 100% { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} +@-webkit-keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} +@-webkit-keyframes slideInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes slideInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} +@-webkit-keyframes slideInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes slideInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} +@keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + -ms-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} +@keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + -ms-transform: translateX(2000px); + transform: translateX(2000px); + } +} +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} +@keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + -ms-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} +@-webkit-keyframes hinge { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 20%, + 60% { + -webkit-transform: rotate(80deg); + transform: rotate(80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 40% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 80% { + -webkit-transform: rotate(60deg) translateY(0); + transform: rotate(60deg) translateY(0); + opacity: 1; + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 100% { + -webkit-transform: translateY(700px); + transform: translateY(700px); + opacity: 0; + } +} +@keyframes hinge { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 20%, + 60% { + -webkit-transform: rotate(80deg); + -ms-transform: rotate(80deg); + transform: rotate(80deg); + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 40% { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 80% { + -webkit-transform: rotate(60deg) translateY(0); + -ms-transform: rotate(60deg) translateY(0); + transform: rotate(60deg) translateY(0); + opacity: 1; + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 100% { + -webkit-transform: translateY(700px); + -ms-transform: translateY(700px); + transform: translateY(700px); + opacity: 0; + } +} +.hinge { + -webkit-animation-name: hinge; + animation-name: hinge; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } +} +@keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + -ms-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + -ms-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } +} +.rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollOut { + 0% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + transform: translateX(100%) rotate(120deg); + } +} +@keyframes rollOut { + 0% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + -ms-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + -ms-transform: translateX(100%) rotate(120deg); + transform: translateX(100%) rotate(120deg); + } +} +.rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut; +} \ No newline at end of file diff --git a/src/main/resources/static/css/color_2.css b/src/main/resources/static/css/color_2.css new file mode 100755 index 000000000..633c96895 --- /dev/null +++ b/src/main/resources/static/css/color_2.css @@ -0,0 +1,89 @@ +/*------------------------------------------------------------------ + File Name: color_2.css +-------------------------------------------------------------------*/ + +.topbar .navbar { + background: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.sidebar_user_info { + background: #fff; +} + +.sidebar_toggle { + background: #0971b8; +} + +.icon_info ul.user_profile_dd > li { + background: #0971b8; +} + +.icon_info span.badge { + background: #0971b8; +} + +.icon_info ul li a { + color: #333; +} + +.user_info h6 { + color: #222; +} + +.counter_section .counter_no p.total_no { + color: #fff; +} + +.counter_section .counter_no p.head_couter { + color: rgba(255,255,255,.7); +} + +#sidebar h4 { + background: #f3f3f3; + color: #222; + border-bottom: none; +} + +#sidebar { + background-color: #fff; +} + +#sidebar ul.components ul { + background: #fff; + padding: 0; +} + +#sidebar ul.components li ul li a { + border-top: solid #ddd 1px; + padding-top: 12px; + padding-bottom: 12px; +} + +#sidebar ul li a { + color: #222; +} + +#sidebar ul.components ul li a { + color: #333; +} + +#sidebar ul.components ul li a:hover { + color: #0971b8; +} + +#sidebar ul li a:hover, #sidebar ul li a:focus { + color: #222; +} + +.dark_bg { + background: #0971b8; +} + +.progress.skill-bar .progress-bar { + background-color: #0971b8; +} + +.dash_head { + background-color: #0971b8; +} \ No newline at end of file diff --git a/src/main/resources/static/css/responsive.css b/src/main/resources/static/css/responsive.css new file mode 100755 index 000000000..175ba5e86 --- /dev/null +++ b/src/main/resources/static/css/responsive.css @@ -0,0 +1,454 @@ +/*------------------------------------------------------------------ + File Name: responsive.css + Template Name: Pluto - Responsive HTML5 Template + Created By: html.design + Envato Profile: https://themeforest.net/user/htmldotdesign + Website: https://html.design + Version: 1.0 +-------------------------------------------------------------------*/ + + +/*----------------------------------- + sidebar small only desktop +-----------------------------------*/ + +@media (min-width: 1200px) { + /*-- small sidebar --*/ + #sidebar.active { + min-width: 90px; + max-width: 90px; + text-align: center; + } + #sidebar.active .sidebar-header h3, + #sidebar.active .CTAs { + display: none; + } + #sidebar.active .sidebar-header strong { + display: block; + } + #sidebar.active ul li a { + padding: 10px 0; + float: left; + width: 100%; + text-align: center; + } + #sidebar.active ul li a i { + width: 100%; + text-align: center; + margin: 0 0 5px 0; + font-size: 24px; + } + #sidebar.active ul ul a { + padding: 10px !important; + } + #sidebar.active .dropdown-toggle::after { + display: none; + } + nav#sidebar.active .logo_big { + text-align: center; + padding: 8px 0 7px; + } + #sidebar.active .logo_big img { + height: 45px; + } + #sidebar.active .logo_section { + padding: 0; + margin-bottom: 10px; + background: #fff; + width: 100%; + } + #sidebar.active ul.components { + padding: 0; + } + #sidebar.active .logo_big { + display: none; + } + .logo_icon { + display: none; + } + #sidebar.active .logo_icon { + display: block; + } + #sidebar.active .logo_big img { + height: 45px; + } + #sidebar.active h4 { + display: none; + } + #sidebar.active .sidebar_user_info { + display: none; + } + #sidebar.active ul li a span { + font-size: 13px; + } + #sidebar ul li a i {} +} + + +/*----------------------------------- + end sidebar small only desktop +-----------------------------------*/ + +@media (min-width: 1200px) and (max-width: 1600px) { + .counter_section { + display: block; + } + .couter_icon { + display: block; + width: 100%; + } + .couter_icon>div { + padding-right: 0; + } + .counter_no p.total_no { + text-align: center; + } + .counter_no .head_couter { + text-align: center; + font-size: 16px; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .counter_section { + display: block; + } + .couter_icon { + display: block; + width: 100%; + } + .couter_icon>div { + padding-right: 0; + } + .counter_no p.total_no { + text-align: center; + } + .counter_no .head_couter { + text-align: center; + font-size: 16px; + } + .dashboard_2 .social_cont ul li { + padding: 0; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + body { + overflow-x: hidden; + } + .container { + width: 100%; + padding: 0 20px; + } + .info_people .user_info_cont { + width: 60%; + padding-left: 30px; + padding-top: 0; + } + .fw_icon { + width: 33.33%; + } +} + +@media (max-width: 575px) { + body { + overflow-x: hidden; + } + .container { + width: 100%; + padding: 0 20px; + } + .padding_infor_info { + padding: 20px 20px; + } + .payment_option li { + margin-bottom: 10px; + } +} + +@media (min-width: 576px) and (max-width: 767px) { + body { + overflow-x: hidden; + } + .container { + width: 100%; + padding: 0 20px; + } +} + +@media (max-width: 575px) { + body { + overflow-x: hidden; + } + .container { + width: 100%; + padding: 0 20px; + } +} + +@media (max-width: 1199px) { + * { + box-sizing: border-box; + } + #sidebar { + min-width: 80px; + max-width: 80px; + text-align: center; + margin-left: -80px !important; + } + #sidebar.active { + margin-left: 0 !important; + } + #sidebar .sidebar-header h3, + #sidebar .CTAs { + display: none; + } + #sidebar .sidebar-header strong { + display: block; + } + /*-- responsive --*/ + #sidebar.active+#content .topbar { + transition: ease all 0.3s; + } + .topbar { + padding-left: 0; + min-width: 320px; + } + #sidebar.active+#content .topbar { + padding-left: 0; + min-width: 320px; + left: 250px; + } + #content { + padding: 60px 15px 25px 15px; + } + #sidebar.active { + min-width: 250px; + max-width: 250px; + text-align: left; + } + #sidebar.active+#content { + padding-left: 0; + left: 250px; + position: relative; + min-width: 320px; + height: auto; + transition: ease all 0.3s; + } + .right_topbar .icon_info ul.user_profile_dd { + display: none; + } + .right_topbar { + float: right; + padding: 0; + margin: 5px 15px 5px 0; + } + .sidebar_toggle { + padding: 14px 22px 13px; + } + .logo_section img { + height: 38px; + padding: 0; + margin: 12px 0 0 15px; + } + .icon_info ul li { + width: 30px; + } + .icon_info ul li a { + font-size: 16px; + } + .logo_section img.logo_icon { + display: none; + } +} + +@media (max-width: 350px) { + .icon_info ul li { + margin: 15px 0 0 0; + } +} + +@media (max-width: 767px) { + .counter_section { + padding: 30px 25px; + } + .counter_no { + padding: 0; + } + .counter_no .head_couter { + font-size: 16px; + } + #testimonial_slider.carousel .carousel-control { + top: -35px; + } + .content.testimonial { + margin-top: 50px; + } + #testimonial_slider.carousel .testimonial { + font-size: 13px; + line-height: normal; + } + .progress_bar { + padding: 15px 25px 50px 25px; + } + .dash_head { + padding: 30px 30px 25px; + } + .task_list li { + padding: 20px 30px; + } + .task_list li a { + color: #99abb4; + font-size: 15px; + line-height: normal; + margin-bottom: 10px; + float: left; + width: 100%; + } + .msg_list_main ul li { + display: block; + } + .msg_list_main ul li>span:nth-child(1) { + margin-right: 20px; + margin-bottom: 10px; + } + /*----- widgets page css -----*/ + .info_people { + padding: 25px; + display: block; + } + .info_people .p_info_img { + width: 100%; + text-align: center; + } + .info_people .p_info_img img { + width: 90px; + } + .info_people .user_info_cont { + width: 100%; + padding-left: 0; + padding-top: 25px; + text-align: center; + } + .calendar { + overflow: auto; + } + /** accordian css **/ + .tab_style3 .tabbar { + display: block; + } + .tab_style3 #v-pills-tabContent { + width: 100%; + padding-left: 0; + padding-right: 0; + padding-top: 25px; + } + .pagination.button_section { + display: block; + } + .pagination.button_section .btn-group { + margin: 5px 0 0; + } + .fw_icon { + width: 50%; + } + /**-- email page --**/ + .mail-box { + float: left; + width: 100%; + } + .mail-box .sm-side { + width: 100%; + float: left; + } + .mail-box .lg-side { + background: none repeat scroll 0 0 #fff; + border-radius: 0 4px 4px 0; + width: 100%; + float: left; + overflow: auto; + } + aside.lg-side .inbox-body { + min-width: 565px; + padding-left: 0; + padding-right: 0; + } + .table.table-striped.projects { + min-width: 780px; + } + /** login page **/ + .full_height { + height: auto; + } + .login_section { + margin-top: 25px; + margin-bottom: 25px; + } + .login_form form .field input { + max-width: 395px; + width: 100%; + } + .login_form form .field label.label_field { + text-align: left; + } + .login_form form .field { + display: block; + margin: 0 0 20px; + float: left; + width: 100%; + } + .label_field.hidden { + display: none; + } + .login_form form .field .form-check-label { + float: left; + width: 100%; + } + .forgot { + float: left; + } + .error_page h3 { + font-size: 36px; + line-height: 45px; + } +} + +@media (max-width: 420px) { + .model_bt { + padding: 11px 0 10px; + width: 100%; + } + .fw_icon { + width: 100%; + } + aside .inbox-head .position.search_inbox { + display: none; + } + .contact_inner .left { + width: 100%; + float: left; + padding-right: 0; + margin-bottom: 20px; + } + .contact_inner .right { + width: 100%; + float: left; + } + .bottom_list .right_button { + float: right; + display: flex; + } + .bottom_list .right_button button { + margin: 0 0 0 5px; + } + .dis_flex { + display: block; + margin: 0; + } + .dis_flex .profile_img { + width: 100%; + text-align: center; + margin: 0; + margin-bottom: 20px; + } +} \ No newline at end of file diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css new file mode 100755 index 000000000..3fc869d56 --- /dev/null +++ b/src/main/resources/static/css/style.css @@ -0,0 +1,3402 @@ +/*------------------------------------------------------------------ + [Table of contents] + + 1. import fonts + 2. import files + 3. basic + 4. header + 5. content section + 6. Progressbar + 7. Table style + 8. Social icon + 9. Pie charts + 10. Testimonial slider + 11. Blog Section + 12. Dashboard Style 2 + 13. Footer + 14. Widgets section + 15. Calendar section + 16. General Elements + -> tabbar style 1 + -> tabbar style 2 + -> tabbar style 3 + -> button section + -> pagination + -> model bt + 17. Gallery Section + 18. Icons + 19. Invoice + 20. Price table + 21. Mail + 22. Price table page + 23. Contact page + 24. Progress bar + 25. Login Section + 26. Error + 27. Map + +-------------------------------------------------------------------*/ + + +/*------------------------------------------------------------------ + 1. import fonts +-------------------------------------------------------------------*/ + +@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700,900'); +@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); +@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); +@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700,700i'); +@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i'); +@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700'); + +/*------------------------------------------------------------------ + 2. import files +-------------------------------------------------------------------*/ + +@import url(animate.css); + +/*------------------------------------------------------------------ + 3. basic +-------------------------------------------------------------------*/ + +* { + margin: 0; + padding: 0; + outline: none !important; +} + +html, +body { + color: #898989; + font-size: 14px; + font-family: 'Poppins', sans-serif; + line-height: normal; + font-weight: 300; + overflow-x: hidden !important; +} + +body.demos .section { + background: url(images/bg.png) repeat top center #f2f3f5; +} + +body.demos .section-title img { + max-width: 280px; + display: block; + margin: 10px auto; +} + +body.demos .service-widget h3 { + border-bottom: 1px solid #ededed; + font-size: 18px; + padding: 20px 0; + background-color: #ffffff; +} + +body.demos .service-widget { + margin: 0 0 30px; + padding: 30px; + background-color: #fff +} + +body.demos .container-fluid { + max-width: 1080px +} + +a { + color: #1f1f1f; + text-decoration: none !important; + outline: none !important; + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -ms-transition: all .3s ease-in-out; + -o-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + letter-spacing: 0; + font-weight: normal; + position: relative; + padding: 0; + font-weight: normal; + line-height: normal; + color: #1f1f1f; + margin: 0 +} + +h1 { + font-size: 24px +} + +.small_heading.main-heading h2 { + font-size: 21px; +} + +.small_heading.main-heading::after { + top: 18px; +} + +.small_heading.main-heading { + margin-bottom: 20px; + width: 100%; +} + +.img-responsive { + max-width: 100%; +} + +h3 { + font-size: 18px +} + +h4 { + font-size: 16px +} + +h5 { + font-size: 14px +} + +h6 { + font-size: 13px +} + +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { + color: #212121; + text-decoration: none!important; + opacity: 1 +} + +a { + color: #898989; + text-decoration: none; + outline: none; +} + +a, +.btn { + text-decoration: none !important; + outline: none !important; + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -ms-transition: all .3s ease-in-out; + -o-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} + +.btn-custom { + margin-top: 20px; + background-color: transparent; + border: 2px solid #ddd; + padding: 12px 40px; + font-size: 16px; +} + +.btn-success { + color: #fff; + background-color: #1ed085; + border-color: #1ed085; +} + +ul { + list-style-type: none; + padding: 0px; + margin: 0px; +} + + +/*-- +a.btn { + min-width: 170px; + height: 40px; + border-radius: 100px; + padding: 0; + text-align: center; + line-height: 40px; + border: none; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + margin-top: 10px; +} +--*/ + +.red_bg { + background: #ff4748; +} + +.blue_bg { + background: #36a9e2; +} + +.yellow_bg { + background: #fabb3d; +} + +.green_bg { + background: #79c347; +} + +.green_bg2 { + background: #1ed085; +} + +.purple_bg { + background: #8e68ef; +} + +.padding_top_10 { + padding-top: 10px !important; +} + +.padding_top_20 { + padding-top: 20px !important; +} + +.padding-bottom_0 { + padding-bottom: 0 !important; +} + +.padding-bottom_1 { + padding-bottom: 10px !important; +} + +.padding-bottom_2 { + padding-bottom: 20px !important; +} + +.padding-bottom_3 { + padding-bottom: 30px !important; +} + +.padding-bottom_4 { + padding-bottom: 40px !important; +} + +.padding-bottom_5 { + padding-bottom: 50px !important; +} + +.padding_infor_info { + padding: 35px 35px; + float: left; + width: 100%; +} + +.color_black p, +.color_black ul, +.color_black ul li { + color: #000; +} + +button i { + color: #fff; +} + +.lead { + font-size: 18px; + line-height: 30px; + color: #767676; + margin: 0; + padding: 0; +} + +blockquote { + margin: 20px 0 20px; + padding: 30px; +} + +.light_silver { + background: #f2f1f1; +} + +h2 { + font-size: 30px; + color: #000; + line-height: 20px; + font-weight: 700; + position: relative; +} + +h3 { + font-size: 24px; + color: #000; + line-height: normal; + font-weight: 700; + text-transform: uppercase; +} + +h4 { + font-size: 18px; + color: #000; + line-height: 21px; + font-weight: 600; + text-transform: none; + margin-bottom: 15px; +} + +h5 { + font-size: 15px; + font-weight: 700; + text-transform: uppercase; + margin: 0; + line-height: normal; + color: #000; +} + +p { + color: #58718a; + font-size: 14px; + line-height: 21px; +} + +button, +input, +select, +textarea, +option { + font-family: 'Poppins', sans-serif; +} + +a#submit { + z-index: 1; +} + +a:hover, +a:focus { + color: #2a3a4b; + text-decoration: none; +} + +.span1, +.span2, +.span3, +.span4, +.span5, +.span6, +.span7, +.span8, +.span9, +.span10 { + padding: 0 15px; + float: left; + min-height: 25px; +} + +.border_radius_0 { + border-radius: 0 !important; +} + +.span1 { + width: 10%; +} + +.span2 { + width: 20%; +} + +.span3 { + width: 30%; +} + +.span4 { + width: 40%; +} + +.span5 { + width: 50%; +} + +.span6 { + width: 60%; +} + +.span7 { + width: 70%; +} + +.span8 { + width: 80%; +} + +.span9 { + width: 90%; +} + +.span10 { + width: 100%; +} + +.container { + width: 1200px; +} + +.section_padding { + padding: 80px 0 100px; +} + +.layout_2_padding { + padding: 100px 0 80px; +} + +.full { + width: 100%; + float: left; +} + +.brown_color { + color: #795548 !important; +} + +.brown_bg { + background: #795548 !important; +} + +.blue1_color { + color: #2196f3 !important; +} + +.blue1_bg { + background: #2196f3 !important; +} + +.orange_color { + color: #ff5722 !important; +} + +.orange_bg { + background: #ff5722 !important; +} + +.purple_color { + color: #673ab7 !important; +} + +.purple_bg { + background: #673ab7 !important; +} + +.purple_color2 { + color: #3f51b5 !important; +} + +.purple_bg2 { + background: #3f51b5 !important; +} + +.blue2_color { + color: #03a9f4 !important; +} + +.blue2_bg { + background: #03a9f4 !important; +} + +.red_color { + color: #e91e63 !important; +} + +.red_bg { + background: #e91e63 !important; +} + +.yellow_color { + color: #ff9800 !important; +} + +.yellow_bg { + background: #ff9800 !important; +} + +.purple_color2 { + color: #9c27b0 !important; +} + +.purple_bg2 { + background: #9c27b0 !important; +} + +.orange_color2 { + color: #f44336 !important; +} + +.orange_bg2 { + background: #f44336 !important; +} + +.green_color { + color: #009688 !important; +} + +.green_bg { + background: #009688 !important; +} + +.heading1 h2 { + line-height: normal; + font-size: 21px; + font-weight: 400; + margin: 0; + padding-left: 0; + color: #15283c; + letter-spacing: 0px; +} + +.margin_top_50 { + margin-top: 50px; +} + +.margin_top_30 { + margin-top: 30px; +} + +.margin_0 { + margin: 0 !important; +} + +.center { + display: flex; + justify-content: center; +} + +.verticle_center { + display: flex; + align-items: center; +} + +.dropdown-item { + font-size: 13px; +} + +.column img { + width: 100%; +} + +.max_w-50 { + max-width: 50px; +} + + +/*------------------------------------------------------------------ + 4. header +-------------------------------------------------------------------*/ + +.full_container { + width: 100%; + max-width: 100%; + padding: 0; + margin: 0; +} + +.inner_container { + padding: 0; + margin: 0; + display: flex; +} + + +/*============== + - topbar +==============*/ + +.topbar { + position: fixed; + width: 100%; + padding-left: 280px; + z-index: 2; + background: #15283c; + top: 0; + transition: ease all 0.3s; + left: 0; +} + +#sidebar.active+#content .topbar { + padding-left: 90px; +} + +.topbar .navbar { + margin: 0; +} + +.right_topbar { + float: right; + padding: 0; +} + +.icon_info { + float: left; + width: 100%; +} + +.icon_info ul { + float: left; + width: auto; + list-style: none; + margin: 0; +} + +.icon_info ul li { + float: left; + width: 35px; + height: 35px; + border-radius: 100%; + text-align: center; + line-height: 35px; + position: relative; + margin: 15px 0 0 5px; +} + +.icon_info ul li .fa-question-circle { + font-size: 21px; + position: relative; + top: 1px; +} + +.icon_info ul li a { + color: #fff; + font-size: 18px; + font-weight: normal; +} + +.icon_info ul li a img { + width: 35px; +} + +.icon_info ul.user_profile_dd li { + width: auto; +} + +.icon_info ul.user_profile_dd>li span { + font-size: 13px; + font-weight: 500; + color: #fff; + padding: 0 35px 0 10px; +} + +.icon_info ul.user_profile_dd li>a::after { + color: #fff; + top: 13px; + right: 28px; + display: block; + position: absolute; + transform: translateY(-50%); + content: "\f107"; + font-family: 'fontawesome'; + border: none; + font-size: 18px; +} + +.icon_info ul.user_profile_dd { + float: left; + margin: 0 0 0 25px; +} + +.icon_info ul.user_profile_dd li a { + cursor: pointer; +} + +.icon_info ul.user_profile_dd>li { + width: auto; + border-radius: 0; + background: #ff5722; + margin: 0; + padding: 12px 0 12px 20px; + height: auto; +} + +.sidebar_toggle { + border: none; + padding: 14px 26px 14px; + font-size: 21px; + background: #ff5722; + margin-right: 0; + cursor: pointer; + float: left; +} + +.icon_info span.badge { + font-size: 10px; + line-height: 16px; + padding: 2px 6px; + position: absolute; + right: -2px; + top: -7px; + background: #ff5722; + border-radius: 100%; + color: #fff; + font-weight: 600; + width: 19px; + height: 19px; +} + +.icon_info ul.user_profile_dd li div a { + font-size: 15px; + color: #15283c; + padding: 4px 15px; + border-bottom: none; + line-height: normal; +} + +.icon_info ul.user_profile_dd li div a span { + font-size: 13px; + color: #15283c; + font-weight: normal; + padding: 0; + transition: all .3s ease-in-out; + line-height: normal; +} + +.icon_info ul.user_profile_dd li div a:hover, +.icon_info ul.user_profile_dd li div a:focus { + background: #243147; + color: #fff; +} + +.icon_info ul.user_profile_dd li div a:hover span, +.icon_info ul.user_profile_dd li div a:focus span { + color: #fff; +} + +.user_profile_dd .dropdown-menu { + position: absolute; + top: 100%; + right: 0; + z-index: 1000; + float: left; + padding: 10px 6px; + margin: 0; + font-size: 15px; + color: #212529; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border-radius: 0; + width: 100%; + box-shadow: -1px 1px 4px -2px rgba(0, 0, 0, 0.2); + border: none; +} + + +/**-- sidebar --**/ + +.navbar-btn { + box-shadow: none; + outline: none !important; + border: none; +} + +.line { + width: 100%; + height: 1px; + border-bottom: 1px dashed #ddd; + margin: 40px 0; +} + +i, +span { + display: inline-block; +} + +#sidebar { + min-width: 280px; + max-width: 280px; + background-color: #15283c; + color: #fff; + transition: all 0.3s; + position: relative; + z-index: 11; + box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4); + float: left; + width: 100%; + position: fixed; + height: 100%; + overflow: auto; +} + +.sidebar_blog_1, +.sidebar_blog_2, +.sidebar_blog_3 { + float: left; + width: 100%; +} + +#sidebar ul li a { + text-align: left; +} + +#sidebar .sidebar-header strong { + display: none; + font-size: 1.8em; +} + +#sidebar ul.components { + padding: 15px 0; + margin: 0; + float: left; + width: 100%; +} + +#sidebar ul li a { + padding: 15px 25px; + display: block; + font-size: 14px; + color: rgba(255, 255, 255, 0.9); + font-weight: 300; +} + +#sidebar ul li a:hover, +#sidebar ul li a:focus { + color: rgba(255, 255, 255, 0.95); +} + +#sidebar ul.components li { + position: relative; +} + +#sidebar ul.components ul { + background: #214162; + padding: 20px 0; +} + +#sidebar ul.components ul li a { + font-size: 13px; + color: rgba(255, 255, 255, .7); + padding: 7px 35px; +} + +#sidebar ul.components ul li a:hover { + color: #fff; + background: transparent; + padding-left: 45px; +} + +#sidebar ul li a i { + margin-right: 20px; + width: 15px; + font-size: 20px; + float: left; +} + +.bottom_sidebar ul li { + float: left; + width: 50%; + list-style: none; +} + +a[data-toggle="collapse"] { + position: relative; +} + +#content { + width: 100%; + min-height: 100vh; + transition: ease all 0.3s; + position: relative; + padding: 60px 25px 25px 305px; + background: #f8f8f8; +} + +.page_title { + background: #fff; + margin-top: 0; + margin-bottom: 30px; + padding: 25px 35px 22px 38px; + box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1); + margin-left: -40px; + margin-right: -40px; + position: relative; +} + +.page_title h2 { + font-size: 20px; + font-weight: 500; + color: #15283c; +} + +#sidebar.active+#content { + padding-left: 115px; +} + +.topbar .navbar { + padding: 0; + background: #15283c; + border: none; + border-radius: 0; +} + +.user_profle_side { + display: flex; +} + +.sidebar_user_info { + padding: 15px 25px; + background: #214162; +} + +.user_img img { + border-radius: 100% 100%; +} + +.user_info { + margin: 0 0 0 15px; + padding-top: 15px; +} + +.online_animation { + width: 12px; + height: 12px; + background: #1ed085; + border-radius: 100%; + margin-top: 0; + position: relative; + top: 1px; + -webkit-animation: online 2s infinite; + /* Safari 4.0 - 8.0 */ + animation: online 2s infinite +} + + +/* Safari 4.0 - 8.0 */ + +@-webkit-keyframes online { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes online { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.user_info p { + font-size: 13px; + font-weight: 500; + color: #1ed085; + margin: 0; +} + +.user_info h6 { + font-size: 17px; + font-weight: 500; + color: #fff; + letter-spacing: 0; +} + +.user_img { + width: 75px; + height: 75px; + float: left; +} + +.logo_section { + padding: 0; + width: auto; + text-align: center; + background: transparent; + float: left; +} + +.logo_section img { + height: 42px; + padding: 0; + margin: 8px 15px 0; +} + +#sidebar.active .logo_section a { + width: 100%; + display: flex; + justify-content: center; +} + +.logo_section img.logo_icon { + margin: 0; + text-align: center; + padding: 8px 8px; + height: 60px; +} + +#sidebar h4 { + background: #15283c; + margin: 0; + padding: 21px 25px 19px; + font-weight: 500; + font-size: 18px; + color: #fff; + border-bottom: solid #ff5722 1px; +} + + +/*------------------------------------------------------------------ + 5. content section +-------------------------------------------------------------------*/ + +.content_inner_section { + background: #fff; + box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4); + padding: 25px 30px; +} + +.content_inner_section .top_page_header { + width: 100%; +} + +.content_inner_section .top_page_header .page_title { + float: left; +} + +.content_inner_section .top_page_header .page_title h3 { + font-size: 21px; + font-weight: 500; + text-transform: none; + color: #222; +} + +.page_menu_cont { + width: auto; + float: right; +} + +.page_menu_cont ul { + list-style: none; + float: left; + width: 100%; +} + +.page_menu_cont ul li { + float: left; + font-size: 17px; + margin: 0 15px; +} + +.counter_section { + min-height: auto; + display: block; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + border: 0px solid #e7e7e7; + padding: 30px 35px; + background: #fff; + border-radius: 5px; + min-height: 125px; + display: flex; +} + +.couter_icon span { + width: 100%; + text-align: center; + color: #fff; + font-size: 14px; + margin-top: 5px; + padding: 0 5px; + font-weight: 500; +} + +.couter_icon span { + width: 100%; +} + +.couter_icon i { + color: #fff; + font-size: 50px; + line-height: normal; + width: 100%; + float: left; + text-align: center; +} + +.couter_icon { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + float: left; + margin: 8px 0 8px; +} + +.couter_icon>div { + border-right: solid rgba(255, 255, 255, 0.3) 1px; + padding-right: 35px; +} + +.counter_no { + padding: 0 12px; + align-content: center; + align-items: center; + float: right; + width: 100%; +} + +.counter_no p.total_no { + margin: 0; + font-size: 45px; + float: left; + width: 100%; + line-height: normal; + font-weight: 600; + color: #455a64; + text-align: right; + font-size: 24px; + font-weight: 400; +} + +.counter_no .head_couter { + float: left; + width: 100%; + color: #99abb4; + font-weight: 300; + margin: 0px 0 0 0; + font-size: 20px; + text-align: right; +} + +.counter_no .counter_desrp { + margin: 0; + color: #fff; + line-height: 18px; +} + +#myChart-top { + box-shadow: 10px 10px 5px -4px rgba(224, 224, 224, 0.6); +} + +.zc-ref { + display: none; +} + +#myChart-wrapper { + margin: auto; +} + +#graph1 { + margin-top: 10px; +} + +#rebenue {} + +.graph_revenue { + padding: 0; + margin-top: 0; + min-height: auto; +} + +.graph_head { + padding: 18px 25px 15px; + float: left; + width: 100%; + border-bottom: solid #f3f3f3 2px; +} + +.heading1 { + /*float: left;*/ + padding: 0 0 20px 0; + width: 100%; + margin-top: 50px; +} + +.graph_head .heading1 { + float: left; + padding: 0; + width: auto; +} + +.heading2 { + background: #fff; + padding: 15px 25px; + margin: 20px 0 0 0; + border-bottom: solid #ff5722 2px; +} + +.heading2 h3 { + font-size: 20px; + text-transform: none; + font-weight: 600; + position: relative; + color: #15283c; + font-family: 'Raleway', sans-serif; +} + +.time_form { + float: right; + margin: 6px 0 0; +} + +.time_form form { + float: left; + width: 100%; +} + +.time_form form .field { + float: left; + margin-right: 0; + margin-left: 12px; +} + +.time_form form .field label { + margin-right: 12px; + margin-bottom: 0; + font-size: 15px; + color: #999; +} + +.time_form form .field input { + border: solid #ddd 1px; + font-size: 13px; + font-weight: 500; + color: #666; + padding: 6px 10px; + border-radius: 0; +} + +.btn.focus, +.btn:focus { + box-shadow: none; +} + +.mail-option .dropdown-menu { + padding: 10px; + border-radius: 0; + font-size: 14px; + font-weight: 400; + border: solid #ddd 1px; +} + +.mail-option .dropdown-menu li { + margin: 10px 0; +} + +.mail-option .dropdown-menu { + padding: 4px 15px; + border-radius: 0; + font-size: 14px; + font-weight: 400; + border: solid #ddd 1px; + margin-top: 5px; +} + +.mail-option .btn-group a.btn { + border-radius: 0 !important; + background: #fff; + padding: 8px 14px; + color: #666; + font-size: 14px; +} + + +/*------------------------------------------------------------------ + 6. Progressbar +-------------------------------------------------------------------*/ + +.progress_bar { + padding: 15px 40px 50px 40px; +} + +.progress.skill-bar { + background: #e9ecef; + border-radius: 0; + height: 10px; + margin-top: 2px; + border-radius: 10px; +} + +.progress.skill-bar .progress-bar { + background-color: #1ed085; + box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); +} + +.skill { + font-size: 14px; + color: #455a64; + margin-top: 20px; + font-weight: 500; +} + +.skill .info_valume { + float: right; +} + + +/*------------------------------------------------------------------ + 7. Table style +-------------------------------------------------------------------*/ + +.table_format.strp table { + border-radius: 8px 8px 0 0; + overflow: hidden; + color: #666; +} + +.table_format.strp thead th { + background: #15283c; + border: none; + color: #fff; + vertical-align: middle; + font-weight: 400; + text-transform: capitalize; + line-height: 1; + padding: 22px 40px; + white-space: nowrap; + font-size: 16px; +} + +.table_format.strp tbody th, +.table_format.strp tbody td { + font-size: 15px; + padding: 20px 40px; + vertical-align: middle; + font-weight: 400; + transform: capitalize; + line-height: 1; + width: white-space; +} + +.top_countries_section { + background-color: #ff4748; + border-radius: 8px; + padding: 25px 40px; + background-image: -webkit-linear-gradient(90deg, #396afc 0%, #2948ff 100%); +} + +.top_countries_section ul { + list-style: none; +} + +.top_countries_section ul li { + color: #fff; + padding: 14px 5px; + float: left; + width: 100%; + border-bottom: solid rgba(255, 255, 255, .2) 1px; +} + +.top_countries_section ul li span.country_name { + float: left; +} + +.top_countries_section ul li span.country_counter { + float: right; +} + +.area_chart { + padding: 30px 0 30px 30px; + width: 97%; +} + +.margin_bottom_30 { + margin-bottom: 30px; +} + +.white_shd { + background: #fff; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + border-radius: 5px; + margin-top: 0; +} + +.dark_bg { + background: #214162; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + border-radius: 5px; + margin-top: 0; +} + +.dark_bg .graph_head { + border-bottom: solid rgba(255, 255, 255, .1) 2px; +} + +.dark_bg h2 { + color: #fff; +} + + +/*------------------------------------------------------------------ + 8. Social icon +-------------------------------------------------------------------*/ + +.socile_icons { + border-radius: 5px; + overflow: hidden; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + background: #fff; + min-height: 165px; +} + +.social_icon { + width: 100%; + text-align: center; + font-size: 45px; + background: black; + padding: 10px 0 8px; + color: #fff; + background: #222; +} + +.fb .social_icon { + background: #3b5998; +} + +.tw .social_icon { + background: #00aced; +} + +.linked .social_icon { + background: #0077B5; +} + +.google_p .social_icon { + background: #d34836; +} + +.socile_icons .social_cont { + float: left; + text-align: center; + width: 100%; + padding: 15px 0 15px; +} + +.socile_icons .social_cont ul { + margin: 0; + list-style: none; +} + +.socile_icons .social_cont ul li { + float: left; + width: 50%; + font-size: 18px; + color: #455a64; + line-height: 24px; +} + +.socile_icons .social_cont ul li span { + float: left; + width: 100%; + color: #99abb4; + font-size: 17px; + font-weight: 300; +} + +.socile_icons .social_cont ul li span strong { + font-weight: 600; + color: #455a64; + font-size: 18px; +} + + +/*------------------------------------------------------------------ + 9. Pie charts +-------------------------------------------------------------------*/ + + +/** **/ + +#canvas-holder { + width: 100%; + margin-top: 50px; + text-align: center; +} + +#chartjs-tooltip { + opacity: 1; + position: absolute; + background: rgba(0, 0, 0, .7); + color: white; + border-radius: 3px; + -webkit-transition: all .1s ease; + transition: all .1s ease; + pointer-events: none; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} + +.chartjs-tooltip-key { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 10px; +} + + +/*------------------------------------------------------------------ + 10. Testimonial slider +-------------------------------------------------------------------*/ + +#testimonial_slider.carousel { + width: 86%; + margin: 35px 7% 35px; +} + +#testimonial_slider .carousel-inner { + padding: 0; + text-align: center; +} + +#testimonial_slider.carousel .item { + color: #999; + font-size: 14px; + text-align: center; + overflow: hidden; + min-height: auto; +} + +#testimonial_slider.carousel .item a { + color: #eb7245; +} + +#testimonial_slider.carousel .img-box { + width: 120px; + height: 120px; + margin: 0 auto; + border-radius: 50%; +} + +#testimonial_slider.carousel .img-box img { + width: 100%; + height: 100%; + display: block; + border-radius: 50%; +} + +#testimonial_slider.carousel .testimonial { + padding: 30px 0 10px; + color: rgba(255, 255, 255, .7); + font-size: 15px; + line-height: 24px; +} + +#testimonial_slider.carousel .overview { + text-align: center; + padding-bottom: 5px; + font-size: 14px; + color: #1ed085; + font-weight: 500; + line-height: 14px; +} + +#testimonial_slider.carousel .overview b { + color: #fff; + font-size: 16px; + text-transform: none; + display: block; + padding-bottom: 5px; + font-weight: 500; +} + +#testimonial_slider.carousel .star-rating i { + font-size: 18px; + color: #ffdc12; +} + +#testimonial_slider.carousel .carousel-control { + width: 30px; + height: 30px; + border-radius: 50%; + background: #fff; + text-shadow: none; + top: 0; + opacity: 1; +} + +#testimonial_slider.carousel .carousel-control i { + font-size: 20px; + margin-right: 2px; + color: #15283c; + margin-top: -2px; +} + +#testimonial_slider.carousel .carousel-control.left { + left: auto; + right: 40px; +} + +#testimonial_slider.carousel .carousel-control.right i { + margin-right: -2px; + margin-top: -2px; +} + +#testimonial_slider.carousel .carousel .carousel-indicators { + bottom: 15px; +} + +#testimonial_slider.carousel .carousel-indicators li, +#testimonial_slider.carousel .carousel-indicators li.active { + width: 11px; + height: 11px; + margin: 1px 5px; + border-radius: 50%; +} + +#testimonial_slider.carousel .carousel-indicators li { + background: #e2e2e2; + border-color: transparent; +} + +#testimonial_slider.carousel .carousel-indicators li.active { + border: none; + background: #888; +} + + +/*------------------------------------------------------------------ + 11. Blog Section +-------------------------------------------------------------------*/ + +.dash_head { + font-weight: normal; + height: auto; + border-radius: 5px 5px 0 0; + padding: 35px 45px 32px; + background-size: cover; + background-color: #214162; + position: relative; +} + +.dash_head h3 { + color: #fff; + text-transform: none; + font-weight: 400; + font-size: 22px; +} + +.dash_blog { + min-height: 650px; + background: #fff; + border-radius: 5px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + float: left; + width: 100%; + margin-bottom: 15px; +} + +.plus_green_bt { + position: absolute; + right: 0; + bottom: -54px; +} + +.plus_green_bt a { + background: #1ed085; + color: #fff; + width: 45px; + height: 45px; + float: right; + border-radius: 50%; + text-align: center; + line-height: 45px; + font-size: 28px; + font-weight: 500; +} + +.dash_blog_inner .list_cont { + border-bottom: 1px solid #f2f2f2; + padding: 25px 40px; +} + +.dash_blog_inner .list_cont p { + margin: 2px 0 0 0; + font-size: 16px; + color: #455a64; +} + +.task_list { + float: left; + width: 100%; + list-style: none; + margin: 0; +} + +.task_list li { + padding: 20px 40px; + border-bottom: solid #eee 1px; + line-height: normal; + font-size: 16px; + border-left: solid 5px #666; +} + +.main_bt { + min-width: 125px; + height: auto; + float: left; + background: #1ed085; + text-align: center; + color: #fff; + padding: 10px 25px; + font-size: 16px; + border-radius: 5px; + border: none; + transition: ease all 0.5s; + cursor: pointer; + font-weight: 300; +} + +button.main_bt { + float: none; + margin: 0; +} + +.main_bt:hover, +.main_bt:focus { + background: #ff5722; + color: #fff; +} + +.task_list li a { + color: #99abb4; + font-size: 16px; +} + +.task_list li strong { + font-weight: 600; + color: #455a64; +} + +.task_list li:nth-child(1) { + border-left-color: #ff9800; +} + +.task_list li:nth-child(2) { + border-left-color: #2196f3; +} + +.task_list li:nth-child(3) { + border-left-color: #673ab7; +} + +.task_list li:nth-child(4) { + border-left-color: #e91e63; +} + +.task_list li:nth-child(5) { + border-left-color: #1ed085; +} + +.msg_list li:nth-child(1) { + border-left-color: #ff9800; +} + +.msg_list li:nth-child(2) { + border-left-color: #2196f3; +} + +.msg_list li:nth-child(3) { + border-left-color: #673ab7; +} + +.msg_list li:nth-child(4) { + border-left-color: #e91e63; +} + +.msg_list li:nth-child(5) { + border-left-color: #1ed085; +} + +.task_list_main { + float: left; + width: 100%; +} + +.read_more { + float: left; + width: 100%; + margin: 30px 0; +} + +.dash_blog_inner { + float: left; + width: 100%; +} + +.msg_list_main { + float: left; + width: 100%; +} + +.msg_list_main ul { + list-style: none; + float: left; + width: 100%; +} + +.msg_list_main ul li { + padding: 22px 40px; + border-bottom: solid #eee 1px; + line-height: normal; + font-size: 14px; + border-left: solid 5px #666; + float: left; + width: 100%; + display: flex; + position: relative; +} + +.msg_list_main ul li span .time_ago { + position: absolute; + right: 40px; + top: 25px; +} + +.msg_list_main ul li span p { + margin: 0; +} + +.msg_list_main ul li span .name_user { + font-size: 16px; + font-weight: 500; + color: #455a64; + float: left; + width: 100%; + margin-bottom: 0; + margin-top: 5px; +} + +.msg_list_main ul li span .msg_user { + font-size: 15px; + font-weight: 300; + color: #99abb4; +} + +.msg_list_main ul li>span:nth-child(1) { + margin-right: 20px; +} + +.msg_list_main ul li>span img { + width: 70px; + border-radius: 100%; +} + +.msg_list li:nth-child(4) { + border-bottom: none; +} + + +/*------------------------------------------------------------------ + 12. Dashboard Style 2 +-------------------------------------------------------------------*/ + +.dashboard_2 .social_icon { + float: left; + width: 50%; + height: 148px; +} + +.dashboard_2 .socile_icons { + border-radius: 5px; + overflow: hidden; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + background: #fff; + min-height: auto; +} + +.dashboard_2 .social_icon { + line-height: 135px; + font-size: 60px; +} + +.dashboard_2 .social_cont { + float: left; + width: 50%; + padding: 15px 15px; +} + +.dashboard_2 .social_cont ul li { + float: left; + width: 100%; + font-size: 18px; + color: #455a64; + line-height: 24px; + text-align: right; + margin-bottom: 10px; + padding: 0 20px; +} + +.dashboard_2 .dash_blog { + padding: 25px; +} + +#chart-0, +#chart-1, +#chart-2, +#chart-3 { + height: 380px; +} + + +/*------------------------------------------------------------------ + 13. Footer +-------------------------------------------------------------------*/ + +.footer { + min-height: 65px; + background: #fff; + margin-top: 30px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + border-radius: 5px; + width: 100%; +} + +.footer p { + margin: 0; + line-height: normal; + text-align: center; + font-size: 14px; + font-weight: 300; + color: #214162; + padding: 25px 15px; +} + + +/*------------------------------------------------------------------ + 14. Widgets section +-------------------------------------------------------------------*/ + +.info_people { + padding: 35px; + display: flex; +} + +.info_people .p_info_img { + width: 30%; +} + +.info_people .p_info_img img { + width: 100%; + border-radius: 5px; +} + +.info_people .user_info_cont { + width: 60%; + padding-left: 30px; + padding-top: 25px; +} + +.info_people .user_info_cont h4 { + font-weight: 500; + margin-bottom: 5px; +} + +.info_people .user_info_cont p { + margin: 0; + font-size: 15px; + font-weight: 400; +} + +.info_people .user_info_cont p.p_status { + font-weight: 600; + color: #ff5722; + margin-top: 10px; +} + +.widget_progress_bar { + padding: 40px 40px 50px 40px; +} + +.widget_progress_bar .progress_no { + font-size: 24px; + color: #15283c; + font-weight: 500; + line-height: normal; + margin: 0; +} + +.widget_progress_bar .progress_head { + font-size: 15px; + font-weight: 400; + color: #666; + padding: 0; +} + +.widget_progress_bar .progress_bar { + padding: 0; +} + +.widget_progress_bar .progress_bar .skill { + margin-top: 5px; +} + + +/*------------------------------------------------------------------ + 15. Calendar section +-------------------------------------------------------------------*/ + +.calendar { + float: left; + width: 100%; +} + +.calendar table.unstackable { + display: inline-table; + width: 100%; +} + +.calendar table.unstackable thead tr:nth-child(1) th { + font-weight: 500; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); + border: none; + color: #fff; + text-align: center; + background: #1ed085; + font-size: 21px; + padding: 15px 0; +} + +.calendar table.unstackable thead tr:nth-child(2) { + background: #666; + border: none; + color: #fff; +} + +.calendar table.unstackable thead tr:nth-child(2) th { + font-weight: 500; + text-align: center; + border: none; +} + +.calendar table.unstackable tbody tr { + text-align: center; + font-size: 15px; +} + +.calendar table.unstackable thead tr:nth-child(1) th .prev.link { + position: absolute; + left: 30px; + font-size: 32px; + font-weight: 600; + top: 6px; + cursor: pointer; +} + +.calendar table.unstackable thead tr:nth-child(1) th .next.link { + position: absolute; + right: 30px; + font-size: 32px; + font-weight: 600; + top: 6px; + cursor: pointer; +} + +.link.disabled { + opacity: 0.4; +} + +.calendar tr { + position: relative; +} + +i.icon.chevron.left::before { + content: "\f104"; +} + +i.icon.chevron.right::before { + content: "\f105"; +} + +i.icon, +i.icons { + font-size: 1em; +} + +i.icon { + font-family: fontawesome; + font-style: normal; + font-weight: 400; + text-align: center; +} + + +/*------------------------------------------------------------------ + 16. General Elements +-------------------------------------------------------------------*/ + +.link.today { + background: #ff5722; + color: #fff; + font-weight: 600; +} + + +/** tabbar style 1 **/ + +.tabbar { + float: left; + width: 100%; +} + +.tab-content { + padding: 20px 0; +} + +.tab-content p { + margin: 0; + line-height: normal; + font-size: 14px; + font-weight: 300; +} + +.tabbar .nav-tabs { + border-bottom: solid #eee 1px; +} + +.tabbar nav div.nav-tabs .nav-link { + border-radius: 0; + padding: 8px 20px; + font-size: 14px; + font-weight: 300; +} + + +/** tabbar style 2 **/ + +.tab_style2 .tabbar nav div.nav-tabs .nav-link.active { + background: #ff5722; + color: #fff; + border-color: #ff5722; +} + + +/** tabbar style 3 **/ + +.tab_style3 #v-pills-tab { + float: left; + width: auto; + min-width: 120px; +} + +.tab_style3 #v-pills-tabContent { + float: left; + width: 80%; + padding: 0 20px; +} + +.tab_style3 .tabbar { + display: flex; +} + +.tab_style3 div.tabbar div.nav-pills .nav-link.active { + background: #ff5722; + color: #fff; + border-color: #ff5722; +} + + +/** button section **/ + +.btn { + font-size: 14px; +} + +.button_sction { + float: left; + width: 100%; +} + +.button_sction .button_block { + float: left; + margin: 5px; +} + +.button_sction .button_block button { + margin: 0; +} + + +/** pagination **/ + +.pagination .btn { + background: #1ed085; + color: #fff; + border-color: #1ed085; + width: 45px; + height: 40px; + font-size: 14px; + font-weight: 500; +} + +.pagination.button_section { + margin: 5px; +} + +.pagination .btn.active, +.pagination .btn:hover, +.pagination .btn:focus { + background: #333; + border-color: #333; +} + + +/**-- model bt --**/ + +.model_bt { + padding: 11px 20px 10px; +} + +.dropdown_section { + float: left; + margin: 5px; +} + + +/*------------------------------------------------------------------ + 17. Gallery Section +-------------------------------------------------------------------*/ + +.gallery_section_inner .column { + background: #fff; + box-shadow: 0 0 13px -10px #000; + overflow: hidden; +} + +.heading_section { + border-top: solid #1ed085 2px; + background: #15283c; +} + +.heading_section h4 { + color: #fff; + margin: 0; + font-weight: 200; + text-align: center; + padding: 16px 0 16px; + font-size: 15px; +} + + +/*------------------------------------------------------------------ + 18. Icons +-------------------------------------------------------------------*/ + +.fontawesome-icons-list .fw_icon a { + transition: ease all 0.2s; +} + +.fw_icon a { + float: left; + width: 100%; + padding: 10px 15px; + font-size: 14px; + border-radius: 2px; + color: rgba(21, 40, 60, 0.6); +} + +.fw_icon a i { + width: 25px; + text-align: center; + margin-right: 5px; + font-size: 17px; +} + +.fontawesome-icons-list .fw_icon a:hover, +.fontawesome-icons-list .fw_icon a:focus { + background-color: #1ed085; + color: #fff; + text-decoration: none; + transform: scale(1.1); +} + +.fw_icon { + width: 20%; +} + +.fontawesome-icons-list .fw_icon:nth-child(2n+2) { + background: #f9f9f9; +} + + +/*------------------------------------------------------------------ + 19. Invoice +-------------------------------------------------------------------*/ + +h2.invoice_head { + font-size: 22px; + font-weight: 500; + color: #222; +} + +h2.invoice_head small { + font-size: 13px; + font-weight: 500; +} + +.heading1 h2 i { + position: relative; + top: 1px; +} + +.invoice_blog h4 { + color: #15283c; + background: #f8f8f8; + padding: 15px 20px; + font-weight: 400; + font-size: 18px; +} + +.invoice_blog p { + margin: 0; + padding: 0 20px; + line-height: 26px; +} + +.invoice_blog p strong { + font-weight: 500; + color: #15283c; +} + +.table_row thead { + border: none; +} + +.table_row thead tr { + border: none; + background: #f8f8f8; + color: #15283c; +} + +.table_row thead tr th { + border: none; + font-size: 15px; + font-weight: 500; + padding: 14px 25px 14px; + color: #15283c; + text-transform: uppercase; +} + +.invoice_page .table-striped tbody tr:nth-of-type(2n+2) { + background-color: #f8f8f8; +} + +.invoice_page .table-striped tbody tr:nth-of-type(2n+1) { + background-color: #fff; +} + +.table_row tbody {} + +.table_row tbody tr { + border: none; +} + +.table_row tbody tr td { + font-size: 14px; + font-weight: 400; + padding: 12px 25px 12px; + border: none; + color: #58718a; +} + + +/*------------------------------------------------------------------ + 20. Price table +-------------------------------------------------------------------*/ + +.price_table table.table { + margin: 0; +} + +.payment_option { + list-style: none; + float: left; + width: 100%; +} + +.payment_option li { + display: inline; + float: left; + margin-right: 10px; + border-radius: 5px; +} + +.price_table table th { + font-weight: 500; +} + +.price_table table th, +.price_table table td { + border: none; + padding: 10px 15px; + font-size: 14px; + color: #666; + vertical-align: middle; +} + +p.note_cont { + float: left; + width: 100%; + border: solid #1ed085 1px; + padding: 11px 20px; + border-radius: 3px; + color: #1ed085; + background: rgba(30, 208, 133, 0.05); + margin-top: 15px; +} + + +/*------------------------------------------------------------------ + 21. Mail +-------------------------------------------------------------------*/ + +.mail-box { + border-collapse: collapse; + border-spacing: 0; + display: table; + table-layout: fixed; + width: 100%; +} + +.mail-box aside { + display: table-cell; + float: none; + height: 100%; + padding: 0; + vertical-align: top; +} + +.mail-box .sm-side { + background: #fff; + border-radius: 0; + width: 20%; +} + +.mail-box .lg-side { + background: none repeat scroll 0 0 #fff; + border-radius: 0 4px 4px 0; + width: 80%; +} + +.mail-box .sm-side .user-head { + background: #214162; + border-radius: 0; + color: #fff; + min-height: 80px; + padding: 11px 25px; + float: left; + width: 100%; +} + +.user-head .inbox-avatar { + float: left; + width: 65px; + margin-right: 5px; +} + +.user-head .inbox-avatar img { + border-radius: 100%; +} + +.user-head .user-name { + display: inline-block; + margin: 0 0 0 10px; +} + +.user-head .user-name h5 { + font-size: 16px; + font-weight: 400; + margin-bottom: -5px; + margin-top: 10px; + text-transform: none; +} + +.user-head .user-name h5 a { + color: #fff; +} + +.user-head .user-name span a { + color: #1ed085; + font-size: 13px; +} + +a.mail-dropdown { + background: none repeat scroll 0 0 #80d3d9; + border-radius: 2px; + color: #01a7b3; + font-size: 10px; + margin-top: 20px; + padding: 3px 5px; +} + +.inbox-body { + padding: 20px; + float: left; + width: 100%; +} + +.labels-category { + float: left; + width: 100%; + padding: 20px 0 20px 0; +} + +.btn-compose { + background: #1ed085; + color: #fff; + padding: 12px 0; + text-align: center; + width: 100%; + font-size: 15px; + font-weight: 500; +} + +.btn-compose:hover { + background: #ff5722; + color: #fff; +} + +ul.inbox-nav { + display: inline-block; + margin: 0; + padding: 0 0 20px 0; + width: 100%; +} + +.labels-info { + float: left; + width: 100%; + padding: 20px; +} + +ul.labels-category li { + float: left; + width: 100%; + margin: 5px 0; + padding: 0 20px; +} + +ul.labels-category li a:hover { + color: #1ed085; +} + +.inbox-divider { + border-bottom: 1px solid #ddd; +} + +ul.inbox-nav li { + display: inline-block; + line-height: 45px; + width: 100%; +} + +ul.inbox-nav li a { + display: inline-block; + line-height: 48px; + padding: 0 20px; + width: 100%; + font-size: 15px; +} + +ul.inbox-nav li a:hover, +ul.inbox-nav li.active a, +ul.inbox-nav li a:focus { + background: #214162; + color: #fff; +} + +ul.inbox-nav li a:hover i, +ul.inbox-nav li.active a i, +ul.inbox-nav li a:focus i { + color: #fff; +} + +ul.inbox-nav li a i { + color: #6a6a6a; + font-size: 18px; + padding-right: 10px; + position: relative; + top: 1px; +} + +ul.inbox-nav li a span.label {} + +ul.labels-info li h4 { + color: #5c5c5e; + font-size: 13px; + padding-left: 15px; + padding-right: 15px; + padding-top: 5px; + text-transform: uppercase; +} + +ul.labels-category li h4 { + margin: 0 0 10px 0; + font-size: 21px; + font-weight: 400; + line-height: normal; +} + +ul.labels-info li { + margin: 0; +} + +ul.labels-category li i { + font-size: 12px; + position: relative; + top: -2px; + margin-right: 5px; +} + +ul.labels-info li a { + border-radius: 0; + color: #6a6a6a; +} + +ul.labels-info li a:hover, +ul.labels-info li a:focus { + background: none repeat scroll 0 0 #d5d7de; + color: #6a6a6a; +} + +ul.labels-info li a i { + padding-right: 10px; +} + +.nav.nav-pills.nav-stacked.labels-info p { + color: #9d9f9e; + font-size: 11px; + margin-bottom: 0; + padding: 0 22px; +} + +.inbox-head { + background: #f6f6f6; + border-radius: 0; + color: #fff; + min-height: 80px; + padding: 24px 30px 24px; + background-size: cover; + background-position: center center; +} + +.inbox-head h3 { + display: inline-block; + font-weight: 500; + margin: 0; + padding-top: 3px; + text-transform: none; + letter-spacing: 0; + color: #15283c; + font-size: 21px; +} + +.inbox-head .sr-input { + border: medium none; + border-radius: 0; + box-shadow: none; + color: #222; + float: left; + height: 40px; + padding: 0 20px; + font-size: 14px; + font-weight: 500; + width: 210px; +} + +.inbox-head .sr-btn { + background: #ff5722; + border: medium none; + border-radius: 0; + color: #fff; + height: 40px; + padding: 0; + width: 40px; +} + +.table-inbox { + border: 1px solid #d3d3d3; + margin-bottom: 0; +} + +.table-inbox tr td { + padding: 12px !important; +} + +.table-inbox tr td:hover { + cursor: pointer; +} + +.table-inbox tr td .fa-star.inbox-started, +.table-inbox tr td .fa-star:hover { + color: #f78a09; +} + +.table-inbox tr td .fa-star { + color: #d5d5d5; +} + +.table-inbox tr.unread td { + background: none repeat scroll 0 0 #f7f7f7; + font-weight: 400; + font-size: 13px; +} + +ul.inbox-pagination { + float: right; +} + +ul.inbox-pagination li { + float: left; +} + +.mail-option { + display: inline-block; + margin-bottom: 10px; + width: 100%; +} + +.mail-option .chk-all, +.mail-option .btn-group { + margin-right: 5px; +} + +.mail-option .chk-all, +.mail-option .btn-group a.btn { + background: none repeat scroll 0 0 #fcfcfc; + border: 1px solid #e7e7e7; + border-radius: 3px !important; + color: #afafaf; + display: inline-block; + padding: 5px 10px; +} + +.inbox-pagination a.np-btn { + background: #1ed085; + border: 1px solid #1ed085; + border-radius: 0; + color: #fff; + display: inline-block; + padding: 0 15px; + font-size: 20px; +} + +.mail-option .chk-all input[type="checkbox"] { + margin-top: 0; +} + +.mail-option .btn-group a.all { + border: medium none; + padding: 0; +} + +.inbox-pagination a.np-btn { + margin-left: 5px; +} + +.inbox-pagination li span { + display: inline-block; + margin-right: 10px; + margin-top: 7px; + font-size: 14px; +} + +.fileinput-button { + background: none repeat scroll 0 0 #eeeeee; + border: 1px solid #e6e6e6; +} + +.inbox-body .modal .modal-body input, +.inbox-body .modal .modal-body textarea { + border: 1px solid #e6e6e6; + box-shadow: none; +} + +.btn-send, +.btn-send:hover { + background: none repeat scroll 0 0 #00a8b3; + color: #fff; +} + +.btn-send:hover { + background: none repeat scroll 0 0 #009da7; +} + +.modal-header h4.modal-title { + font-family: "Open Sans", sans-serif; + font-weight: 300; +} + +.modal-body label { + font-family: "Open Sans", sans-serif; + font-weight: 400; +} + +.heading-inbox h4 { + border-bottom: 1px solid #ddd; + color: #444; + font-size: 18px; + margin-top: 20px; + padding-bottom: 10px; +} + +.sender-info { + margin-bottom: 20px; +} + +.sender-info img { + height: 30px; + width: 30px; +} + +.sender-dropdown { + background: none repeat scroll 0 0 #eaeaea; + color: #777; + font-size: 10px; + padding: 0 3px; +} + +.view-mail a { + color: #ff6c60; +} + +.attachment-mail { + margin-top: 30px; +} + +.attachment-mail ul { + display: inline-block; + margin-bottom: 30px; + width: 100%; +} + +.attachment-mail ul li { + float: left; + margin-bottom: 10px; + margin-right: 10px; + width: 150px; +} + +.attachment-mail ul li img { + width: 100%; +} + +.attachment-mail ul li span { + float: right; +} + +.attachment-mail .file-name { + float: left; +} + +.attachment-mail .links { + display: inline-block; + width: 100%; +} + +.fileinput-button { + float: left; + margin-right: 4px; + overflow: hidden; + position: relative; +} + +.fileinput-button input { + cursor: pointer; + direction: ltr; + font-size: 23px; + margin: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + transform: translate(-300px, 0px) scale(4); +} + +.fileupload-buttonbar .btn, +.fileupload-buttonbar .toggle { + margin-bottom: 5px; +} + +.files .progress { + width: 200px; +} + +.table thead th { + font-weight: 400; +} + +.table-hover tbody tr.unread:hover, +.table-hover tbody tr.unread:focus { + color: #333; +} + +.table-hover tbody tr:hover, +.table-hover tbody tr:focus { + background-color: #1ed085 !important; + color: #fff; +} + +.view-message.inbox-small-cells i { + font-size: 17px; +} + +ul.labels-category li p { + margin: 0 0 5px 0; + padding: 0 0 0 18px; +} + +.fileupload-processing .fileupload-loading { + display: block; +} + +* html .fileinput-button { + line-height: 24px; + margin: 1px -3px 0 0; +} + +*+html .fileinput-button { + margin: 1px 0 0; + padding: 2px 15px; +} + +@media (max-width: 767px) { + .files .btn span { + display: none; + } + .files .preview * { + width: 40px; + } + .files .name * { + display: inline-block; + width: 80px; + word-wrap: break-word; + } + .files .progress { + width: 20px; + } + .files .delete { + width: 60px; + } +} + + +/*------------------------------------------------------------------ + 22. Price table page +-------------------------------------------------------------------*/ + +.price_table_head h2 { + line-height: normal; + color: #fff; + text-align: center; + font-weight: 400; + padding: 18px 20px; + font-size: 24px; +} + +.cont_table_price_blog { + text-align: center; +} + +.cont_table_price_blog p { + font-size: 24px; + line-height: normal; + margin: 0; + padding: 15px 0; + font-weight: 400; + border-bottom: solid #ddd 1px; +} + +.cont_table_price ul { + text-align: center; + line-height: normal; + padding: 20px 0 10px; + float: left; + width: 100%; + background: #f8f8f8; +} + +.cont_table_price li { + margin: 10px 0; + float: left; + width: 100%; + padding-bottom: 5px; + font-size: 15px; + font-weight: 300; +} + +.cont_table_price ul li:last-child { + border-bottom: none; +} + +.cont_table_price_blog p span.price_no { + font-size: 60px; + font-weight: 600; +} + +.price_table_bottom { + float: left; + width: 100%; +} + +.price_table_head { + margin: -1px -1px 0; +} + +.table_price { + border: solid #ddd 1px; + padding-bottom: 35px; + margin-bottom: 20px; +} + +.price_table_bottom { + float: left; + width: 100%; + border-top: solid #ddd 1px; + padding-top: 35px; +} + + +/*------------------------------------------------------------------ + 23. Contact page +-------------------------------------------------------------------*/ + +.contact_blog { + float: left; + width: 100%; + border: solid #ddd 1px; + border-radius: 3px; + padding: 30px; +} + +.contact_blog h4.brief { + font-size: 15px; + font-weight: 300; + color: #455a64; + margin: -5px 0 5px; + line-height: normal; +} + +.contact_inner { + float: left; + width: 100%; +} + +.contact_inner .left { + width: 70%; + float: left; + padding-right: 20px; +} + +.contact_inner .right { + width: 30%; + float: left; +} + +.contact_inner h3 { + font-weight: 600; + text-transform: none; + font-size: 20px; + margin-bottom: 10px; + color: #455a64; +} + +.contact_inner p { + font-size: 13px; + margin: 0 0 10px 0; +} + +.contact_inner p strong { + font-weight: 600; +} + +.contact_inner .list-unstyled { + list-style: none; +} + +.contact_inner .list-unstyled li { + float: left; + margin-right: 15px; + font-size: 14px; + color: #58718a; + width: 100%; +} + +.profile_contacts img { + border-radius: 100%; + border: 1px solid #ddd; + padding: 4px; +} + +.bottom_list { + float: left; + width: 100%; + border-top: solid #ddd 1px; + margin-top: 20px; + padding-top: 20px; +} + +.bottom_list .left_rating { + float: left; + width: auto; +} + +.bottom_list .right_button { + float: right; +} + +.bottom_list .left_rating p.ratings { + margin: 0; + font-size: 16px; + padding: 7px 0; +} + +.bottom_list .left_rating p.ratings a {} + +.fa.fa-star { + color: #ff9800; +} + +.profile_img { + float: left; + margin-right: 20px; +} + +.profile_contant { + float: left; + padding: 0 20px 20px 20px; + width: 100%; +} + +.tab-content .msg_list_main ul li { + padding-top: 15px; + padding-bottom: 15px; +} + +.tab-content .msg_list_main ul li { + border-left: none; + padding-left: 15px; + padding-right: 0; +} + +.user_progress_bar .progress_bar { + padding: 0; +} + +.dis_flex { + display: flex; +} + +td ul.list-inline li { + display: inline; + margin: 0 5px; +} + + +/*------------------------------------------------------------------ + 24. Progress bar +-------------------------------------------------------------------*/ + +.progress-bar { + background-color: #1ed085; + box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); +} + +.progress { + display: flex; + height: 10px; + overflow: hidden; + font-size: .75rem; + background-color: #fff; + border-radius: 10px; +} + +.projects .btn.btn-success { + background: #1ed085; + color: #fff; + font-size: 12px; + border: none; + font-weight: 400; + padding: 6px 15px; + border-radius: 50px; +} + +table.projects tr td:first-child { + text-align: center; +} + +.table.projects thead.thead-dark th { + background: #15283c; + font-weight: 300; + padding: 15px 15px; +} + +.table.projects tbody td { + padding: 15px 15px; +} + +.table-responsive-sm { + overflow: auto; +} + + +/*------------------------------------------------------------------ + 25. Login Section +-------------------------------------------------------------------*/ + +.login { + background: #eee; +} + +.full_height { + height: 100vh; +} + +.login_section { + max-width: 640px; + background: #fff; + min-height: 540px; + width: 100%; + box-shadow: 0px 0 10px -8px #000; + margin: 0px; + padding: 0; + border-radius: 10px; + overflow: hidden; +} + +.logo_login { + background: url('images/layout_img/login_image.jpg'); + padding: 50px 0; + background-position: center center; + position: relative; +} + +.logo_login::after { + content: ""; + display: block; + width: 100%; + height: 100%; + position: absolute; + background: rgba(21, 40, 60, .8); + top: 0px; + left: 0; +} + +.logo_login div { + position: relative; + z-index: 1; +} + +.login_form { + padding: 50px 50px; + float: left; + width: 100%; +} + +.login_form form { + float: left; + width: 100%; +} + +.login_form form .field { + display: flex; + margin: 0; +} + +.login_form form .field label.label_field { + margin: 0 30px 0 0; + width: 115px; + line-height: 45px; + text-align: right; + height: 45px; + font-weight: 300; + font-size: 15px; +} + +.login_form form .field { + display: block; + margin: 0 0 20px; +} + +.login_form form .field input { + border-top: none; + border-left: none; + border-right: none; + border-bottom: solid #ddd 2px; + width: 395px; + float: right; + padding: 10px; + line-height: normal; + font-weight: 300; + transition: ease all 0.5s; +} + +.login_form form .field input:hover, +.login_form form .field input:focus { + box-shadow: none; +} + +.login_form .field label.form-check-label .form-check-input { + width: auto; +} + +.hidden { + visibility: hidden; +} + +.login_form .field label.form-check-label { + margin-left: 20px; + position: relative; + top: 0; +} + +.forgot { + float: right; + margin: 11px 0; + position: relative; + left: 0; + color: #ff5722; +} + + +/*------------------------------------------------------------------ + 26. Error +-------------------------------------------------------------------*/ + +.error_page h2 { + font-size: 150px; + line-height: 150px; + text-align: center; + font-weight: 300; +} + +.error_page h3 { + color: #444d5b; + text-align: center; + font-weight: 700; + font-size: 50px; + line-height: 50px; + margin-bottom: 25px; + text-shadow: none; + margin-top: 10px; +} + +.error_page h3+p { + font-size: 16px; + margin-top: -10px; + margin-bottom: 30px; + text-align: center; +} + +.error_404 { + background-size: cover; + background-color: #fff; +} + + +/*------------------------------------------------------------------ + 27. Map +-------------------------------------------------------------------*/ + +#map { + height: 100%; + min-height: 720px; +} diff --git a/src/main/resources/static/images/gaia.png b/src/main/resources/static/images/gaia.png new file mode 100644 index 000000000..522dabcc3 Binary files /dev/null and b/src/main/resources/static/images/gaia.png differ diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html new file mode 100644 index 000000000..6935f096c --- /dev/null +++ b/src/main/resources/templates/index.html @@ -0,0 +1,101 @@ + + + + + Gaia - A terraform UI + + + +
+
+ +
+ + +
+ +
+ +
+
+
+
+
+

Dashboard

+
+
+
+
+
+ +
+
+
+ +
+
+
+
+

12

+

Modules

+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/layout/header.html b/src/main/resources/templates/layout/header.html new file mode 100644 index 000000000..196dd6fbe --- /dev/null +++ b/src/main/resources/templates/layout/header.html @@ -0,0 +1,26 @@ + + + + + + + + + + Gaia - A terraform UI + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/layout/sidebar.html b/src/main/resources/templates/layout/sidebar.html new file mode 100644 index 000000000..efc684cc7 --- /dev/null +++ b/src/main/resources/templates/layout/sidebar.html @@ -0,0 +1,30 @@ + + + \ No newline at end of file diff --git a/src/main/resources/templates/layout/topbar.html b/src/main/resources/templates/layout/topbar.html new file mode 100644 index 000000000..af87a5d3e --- /dev/null +++ b/src/main/resources/templates/layout/topbar.html @@ -0,0 +1,20 @@ + +
+ +
+ \ No newline at end of file diff --git a/src/main/resources/templates/module.html b/src/main/resources/templates/module.html index cb51bea46..5bf389cbf 100644 --- a/src/main/resources/templates/module.html +++ b/src/main/resources/templates/module.html @@ -1,67 +1,108 @@ - - - - Gaia - Modules list - + + + + + Gaia - Edit module - - + +
+
+ +
+ + +
+ +
+ +
+
+
+
+
+

Module

+
+
+
+
+
+
-
+
-
+
+
+
+
+
+
+
+ + + + + + - + @@ -98,5 +139,14 @@

Variables