/* bootstrap補正 */
/* color blk-b {#000000} rgba(0, 0, 0, 1) */
/* color blk-l {#e0e0e0} rgba(224, 224, 224, 1)  */
/* color blu-b {#0d47a1} rgba(13, 71, 161, 1)  */
/* color blu-l {#bbdefb} rgba(187, 222, 251, 1)  */
/* color red-b {#CC0000} rgba(204, 0, 0, 1)  */
/* color red-l {#f8bbd0} rgba(248, 187, 208, 1)  */
/* color grn-b {#00B900} rgba(0, 185, 0, 1)  */
/* color grn-l {#b9f6ca} rgba(185, 246, 202, 1)  */
/* color yll-b {#ff6d00} rgba(255, 109, 0, 1)  */
/* color yll-l {#ffd600} rgba(255, 214, 0, 1)  */
/* color blw-b {#5d4037} rgba(93, 64, 55, 1)  */
/* color blw-l {#bcaaa4} rgba(188, 170, 164, 1)  */

/*三角形ハーフ*/
.trg-t,.trg-b,.trg-l,.trg-r { display: block; width: 100%; height: 100%; background-color: #000; }
.trg-t { clip-path: polygon(50% 50%, 0% 100%, 100% 100%); }
.trg-r { clip-path: polygon(0 0, 50% 50%, 0 100%);}
.trg-b { clip-path: polygon(0 0, 50% 50%, 100% 0); }
.trg-l { clip-path: polygon(100% 0, 50% 50%, 100% 100%); }

button { background: none;	border: none;	outline: none;
	-webkit-appearance: none;	-moz-appearance: none;
	appearance: none; cursor: pointer;
}
.w18, .w24, .w32, .w36, .w42, .w48, .w52, .w56, .w64{ position: relative; display:inline-block;
text-align: center; vertical-align: middle;}
/* Botton size */
.btn-bar.w18 > *, .w18 {width:18px!important; height:18px!important;}
.btn-bar.w24 > *, .w24 {width:24px!important; height:24px!important;}
.btn-bar.w32 > *, .w32 {width:32px!important; height:32px!important;}
.btn-bar.w36 > *, .w36 {width:36px!important; height:36px!important;}
.btn-bar.w42 > *, .w42 {width:42px!important; height:42px!important;}
.btn-bar.w48 > *, .w48 {width:48px!important; height:48px!important;}
.btn-bar.w52 > *, .w52 {width:52px!important; height:52px!important;}
.btn-bar.w56 > *, .w56 {width:56px!important; height:56px!important;}
.btn-bar.w64 > *, .w64 {width:64px!important; height:64px!important;}

.w18 .fa, .w18 i {font-size: 4px;}
.w24 .fa, .w24 i {font-size: 10px;}
.w32 .fa, .w32 i {font-size: 18px;}
.w36 .fa, .w36 i {font-size: 22px;}
.w42 .fa, .w42 i {font-size: 28px;}
.w48 .fa, .w48 i {font-size: 34px;}
.w52 .fa, .w52 i {font-size: 38px;}
.w56 .fa, .w56 i {font-size: 42px;}
.w64 .fa, .w64 i {font-size: 46px;}

.sq-bar, .btn-bar { position: relative; width:auto!important; display:inline-flex; padding: 0; flex-wrap: wrap;}

.bar-btn * {pointer-events: none;}
.bar-btn { pointer-events: auto; }
.bar-btn { flex-shrink: 0; flex: initial; position: relative;  z-index: 1; white-space: nowrap; text-align: center; cursor: pointer;  font-weight: bold; list-style: none; margin-bottom: 1rem; padding: 0 3px; opacity: 0.6;}
.btn-tag { display: block; padding: 3px 0; font-size: 10px; }
.bar-btn:hover, .bar-btn.active {opacity: 1;}

.sq-bar > .bar-btn:first-child {
	border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.sq-bar > .bar-btn:last-child {
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
}
.sq-btn { display: inline-flex; align-items: center;
 padding: .6rem .7rem; border-radius: 7px;
 background-color: #f0f0f0; color: #333;
 font-size: 1.2rem; line-height: 1.2rem;
 margin-right: 1.2rem;
}
.sq-btn:last-child {margin-right: 0;}
.sq-btn * { color: #333; pointer-events: none; }
.link * { pointer-events: none; }
.link, .sq-btn { pointer-events: auto; cursor: pointer; }

.ed-tag, .ed-tag-w, .ed-tag-b {
    position: absolute;
    bottom: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
    width: 80vw;
    text-align: center;
    z-index: auto;
}
.ed-tag span, .ed-tag-b span, .ed-tag-w span {
	display: inline-block;
	padding: 2px 0.5rem;
	line-height: 0.8rem;
	font-size: 0.8rem;
}

.ed-tag-b span, .ed-tag-w span {
  border-radius: 5px;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(121,121,121,.8)) !important;
  filter: drop-shadow(0px 1px 2px rgba(121,121,121,.8)) !important;
  filter: glow(color=#333,strength=2px);
}
.ed-tag-w span {
	color: #000;
  background-color: #fff!important;
}
.ed-tag-b span {
	color: #fff;
  background-color: #000!important;
}

/*  MDB Adjustment */
.btn-group-vertical > .btn { margin: 0;}



/* Botton Circle */
[class*=" o-"],[class^=o-],[class*=" oo-"],[class^=oo-] {
  position: relative;
  border-radius: 50%;
  text-align:center;
  letter-spacing: 0;
  oveflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 100%;
}

.o-wt { border: 1px solid white; padding-top: calc(100% - 2px); background-color: #fff;}
.o-bk { border: 1px solid black; padding-top: calc(100% - 2px);}
.o-gr { border: 1px solid #ccc; padding-top: calc(100% - 2px);}

/* for Pin Mark */
.maru { position:relative; display:block; width: 100%; padding-top: 100%; border-radius: 50%; text-align:center; letter-spacing: 0; oveflow:hidden; }
.singbod { position:relative; display:block; width: 100%; padding-top: 100%; border-radius: 6px; letter-spacing: 0; oveflow:hidden; }

.maru > span, .singbod > span,
[class*=" o-"] > *,[class^=o-] > *,
[class*=" csi-"],[class^=csi-] {
  position: absolute!important;
  display: inline-block;
  left: 50%; top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width :100%;
  text-align:center; text-shadow: none!important;
}

[class*=" csi-"],[class^=csi-] { cursor: pointer;  pointer-events: auto; text-align: center; }

/*  move icon  */
.csi-move {
    position: absolute;
    display: inline-block;
    width: .75em;
    height: .75em;
    background-color: transparent;
    left: 50%; top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    overflow: hidden;
    cursor: move;
}
.csi-move:before, .csi-move:after {
position: absolute; content: ""; border-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.csi-move:before {
    height: 1.5em;
    border: .075em solid currentColor;
    background-color: currentColor;
    border-radius: 0.5em;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0.42em 0, -0.42em 0;
}
.csi-move:after {
    height: 1.5em;
    border: .075em solid currentColor;
    background-color: currentColor;
    border-radius: 0.5em;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0.42em 0, -0.42em 0;
}

/* Down */
.csi-v::before {
  position: absolute;
  content: "\f00c";
  content: "\2713;";
  content: "\10003";
  content: "\10004";
  content: "\2713";
  font-weight: bold;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Close */
.csi-x::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 10%;
    right: 45%;
    width: 10%;
    height: 80%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: white;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.csi-x::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 10%;
    left: 45%;
    width: 10%;
    height: 80%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: white;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Minus Plus */
.csi-minus,.csi-plus { width:100%; height:100%; }
.csi-minus::before, .csi-plus::before {
  position: absolute;
  top: 45%;
  left: 50%;
  content: '';
  width: 80%;
  height: 0;
  border-top: 2px solid #000;
  transform: translateX(-50%);
}

.csi-plus::after {
  position: absolute;
  top: 45%;
  left: 10%;
  content: '';
  width: 80%;
  height: 0;
  border-top: 2px solid #000;
  transform: rotate(90deg);
}

.csi-back::before{
  content: '';
  width: 50%;
  height: 50%;
  border: 0px;
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 25%;
  left: 30%;
}
.csi-go::before{
  content: '';
  width: 50%;
  height: 50%;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 25%;
  right: 30%;
}

.csi-down::before{
  content: '';
  width: 50%;
  height: 50%;
  border: 0px;
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 25%;
  right: 25%;
}
.csi-up::before{
  content: '';
  width: 50%;
  height: 50%;
  border: 0px;
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 25%;
  right: 25%;
}

/* Menu change Close */
.csi-ex { position: absolute; width:100%; height:100%; text-align: center; }

.csi-ex > span {
  content: "";
  position: absolute;
  width: 61.8%; height: 8%;
  padding: 0; margin: 0;
  background-color: black;
  top: 46%; left: 19.1%;
  transition: 0.3s ease-in-out 0.25s;
}
.csi-ex > span:before, .csi-ex > span:after {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  left: 0;
  background-color: black;
  transition: 0.3s ease-in-out;
}

.csi-ex.wbtn > span {
  background-color: white;
}
.csi-ex.wbtn > span:before, .csi-ex.wbtn > span:after {
  background-color: white;
}

.csi-ex > span:before { top: -200%; }
.csi-ex > span:after { bottom: -200%; }

/* icon close x */
.csi-ex.toggle > span {
  background-color: transparent!important;
  transition: 0.3s ease-in-out 0s;
}
.csi-ex.toggle > span:before {
  top: 0;
  transform: rotate(45deg);
}
.csi-ex.toggle > span:after {
  top: 0;
  transform: rotate(-45deg);
}

/* Close FadeOut */
.csi-xx { position: absolute; width:100%; height:100%; text-align: center; }

.csi-xx > span {
  content: "";
  position: absolute;
  width: 61.8%; height: 8%;
  padding: 0; margin: 0;
  background-color: transparent;
  top: 46%; left: 19.1%;
  transition: 0.3s ease-in-out;
}

.csi-xx > span:after, .csi-xx > span:before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  left: 0;
  background-color: black;
  transition: 0.3s ease-in-out;
  transform: rotate(45deg);
}
.csi-xx > span:after {
  transform: rotate(-45deg);
}

.csi-xx.toggle > span:after, .csi-xx.toggle > span:before {
  width: 2%;
  height: 2%;
  border-radius: 50%;
  background-color: transparent;
  border-width: 2%;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  left: 46%;
  top: -6%;
}

/* .csi-xx color */
.csi-xx.wt > span:after, .csi-xx.wt > span:before, .csi-xx.toggle > span:after, .csi-xx.toggle > span:before {
  background-color: white;
}

/* minus change plus */
.csi--t { position: absolute; width:100%; height:100%; text-align: center; }

.csi--t span {
  content: "";
  position: absolute;
  width: 61.8%; height: 8%;
  padding: 0; margin: 0;
  background-color: transparent;
  top: 46%; left: 19.1%;
  transition: 0.3s ease-in-out;
}

.csi--t span:after, .csi--t span:before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  left: 0;
  background-color: black;
  transition: 0.3s ease-in-out;
}

.csi--t.toggle span {
  transform: rotate(0deg);
}
.csi--t.toggle span:after {
  left: -4%;
  transform: rotate(-90deg);
}

.bf-bg-white::before, .ba-bg-white::before, .ba-bg-white::after,.af-bg-white::after { background-color: white; }
.bf-bg-black::before, .ba-bg-black::before, .ba-bg-black::after,.af-bg-black::after { background-color: black; }

/*  edit ｐｅｎｃｉｌｅ  */
.csi-edit {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%; height: 100%;
}
.csi-edit:before { position: absolute; content: " ";
  top: 55%; left: 45%;
  width: 32%; height: 80%;
  margin-bottom: 20%;
  border-radius: 1px 1px 50% 50%;
  -webkit- transform:  translateX(-50%) translateY(-50%) rotate(-315deg);
  transform:  translateX(-50%) translateY(-50%) rotate(-315deg);
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid black;
}
.csi-edit:after { position: absolute; content: " ";
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0);
  border-width: 0px;
  border-left: 1px solid black;
  width: 4px; height: 50%;
  left: 50%; top: 20%;
  -webkit- transform:  rotate(-315deg);
  transform: rotate(-315deg);
}
.csi-edit span {
  position: absolute;
  content: " ";
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0);
  border-width: 0px;
  border-left: 1px solid black;
  width: 4px;
  transform: rotate(-45deg);
  height: 26%;
  top: 55%;
  left: 31%;
}

/*  trash  */
.csi-trash {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%; height: 100%;
}

.csi-trash:before {
  content: "";
  width: 46%;
  height: 50%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 18%;
  background-color: #000;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.csi-trash:after {
	font-family: arial,sans-serif;
  position: absolute;
  content: "\02162";
  bottom: 28%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #fff;
  line-height: 1;
}

.w24 .csi-trash:after {
  bottom: 16%;
  -webkit-transform: translateX(-50%) scale(0.6, 0.6);
  transform: translateX(-50%) scale(0.6, 0.6);
}

.w32 .csi-trash:after,
.w36 .csi-trash:after {
  bottom: 24%;
  -webkit-transform: translateX(-50%) scale(0.8, 0.8);
  transform: translateX(-50%) scale(0.8, 0.8);
}

.w42 .csi-trash:after,
.w48 .csi-trash:after {
  -webkit-transform: translateX(-50%) scale(1.2, 1.1);
  transform: translateX(-50%) scale(1.2, 1.1);
}

.w52 .csi-trash:after,
.w56 .csi-trash:after {
  -webkit-transform: translateX(-50%) scale(1.4, 1.4);
  transform: translateX(-50%) scale(1.4, 1.4);
}

.csi-trash > span {
  position: absolute;
  width: 52%;
  height: 10%;
  left: 50%;
  top: 20%;
  background-color: #000;
  border-top-left-radius: 80%;
  border-top-right-radius: 80%;
  -webkit-transform: translateX(-50%) rotate(-5deg);
  -moz-transform: translateX(-50%) rotate(-5deg);
  -ms-transform: translateX(-50%) rotate(-5deg);
  transform: translateX(-50%) rotate(-5deg);
}
.csi-trash > span:before {
  position: absolute;
  content: "";
  width: 26%;
  height: 100%;
  left: 50%;
  margin-left: -13%;
  margin-top: -10%;
  background-color: inherit;
  border-top-left-radius: 30%;
  border-top-right-radius: 30%;
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  transform: rotate(-1deg);
}

/*  bubule mark  */
.csi-bbl {width: 100%; height:100%; display: block;text-align: center;line-height: 1;}
.csi-bbl span {
    position: relative;
    display: inline-block;
    margin-top: 20%;
    border: 3px solid #000;
    background: #000;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 60%; height: 50%;
}
.csi-bbl span::before {
    content: "";
    position: absolute;
    bottom: -42%;
    left: 50%;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #000 transparent;
    display: block;
    width: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.w24 .csi-bbl span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.w24 .csi-bbl span::before {
  bottom: -80%;
  border-width: 2px 2px 0;
}

.w32 .csi-bbl span::before {
  bottom: -60%;
  border-width: 3px 3px 0;
}
.w36 .csi-bbl span::before {
  bottom: -50%;
  border-width: 3px 3px 0;
}
.w42 .csi-bbl span::before {
  bottom: -48%;
  border-width: 5px 5px 0;
}
.w48 .csi-bbl span::before {
  bottom: -46%;
  border-width: 6px 6px 0;
}

/* for Pin Mark */
.pin-,.pin-t, .pin-tl, .pin-tr, .pin-l, .pin-r, .pin-b, .pin-br, .pin-bl {
  background-color: #ff9800;
  z-index: 999990;
}

.pin- span, .pin-t span, .pin-tl span, .pin-tr span, .pin-l span, .pin-r span, .pin-b span, .pin-br span, .pin-bl span {
  z-index: 999992;
  color:#fff;
}
.pin-::before, .pin-t::before, .pin-tl::before, .pin-tr::before, .pin-l::before, .pin-r::before, .pin-b::before, .pin-br::before, .pin-bl::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  z-index: 999980;
}
.pin-tl::before, .pin-tr::before,.pin-bl::before,.pin-br::before,
.b-l.out .pin-::before, .b-r.out .pin-::before, .pin-b::before,
.t-l.out .pin-::before, .t-r.out .pin-::before, .pin-t::before, .pin-l::before, .pin-r::before {
	border-style : solid;
	border-width :8px 0 8px 15px;
	border-color : transparent;
	border-left-color : #ff9800;
}
.pin-l::before {
  right: -7px;
  top: 50%;
  -webkit- transform: translateY(-50%);
  transform: translateY(-50%);
}
.pin-r::before {
  left: -7px;
  top: 50%;
  -webkit- transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.t-l.out .pin-::before, .t-r.out .pin-::before, .pin-t::before {
  bottom: -7px;
  left: 0;
  right: 0;
  margin: 0 auto;
	-webkit- transform: rotate(90deg);
  transform: rotate(90deg);
}
.b-l.out .pin-::before, .b-r.out .pin-::before, .pin-b::before {
  top: -7px;
  left: 0;
  right: 0;
  margin: 0 auto;
	-webkit- transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.pin-tl::before {
  bottom: -4px;
  right: -4px;
  margin-left: auto;
  transform: rotate(45deg);
}

.pin-tr::before {
  bottom: -4px;
  left: -4px;
  margin-right: auto;
  transform: rotate(135deg);
}

.pin-bl::before {
  top: -4px;
  right: -4px;
  margin-left: auto;
  transform: rotate(-45deg);
}

.pin-br::before {
  top: -4px;
  left: -4px;
  margin-right: auto;
  transform: rotate(225deg);
}

/*  アニメ・メニューボタン */
.mnu-btn {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  pointer-events: auto;
  z-index: 3;
}

.mnu-btn:focus { outline: none; }

.mnu-btn.e-close span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  top: -4px;
  transition: 0.3s ease-in-out 0.25s;
  pointer-events: none;
  z-index: 1;
}

.mnu-btn.e-close span:before, .mnu-btn.e-close span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  left: 0;
  width: 20px; height: 2px;
  pointer-events: none;
}

.mnu-btn.e-close span:before { top: -5px; }
.mnu-btn.e-close span:after { bottom: -5px; }

.mnu-btn.e-close.toggle span {
  background-color: transparent!important;
  transition: 0.3s ease-in-out 0s;
}
.mnu-btn.e-close.toggle span:before {
  top: 0;
  transform: rotate(45deg);
}
.mnu-btn.e-close.toggle span:after {
  top: 0;
  transform: rotate(-45deg);
}
.mnu-btn.plus-close span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  top: -5px;
  transition: 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}

.mnu-btn.plus-close span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  bottom: -9px;
  left: 9px;
  width: 2px;
  height: 20px;
}

.mnu-btn.plus-close.toggle span {
  transform: rotate(225deg);
}
.mnu-btn.plus-minus span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  top: -5px;
  transform: rotate(0deg);
}
.mnu-btn.plus-minus span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  top: -9px;
  left: 9px;
  width: 2px;
  height: 20px;
}

.mnu-btn.plus-minus.toggle span {
  transform: rotate(180deg);
}
.mnu-btn.plus-minus.toggle span:after {
  height: 0;
  top: 1px;
}
.mnu-btn.ellipsis span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  left: 0;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  transform: rotate(0deg);
  transition: 0.3s ease-in-out 0s;
}
.mnu-btn.ellipsis span:before, .mnu-btn.ellipsis span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  left: -9px;
  width: 5px;
  height: 5px;
  margin: 0;
  border-radius: 2.5px;
  transition: 0.3s ease-in-out 0.25s;
}

.mnu-btn.ellipsis span:after {
  left: 9px;
}
.mnu-btn.ellipsis.toggle span {
  width: 23px;
  transition: 0.3s ease-in-out 0.25s;
}
.mnu-btn.ellipsis.toggle span:before, .mnu-btn.ellipsis.toggle span:after {
  width: 0;
  height: 0;
  margin: 2.5px 0 0 2.5px;
  transition: 0.4s ease-in-out 0s;
}
.mnu-btn.left-right span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  height: 0;
  top: -6px;
  transform: translate(9px, 0);
}
.mnu-btn.left-right span:before, .mnu-btn.left-right span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  width: 20px;
  height: 2px;
  transform-origin: 0 50%;
}

.mnu-btn.left-right span:before {
  transform: rotate(145deg);
}
.mnu-btn.left-right span:after {
  transform: rotate(-145deg);
}
.mnu-btn.left-right.toggle span {
  transform: translate(-11px, 0);
}
.mnu-btn.left-right.toggle span:before {
  transform: rotate(35deg);
}
.mnu-btn.left-right.toggle span:after {
  transform: rotate(-35deg);
}
.mnu-btn.up-down span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  height: 0;
  top: -8px;
  transform: translate(0, -7px);
}
.mnu-btn.up-down span:before, .mnu-btn.up-down span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  width: 20px;
  height: 2px;
  transform-origin: 0% 50%;
}

.mnu-btn.up-down span:before {
  transform: rotate(55deg);
}
.mnu-btn.up-down span:after {
  transform: rotate(125deg);
}
.mnu-btn.up-down.toggle span {
  transform: translate(0, 11px);
}
.mnu-btn.up-down.toggle span:before {
  transform: rotate(-55deg);
}
.mnu-btn.up-down.toggle span:after {
  transform: rotate(235deg);
}
.mnu-btn.play-pause span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  left: -6px;
  width: 2px;
  height: 20px;
  margin-bottom: -4px;
}
.mnu-btn.play-pause span:before, .mnu-btn.play-pause span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  top: 9px;
  left: 18px;
  width: 20px;
  height: 2px;
  transform-origin: 0% 50%;
}

.mnu-btn.play-pause span:before {
  transform: rotate(150deg);
}
.mnu-btn.play-pause span:after {
  transform: rotate(-150deg);
}
.mnu-btn.play-pause.toggle span:after, .mnu-btn.play-pause.toggle span:before {
  left: 2px;
  transform: rotate(-270deg);
  transform-origin: 50% 50%;
}
.mnu-btn.play-pause.toggle span:before {
  transform: rotate(270deg);
}

.mnu-btn.edit span {
  position: relative;
  display: inline-block;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 24px;
  margin-bottom: -8px;
  border-radius: 1px 1px 50% 50%;
  transform: rotate(-315deg);
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid black;
}

.mnu-btn.edit span:before, .mnu-btn.edit span:after {
  content: "";
  position: absolute;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0);
  width: 0px;
  border-width: 0px;
  border-left: 1px solid black;
}
.mnu-btn.edit span:before {
  width: 4px;
  left: 1px;
  top: 1px;
  height: 12px;
}
.mnu-btn.edit span:after {
  width: 9px;
  transform: rotate(90deg);
  height: 6px;
  top: 12px;
  left: 2px;
}

.mnu-btn.edit-save span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  transition: 0.3s ease-in-out;
  width: 20px;
  height: 20px;
  margin-bottom: -4px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 3px 7px 2px 2px;
}
.mnu-btn.edit-save span:before, .mnu-btn.edit-save span:after {
  content: "";
  position: absolute;
  transition: 0.3s ease-in-out;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid black;
}
.mnu-btn.edit-save span:before {
  top: -1px;
  left: 2px;
  width: 4px;
  height: 4px;
}
.mnu-btn.edit-save span:after {
  top: 9px;
  left: 2px;
  width: 9px;
  height: 6px;
}

.mnu-btn.edit-save.toggle span {
  top: -1px;
  left: -1px;
  width: 10px;
  height: 24px;
  margin-bottom: -8px;
  border-radius: 1px 1px 50% 50%;
  transform: rotate(-315deg);
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid black;
}
.mnu-btn.edit-save.toggle span:after, .mnu-btn.edit-save.toggle span:before {
  width: 0px;
  border-width: 0px;
  border-left: 1px solid black;
}

.mnu-btn.edit-save.toggle span:after {
  transform: rotate(90deg);
  height: 6px;
  top: 12px;
  left: 2px;
}
.mnu-btn.edit-save.toggle span:before {
  left: 1px;
  top: 1px;
  height: 12px;
}

.mnu-btn.settings span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  width: 0px;
  height: 0px;
}
.mnu-btn.settings span:after, .mnu-btn.settings span:before {
  content: "";
  position: absolute;
  display: inline-block;
  transition: 0.3s ease-in-out;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background-color: transparent;
  border: 5px solid black;
  left: -11px;
  top: -16px;
}

.mnu-btn.settings span:before {
  transform: rotate(-45deg);
}
.mnu-btn.settings.toggle span:after, .mnu-btn.settings.toggle span:before {
  width: 0px;
  height: 20px;
  left: -1px;
  top: -15px;
  border: none;
  border: 1px solid black;
  transform: rotate(45deg);
}

.mnu-btn.settings.toggle span:after {
  transform: rotate(-45deg);
}

.mnu-btn.view span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  transition: 0.3s ease-in-out;
  height: 20px;
  border-radius: 75% 0 75% 0;
  transform: rotate(45deg);
  top: 2px;
  background: transparent;
  border: 2px solid black;
}
.mnu-btn.view span:before, .mnu-btn.view span:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: 0.3s ease-in-out;
  height: 10px;
  width: 10px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
}
.mnu-btn.view.toggle span:after {
  width: 29px;
  height: 3px;
  transform: rotate(270deg);
  top: 6px;
  left: -6px;
}

.mnu-btn.closing span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  transition: 0.3s ease-in-out;
  width: 0px;
  height: 0px;
}

.mnu-btn.closing span:after, .mnu-btn.closing span:before {
  content: "";
  position: absolute;
  transition: 0.3s ease-in-out;
  width: 0px;
  height: 20px;
  left: -1px;
  top: -15px;
  border: 1px solid black;
  transform: rotate(45deg);
}

.mnu-btn.closing span:after {
  transform: rotate(-45deg);
}

.mnu-btn.closing.toggle span:after, .mnu-btn.closing.toggle span:before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: transparent;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  left: calc(50% - 6px);
  top: calc(50% - 11px);
}

.mnu-btn.wbtn.e-close span {
  background-color: white;
}
.mnu-btn.wbtn.e-close span:before, .mnu-btn.wbtn.e-close span:after {
  background-color: white;
}

.mnu-btn.wbtn.plus-close span {
  background-color: white;
}
.mnu-btn.wbtn.plus-close span:after {
  background-color: white;
}

.mnu-btn.wbtn.plus-minus span {
  background-color: white;
}
.mnu-btn.wbtn.plus-minus span:after {
  background-color: white;
}

.mnu-btn.wbtn.ellipsis span {
  background-color: white;
}

.mnu-btn.wbtn.ellipsis span:before, .mnu-btn.wbtn.ellipsis span:after {
  background-color: white;
}


.mnu-btn.wbtn.left-right span {
  background-color: white;
}
.mnu-btn.wbtn.left-right span:before, .mnu-btn.wbtn.left-right span:after {
  background-color: white;
}


.mnu-btn.wbtn.up-down span {
  background-color: white;
}
.mnu-btn.wbtn.up-down span:before, .mnu-btn.wbtn.up-down span:after {
  background-color: white;
}

.mnu-btn.wbtn.play-pause span {
  background-color: white;
}
.mnu-btn.wbtn.play-pause span:before, .mnu-btn.wbtn.play-pause span:after {
  background-color: white;
}

.mnu-btn.wbtn.edit-save span {
  background-color: transparent;
  border: 2px solid white;
}
.mnu-btn.wbtn.edit-save span:before, .mnu-btn.wbtn.edit-save span:after {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid white;
}

.mnu-btn.wbtn.edit-save.toggle span {
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid white;
}
.mnu-btn.wbtn.edit-save.toggle span:after, .mnu-btn.wbtn.edit-save.toggle span:before {
  border-left: 1px solid white;
}

.mnu-btn.wbtn.settings span {
  background-color: white;
}
.mnu-btn.wbtn.settings span:after, .mnu-btn.wbtn.settings span:before {
  border: 5px solid white;
}

.mnu-btn.wbtn.settings.toggle span:after, .mnu-btn.wbtn.settings.toggle span:before {
  border: 1px solid white;
}

.mnu-btn.wbtn.view span {
  background: transparent;
  border: 2px solid white;
}
.mnu-btn.wbtn.view span:before, .mnu-btn.wbtn.view span:after {
  background-color: white;
  background: white;
}
.mnu-btn.wbtn.closing span {
  background-color: white;
}
.mnu-btn.wbtn.closing span:after, .mnu-btn.wbtn.closing span:before {
  border: 1px solid white;
}
.mnu-btn.wbtn.closing.toggle span:after, .mnu-btn.wbtn.closing.toggle span:before {
  border-radius: 50%;
  background-color: transparent;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1);
}
.mnu-btn.wbtn.closing.toggle span {
  background: transparent;
}