.wrapper{ height: 100%}
.colorList-icon{ display: none!important}

.colorbg{  width:100%; height: 100%; position:absolute; display: flex; align-items: center; justify-content: center; background-attachment: fixed;   overflow: auto;    }
.colorbg-bk{ position:absolute;; width: 100%; height: 100%;  }
.colorbg-content{  text-align: center; z-index: 2; position: relative; background: rgba(0,0,0,0.1); padding:20px 20px; border-radius: 10px; max-width: 90%; max-height: 90%; overflow: auto; }

.functionBar{ color:#FFFFFF; margin:10px 0px; width:auto; margin-top:20px  }
.functionBar i{  padding:5px; border-radius:50%; cursor:pointer; text-shadow:0 0 5px rgba(0,0,0,0.5)}
.deg.on{ background:rgba(255,255,255,0.5); border:1px solid #ffffff}

.colorAll{ position:relative; margin: 0 auto;  }

.color{ padding: 5px;; width:80px;  display:inline-block; position:relative;   text-align:center  }
 

.color b{ display:block; background:#ffffff; width:20px; height:20px; padding:0px; text-align:center; line-height:20px; border-radius:20px;  position:absolute; top:1px; right:5px; z-index:5;box-shadow:0 0 10px rgba(0,0,0,0.2);  cursor:pointer;opacity:0; }
.color b i{ font-size:10pt;}
.color:hover b{opacity:1}


.color-select{ padding:10px 25px ;width:50px; height:50px;  border-radius:50px;  border:0px; text-align:center; z-index:1; box-shadow:0 0 10px rgba(0,0,0,0.2)  }


.colorInfoAll{ text-align:center; color:#FFFFFF; text-shadow:0px 0px 5px rgba(0,0,0,0.5);margin: 0 auto;   }
.colorInfo{   display:inline-block; margin-top: 5px; }
.colorInfo > input{ width:100%; text-align:center; border:0px; border-radius:5px;   background:rgba(0,0,0,0.2)!important;  color:#FFFFFF;; margin-bottom:2px}


.colorAdd{   display:block;  width: 100%;;  } 
	.colorAdd i{opacity: 0.5; line-height: 100%; font-size: 30pt; margin-top: 2px; color: #FFFFFF; cursor: pointer; }
.colorAdd i:hover{opacity:0.8}


.colorSerArea{ max-width:99%; margin: 0 auto;    overflow-y: auto; text-align: center; }


.colorSet{ width:160px; margin:0 auto; position:relative; padding:10px 0px}
.colorSetColor{; display:block; font-size:9pt;    border:0px;   position:absolute ; border-radius:50px; width:40px; height:40px; border:0px; text-align:center;   box-shadow:0 0 5px rgba(0,0,0,0.5) ; padding-top:10px; color:#FFFFFF;text-shadow:0px 0px 5px #666666}

.colorSetBar{width: calc(100% - 40px); height:10px; background:#ffffff;opacity:0.5; margin:15px 20px; float:left}

.css{max-width:99%; margin-top: 10px;}

.css h3{background:rgba(0,0,0,0.3); color:#FFFFFF; padding: 5px;}
.css_data{background:rgba(0,0,0,0.2); color:#FFFFFF; padding:10px ;border:0; width:100%; height:100px;  text-align:center;    }


.function-bar { display: flex; align-items: center; justify-content: center; padding: 00px 0px;}
.function-bar a{   margin: 3px; cursor: pointer;;}
.function-bar i{ color: #FFFFFF; font-size: 20pt; text-shadow:0px 0px 5px #666666}

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

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


}