1 /*!

     2  * @brief Geoportal Extension for Leaflet

     3  *

     4  * This software is released under the licence CeCILL-B (Free BSD compatible)

     5  * @see http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt

     6  * @see http://www.cecill.info/licences/Licence_CeCILL-B_V1-fr.txt

     7  * @see http://www.cecill.info/

     8  *

     9  * copyright CeCILL-B

    10  * copyright IGN

    11  * @author IGN

    12  * @version 0.8.1

    13  * @date 2016-12-02

    14  *

    15  */

    16 /* MOUSE POSITION */

    17 

    18 /* Showing/hiding drawing panel */

    19 

    20 label[id^=GPshowDrawingPicto-] {

    21   display: inline-block;

    22 }

    23 

    24 input[id^=GPshowDrawing-] + label {

    25   display: block;

    26 }

    27 

    28 input[id^=GPshowDrawing-]:checked + label {

    29   display: none;

    30 }

    31 

    32 input[id^=GPshowDrawing-] + label + div {

    33   display: none;

    34 }

    35 

    36 input[id^=GPshowDrawing-]:checked + label + div {

    37   display: block;

    38 }

    39 

    40 /* General panels */

    41 

    42 div[^=GPdrawingPanel-] {

    43   width: 240px;

    44   overflow: hidden;

    45 }

    46 

    47 /* Basic infos */

    48 

    49 div[^=GPdrawingBasicPanel-] {

    50   padding: 10px 15px;

    51 }

    52 

    53 .GPdrawingLabel,

    54 .GPdrawingCoords {

    55   display: inline-block;

    56   line-height: 20px;

    57 }

    58 

    59 .GPdrawingLabel {

    60   width: 80px;

    61   font-weight: bold;

    62 }

    63 

    64 .GPdrawingCoords {

    65   width: 110px;

    66 }

    67 

    68 /* markers selector */

    69 .marker-input-radio {

    70   display : none ;

    71 }

    72 

    73 input.marker-input-radio:checked + label {

    74   border: 1px solid red;

    75 }

    76 

    77 

    78 /* Calc waiting */

    79 

    80 .GPelevationPathCalcWaitingContainerVisible,

    81 .GPelevationPathCalcWaitingContainerHidden {

    82   position: absolute;

    83   top: 32px;

    84   bottom: 0;

    85   left: 0;

    86   right: 0;

    87   background-color: rgba(255,255,255,0.9);

    88   font-size: 1.5em;

    89   font-weight: bold;

    90   overflow: hidden;

    91 }

    92 

    93 .GPelevationPathCalcWaitingContainerVisible {

    94   display: -webkit-flex;

    95   display: flex;

    96 }

    97 

    98 .GPelevationPathCalcWaitingContainerHidden {

    99   display: none;

   100 }

   101 

   102 .GPelevationPathCalcWaiting {

   103   margin: auto;

   104 }

   105 

   106 .GPelevationPathCalcWaitingContainerVisible,

   107 .GPelevationPathCalcWaitingContainerHidden {

   108   border-radius: 5px;

   109 }

   110 

   111 /* CSS : Raw */

   112 

   113 #profileElevationRaw {

   114   resize: none;

   115   padding: unset;

   116 }

   117 

   118 /* CSS : default */

   119 

   120 /* suppression des puces sur les listes */

   121 div#profileElevationByDefault {

   122   display: -webkit-flex;

   123   display: -ms-flexbox;

   124   display: -webkit-box;

   125   display: flex;

   126   flex-direction: column;

   127   /*flex-flow: row wrap;*/

   128   height: inherit;

   129   width: inherit;

   130 }

   131 

   132 div#profileElevationByDefault > * {

   133   -webkit-flex: 1;

   134   -webkit-box-flex: 1;

   135       -ms-flex: 1;

   136           flex: 1 100%;

   137 }

   138 

   139 ul#data-default {

   140     list-style: none;

   141     box-sizing: border-box;

   142     padding: 0px;

   143     position : relative;

   144     margin : 10px;

   145     margin-top: auto;

   146     margin-bottom: auto;

   147     height: 100px;

   148     /*width: 100%*/

   149 }

   150 

   151 .z-title-vertical {

   152   align-self: flex-start;

   153   padding-left: 10px;

   154   /*position: absolute;*/

   155   /*transform: rotate(-90deg);*/

   156 }

   157 

   158 .x-title-horizontal {

   159   align-self: flex-end;

   160   padding-right: 10px;

   161   /*position: absolute;*/

   162   /*transform: translate(120px, -30px);*/

   163 }

   164 

   165 .z-axis {

   166     border-right: none;

   167     border-left: solid 2px;

   168     cursor: default;

   169 }

   170 

   171 .x-axis {

   172     border-top: none;

   173     border-bottom: solid 2px;

   174     cursor: default;

   175 }

   176 

   177 ul#data-default li.percent {

   178     display: inline-block;

   179     vertical-align: bottom;

   180     background-color: #C77A04;

   181     opacity : 0.3;

   182     border-top: solid 1px;

   183     border-radius: 2px;

   184     cursor: pointer;

   185 }

   186 

   187 li.axe span.bottom-axis {

   188     vertical-align: bottom;

   189 }

   190 

   191 ul#data-default .percent:hover {

   192     display: inline-block;

   193     /*vertical-align: bottom;*/

   194     background-color: #f00;

   195 }

   196 

   197 .v0 { height: 0%; }

   198 .v1 { height: 1%; }

   199 .v2 { height: 2%; }

   200 .v3 { height: 3%; }

   201 .v4 { height: 4%; }

   202 .v5 { height: 5%; }

   203 .v6 { height: 6%; }

   204 .v7 { height: 7%; }

   205 .v8 { height: 8%; }

   206 .v9 { height: 9%; }

   207 .v10 { height: 10%; }

   208 .v11 { height: 11%; }

   209 .v12 { height: 12%; }

   210 .v13 { height: 13%; }

   211 .v14 { height: 14%; }

   212 .v15 { height: 15%; }

   213 .v16 { height: 16%; }

   214 .v17 { height: 17%; }

   215 .v18 { height: 18%; }

   216 .v19 { height: 19%; }

   217 .v20 { height: 20%; }

   218 .v21 { height: 21%; }

   219 .v22 { height: 22%; }

   220 .v23 { height: 23%; }

   221 .v24 { height: 24%; }

   222 .v25 { height: 25%; }

   223 .v26 { height: 26%; }

   224 .v27 { height: 27%; }

   225 .v28 { height: 28%; }

   226 .v29 { height: 29%; }

   227 .v30 { height: 30%; }

   228 .v31 { height: 31%; }

   229 .v32 { height: 32%; }

   230 .v33 { height: 33%; }

   231 .v34 { height: 34%; }

   232 .v35 { height: 35%; }

   233 .v36 { height: 36%; }

   234 .v37 { height: 37%; }

   235 .v38 { height: 38%; }

   236 .v39 { height: 39%; }

   237 .v40 { height: 40%; }

   238 .v41 { height: 41%; }

   239 .v42 { height: 42%; }

   240 .v43 { height: 43%; }

   241 .v44 { height: 44%; }

   242 .v45 { height: 45%; }

   243 .v46 { height: 46%; }

   244 .v47 { height: 47%; }

   245 .v48 { height: 48%; }

   246 .v49 { height: 49%; }

   247 .v50 { height: 50%; }

   248 .v51 { height: 51%; }

   249 .v52 { height: 52%; }

   250 .v53 { height: 53%; }

   251 .v54 { height: 54%; }

   252 .v55 { height: 55%; }

   253 .v56 { height: 56%; }

   254 .v57 { height: 57%; }

   255 .v58 { height: 58%; }

   256 .v59 { height: 59%; }

   257 .v60 { height: 60%; }

   258 .v61 { height: 61%; }

   259 .v62 { height: 62%; }

   260 .v63 { height: 63%; }

   261 .v64 { height: 64%; }

   262 .v65 { height: 65%; }

   263 .v66 { height: 66%; }

   264 .v67 { height: 67%; }

   265 .v68 { height: 68%; }

   266 .v69 { height: 69%; }

   267 .v70 { height: 70%; }

   268 .v71 { height: 71%; }

   269 .v72 { height: 72%; }

   270 .v73 { height: 73%; }

   271 .v74 { height: 74%; }

   272 .v75 { height: 75%; }

   273 .v76 { height: 76%; }

   274 .v77 { height: 77%; }

   275 .v78 { height: 78%; }

   276 .v79 { height: 79%; }

   277 .v80 { height: 80%; }

   278 .v81 { height: 81%; }

   279 .v82 { height: 82%; }

   280 .v83 { height: 83%; }

   281 .v84 { height: 84%; }

   282 .v85 { height: 85%; }

   283 .v86 { height: 86%; }

   284 .v87 { height: 87%; }

   285 .v88 { height: 88%; }

   286 .v89 { height: 89%; }

   287 .v90 { height: 90%; }

   288 .v91 { height: 91%; }

   289 .v92 { height: 92%; }

   290 .v93 { height: 93%; }

   291 .v94 { height: 94%; }

   292 .v95 { height: 95%; }

   293 .v96 { height: 96%; }

   294 .v97 { height: 97%; }

   295 .v98 { height: 98%; }

   296 .v99 { height: 99%; }

   297 .v100 { height: 100%; }

   298 

   299 /* CSS : D3 */

   300 

   301 text {

   302   fill: rgb(94, 94, 94);

   303   font-family: Verdana;

   304   font-size: 10px;

   305   opacity: 1;

   306   text-anchor: end;

   307 }

   308 

   309 .axis-d3 {

   310   fill: none;

   311   stroke: #5E5E5E;

   312   stroke-width: 1;

   313   shape-rendering: crispEdges;

   314 }

   315 

   316 .area-d3 {

   317   fill: #C77A04;

   318   stroke: #5E5E5E;

   319   stroke-width: 0;

   320   fill-opacity: 0.4;

   321 }

   322 

   323 .line-d3 {

   324   fill: none;

   325   stroke: #C77A04;

   326   stroke-width: 1px;

   327 }

   328 

   329 .grid-d3 .tick {

   330   stroke: lightgrey;

   331   opacity: 0.7;

   332 }

   333 

   334 .grid-d3 path {

   335   stroke-width: 0;

   336 }

   337 

   338 .grid-d3 .tick {

   339   stroke: lightgrey;

   340   opacity: 0.7;

   341 }

   342 

   343 .grid-d3 path {

   344   stroke-width: 0;

   345 }

   346 

   347 .overlay-d3 {

   348   fill: none;

   349   pointer-events: all;

   350 }

   351 

   352 .focusLine-d3 {

   353   fill: none;

   354   stroke: #C77A04;

   355   stroke-width: 0.5px;

   356 }

   357 

   358 .focusCircle-d3 {

   359   fill: #C77A04;

   360 }

   361 

   362 div.tooltip-d3 {

   363     position: inherit;;

   364     text-align: left;

   365     width: 80px;

   366     height: 35px;

   367     padding: 2px;

   368     font: 8px sans-serif;

   369     background: lightsteelblue;

   370     border: 0px;

   371     border-radius: 8px;

   372     pointer-events: none;

   373 }

   374 

   375 /* Widgets : general */

   376 

   377 .GPwidget {

   378   position: absolute;

   379   font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;

   380   font-size: 13px;

   381   color: #333;

   382 }

   383 

   384 .GPwidget input[type='text'],

   385 .GPwidget input[type='button'] {

   386   -webkit-appearance: none;

   387   color: #333333;

   388 }

   389 

   390 .GPwidget input[type="checkbox"] {

   391   display: none;

   392 }

   393 

   394 .GPwidget select {

   395   padding-left: 3px;

   396   border-radius: 3px;

   397 }

   398 

   399 .GPwidget form {

   400   margin-bottom: 0;

   401 }

   402 

   403 .GPwidget * {

   404   box-sizing: border-box;

   405   background-repeat: no-repeat;

   406 }

   407 

   408 /* waiting */

   409 

   410 .GPwaiting {

   411     background-image : url("../img/gp/waiting.gif");

   412     background-position : center center;

   413     background-repeat : no-repeat;

   414 }

   415 

   416 /* General panels */

   417 

   418 .GPpanel {

   419   background-color: #FFF;

   420 }

   421 

   422 .GPpanelHeader {

   423   position: relative;

   424   width: 100%;

   425 }

   426 

   427 .GPpanelTitle {

   428   width: 100%;

   429   height: 100%;

   430   text-align: center;

   431   font-weight: bold;

   432 }

   433 

   434 .GPpanelClose, .GPpanelReduce {

   435   position: absolute;

   436   cursor: pointer;

   437 }

   438 

   439 /* Showing/hiding advanced panels */

   440 

   441 .GPshowAdvancedToolPicto {

   442   position: relative;

   443   box-sizing: border-box;

   444   cursor: pointer;

   445 }

   446 

   447 .GPshowAdvancedToolOpen {

   448   position: absolute;

   449   display: block;

   450   box-sizing: border-box;

   451 }

   452 

   453 /* Flex inputs */

   454 

   455 .GPflexInput {

   456   display: -webkit-flex;

   457   display: -ms-flexbox;

   458   display: -webkit-box;

   459   display: flex;

   460   transition: max-height 0.3s ease-out, opacity 0.3s ease-out;

   461 }

   462 

   463 .GPflexInput > * {

   464   display: block;

   465   height: 28px;

   466   line-height: 26px;

   467   border: 1px solid #999;

   468   border-radius: 0;

   469 }

   470 

   471 .GPflexInput *:not(:last-child) {

   472   border-right:none;

   473 }

   474 

   475 .GPflexInput *:first-child {

   476   border-radius: 3px 0 0 3px;

   477 }

   478 

   479 .GPflexInput *:last-child {

   480   border-radius: 0 3px 3px 0;

   481 }

   482 

   483 .GPflexInput > *:not(input) {

   484   overflow: hidden;

   485   white-space: nowrap;

   486   text-overflow: ellipsis;

   487 }

   488 

   489 .GPflexInput > input {

   490   -webkit-flex: 1;

   491   -webkit-box-flex: 1;

   492       -ms-flex: 1;

   493           flex: 1;

   494   padding: 0 5px;

   495   min-width: 0;

   496 }

   497 

   498 .GPflexInput > select {

   499   -webkit-flex: 1;

   500   -webkit-box-flex: 1;

   501       -ms-flex: 1;

   502           flex: 1;

   503   padding-right: 7px;

   504 }

   505 

   506 .GPflexInput > label {

   507   background-color:  #F2F2F2;

   508   color: #666;

   509   padding-left: 7px;

   510   padding-right: 9px;

   511   cursor: pointer;

   512 }

   513 

   514 /* Particular inputs */

   515 

   516 .GPinputSelect {

   517   display: block;

   518   height: 28px;

   519   line-height: 26px;

   520   margin: auto;

   521   border: 1px solid #999;

   522   color: #333;

   523   cursor: pointer;

   524 }

   525 

   526 input.GPinputSubmit {

   527   display: block;

   528   width: 80px;

   529   margin: auto;

   530   height: 28px;

   531   line-height: 26px;

   532   padding: 0;

   533   background: none;

   534   border: none;

   535   border-radius: 3px;

   536   font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;

   537   color: #FFF;

   538   font-weight: bold;

   539   opacity: 0.8;

   540   transition: opacity 0.2s ease-out;

   541   cursor: pointer;

   542 }

   543 

   544 input.GPinputSubmit:hover {

   545   opacity: 1;

   546 }

   547 

   548 /* Autocomplete/geocode results */

   549 

   550 .GPautoCompleteList,

   551 .GPadvancedAutoCompleteList {

   552   z-index: 2;

   553   display: none;

   554   position: absolute;

   555   max-height: 140px;

   556   background-color: #FFF;

   557   border: 1px solid #999;

   558   overflow-y: hidden;

   559 }

   560 

   561 .GPadvancedAutoCompleteList {

   562   width: calc(100% - 28px);

   563   border-top: none;

   564   font-size: 0.9em;

   565 }

   566 

   567 .GPautoCompleteProposal {

   568   width: 100%;

   569   height: 28px;

   570   line-height: 16px;

   571   padding: 6px 10px;

   572   color: #5E5E5E;

   573   font-size: 1.0em;

   574   overflow: hidden;

   575   white-space: nowrap;

   576   text-overflow:ellipsis;

   577   cursor: pointer;

   578 }

   579 

   580 .GPautoCompleteProposal:hover {

   581   color: #000000;

   582   background-color: #CEDBEF

   583 }

   584 

   585 /* Showing additional hidden options */

   586 

   587 .GPshowMoreOptions {

   588   display: block;

   589   position: absolute;

   590   width: 28px;

   591   height: 28px;

   592   cursor: pointer;

   593   transition: all 0.5s ease-out 0s;

   594 }

   595 

   596 input[type="checkbox"]:checked + .GPshowMoreOptions {

   597   -webkit-transform: rotateX(180deg);

   598   transform: rotateX(180deg);

   599 }

   600 

   601 /* ISOCHRON */

   602 

   603 div[id^=GPisochron-] {

   604   top: 140px;

   605 }

   606 

   607 /* Showing/hiding mouse position panel */

   608 

   609 label[id^=GPshowIsochronPicto] {

   610   display: inline-block;

   611 }

   612 

   613 input[id^=GPshowIsochron-] + label {

   614   display: block;

   615 }

   616 

   617 input[id^=GPshowIsochron-]:checked + label {

   618   display: none;

   619 }

   620 

   621 input[id^=GPshowIsochron-] + label + div {

   622   display: none;

   623 }

   624 

   625 input[id^=GPshowIsochron-]:checked + label + div {

   626   display: block;

   627 }

   628 

   629 /* General panels */

   630 

   631 div[id^=GPisochronPanel-] {

   632   width: 280px;

   633 }

   634 

   635 /* Calc waiting */

   636 

   637 .GPisochronCalcWaitingContainerVisible,

   638 .GPisochronCalcWaitingContainerHidden {

   639   position: absolute;

   640   top: 32px;

   641   bottom: 0;

   642   left: 0;

   643   right: 0;

   644   background-color: rgba(255,255,255,0.9);

   645   font-size: 1.5em;

   646   font-weight: bold;

   647   overflow: hidden;

   648 }

   649 

   650 .GPisochronCalcWaitingContainerVisible {

   651   display: -webkit-flex;

   652   display: -ms-flexbox;

   653   display: -webkit-box;

   654   display: flex;

   655 }

   656 

   657 .GPisochronCalcWaitingContainerHidden {

   658   display: none;

   659 }

   660 

   661 .GPisochronCalcWaiting {

   662   margin: auto;

   663 }

   664 

   665 /* Isochron form */

   666 

   667 form[id^=GPisochronForm] {

   668   padding: 15px;

   669 }

   670 

   671 .GPisochronFormMini {

   672   max-height: 58px;

   673   overflow: hidden;

   674 }

   675 

   676 .GPisochronFormMini div[id^="GPisochronReset-"],

   677 .GPisochronFormMini label[id^="GPshowIsoExclusionsPicto-"] {

   678     display: none;

   679 }

   680 

   681 .GPisochronOriginVisible {

   682   display: block;

   683 }

   684 

   685 .GPisochronOriginHidden {

   686   display: none;

   687 }

   688 

   689 .GPisochronOriginPointerImg {

   690   width: 28px;

   691   background-color: #F2F2F2;

   692   cursor: pointer;

   693 }

   694 

   695 input[id^="GPisochronOriginPointer"] + .GPisochronOriginPointerImg {

   696   background-position: -1px -1px;

   697 }

   698 

   699 input[id^="GPisochronOriginPointer"]:checked + .GPisochronOriginPointerImg {

   700   background-position: -29px -1px;

   701 }

   702 

   703 input[id^=GPisochronSubmit] {

   704   margin-top: 5px;

   705 }

   706 

   707 /* Alternative choice */

   708 

   709 div[id^=GPisochronChoice] {

   710   display: -webkit-flex;

   711   display: -ms-flexbox;

   712   display: -webkit-box;

   713   display: flex;

   714   width: 160px;

   715   -webkit-justify-content: space-between;

   716   -webkit-box-pack: justify;

   717       -ms-flex-pack: justify;

   718           justify-content: space-between;

   719   margin: auto;

   720   margin-top: 15px;

   721   margin-bottom: 5px;

   722 }

   723 

   724 .GPisochronChoiceAlt input {

   725   display: none;

   726 }

   727 

   728 .GPisochronChoiceAltImg {

   729   display: block;

   730   width: 28px;

   731   height: 28px;

   732   margin: auto;

   733   cursor: pointer;

   734 }

   735 

   736 input[id^=GPisochronChoiceAltChron] + .GPisochronChoiceAltImg {

   737   background-position: -56px 0;

   738 }

   739 

   740 input[id^=GPisochronChoiceAltChron]:checked + .GPisochronChoiceAltImg {

   741   background-position: -84px 0;

   742 }

   743 

   744 input[id^=GPisochronChoiceAltDist] + .GPisochronChoiceAltImg {

   745   background-position: -112px 0;

   746 }

   747 

   748 input[id^=GPisochronChoiceAltDist]:checked + .GPisochronChoiceAltImg {

   749   background-position: -140px 0;

   750 }

   751 

   752 .GPisochronChoiceAlt span {

   753   cursor: pointer;

   754   display:block;

   755   color: #999;

   756 }

   757 

   758 .GPisochronValueHidden {

   759   display: none;

   760 }

   761 

   762 div[id^=GPisochronValueChron],

   763 div[id^=GPisochronValueDist] {

   764   width: 220px;

   765   margin: auto;

   766 }

   767 

   768 /* Mode choice */

   769 

   770 div[id^=GPisochronModeChoice] {

   771   display: -webkit-flex;

   772   display: -ms-flexbox;

   773   display: -webkit-box;

   774   display: flex;

   775   -webkit-justify-content: space-between;

   776   -webkit-box-pack: justify;

   777       -ms-flex-pack: justify;

   778           justify-content: space-between;

   779   margin: 15px 0;

   780 }

   781 

   782 .GPisochronModeLabel {

   783   display: block;

   784   text-align: center;

   785   margin-bottom: 5px;

   786 }

   787 

   788 div[id^=GPisochronTransportChoice] input {

   789   display: none;

   790 }

   791 

   792 .GPisochronTransportImg {

   793   display: inline-block;

   794   width: 28px;

   795   height: 28px;

   796   cursor: pointer;

   797 }

   798 

   799 .GPisochronTransportImg:first-of-type {

   800     margin-left: 18px;

   801     margin-right: 10px;

   802 }

   803 

   804 input[id^=GPisochronTransportCar] + .GPisochronTransportImg {

   805   background-position: -168px 0;

   806 }

   807 

   808 input[id^=GPisochronTransportCar]:checked + .GPisochronTransportImg {

   809   background-position: -196px 0;

   810 }

   811 

   812 input[id^=GPisochronTransportPedestrian] + .GPisochronTransportImg {

   813   background-position: -224px 0;

   814 }

   815 

   816 input[id^=GPisochronTransportPedestrian]:checked + .GPisochronTransportImg {

   817   background-position: -252px 0;

   818 }

   819 

   820 select[id^=GPisochronDirectionSelect] {

   821   width: 80px;

   822 }

   823 

   824 /* Showing/hiding exclusions */

   825 

   826 input[id^=GPshowIsoExclusions] {

   827   display: none;

   828 }

   829 

   830 .GPshowIsoExclusionsPicto {

   831   top: 250px;

   832   right: 0;

   833   transition: all 0.5s ease-out 0s;

   834 }

   835 

   836 input[id^=GPshowIsoExclusions] + label + div[id^=GPisoExclusions] {

   837   max-height: 0;

   838   opacity: 0;

   839   margin-bottom: 0;

   840 }

   841 

   842 input[id^=GPshowIsoExclusions]:checked + label + div[id^=GPisoExclusions] {

   843   display: block;

   844   max-height: 60px;

   845   opacity: 1;

   846   margin-bottom: 15px;

   847 }

   848 

   849 /* Exclusions */

   850 

   851 div[id^=GPisoExclusions] {

   852   transition: max-height 0.5s ease-in-out 0.25s, opacity 0.5s ease-in-out 0.25s, margin 0.3s ease-in-out 0.25s;

   853   overflow: hidden;

   854 }

   855 

   856 .GPisoExclusionsLabel {

   857   display: block;

   858   text-align: center;

   859   margin-bottom: 10px;

   860   font-weight: bold;

   861   line-height: 16px;

   862 }

   863 

   864 .GPisoExclusionsOptions {

   865   display: -webkit-flex;

   866   display: -webkit-box;

   867   display: -ms-flexbox;

   868   display: flex;

   869   -webkit-justify-content: space-around;

   870   -ms-flex-pack: distribute;

   871   justify-content: space-around;

   872 }

   873 

   874 .GPisoExclusionsOption {

   875   display: block;

   876   height: 28px;

   877   line-height: 26px;

   878   color: #A77;

   879   background-color: #FEE;

   880   padding-left: 28px;

   881   padding-right: 5px;

   882   border: 1px solid #A77;

   883   border-radius: 3px;

   884   cursor: pointer;

   885 }

   886 

   887 input:checked + .GPisoExclusionsOption {

   888   background-color: #EFE;

   889   background-position: 0 -28px;

   890   color: #797;

   891   border: 1px solid #797;

   892 }

   893 

   894 /* Reset picto */

   895 div[id^=GPisochronReset] {

   896   position: absolute;

   897   margin-top: 5px;

   898   width: 28px;

   899   height: 28px;

   900   border-radius: 3px;

   901   opacity: 0.8;

   902   background-position: -281px 0;

   903   transition: opacity 0.2s ease-out;

   904   cursor: pointer;

   905 }

   906 

   907 div[id^=GPisochronReset]:hover {

   908   opacity: 1;

   909 }

   910 

   911 /* LAYER SWITCHER */

   912 

   913 #GPlayerSwitcher {

   914   font-size: 11px;

   915 }

   916 

   917 #GPlayerSwitcher [draggable] {

   918   -moz-user-select: none;

   919   -khtml-user-select: none;

   920   -webkit-user-select: none;

   921   user-select: none;

   922   /* Required to make elements draggable in old WebKit */

   923   -khtml-user-drag: element;

   924   -webkit-user-drag: element;

   925 }

   926 

   927 /* Manage opening of the components through hiden checkboxes */

   928 

   929 #GPlayerSwitcher input[type="checkbox"] + div,

   930 #GPlayerSwitcher input[type="checkbox"] + label + div {

   931   max-height: 0px;

   932 }

   933 

   934 #GPlayerSwitcher label {

   935   display: block;

   936 }

   937 

   938 /* Showing/hiding layers list */

   939 

   940 #GPshowLayersListPicto {

   941   position: relative;

   942   float: right;

   943   display: block;

   944   opacity: 1;

   945   transition: opacity 0.5s ease-out 0s, box-shadow  0.5s ease-out 0s, border  0.5s ease-out 0s, border-radius  0.5s ease-out 0s;

   946   cursor: pointer;

   947 }

   948 

   949 #GPshowLayersListOpen,

   950 #GPshowLayersListClose {

   951   position: absolute;

   952   display: block;

   953   transition: border-radius 0.5s ease-out 0s, opacity 0.5s ease-out 0s;

   954 }

   955 

   956 #GPshowLayersListOpen {

   957   background-position: 0 0;

   958   opacity: 1;

   959 }

   960 

   961 #GPshowLayersListClose {

   962   opacity: 0;

   963 }

   964 

   965 #GPlayerSwitcher input[type="checkbox"]:checked + div + #GPshowLayersListPicto {

   966   border-top-left-radius: 0;

   967   border-top-right-radius: 0;

   968 }

   969 

   970 #GPlayerSwitcher input[type="checkbox"]:checked + div + #GPshowLayersListPicto #GPshowLayersListClose {

   971   opacity: 1;

   972 }

   973 

   974 /* Layers list */

   975 

   976 #GPlayersList {

   977   position: relative;

   978   width: 180px;

   979   border-bottom-right-radius: 0;

   980   opacity: 0;

   981   overflow: auto;

   982   transition: max-height 0.5s ease-out 0s, opacity 0.5s ease-out 0.25s;

   983 }

   984 

   985 #GPlayerSwitcher input[type="checkbox"]:checked + #GPlayersList {

   986   max-height: 232px;

   987   opacity: 1;

   988   transition: max-height 0.5s ease-in 0s, opacity 0.25s ease-in 0s;

   989 }

   990 

   991 /* Layer : general */

   992 

   993 .GPlayerSwitcher_layer {

   994   position: relative;

   995   top: 0;

   996   background-color: #FFF;

   997   border-bottom: 1px dotted #CCC;

   998   overflow: hidden;

   999 }

  1000 

  1001 #GPlayersList .GPlayerSwitcher_layer:last-child {

  1002   border-bottom: none;

  1003 }

  1004 

  1005 .GPlayerBasicTools,

  1006 .GPlayerAdvancedTools {

  1007   position: relative;

  1008   width: 100%;

  1009   height: 28px;

  1010 }

  1011 

  1012 .GPlayerVisibility,

  1013 .GPlayerInfo,

  1014 .GPlayerInfoOpened,

  1015 .GPlayerRemove {

  1016   width: 28px;

  1017   height: 28px;

  1018   cursor: pointer;

  1019 }

  1020 

  1021 .GPlayerVisibility,

  1022 .GPlayerName,

  1023 .GPlayerInfo,

  1024 .GPlayerInfoOpened,

  1025 .GPlayerRemove,

  1026 .GPlayerOpacity,

  1027 .GPlayerOpacityValue {

  1028   position: absolute;

  1029   top: 0;

  1030 }

  1031 

  1032 .GPghostLayer {

  1033   opacity: 0;

  1034 }

  1035 

  1036 /* Layer basic tools */

  1037 

  1038 .GPlayerBasicTools {

  1039   background-color: #FFF;

  1040 }

  1041 

  1042 .GPlayerVisibility {

  1043   left: 0;

  1044   background-position: -28px 0;

  1045 }

  1046 

  1047 input[type="checkbox"]:checked + .GPlayerVisibility {

  1048   background-position: 0 0;

  1049 }

  1050 

  1051 .GPlayerName {

  1052   left: 28px;

  1053   width: calc(100% - 56px);

  1054   line-height: 28px;

  1055   overflow: hidden;

  1056   white-space: nowrap;

  1057   text-overflow: ellipsis;

  1058   padding-left: 4px;

  1059   cursor: move;

  1060 }

  1061 

  1062 .outOfRange .GPlayerName {

  1063   color: #AAA;

  1064 }

  1065 

  1066 /* Showing layer advanced tools */

  1067 

  1068 .GPshowLayerAdvancedTools {

  1069   top: 0;

  1070   right: 0;

  1071   background-position: -112px 0;

  1072 }

  1073 

  1074 .GPlayerAdvancedTools {

  1075   display: block;

  1076   max-height: 0;

  1077   opacity: 0;

  1078   transition: max-height 0.5s ease-out 0s, opacity 0.5s ease-out 0s;

  1079 }

  1080 

  1081 #GPlayerSwitcher input[type="checkbox"]:checked + label + .GPlayerAdvancedTools {

  1082   max-height: 28px;

  1083   opacity: 1;

  1084 }

  1085 

  1086 /* Layer advanced tools */

  1087 

  1088 .GPlayerInfo {

  1089   left: 0;

  1090   background-position: -55px 0;

  1091 }

  1092 

  1093 .GPlayerInfoOpened {

  1094   left: 0;

  1095   background-position: -83px 0;

  1096 }

  1097 

  1098 .GPlayerOpacity {

  1099   left: 28px;

  1100   width: calc(100% - 100px);

  1101   height: 28px;

  1102   padding-left: 8px;

  1103 }

  1104 

  1105 .GPlayerOpacityValue {

  1106   width: 32px;

  1107   left: calc(100% - 60px);

  1108   line-height: 28px;

  1109   font-size: 10px;

  1110   font-style: italic;

  1111   cursor: default;

  1112 }

  1113 

  1114 .GPlayerRemove {

  1115   right: 0;

  1116   background-position: -140px 0;

  1117 }

  1118 

  1119 /* Opacity slider : general */

  1120 

  1121 .GPlayerOpacity input {

  1122   -webkit-appearance: none;

  1123   -moz-appearance: none;

  1124   background: none;

  1125   display: block;

  1126   width: 100%;

  1127   height: 100%;

  1128   margin: 0;

  1129   padding: 0;

  1130   overflow: hidden;

  1131   cursor: pointer;

  1132 }

  1133 

  1134 .GPlayerOpacity input[type="range"]:focus {

  1135   box-shadow: none;