@import url(https://fonts.googleapis.com/css?family=Poppins:400,600,700);@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*{font-family:"Poppins";font-weight:400}:root{--label-gray:#8b8b8b;--input-bg-gray:#ebebeb;--input-text-gray:#686868;--hover-gray:#cecece;--input-text-light-gray:#f5f5f5;--css-gray:#333}.App{flex-direction:column;background-color:#f5f5f5;background-color:var(--input-text-light-gray);height:auto}.App,.container{display:inline-flex;width:auto}.container{padding:20px 50px 0;justify-content:space-around}.wrapper{display:flex;justify-content:center}input{background-color:#ebebeb;background-color:var(--input-bg-gray);color:#686868;color:var(--input-text-gray);border:none;margin:3px;border-radius:5px;text-align:center;box-sizing:border-box}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input:focus,textarea:focus{box-shadow:inset 2px 2px 7px #686868;box-shadow:inset 2px 2px 7px var(--input-text-gray);border-radius:5px;outline:none}h2{color:#8b8b8b;color:var(--label-gray);text-align:left;margin:0 0 5px;font-weight:600}h2,p{padding:0}p{margin:0}@keyframes fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}.left{display:inline-flex;justify-content:space-around}.left,.right{flex-direction:column;flex-grow:1}.right{margin-left:50px}.color-picker,.right{display:flex}.color-picker-left{flex-grow:1}.color-picker-right{display:flex;flex-direction:column;margin-left:20px;flex-grow:1}.MuiButtonBase-root p{font-size:15px}.MuiButtonBase-root{border-radius:20px!important}.MuiFormGroup-root{flex-direction:row!important;flex-wrap:nowrap!important;flex-grow:1;justify-content:flex-end;margin-right:-13px}.MuiTypography-body1{font-weight:600!important;color:#8b8b8b!important;color:var(--label-gray)!important;font-family:"Poppins"!important;margin-left:2px!important}.header-container{height:auto;background-color:#fafafa;display:flex;padding:5px 50px;align-items:center}.header-container h1{background:linear-gradient(45deg,#87cefa,#da71d6);background-clip:text;-webkit-background-clip:text;color:transparent;padding:0;margin:0;font-weight:700;font-size:30px}.header-container img{height:25px;width:25px;margin-right:10px}.header-container p{margin-left:5px;font-size:10px;font-weight:600;color:var(--label-gray);margin-bottom:15px}.hexpicker-container{display:flex;flex-direction:column;margin-right:50px}.hexpicker-bottom{display:flex;margin:20px 0}.colorslide-container{height:250px;width:20px;position:relative;display:flex;align-items:baseline}.hexgradient-container{height:250px;width:250px;margin-right:20px;position:relative;display:flex;cursor:pointer}.hexgradient-black,.hexgradient-white{border-radius:5px}.hexgradient-base{border-radius:8px 5px 5px 5px}.hexgradient-base,.hexgradient-black,.hexgradient-white{height:100%;width:100%;position:absolute}.hexgradient-white{background:linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0))}.hexgradient-black{background:linear-gradient(180deg,transparent 0,#000)}.sl-slider{height:20px;width:20px;border-radius:20px;background-color:var(--input-text-light-gray);box-shadow:2px 2px 7px #000;z-index:1;margin-top:-10px;margin-left:-10px}.sl-slider:hover{background-color:var(--hover-gray)}.currentcolor-container{display:flex;flex-direction:column}.currentcolor-content{display:flex;margin:0}.currentcolor-colorbox{border-radius:5px;height:150px;width:150px}.currentcolor-info{display:grid;grid-template-columns:30% 70%;grid-template-rows:25% 25% 25%;width:130px;align-items:center;margin-left:20px}.currentcolor-info p{text-align:right;color:var(--label-gray);font-weight:600;padding-right:10px;margin:0}.currentcolor-info input{width:80px;height:25px;font-size:12px}.stack-container{display:flex;flex-direction:column;width:450px;height:400px}.stack-icon-container{cursor:pointer;padding:5px;margin-left:10px;border-radius:20px;height:23px;margin-bottom:5px;display:flex;align-items:center;justify-content:center}.stack-icon-container svg{transition:transform .1s}.stack-icon-container:hover{background-color:var(--hover-gray)}.stack-icon-container:hover svg{transform:scale(1.1)}.stack-header{display:flex;align-items:center}.stack-container-label{display:grid;width:100%;grid-template-columns:10% 55% 25% 10%;grid-template-rows:100%;align-items:center}.stack-container-label p{text-align:center;color:var(--label-gray);font-weight:600}.stackitem-container{display:grid;grid-template-columns:10% 55% 25% 10%;width:auto;grid-template-rows:100%;align-items:center;padding:0 10px;border-radius:5px;opacity:.999;position:relative;transition:all .1s ease-in}.stackitem-close svg,.stackitem-drag svg{transition:transform .1s}.stackitem-close svg{cursor:pointer}.stackitem-drag svg{cursor:move}.stackitem-close svg:hover,.stackitem-drag svg:hover{transform:scale(1.15)}.stackitem-container input{height:40px;font-size:15px;width:90%;margin:7px}.stackitem-icon-container{width:48px}.stackitem-close,.stackitem-drag,.stackitem-no-close{display:none}.stackitem-container:hover .stackitem-close,.stackitem-container:hover .stackitem-drag,.stackitem-container:hover .stackitem-no-close,.stackitem-selected .stackitem-close,.stackitem-selected .stackitem-drag,.stackitem-selected .stackitem-no-close{display:flex;align-items:center}.stackitem-no-close{cursor:not-allowed!important}.stackitem-container:hover,.stackitem-selected{background-color:var(--hover-gray)}.stackitem-selected{border-radius:5px}.stackitem-dark input{color:var(--input-text-light-gray)}.add-color-container{margin-top:20px;display:flex;justify-content:center}.add-color-container p{color:var(--input-text-gray)}.add-color-button{display:flex;align-items:center;justify-content:center;padding:5px 15px 5px 10px;border-radius:30px;box-shadow:2px 2px 7px var(--input-text-gray);width:130px;cursor:pointer;transition:all .1s ease-in}.add-color-button-disabled{display:none}.add-color-button:hover{background-color:var(--hover-gray)}.add-color-button:hover svg{transform:scale(1.1)}.add-color-button:hover p{font-weight:600}.add-color-button svg{transition:transform .1s}.suggested-container{display:flex;flex-direction:column;margin-top:30px}.suggested-content{display:flex}.suggested-header,.suggested-icon-container{display:flex;align-items:center}.suggested-icon-container{cursor:pointer;margin-left:10px;padding:5px;border-radius:20px;height:23px;width:23px;margin-bottom:5px;justify-content:center}.suggested-icon-container svg{transition:transform .1s}.suggested-icon-container:hover{background-color:var(--hover-gray)}.suggested-icon-container:hover svg{transform:scale(1.1)}.suggesteditem-container{display:flex;flex-direction:column;width:auto;align-items:center;padding:10px;cursor:pointer;border-radius:5px;transition:all .1s ease-in}.suggesteditem-container p{color:var(--input-text-gray)}.suggesteditem-container:hover p{font-weight:600}.suggesteditem-colorbox{height:60px;width:60px;border-radius:5px;margin-bottom:5px}.suggesteditem-container:hover,.suggesteditem-selected{background-color:var(--hover-gray)}.suggesteditem-selected{border-radius:5px}.suggesteditem-selected p{font-weight:600}.stopbar-container{margin-bottom:30px;display:flex;align-items:flex-start}.css-container{margin-top:15px;position:relative;height:auto;display:flex;flex-direction:column;width:350px}.css-content{height:154px}.css-content textarea{background:var(--css-gray);color:var(--input-text-light-gray);text-align:left;font-family:monospace;padding:20px;font-size:12px;width:350px;border-radius:5px;resize:none;box-sizing:border-box}.css-container:hover .copybutton-container{display:flex;-webkit-animation:fadein .5s;animation:fadein .5s}.copybutton-container{display:none;position:absolute;right:10px;bottom:10px;box-shadow:2px 2px 7px #000;cursor:pointer;border-radius:25px;height:40px;background-color:var(--input-text-light-gray);transition:all .1s ease-in}.copybutton-container:hover{background-color:var(--hover-gray)}.copybutton-container:hover svg{transform:scale(1.1)}.copybutton-container svg{transition:transform .1s}.preview-container{display:table;flex-direction:column;height:450px;width:350px}.preview-header{justify-content:space-between}.preview-header h2{flex-grow:1}.preview-content{border-radius:5px;position:absolute;top:0;left:0}.preview-content-wrapper{position:relative;height:350px;width:350px;display:table}.preview-interface{display:flex;margin-top:10px;align-items:center;justify-content:space-between}.preview-buttons-container{display:none;transition:all .1s ease-in;position:absolute;left:10px}.preview-container:hover .preview-buttons-container{display:flex;-webkit-animation:fadein .5s;animation:fadein .5s}.preview-interface input{height:40px;width:70px;font-size:15px}.preview-interface p{color:var(--label-gray);font-weight:600}.preview-header{display:flex;align-items:center;margin-bottom:10px}.preview-header h2{padding-right:20px;border-right:1px solid var(--label-gray);margin:0}.downloadbutton-container{position:absolute;left:0;bottom:0;width:40px;box-shadow:2px 2px 7px #000;cursor:pointer;border-radius:25px;height:40px;background-color:var(--input-text-light-gray)}.downloadbutton-container:hover{background-color:var(--hover-gray)}.downloadbutton-container:hover svg{transform:scale(1.1)}.downloadbutton-container svg{transition:transform .1s}.expandbutton-container{position:absolute;left:0;bottom:55px;width:40px;box-shadow:2px 2px 7px #000;cursor:pointer;border-radius:25px;height:40px;background-color:var(--input-text-light-gray)}.expandbutton-container:hover{background-color:var(--hover-gray)}.expandbutton-container:hover svg{transform:scale(1.1)}.expandbutton-container svg{transition:transform .1s}.dimensions-container{display:flex;align-items:baseline;padding-right:10px;flex-grow:1;border-right:1px solid var(--label-gray)}.degrees-container{margin-left:15px;align-items:baseline;display:flex}.center-container{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;margin-right:3px;margin-left:-3px}.center-grid{margin-left:5px;display:grid;height:40px;width:40px;grid-template-columns:1fr 1fr 1fr;grid-gap:1px;cursor:pointer}.center-grid-item{height:100%;width:100%;border:1px solid var(--label-gray);box-sizing:content-box}.center-grid-item-selected,.center-grid-item:hover{background-color:var(--hover-gray)}.center-grid-item-selected{height:100%;width:100%;border:.5px solid var(--label-gray)}.copyconfirmation-container{width:100%;position:fixed;bottom:20px;display:flex;justify-content:center}.copyconfirmation-content{display:flex;width:250px;height:30px;border-radius:5px;box-shadow:2px 2px 7px var(--input-text-gray);padding:7px;align-items:center;justify-content:center}.copyconfirmation-content p{color:var(--input-text-gray);margin-left:5px}
/*# sourceMappingURL=main.0b014d6e.chunk.css.map */