body {padding: 0;margin: 0;font-size:14px;font-family:'Arial', sans-serif;line-height: 1.5;}
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}


*, ::after, ::before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {overflow-y: scroll;}

body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* basics */
.opacity0 {opacity:0!important;}
.opacity1 {opacity:1!important;}
.opacity70 {opacity:0.7!important;}
.opacity50 {opacity:0.5!important;}
.opacity30 {opacity:0.3!important;}
.opacity10 {opacity:0.1!important;}

.back-white {background-color: #FFF}
.invisible {display:none!important;}
.user-icon, .bimage, .square {background-repeat: no-repeat;position:relative;background-size: cover;overflow:hidden;background-position: center;}

.box50 {display: inline-block;width:50%;}
.box25 {display: inline-block;width:25%;}

/* square & rectangles */
.square {width:100%;}
.square:after {content: "";display: block;padding-bottom: 100%;}
.rectangle80 .square:after,.square80:after {content: "";display: block;padding-bottom: 80%;}
.rectangle75 .square:after,.square75:after {content: "";display: block;padding-bottom: 75%;}
.rectangle66 .square:after,.square66:after {content: "";display: block;padding-bottom: 66%;}
.rectangle50 .square:after,.square50:after {content: "";display: block;padding-bottom: 50%;}
.rectangle25 .square:after,.square25:after {content: "";display: block;padding-bottom: 25%;}
.rectangle12 .square:after,.square12:after {content: "";display: block;padding-bottom: 12%;}

.rect {width:100%;}
.rect:after {content: "";display: block;padding-bottom: 65%;}

.separator {border-bottom:1px solid #888;margin-bottom:4px;height:8px;}
 
/* zoom */
.zoom {top:0px!important;left:0px!important;width:100%!important;border-width:0!important;}
.parent {position:relative;}

/* screen interface 
#tool & #menu
#desktop
mode-edit = toolbar ouverte
*/

.center { margin: auto; text-align: center; }

/* transitions */
.t-200,.t-200 svg {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.t-300,.t-300 svg {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}


.t-500 {
 	-webkit-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}

.t-1k {
  -o-transition: all 1s ease-in;
	-webkit-transition: all 1s ease-in;
	-moz-transition: all 1s ease-in;
	transition: all 1s ease-in;
}

.full-div {position: absolute;top:0px;bottom:0px;left:0px;right:0px;}

.frame {
  position:absolute;
  left: 50%;
  transform: translate(-50%, 0%);

  max-width:450px;
  width:100%;
  text-align:left;  
}

.absolute-frame {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-size: cover;
    background-position: center;
}


.svg-icon svg {width:20px;height:20px}
.centered {position:absolute;	left: 50%;transform: translate(-50%, 0%);}
.nowrap {white-space: nowrap;}
.link {color:#00A2E8;}
.capital { text-transform: uppercase;}
.hide {display: none;}
.empty-hide:empty {display:none!important;}


.afterOpen {opacity: 0}

/* NOTCH */
#app-navbar-notch {
 position: fixed;
 background-color: #F8F8F8;
 top: 0;
 left: 0;
 right: 0;
 z-index: 99;
 height: env(safe-area-inset-top);
 height: constant(safe-area-inset-top);
 z-index:11000;
}

.notch {
  top: env(safe-area-inset-top)!important;
  top: constant(safe-area-inset-top)!important;
}

.bsafe {
  padding-bottom: env(safe-area-inset-bottom)!important;
  padding-bottom: constant(safe-area-inset-bottom)!important;
}

.notch-offset {
  margin-top: env(safe-area-inset-top)!important;
  margin-top: constant(safe-area-inset-top)!important;
}

body {
  margin-top: env(safe-area-inset-top)!important;
  margin-top: constant(safe-area-inset-top)!important;
  position:relative;
}

/* hover */
@media(hover: hover) and (pointer: fine) {
.link:hover {color:darkOrange;cursor:pointer;}

.hover:hover {
    cursor: pointer;
    border-color: darkOrange!important;
    color: darkOrange!important;
    opacity: 1;
}
.hover.hover-background:hover,.hover:hover .hover-background {
    background-color: #EEE;
}
.hover.hover-image:hover,.hover:hover .hover-image {
    opacity: 0.7;
}
.hover:hover .text { color: darkOrange!important;}
/*
.hover:hover svg { fill: darkOrange!important;}
*/
.blink:hover {color: darkOrange!important}

}

/* objets */
#tool-box {
  background-color: #EEE;
  position:fixed;top:0px;right:0px;padding:10px;
  width: 100px;
}  


#desktop {width:calc(100% - 111px);position: relative;}
#desktop-title { padding:10px;text-align:center;font-weight: bold;background-color:#EEE;}
#desktop-content {text-align:left;position: relative;}

.on-mobile {display: none }
.mode-mobile .not-mobile {display: none }

/* mode-mobile */
.mode-mobile .max-width { left:0px;right: 0px;width: 100%;max-width: 450px;margin-left: auto;margin-right: auto;}
.mode-mobile #desktop {width:100%;}

.mode-mobile  #tool-box {
  position:fixed;bottom:0px;left: 0px;right:0px;top: auto;padding:0px;height: 60px;width: 100%;
  display: flex;justify-content:space-around;
  box-shadow: rgba(0, 0, 0, 0.12) 0px -3px 6px;border-top:1px solid #CCC;
}
.mode-mobile .btn-menu .image { border-width: 0px;width: 40px;height: 40px;}
.mode-mobile .btn-mode .image { border-width: 0px;width: 40px;height: 40px;}
.mode-mobile .btn-menu .title {padding: 0px;margin-top: -5px;} 
.mode-mobile .btn-mode .title {padding: 0px;margin-top: -5px;} 


.mode-mobile .on-mobile {display : block }

/* on selected */
.on-selected {display: none;}
.selected .on-selected {display: block;}

.selected .not-selected {display: none!important;}

.on-edit {display: none;}
.mode-edit .on-edit {display: block;}
.mode-edit .not-edit {display: none;}

.on-connected {display: none!important;}
.connected .on-connected {display: block!important;}
.connected .not-connected {display: none!important;}


.feed-title {font-size: 22px;font-weight: bold;padding: 4px 0px;position: relative;}
.color-blue {color: #00A2E8 }
.color-red {color: #CC0000 }

.header-title {font-size:30px;font-weight: bold;}
.mode-mobile .header-title {font-size:22px;}

.feed-line {position: relative}

@media (max-width: 700px) {
.max-width { left:0px;right: 0px;width: 100%;max-width: 450px;margin-left: auto;margin-right: auto;}
#desktop {width:100%;}
.btn-mode {display: none}
.on-mobile {display : block }

#tool-box {
  box-sizing: content-box;
  position:fixed;bottom:0px;left: 0px;right:0px;top: auto;padding:0px;height: 60px;width: 100%;
  display: flex;justify-content:space-around;
  box-shadow: rgba(0, 0, 0, 0.12) 0px -3px 6px;border-top:1px solid #CCC; 
}

.btn-menu .image { border-width: 0px;width: 40px;height: 40px;}
.btn-mode .image { border-width: 0px;width: 40px;height: 40px;}
.btn-menu .title {padding: 0px;margin-top: -5px;} 
.btn-mode .title {padding: 0px;margin-top: -5px;} 
.header-title {font-size:22px;}

}

.feed-top-feed {padding-top:10px;}

.feed-top-buttons {padding:0px 5px 10px 0px;}

.background-EEE {background-color:#EEE!important;}

.blink {color: #00A2E8;text-decoration: none}