.color-group-header {
	padding-left: 1.5rem;
	font-size: 22px;
	font-weight: 400;
}
.square-color-name {
	margin-left: 10% !important;
	width: 80%;
	margin-top: 10px;
	font-size: 80%;
}

.square-color-copied {
 background-color:#fff;
 margin:0 auto;
 z-index:1;
 padding:5px 14px;
 border-radius:3px;
 position:absolute;
 top:50%;
 left:50%;
 white-space:nowrap;
 text-align:center;
 -webkit-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%);
 font-size: 80%;
}

.hex-color-copied {
 top:0;
 position:absolute;
 background-color:#fff;
 margin:0;
 z-index:1;
 cursor:pointer;
 width:100%;
 padding:0;
 -webkit-user-select:none;
 -ms-user-select:none;
 user-select:none;
 font-size: 90%;
}

.fade-enter-active,
.fade-leave-active,
.fadecopy-enter-active,
.fadecopy-leave-active {
 transition:opacity .25s
}

.fadecopy-leave-active {
 transition-delay:.5s
}

.fade-enter,
.fade-leave-to,
.fadecopy-enter,
.fadecopy-leave-to {
 opacity:0
}


/*.full-field, .hex-field {
    padding: 0 !important;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*/

.full-field > .row, .hex-field > .row, .popup-full-field > .row, .popup-hex-field > .row, .popup-save-field > .row {
    margin: 0;
}

.full-field, .hex-field, .save-field {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: text-top;
    cursor: pointer;
}

.full-field, .hex-field {
    padding: 0 !important;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.full-field {
    max-width: 15px;
    margin-left: 10px;
}

.full-button {
/*    
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
    float: left;
    width: calc(var(--text-size) - 2px);
    height: calc(var(--text-size) - 2px);
    background-size: calc(var(--text-size) - 2px);
    background-position: bottom right;
    background-repeat: no-repeat;*/
}

.hex-color, .save-button {
    margin: 0;
}

.hex-color-copy {
  padding-left: 10px;
  padding-top: 5px;
  margin: 0;
}

.hex-color {
    text-align: left;
    font-size: var(--text-size);
    font-weight: 300;
}

.square .full-button, .square .hex-field > .row {
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.square:hover .full-button, .square:hover .hex-field .row {
    opacity: .5;
    transition: opacity .3s ease-in-out;
}
.square .full-button, .square .hex-field > .row {
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.square:hover .full-button:hover, .square:hover .hex-field .row:hover {
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

.square:hover .hex-field .row:hover {
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

.square-info {
    width: 80%;
    margin: 0 auto 10px;
}

.w-100 {
  padding-bottom: 90px;
}

hr {
    border: none;
    background: #000;
    background: rgba(0,0,0,.2);
    height: 1px;
    margin-left: 20px;
    margin-right: 20px;
}

.square-color:hover {
    box-shadow: 3px 3px 10px #000;
    box-shadow: 3px 3px 10px rgba(0,0,0,.33);
}

.square-color > div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}

.square-color::before {

    content: "";
    display: block;
    padding-top: 100%;

}

.square-color {
  box-shadow: 0 0;
  transition: box-shadow .3s ease-in-out;
    border-radius: 5px;
    width: 80%;
    height: 100%;
    margin-left: 10% !important;
    position: relative;
    -webkit-flex-basis: calc(25% - 10px);
    -ms-flex-preferred-size: calc(25% - 10px);
    flex-basis: calc(25% - 10px);
    /*margin-bottom: 38px;*/
    box-sizing: border-box;
}