@import "popup";
@import "accordion";
@import "rightclickmenu";

@ribbonCol1:#8dc75a;
@ribbonCol2:#ffffff;
@ribbonCol3:#222222;
@ribbonCol4:#000000;
@ribbonCol5:#888888;

@bs1: 5px solid @ribbonCol1;
@bs2: 2px solid @ribbonCol1;
@topH:90px;
@treeWidth:260px;
@treeItemPadding:10px;
@animTime:0.5s;
@tabsAnimTime:1s;



body,html{
    overflow-x: hidden;
    background-color: @ribbonCol3;
  //  -ms-overflow-style: none;
   // overflow:hidden;

   /* color: #ffffff;*/
    margin: 0 auto;
//  -webkit-touch-callout: none;
//    -webkit-user-select: none;
//     -khtml-user-select: none;
//       -moz-user-select: none;
//        -ms-user-select: none;
//            user-select: none;
    h6 {
        color:white;
        padding-top:7px;
        }
}

/* apply css for specific page */
#legendpage.posit {
  .ribbon{
      position:absolute;
  }
}

.ribbon{

    width: 100%;
    height:100%;
  
    top:0px;
    left:0px;
    z-index: 0;
    margin-bottom:-135px;
    overflow: hidden;

    background-color: rgba(255,0,0,0);

    #tabs{
        margin-top: 0px;
    }


    .tab{
        padding-left: 10px;
        padding-right: 10px;


        &:hover{
            cursor: pointer;
            background-color: @ribbonCol1;
            color: @ribbonCol2;
            border-radius: 5px 5px 0px 0px;
            height: 45px;
           -webkit-box-shadow: inset 0px 1px 0px 1px @ribbonCol2;
           -moz-box-shadow: inset 0px 1px 0px 1px @ribbonCol2;
            box-shadow: inset 0px 1px 0px 1px @ribbonCol2;
        }
    }

    .tab.active{
        .tab;
           background-color: @ribbonCol1;
            color: @ribbonCol2;
            border-radius: 5px 5px 0px 0px;
           -webkit-box-shadow: inset 0px 1px 0px 1px @ribbonCol4;
           -moz-box-shadow: inset 0px 1px 0px 1px @ribbonCol4;
            box-shadow: inset 0px 1px 0px 1px @ribbonCol4;

          &:hover{
            cursor: pointer;
            background-color: @ribbonCol1;
            color: @ribbonCol2;
            border-radius: 5px 5px 0px 0px;

           -webkit-box-shadow: inset 0px 1px 0px 1px @ribbonCol2;
           -moz-box-shadow: inset 0px 1px 0px 1px @ribbonCol2;
            box-shadow: inset 0px 1px 0px 1px @ribbonCol2;
        }
    }

    .logo{
        float: right;
        width: 190px;
        margin-top: 12.1px;
        margin-right: 10px;
    }

    @media screen and (max-width: 1515px) {

      .logo{
        width: 130px;
       }

       .compass{
            width: 140px;

        }

        .l{
        width:36px;
        }
        .r{
        width:36px;
        }
        .b{
        width:36px;
        }
        .t{
        width:36px;
        }
    }

    @media screen and (max-width: 1352px) {

       .compass{
            width: 120px;
        }
       .l{
        width:30px;
        }
                .r{
        width:30px;
        }
        .b{
        width:30px;
        }
       .t{
        width:30px;
        }
    }

    @media screen and (max-width: 500px) {
        .logo{
           width: 80px;
        }
    }

  .sessiontime{
    color: #2ca02c;
    float: right;
    width: 300px;
    margin-top: 15px;
    margin-right: 5px;
  }

    .navbar{
        background-color:@ribbonCol3;
        border: none;
        border-radius: 0px;
        border-bottom: @bs1;
        z-index: 9999;
        height: 10px;
        margin-top: -5px;
        margin-left: 0px;
        margin-bottom:0px!important;

        .collapse{
            background-color: @ribbonCol3;
        }


        .container-fluid{
           .collapse{
             .nav{
                    li{
                        color: @ribbonCol2;
                        margin-right: 5px;
                        padding-top: 8px;
                        margin-top: 10px;
                        padding-bottom: 0px;
                        margin-bottom: 0px;
                        height: 35px;
                        font-size: 14px;

                    }

                }

           }

        }
    }


    .categories-content{
        float:left;
        transition: opacity @animTime;
    }

@media screen and (max-width: 1100px) {

  .categories-content{

    }

    .navbar-toggle{
        float:left;
        margin-left:5px;
    }

} 

    .categories-content.disable{
        .categories-content;
        opacity: 0;
    }

    .categories.disable{
        margin-top:-@topH;
    }

    .categories{
        transition: margin-top @animTime;
        padding-left:5px;
        height: @topH;
        float:left;
        width: 100%;
        background-color: @ribbonCol3;
        border-bottom: @bs1;
        display: block; 
        margin-top: 5px;
        @keyframes ShowCategory{
            to{
                opacity:1;
            }

        }
            .category.active{
                .category;
                display: block;
                animation-name: ShowCategory;
                animation-duration: @tabsAnimTime;
                animation-fill-mode: forwards;
                //transition: opacity @animTime;
            }
            .category{
                //position: absolute;
                float:left;
                opacity:0;
               // margin-top:-40px;
                //top:45px;
                //left:0px;
                display:none;
               // transition: opacity @animTime;

                .section{
                    padding-left: 0px;
                    padding-right: 5px;
                    float: left;
                    border-right: @bs2;


                    .button{
                        border-radius: 5px 5px 5px 5px;
                        border: 1px solid rgba(255,255,255,0.1);
                        float: left;
                        margin: 5px;
                        margin-right: 0px;
                        padding: 5px;
                        padding-left: 10px;
                        padding-right: 10px;
                        text-align: center;
                        margin-bottom: 2px;
                        padding-bottom: 2px;
                        margin-top: 7px;
                        font-size: 11px;

                        input{
                            height: 28px;
                            color: @ribbonCol3;
                            padding: 5px;
                            margin-bottom: 3px;
                            text-align: center;

                            &:hover{
                                cursor: pointer;
                            }
                        }



                        .title{
                                clear: both;
                                color: @ribbonCol2;
                        }

                        &:hover{
                            cursor: pointer;
                            background-color:  @ribbonCol1;
                            border: 1px solid @ribbonCol2;

                        }
                    }

                    .button.active{
                         .button;
                          background-color: @ribbonCol4!important;
                          border-radius: 5px 5px 5px 5px;
                          border: 1px solid @ribbonCol1;

                          &:hover{
                            cursor: pointer;

                        }
                    }

                  @media screen and (max-width: 1550px)
                  {
                    .button{
                      font-size: 9px;
                      margin: 1px;
                      margin-top: 3px;
                    }
                    .button.active{
                      font-size: 9px;
                      margin: 1px;
                      margin-top: 3px;
                    }
                  }


                    .title{
                        clear: both;
                        text-align: center;
                        color: @ribbonCol1;
                        font-weight: bold;


                    }
                }
              @media screen and (max-width: 1550px)
              {
                .section{
                  font-size: 12px;
                }
              }
            }
    }

    @media screen and (max-width: 767px) 
    {
       .categories
        {
          margin-top: 0px;
        }

        .logo{
            margin-top: -41px;
        }
    }
}

.tree{
    float: left;
    background-color:@ribbonCol3;
    color:#ffffff;
    padding:0px;
    margin:0px;
    width: @treeWidth;
    transition: width @animTime, opacity @animTime;
    .checkbox{
        float:left;
    }

    .item-title{
        &:hover{
            cursor: pointer;
        }
    }

    .collapsibleList{
      list-style-type: none;
      padding-left: 25px;
    }

  .collapsibleListOpen{
    cursor           : pointer;
    list-style-image: url('../icons/normal/list_minus_tree.png');

  }

  .collapsibleListClosed{
    cursor           : pointer;
    list-style-image: url('../icons/normal/list_add_tree.png');
  }

  .collapsibleListNoChildren{
    cursor           : pointer;
    list-style-image: url('../icons/normal/list_nochildren_tree.png');
  }



    .group{

        color:#ffffff;
        list-style-type: none;
        padding-bottom: 10px;
        padding-left: 0;

      a{
        color:#ffffff;
      }

    }



   .layer{
        color:#8dc75a;
        padding-bottom: 10px;

     a{
       color:#8dc75a;
     }
    }

    .layer1{
      color:#8dc75a;

      a{
        color:#8dc75a;
      }

    }

    .tree-content{

         transition: width @animTime, opacity @animTime;
         max-height:580px;
         padding-left: 5px;
         overflow-x: hidden;
         overflow-y: auto;

         scrollbar-base-color: #C0C0C0;

         scrollbar-base-color: #8dc75a;

         scrollbar-3dlight-color: #C0C0C0;

         scrollbar-highlight-color: #C0C0C0;

         scrollbar-track-color: #222222;

         scrollbar-arrow-color: #8dc75a;

         scrollbar-shadow-color: #C0C0C0;

         scrollbar-dark-shadow-color: #C0C0C0;

    }

    //simple max-width query
    @media screen and ( min-height: 845px ){
        .tree-content {
           max-height:730px;
        }
    }

     //simple max-width query
    @media screen and ( min-height: 945px ){
        .tree-content {
           max-height:830px;
        }
    }

    //simple max-width query
    @media screen and ( min-height: 1045px ){
        .tree-content {
           max-height:930px;
        }
    }

    //simple max-width query
    @media screen and ( min-height: 1145px ){
        .tree-content {
           max-height:1030px;
        }
    }
        //simple max-width query
    @media screen and ( min-height: 1245px ){
        .tree-content {
           max-height:1145px;
        }
    }

    .tree-content.disable{
        .tree-content;
         opacity: 0;
        // width:0%;
    }


}

.tree.disable{
   .tree;
   width:0.01px;
}


.top{

}

.bottom{
     width:100%;
}

.world{
    float:left;


    .renderer{
        width:100%;
        height:100%;
        position: absolute;
        border: none;

    }
}

.world2{
    float:left;


    .renderer2{
        width:100%;
        height:100%;
        position: absolute;
        border: none;

    }
}
.search{
    margin:10px;

    .title{
        padding-left:10px;
    }

    .input{
        input{
            width:70%;
            float:left;
            height:30px;
            border:none;
            color:@ribbonCol5;
            padding-left: 10px;
        }

        .search-button{
            background-color: @ribbonCol1;
            padding: 5px 10px 5px 10px;
            text-align: center;
            float:left;
            height:30px;
            color: #ffffff;

            &:hover{
                cursor: pointer;
            }
        }
    }

    .aditional-info{
        margin-top: 10px;
        float:left;

        .search-item{
             &:hover{
                 cursor: pointer;
             }
        }
    }
}

.compass{
    float: right;

}

.loader{
    background-color: @ribbonCol3;
    width:100%;
    height:100%;
    position: absolute;
    z-index: 100;
    margin: 0 auto;
    text-align: center;
    top:0;

     img{
        margin-top: 10%;
    }
}

.no-resolution{
    background-color: @ribbonCol3;
    width:100%;
    height:100%;
    position: absolute;
    z-index: 200;
    margin: 0 auto;
    text-align: center;
    top:0;

    img{
        margin-top: 20%;
    }
}

.content-container{
    background-color: @ribbonCol3;
    margin-top: 135px;
    min-height:650px;   /* add height cause a horizondal scroll bar is shown after feedbak pop up*/
}

@media screen and (min-width: 1300px) {

  .content-container{
      min-height:800px;   /* add height cause a horizondal scroll bar is shown after feedbak pop up*/
  }

}

.container{
    margin-top: 135px;
    padding-top: 15px;
}

#close {
    position: absolute;
    right: 1px;
    text-align: center;
    top: 1px;
}


.org_name { 
    position:absolute;
    border:solid 1px #2d2d2d;  
    color: white; background-color: rgb(89, 89, 89);
    padding:10px 100px 1px 100px; 
    margin-top:-50px; 
    margin-right: -50%;
    left: 42%;
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px; 
    border-radius: 5px;
  
}


.org_name{
    border:solid 0px #e8e8e8;
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright:0px; 
    -moz-border-radius-bottomleft:5px; 
    -moz-border-radius-bottomright:5px; 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-top-right-radius:0px; 
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:0px; 
    border-top-right-radius:0px; 
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

@media screen and (max-width: 1090px) { 
    .org_name { 
        display:none;
     }
}

@media screen and (max-width: 767px) {
  #drop_top_right {
      visibility:hidden;
  }
  .break_line{
      padding-bottom: 45px;
  }

}

@media screen and (max-width: 1100px) {

  #scroll_bar{
      overflow-y: scroll; 
      height:800px;
  }

}

@media screen and (min-width: 1100px) {

  #scroll_bar{
      overflow-y: scroll; 
      height:900px;
  }
}

.no_url_colour th a{
    color:black;
}

.no_url_colour i{
  font-size: 12px;
}

.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */
  padding-top: 300px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal1-content1 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
}

#search_button {
    border-radius: 4px;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 10px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 110px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

#search_filters {
   margin-right: 25px;
}

@media screen and (max-width: 1535px) {
  #search_filters {
     margin-right: 50px;
  }
}

@media screen and (max-width: 1250px) {
  #search_filters {
     margin-right: 80px;
  }
}

@media screen and (max-width: 990px) {
  #search_filters {
     margin-left: 90px;
  }
}

#sub_filters input[type=text]{
  max-width: 150px;
  margin-left: 10px;
  margin-bottom: 5px;
  height: 27px;
  display: none;
}

.graph_labels{
  color:white;
  font-size:12px;
}

.graph_style{
  float:left;
}

@font-face {
  font-family: 'weather';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
  font-weight: normal;
  font-style: normal;
}

#weather {
  margin: 0px auto;
  text-align: center;
  text-transform: uppercase;
}

#weather i {
  color: #fff;
  font-family: weather;
  font-size: 150px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

#weather h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 100px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}

#weather ul {
  margin: 0;
  padding: 0;
}

#weather li {
  background: #fff;
  background: rgba(255,255,255,0.90);
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}

#weather .currently {
  margin: 0 20px;
}

#weather button {
  display: block;
  margin: 15px auto;
  width: 140px;
  padding: 5px;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 5px;
}


#close1 {
  float: right;
  margin-top: 0;
  padding-top: 0;
  background: #fff;
  z-index: 100;
  display:inline-block;
  font-size: 40px;
  cursor: pointer;
}

.dropdownlist{
  width: 15em;
  margin: 0 auto;

  margin-bottom: 1em; // Cosmetic value

  dt {
    a {
      display: block;
      height: 2.5em;
      width: 100%;

      border: 1px solid #ecf0f1;
      border-radius: 3px;
      text-decoration: none;

      &:hover, &:active {
        border-color: #bdc3c7;
      }
    }
  }

  dd {
    position: relative;

    ul {
      display: none;
      position: absolute;
      left: 0;
      top: -2.5em;
      width: 100%;

      list-style: none;
      background: #fff none repeat scroll 0 0;
      border: 1px solid #bdc3c7;
      border-radius: 3px;

      li:first-child a:hover{
        border-radius: 3px 3px 0 0;
      }

      li:last-child a:hover{
        border-radius: 0 0 3px 3px;
      }
    }

    li a {
      display: block;
      padding: 0 1em;

      line-height: 2.5em;
      text-decoration: none;

      &:hover{
        background-color: #2ecc71;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}

.selected3{
  font-weight: 700;
}

/* Profile page */
 #sideflap {
   position: fixed;
   display: block;
   width: 300px;
   top: 0;
   bottom: 0;
   left: 0;
   box-shadow: 0 0 20px -4px #000;
   color: rgba(250, 250, 250, 0.8);
   font-family: domine;
 }

#username {
  display: block;
  text-align: center;
  font-size: 35px;
  z-index: 5;
}

#usertags {
  display: block;
  text-align: center;
  font-size: 19px;
  padding-bottom: 1em;
  padding-top: 0.7em;
  border-bottom: 1px solid;
}

#linkbtn {
  display: inline-block;
  text-align: center;
  float: right;
  padding: 0 1em;
  font-size: 16px;
  vertical-align: center;
  border: 2px solid;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(250, 250, 250, 0);
  transition: background 200ms;
  user-select: none;
}
#linkbtn:hover {
  background: rgba(250, 250, 250, 0.2);
}

#userstats {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  left: 0;
  right: 0;
  bottom: 0;
  top: 230px;
  text-align: left;
  padding: 10px;
  font-size: 18px;
}

#biotext {
  display: inline-block;
  width: 65%;
  font-size: 14px;
}

#bookshelf {
  display: block;
  position: fixed;
  left: 300px;
  right: 0;
  top: 115px;
  bottom: 0;
  padding: 10px;
  overflow-Y: auto;
}
/* End of Profile page style*/


/* Common styles of menus */
@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot');
  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.woff') format('woff'),
  url('../fonts/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.dl-wrapmenu{
  width: 100%;
}

.dl-menuwrapper {
  width: 100%;
  z-index: 99999;
  max-width: 300px;
  float: left;
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 200%;
  perspective-origin: 50% 200%;
}

.dl-menuwrapper:first-child {
  margin-right: 100px;
}


.dl-menuwrapper button {
  background: @ribbonCol1;
  border: none;
  width: 48px;
  height: 45px;
  text-indent: -900em;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  outline: none;
}

.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
  background: @ribbonCol1;
}

.dl-menuwrapper button:after {
  content: '';
  position: absolute;
  width: 68%;
  height: 5px;
  background: #fff;
  top: 10px;
  left: 16%;
  box-shadow:
          0 10px 0 #fff,
          0 20px 0 #fff;
}

.dl-menuwrapper ul {
  padding: 0;
  list-style: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.dl-menuwrapper li {
  position: relative;
}

.dl-menuwrapper li a {
  display: block;
  position: relative;
  padding: 15px 20px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 300;
  color: #fff;
  outline: none;
  text-decoration: none;
}

.no-touch .dl-menuwrapper li a:hover {
  background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
  padding-left: 30px;
  background: rgba(0,0,0,0.1);
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
  position: absolute;
  top: 0;
  line-height: 50px;
  font-family: 'icomoon';
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e000";
}

.dl-menuwrapper li.dl-back:after {
  left: 10px;
  color: rgba(0,0,0,1);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
  right: 10px;
  color: rgba(0,0,0,1);
}

.dl-menuwrapper .dl-menu {
  margin: 5px 0 0 0;
  position: absolute;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
  transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
  display: none;
}

/*
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link.
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
  display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
  display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  margin: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
  -webkit-animation: MenuAnimOut1 0.4s;
  animation: MenuAnimOut1 0.4s;
}

.dl-menu.dl-animate-out-2 {
  -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
  animation: MenuAnimOut2 0.3s ease-in-out;
}

.dl-menu.dl-animate-out-3 {
  -webkit-animation: MenuAnimOut3 0.4s ease;
  animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
  -webkit-animation: MenuAnimOut4 0.4s ease;
  animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
  -webkit-animation: MenuAnimOut5 0.4s ease;
  animation: MenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut2 {
  0% { }
  100% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut3 {
  0% { }
  100% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut4 {
  0% { }
  100% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut5 {
  0% { }
  100% {
    -webkit-transform: translateY(40%);
    opacity: 0;
  }
}

@keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

@keyframes MenuAnimOut2 {
  0% { }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes MenuAnimOut3 {
  0% { }
  100% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
}

@keyframes MenuAnimOut4 {
  0% { }
  100% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
}

@keyframes MenuAnimOut5 {
  0% { }
  100% {
    -webkit-transform: translateY(40%);
    transform: translateY(40%);
    opacity: 0;
  }
}

.dl-menu.dl-animate-in-1 {
  -webkit-animation: MenuAnimIn1 0.3s;
  animation: MenuAnimIn1 0.3s;
}

.dl-menu.dl-animate-in-2 {
  -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
  animation: MenuAnimIn2 0.3s ease-in-out;
}

.dl-menu.dl-animate-in-3 {
  -webkit-animation: MenuAnimIn3 0.4s ease;
  animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
  -webkit-animation: MenuAnimIn4 0.4s ease;
  animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
  -webkit-animation: MenuAnimIn5 0.4s ease;
  animation: MenuAnimIn5 0.4s ease;
}

@-webkit-keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn2 {
  0% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn5 {
  0% {
    -webkit-transform: translateY(40%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes MenuAnimIn2 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes MenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes MenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes MenuAnimIn5 {
  0% {
    -webkit-transform: translateY(40%);
    transform: translateY(40%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
  -webkit-animation: SubMenuAnimIn1 0.4s ease;
  animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
  -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
  animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
  -webkit-animation: SubMenuAnimIn3 0.4s ease;
  animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
  -webkit-animation: SubMenuAnimIn4 0.4s ease;
  animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
  -webkit-animation: SubMenuAnimIn5 0.4s ease;
  animation: SubMenuAnimIn5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn1 {
  0% {
    -webkit-transform: translateX(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn2 {
  0% {
    -webkit-transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn5 {
  0% {
    -webkit-transform: translateZ(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn1 {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn2 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn5 {
  0% {
    -webkit-transform: translateZ(-200px);
    transform: translateZ(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
  -webkit-animation: SubMenuAnimOut1 0.4s ease;
  animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
  -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
  animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
  -webkit-animation: SubMenuAnimOut3 0.4s ease;
  animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
  -webkit-animation: SubMenuAnimOut4 0.4s ease;
  animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
  -webkit-animation: SubMenuAnimOut5 0.4s ease;
  animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut2 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut3 {
  0% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut4 {
  0% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut5 {
  0% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-200px);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut2 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut3 {
  0% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut4 {
  0% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut5 {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-200px);
    transform: translateZ(-200px);
    opacity: 0;
  }
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
  position: relative;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
  display: block;
}

.no-js .dl-menuwrapper li.dl-back {
  display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
  background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
  content: '';
}

.logo1{
  float: right;
  padding-right: 5%;
  padding-top: 2%;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);


.feedback-button {

  height:40px;
  border:solid 3px #ffffff;
  border-radius: 5px;
  background:@ribbonCol1;
  width:100px;
  line-height:32px;
  -webkit-transform:rotate(-90deg);
  font-weight:600;
  color:white;
  transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  text-align:center; font-size:17px;
  position:fixed; right:-40px; top:45%;
  font-family: "Roboto", helvetica, arial, sans-serif;
  z-index:999; }

#feedback-main{
  display:none;
  float:left;
  padding-top:0;
}

#feedback-div {
  background-color:rgba(72,72,72,0.4);
  padding-left:35px;
  padding-right:35px;
  padding-top:35px;
  padding-bottom:50px;
  width: 450px;
  float: left;
  left: 50%;
  position: absolute;
  margin-top:30px;
  margin-left: -260px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  z-index: 99999;

  a{
    text-decoration: none;
    color: #fff;
  }
}

.feedback-input {
  color:#000000;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px;
  margin-bottom: 10px;
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
  background: #fff;
  border: 3px solid @ribbonCol1;
  color: #000000;
  outline: none;
  padding: 13px 13px 13px 54px;
}

///* Icons ---------------------------------- */
.subject{
  padding-top: 30px;
}

#feedback-name{
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  border-radius: 5px;
}

#feedback-name:focus{
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#feedback-email{
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  border-radius: 5px;
}

#feedback-email:focus{
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#feedback-subject{
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  border-radius: 5px;
}

#feedback-subject:focus{
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#feedback-comment{
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
  border-radius: 5px;
}

#feedback-comment {
  width: 100%;
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

//input:hover, #feedback-comment:hover, input:focus, #feedback-comment:focus {
//  background-color:white;
//}

#feedback-button-green{
  font-family: "Roboto", helvetica, arial, sans-serif;
  float:left;
  width: 100%;
  border: #fbfbfb solid 4px;
  border-radius: 5px;
  cursor:pointer;
  background-color: @ribbonCol1;
  color:white;
  font-size:24px;
  padding-top:22px;
  padding-bottom:22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#feedback-button-green:hover{
  background-color: rgba(0,0,0,0);
  color: @ribbonCol1;
}

.feedback-ease {
  width: 0;
  height: 74px;
  background-color: #fbfbfb;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  -ms-transition: .3s ease;
  transition: .3s ease;
}

.feedback-submit:hover .feedback-ease{
  width:100%;
  background-color:@ribbonCol5;
}

@media only screen and (max-width: 580px) {
  #feedback-div{
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}

.feedback-close{
  float: right;
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.feedback-reply{
  padding-top: 30px;
  color: #fff;
  font-size:18px;
  font-weight:800;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

//Progress bar when export csv
.dots-cont {
  position: absolute;
  right: 50px;
  bottom: -13px;
}

.dot {

  width: 12px;
  height: 12px;
  background: #0fcb0f;
  display: inline-block;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
  margin: 0px 3px;
  position: relative;
  animation: jump 0.7s infinite;
}

.dots-cont:hover > .dot {
  /* position: relative; */
  /* bottom: 0px; */
  animation: none;
}

.dots-cont .dot-1 {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.dots-cont .dot-2 {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.dots-cont .dot-3 {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

@keyframes jump {
  0%   {bottom: 0px;}
  20%  {bottom: 5px;}
  40%  {bottom: 0px;}
}