* {
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  overflow: hidden;
}

body {
  background-color: RGB(35, 35, 35) !important;
  margin: 0;
  z-index: -098;
}

.modal-content {
  background-color: RGB(35, 35, 35) !important;
  color: white;
}

.optionsSet {
  text-align: center;
  width: 95px;
  height: 78px;
  padding: 17px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.5s all;
  background-color: #34353a;
}

.optionsSet:hover {
  background-color: #424549;
  box-shadow: 0 0 10px #424549;
  color: #fff;
}

#options {
  align-content: center;
  align-content: center;
  justify-content: space-around;
}

.header {
  background-color: RGB(123, 123, 123);
  width: 100vw;
  height: 70px;
  position: relative;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#nav-left {
  width: 60%;
}

#logo {
  margin-left: 30px;
}

#nav-right {
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#login {
  background-color: RGB(35, 35, 35);
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 42px;
  margin-right: 10px;
  padding-right: 47px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-decoration: none;
  padding: 0px 33px;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

#login:hover {
  background-color: palevioletred;
}

.menu-left {
  width: 30px;
  background-color: RGB(123, 123, 123);
}

.content {
  width: 98vw;
  height: 85vh;
  margin-top: 19px;
  border-radius: 7px;
  margin-left: 10px;
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu-left {
  background-color: RGB(123, 123, 123);
  width: 88px;
  height: 400px;
  border-radius: 7px;
  margin-right: 24px;
}

#menu-logo-span {
  background-color: #fff;
  -webkit-box-shadow: 3px 3px 6px black;
  box-shadow: 3px 3px 6px rgb(0, 0, 0);
  color: #222;
  display: block;
  font-size: 14px;
  font-weight: 700;
  left: 4px;
  letter-spacing: 1px;
  line-height: 22px;
  padding: 0 6px 0 7px;
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
  top: 112px;
  -webkit-transform: rotate(-4deg);
  transform: rotate(-4deg);
  white-space: nowrap;
}

#menu-logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#menu-logos-list {
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu-logos-list li {
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
  display: block;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 18px;
  margin: 15px 6px 10px;
  padding: 10px 10px;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  opacity: 0.7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* background-color: black; */
}

#menu-logos-list li:hover {
  opacity: 1;
}

#menu-logos-list li a {
  text-decoration: none;
  color: white;
  padding: 0px 6px;
  display: block;
}

.center-body {
  background-color: #7b7b7b;
  width: 94vw;
  height: 468px;
  position: absolute;
  justify-content: center;
  top: 19%;
  border-radius: 7px;
  overflow: hidden;
  align-items: center;
  display: flex;
  left: 3%;
}

.center-body #cir1{
  width: 400px;
  height: 400px;
  position: absolute;
  top: -138px;
  left: -143px;
  border-radius: 100%;
  background-color: rgb(56 65 66);
}
.center-body #cir2{
  width: 150px;
    height: 150px;
    position: absolute;
    top: 401px;
    left: 1210px;
    border-radius: 100%;
    background-color: rgb(56 65 66);
}

.center-body #welcome-text {
  text-align: center;
}

.center-body #welcome-text h1 {
  margin: auto;
  text-align: center;
  color: white;
  font-weight: 400;
  font-size: 35px;
  background-color: rgb(35, 35, 35);
  line-height: 48px;
  display: inline-block;
  margin: 32px auto 0;
  padding: 20px 30px;
  border-radius: 10px;
}

.center-body #welcome-text p {
  display: block;
  max-width: 600px;
  font-size: 19px;
  margin: 30px auto;
  color: rgb(0, 0, 0);
  font-weight: 600;
}

.center-body #welcome-text #imgBtn {
  border-radius: 20px;
  font-size: 14px;
  height: 42px;
  line-height: 42px;
  min-width: 260px;
  background: white;
  background-position: 50% 50%;
  background-size: 100%;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-top: -7px;
  color: color;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 1px;
  font-family: 'Baloo 2', cursive;
}

.center-body #welcome-text #imgBtn:hover{
  background-color: aqua;
}

.topBar {
  width: 100vw;
  background-color: RGB(35, 38, 43);
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-left: 30px;
}

.topBar #hr {
  height: 36px;
  width: 2px;
  background-color: darkslategray;
  position: absolute;
  margin: 7px 75px;
}

#no-layer-text {
  position: absolute;
  margin: 14px 164px;
  font-size: 15px;
  font-weight: normal;
  color: white;
  display: block;
  opacity: 0.7;
}

.h-img-hover {
  width: 110px;
  height: 27px;
  color: darkslategray;
  background-color: #c6cbcc;
  font-size: 13px;
  position: absolute;
  border-radius: 5px;
  margin: 12px 63px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 7px;
  text-align: center;
  display: none;
  z-index: 13200;
}

.h-img-hover-none {
  display: block;
}

.set-icon-pointer {
  position: absolute;
  margin: 13px 110px;
  opacity: 0.7;
}

.left-ions-menu {
  width: 87px;
  height: 700px;
  background-color: RGB(35, 38, 43);
}

.left-ions-menu .splitter {
  width: 87;
  height: 6px;
  background: url('/SVGS/hash.svg');
}

.left-ions-menu #list-icons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
  grid-template-columns: auto auto;
  text-align: center;
}

.left-ions-menu #list-icons .icons {
  border-radius: 3px;
  opacity: 0.7;
  cursor: pointer;
  height: 40px;
  width: 39px;
  margin: 4px 2px;
}

.icons img {
  width: 20px;
  margin-left: 3px;
  margin-right: 2px;
  margin-top: 10px;
}

#top-icon {
  width: 21px;
  margin-top: -3px;
}

.left-ions-menu #list-icons .icons:hover {
  opacity: 1;
}

.right-bar {
  width: 200px;
  background-color: RGB(35, 38, 43);
  float: right;
  height: 100vh;
}

.right-bar .splitter {
  width: 200;
  height: 6px;
  background: url('/SVGS/hash.svg');
}

#myCanvas {
  width: 1077px;
  height: 600px;
}

.canvas-container {
  left: -108px !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: translateY(-50%) !important;
  top: 55vh !important;
  border: 1px solid aqua;
  background: no-repeat center center;
}

#innercanvas {
  width: 100% !important;
  height: 100% !important;
}

.upper-canvas {
  width: 100% !important;
  height: 100% !important;
}

.imgshow {
  width: 100px;
  height: 300px;
}

.Editcontent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#editPage {
  display: none;
}

#mainPage {
  display: block;
}

.layers {
  color: white;
  text-align: center;
  position: relative;
  top: 28px;
  width: auto;
  height: 183px;
  overflow-x: hidden;
  overflow-y: hidden;
}

#add-layer-btn {
  background: none;
  border: none;
  margin: 28px 88px;
}

#add-layers-btn {
  margin-top: 4px;
  color: white;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  cursor: pointer;
}

#add-layers-btn:hover {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.img-layers-list {
  height: 181px;
  width: auto;
  margin: auto;
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  margin-right: 8px;
  margin-left: -25px;
  padding-right: 5px;
}

.img-layers-list li {
  background-color: #7b7b7b;
  padding: 6px 4px 0px;
  display: flex;
  position: relative;
  margin-bottom: 6px;
}

.img-layers-list::-webkit-scrollbar {
  width: 10px !important;
  border-radius: 2px !important;
}

.img-layers-list::-webkit-scrollbar-track {
  background: darkslategray !important;
  border-radius: 7px !important;
}

.img-layers-list::-webkit-scrollbar-thumb {
  background: RGB(63, 66, 71) !important;
  border-radius: 7px !important;
}

#layer-dlt {
  position: absolute;
  width: 18px;
  margin-left: 85%;
  margin-right: 50%;
  cursor: pointer;
  top: 31px;
}

.layers-pics {
  width: auto;
  max-width: 36px !important;
  object-fit: cover;
  margin-top: -6px;
}

.canvas-container {
  position: absolute !important;
}

#unlock-layer-btn {
  position: absolute;
  margin: 12px 0px;
  background: RGB(35, 38, 43);
  color: white;
  border: solid 2px lightgray;
  padding: 3px 23px;
  border-radius: 3px;
  opacity: 1;
  cursor: pointer;
}

#unlock-layer-btn:hover {
  border-color: aqua;
}

#unlock-layer-text {
  position: absolute;
  margin: 15px 111px;
  font-size: 15px;
  font-weight: normal;
  color: white;
  opacity: 1;
}

#unlock-layer {
  width: 72%;
  height: 46px;
  position: absolute;
  margin: 0px 178px;
  justify-content: center;
  align-items: center;
  display: none;
}

.layer-options img {
  cursor: pointer;
}

.layer-options {
  background-color: rgb(35, 35, 35);
}

#layerName {
  color: white;
  font-size: 9px;
  /* margin: -3px 9px; */
}

#layerType {
  font-size: 10px;
  font-style: italic;
  color: #c8c8c8;
  margin: -7px 0px;
}

#img-layers-list > li:hover {
  opacity: 0.8;
}

.wr {
  flex-direction: column;
  align-items: flex-start;
  margin-left: 7px;
}

.fontColor {
  display: flex;
  flex-direction: row;
  width: 64vw;
  left: 158px;
  position: absolute;
  margin-left: 9px;
  top: 5px;
  /* display: none; */
}

#textEditSubTools {
  display: none;
}

.fontSize {
  display: inline-flex;
  flex-direction: row;
  position: absolute;
  margin: 8px 274px;
}

.textColor {
  border-radius: 2px;
  border: 0px solid black;
  padding: 0px;
  margin: 9px 11px;
}

/* 
.range-input {
  -webkit-appearance: none;
  width: 200px;
  height: 2px default;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.314) default;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.range-input -webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.range-input -webkit-slider-thumb:hover {
  background: rgb(212, 212, 212);
  transform: scale(1.2);
}
.range-input -moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
.range-input -moz-range-thumb:hover {
  background: rgb(212, 212, 212);
} */

#textSize {
  width: 30px;
  font-size: 13px;
  height: 25px;
  background-color: RGB(35, 38, 43);
  color: darkgrey;
  border-left: 1px solid darkgrey;
  border-top: 1px solid darkgrey;
  border-bottom: 1px solid darkgrey;
  border-right: none;
  outline: none;
  margin-top: 6px;
  height: 25px;
}

#textSize::-webkit-outer-spin-button,
#textSize::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#textSize {
  -moz-appearance: textfield;
}

.arrow {
  transform: rotate(180deg);
  color: white;
  background: none;
  font-size: 17px;
  border-left: 1px solid darkgray;
  border-top: 1px solid darkgray;
  border-bottom: 1px solid darkgray;
  padding-bottom: 23px;
  height: 22px;
  margin: 6px 0px;
  padding-left: 5px;
  cursor: pointer;
}

.textSizeRangeBox {
  position: absolute;
  margin: 42px 328px;
  background-color: #404040;
  padding-top: 4px;
  width: 155px;
  height: 30px;
  border-radius: 6px;
  display: none;
  padding-left: 14px;
  padding-right: 15px;
}

.formatBox {
  width: 50px;
  border: 1px solid darkgray;
  height: 33px;
  padding: 5px;
  display: flex;
  cursor: pointer;
}

#arrow2 {
  transform: rotate(180deg);
  color: white;
  padding-right: 7px;
  padding-bottom: 23px;
  font-size: 18px;
}

#Format {
  display: flex;
  flex-direction: row;
  position: absolute;
  margin: 9px 390px;
}

.textFormatToolsBox {
  background-color: #404040;
  color: white;
  border-radius: 6px;
  padding: 10px;
  margin: 53px 34%;
  position: fixed;
  z-index: 2222;
  display: none;
}

.imgContainer {
  max-height: 25px;
  max-width: 38px !important;
  background-color: #34353a;
  margin: 0px 0px 6px 2px;
}

.Styles {
  display: flex;
  flex-direction: row;
  position: absolute;
  margin: 9px 526px;
}

.StylesToolsBox {
  background-color: #404040;
  color: white;
  border-radius: 6px;
  padding: 10px;
  margin: 53px 43%;
  width: 241px;
  position: fixed;
  z-index: 2222;
  display: none;
}

.accordion {
  background-color: RGB(64, 64, 64) !important;
}

.accordion-item {
  background-color: RGB(72, 72, 72) !important;
  border: 1px solid rgba(255, 245, 245, 0.06) !important;
}

.accordion-button {
  background-color: RGB(64, 64, 64) !important;
  color: white !important;
}

.curve-buttons-box {
  display: flex;
  justify-content: space-around;
}

.curve-buttons {
  width: 61px;
  height: 27px;
  font-size: 14px;
}

#arc {
  border: 0px solid black;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  background-color: rgb(46, 46, 46);
  color: white;
  transition: 0.1s all;
}

#arc:hover {
  background-color: aqua;
  color: black;
}

#circle {
  border-top: 0px solid black;
  transition: 0.1s all;
  border-bottom: 0px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  background-color: rgb(46, 46, 46);
  color: white;
}

#half {
  border: 0px solid black;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  background-color: rgb(46, 46, 46);
  color: white;
  transition: 0.1s all;
}

#half:hover {
  background-color: aqua;
  color: black;
}

.textBgColorInput {
  border-radius: 2px;
  border: 0px solid black;
  padding: 0px;
  margin: 9px 11px;
}

#textBgColorBox {
  padding: 0px 0px;
  justify-content: space-between;
  padding: 0px 0px;
  align-items: center;
  width: 207px;
  margin: 0px -7px;
}

#textBackground {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#textPunchout {
  padding: 0px 0px;
  justify-content: space-between;
  padding: 0px 0px;
  align-items: center;
  width: 207px;
  margin: 0px -7px;
}

#checkPunch {
  position: relative;
  margin: 8px 30px;
  width: 31px;
  height: 17px;
  border-radius: 25px;
  background: #999;
  outline: 0;
  -webkit-appearance: none;
  cursor: pointer;
}

#checkPunch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: calc((100% - 4px) / 2);
  height: calc(100% - 4px);
  border-radius: 50%;
  background: #eee;
  transition: all 0.1s linear;
}

#checkPunch:checked {
  background: #00ffffc9;
}

#checkPunch:checked::after {
  transform: translateX(100%);
}

#check-shape-fill {
  position: relative;
  margin: 11px 11px;
  width: 31px;
  height: 17px;
  border-radius: 25px;
  background: #999;
  outline: 0;
  -webkit-appearance: none;
  cursor: pointer;
}

#check-shape-fill::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: calc((100% - 4px) / 2);
  height: calc(100% - 4px);
  border-radius: 50%;
  background: #eee;
  transition: all 0.1s linear;
}

#check-shape-fill:checked {
  background: #00ffffc9;
}

#check-shape-fill:checked::after {
  transform: translateX(100%);
}

#textOffsetNumberInput {
  width: 43px;
  height: 23px;
  background-color: rgba(64, 64, 64, 0.06);
  border: none;
  color: white;
  outline: none;
}

.text-Shadow {
  width: 43px;
  height: 23px;
  background-color: rgba(64, 64, 64, 0.06);
  border: none;
  color: white;
  outline: none;
}

#textOffset {
  margin-top: 10px;
  justify-content: space-between;
}

.shadowBlur {
  margin-top: 10px;
  justify-content: space-between;
}

#text-offset-input {
  margin-top: 0px;
}

.shadow-input {
  margin-top: 0px;
}

#textOffsetNumberInput::-webkit-outer-spin-button,
#textOffsetNumberInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#textOffsetNumberInput {
  -moz-appearance: textfield;
}

#textOffsetNumberInput:hover {
  border: 0.5px solid aqua;
}

#textOffsetNumberInput:focus {
  border: 0.5px solid aqua;
}

#textOffsetNumberInput:blur {
  border: 0.5px solid aqua;
}

.alignCase {
  flex-direction: column;
  margin: 9px 0px;
  padding: 5px;
}

.alignCase h5 {
  font-size: 18px;
}

.align {
  margin-top: 7px;
}

.align h6 {
  font-size: 15px;
  margin-bottom: 11px;
}

.align-btn-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.align-btn {
  background-color: rgb(46, 46, 46);
  color: white;
  width: 80px;
  border: none;
  border-radius: 4px;
  padding: 3px;
  font-size: 14px;
  transition: 0.1s all;
}

.align-btn:hover {
  box-shadow: inset 0px 0px 5px aqua;
}

.textTransform {
  margin-top: 7px;
}

.textTransform h6 {
  font-size: 15px;
  margin-bottom: 11px;
}

.transfrom-text-box {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 10px;
}

.transform-btn {
  background-color: rgb(46, 46, 46);
  color: white;
  width: 80px;
  border: none;
  border-radius: 4px;
  padding: 3px;
  font-size: 14px;
  transition: 0.1s all;
}

.transform-btn:hover {
  box-shadow: inset 0px 0px 5px aqua;
}

#text-lowercase {
  font-size: 12px;
  padding-top: 5px;
  padding-bottom: 4px;
}

.font-family {
  height: 30px;
  padding: 1px;
  background-color: rgb(35, 38, 39);
  border-radius: 0px;
  color: white;
  border: 1px solid #8e8c8c;
}

#font-family-box {
  position: absolute;
  margin-left: 664px;
  width: 280px;
  margin-top: 11px;
  height: 30px;
}

#shadowColorBox {
  padding: 0px 0px;
  justify-content: space-between;
  padding: 0px 0px;
  align-items: center;
  width: 207px;
  margin: 0px -7px;
}

#shapes-sub-tools {
  display: none;
  flex-direction: row;
  position: absolute;
  margin: 6px 196px;
  width: 900px;
  height: 44px;
  align-items: center;
}

#line img {
  width: 17px;
}

#shapes-sub-tools h5 {
  font-size: 15px;
  color: white;
  padding-right: 7px;
}

.shape {
  background-color: #404040;
  padding: 7px;
  padding-top: 2px;
  border-radius: 9px;
  cursor: pointer;
  margin-right: 2px;
}

.shape img {
  width: 15px;
}

.shapes {
  padding: 10px;
  margin-top: -10px;
}

.shape:hover {
  opacity: 0.7;
}

#shapesStylesToolsBox {
  z-index: 1212;
  width: 239px;
  border-radius: 6px;
  margin-top: 51px;
  margin-left: 782px;
  position: fixed;
}

#shapesStylesToolsBox {
  z-index: 1212;
  width: 239px;
  border-radius: 6px;
  margin-top: 51px;
  margin-left: 782px;
  position: fixed;
}

#frame-sub-tools {
  width: 300px;
  position: absolute;
  margin: 13px 200px;
}

.tools-btn {
  margin-left: 20px;
  background-color: #5b5b5b;
  color: white;
  border: 1px solid grey;
  width: 120px;
  padding: 2px;
  font-size: 12px;
  height: 28px;
}

.tools-btn:hover {
  border: 1px solid aqua;
}

#navigate-bar {
  width: 100%;
  height: 21px;
  background-color: #0000003d;
  color: white;
  text-align: center;
}

#navigate-bar h4 {
  font-size: 13px;
  padding-top: 1px;
}

.minimap-box {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 151px;
}

.left-bo {
  width: 90px;
  height: 110px;
  margin: 6px 38px;;
  display: flex;
  flex-direction: column;
}

.left-bo > div > div > h4 {
  font-size: 13px;
  color: white;
}

#mouse-offsetX-box {
  display: grid;
  grid-template-columns: auto auto;
}

#mouse-offsetY-box {
  display: grid;
  grid-template-columns: auto auto;
}

#canvas-width-box {
  display: grid;
  grid-template-columns: auto auto;
}

#canvas-height-box {
  display: grid;
  grid-template-columns: auto auto;
}

#mouse-offset-minimap {
  margin: 8px 8px;
  padding-bottom: 2px;
}

#canvas-size-minimap {
  margin: 0px 8px;
}

.topBar-input {
  width: 50px;
  outline: aqua;
  height: 24px;
  background-color: #404040;
  border: 1px solid #6c6c6c;
  margin-left: 8px;
  margin-top: 2px;
  color: white;
  font-size: 14px;
}

.topBar-input::-webkit-outer-spin-button,
.topBar-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

.crop-sub-tools {
  width: 1100px;
  flex-direction: row;
  position: absolute;
  margin: 8px 190px;
  height: 40px;
  align-items: center;
  padding: 2px;
  color: white;
}

.cropRect-width-height {
  display: flex;
  justify-content: space-between;
  width: 220px;
  height: 100%;
}

.cropRect-width-height > div > h4 {
  font-size: 14px;
  margin-top: 4px;
}

.cropRect-width-height > div {
  display: flex;
}

.cropRect-width-height input {
  direction: rtl;
}

.constraints > h4 {
  font-size: 14px;
  margin-top: 4px;
  padding-right: 25px;
}

.constraints {
  width: 290px;
  justify-content: space-around;
  margin-left: 30px;
  margin-top: -6px;
}

#crop-presets {
  margin-left: 26px;
  display: flex;
  margin-top: -1px;
  height: 36px;
  align-items: center;
  margin-top: -2px;
}

#crop-preset {
  margin-left: -26px;
  margin-top: 0px;
  font-size: 13px;
}

.ratio-w-h {
  width: 250px;
  display: flex;
  margin-left: 30px;
  display: none;
}

.ratio-w-h h4 {
  font-size: 14px;
}

.ratio-w-h > div {
  display: flex;
  align-items: baseline;
}

#crop-preset option {
  font-size: 13px;
}

#marqee-tools {
  display: flex;
  flex-direction: row;
  align-content: center;
}

#marqee-tools {
  position: absolute;
  width: 700px;
  height: 44px;
  margin: 1px 165px;
  display: flex;
  flex-direction: row;
  align-content: center;
}

#marq_types {
  display: flex;
  flex-direction: row;
  width: 150px;
  height: 49px;
  justify-content: space-around;
  margin: 2px 0px;
}

#types-btn-box {
  display: flex;
  flex-direction: row;
  width: 65px;
}

#modes-btn-box {
  display: flex;
  flex-direction: row;
  width: 100px;
}

#marq_modes {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 49px;
  margin: 2px -9px;
  justify-content: space-evenly;
}

.tools-blocks > img {
  width: 14px;
}

.tools-blocks {
  background-color: #404040;
  width: 51px;
  padding: 0px 8px;
}

#marqee-tools h4 {
  font-size: 14px;
  color: white;
  margin: 4px 0px;
}

#colors-pair {
  bottom: 0;
  margin-top: 13px;
  margin-left: 7px;
  height: 110px;
  width: auto;
}

.pickersPair {
  border: 1px solid white;
  padding: 0px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  cursor: pointer;
}

#picker2 {
  z-index: 0;
  position: relative;
  margin: -31px 21px;
  background-color: black;
}

@-moz-document url-prefix() {
  #picker1 {
    margin: 0px 0px;
  }
}

#picker1 {
  z-index: 1;
  position: relative;
  background-color: white;
  margin: -34px 0px;
  /* -moz-margin */
}

#pickertools {
  position: absolute;
  display: flex;
  margin: 3px 186px;
  width: 913px;
  height: 44px;
  color: white;
}

.color-schemes h5 {
  font-size: 14px;
  margin-top: 2px;
}

.color-schemes {
  width: 190px;
  margin: 9px -131px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 26px;
  padding: 0;
}

.colorType {
  width: 23px;
  height: 23px;
  border-radius: 100%;
  background-color: black;
  border: 1px solid white;
  margin-top: 1px;
}

#pickertools h5 {
  font-size: 14px;
  margin: 3px 0px;
}

#picker-target {
  display: flex;
  margin-top: 9px;
  flex-direction: row;
}

#alter-target-btn {
  margin-left: 0px;
}

#main-target-btn {
  background-color: aqua;
  color: black;
}

.target-color-btn {
  width: 417px;
  display: flex;
}

#mousePicker {
  stroke: black;
  stroke-width: 2px;
}

.colorType {
  cursor: pointer;
}

#brush-tools {
  width: 900px;
  position: absolute;
  height: 42px;
  margin: 5px 170px;
  display: none;
}

#brush-box-btn {
  display: flex;
  flex-direction: row;
  width: 200px;
  border-radius: 30px;
  height: 30px;
  margin-left: 30px;
  background-color: #353535;
  padding: 6px 12px;
  margin-top: 5px;
  cursor: pointer;
  transition: 0.2s linear;
}

#brush-box-btn:hover {
  background-color: #05574f;
}

#brush-box-btn h4 {
  font-size: 13px;
  color: white;
  height: 19px;
}

#brush-box {
  background-color: #1c1c1c;
  position: absolute;
  width: 300px;
  height: 300px;
  z-index: 999;
  margin: 45px 198px;
  border-radius: 9px;
  border: 0.1px solid #12ffff21;
  overflow-x: hidden;
  overflow-y: auto;
}

.types-box {
  width: 260px;
  height: 70px;
  background-color: #242424a6;
  display: flex;
  flex-direction: column;
  margin: 34px 10px;
  border-radius: 8px;
}

#brush-size {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  font-size: 14px;
  color: white;
}

#brush-size > h4 {
  font-size: 15px;
  padding-left: 8px;
}

#brush-size > div {
  padding-right: 8px;
}

#brush-size-input {
  width: 230px;
  height: 4px;
  margin: 10px 15px;
}

.close-popup {
  background-color: #2d2d2d;
  display: inline-block;
  height: 20px;
  width: 40px;
  position: absolute;
  right: 0;
  left: 84%;
  top: 7px;
  border-radius: 10px;
  cursor: pointer;
}

.close-popup:hover {
  background-color: #242424;
}

.brush-shadow {
  width: 120px;
  display: flex;
  justify-content: space-evenly;
  margin: 10px 12px;
}

.brush-shadow > h4 {
  font-size: 14px;
  color: white;
}

#check-brush-shadow {
  margin-top: 3px;
}

#brush-shadow-color {
  display: none;
  width: 200px;
  height: 40px;
  align-items: center;
  margin-top: 3px;
  padding: 0;
  margin-left: -25px;
}

#check-brush-shadow-color {
  padding: 0;
  border: none;
  cursor: pointer;
}

#brush-shadow-width {
  display: none;
  width: 200px;
  height: 40px;
  align-items: center;
  margin-top: 3px;
  padding: 0;
  margin-left: -20px;
}

#check-brush-shadow-width {
  background-color: #555;
  border: 1px solid #8e8e8e;
  color: white;
  outline: none;
  width: 60px;
}

#brush-types-box {
  height: 193px;
  display: flex;
  flex-direction: column;
  margin-top: -21px;
  border: 1px solid #acacac42;
}

#brush-types-box {
  border: none;
}

.brush-types-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #acacac42;
  height: 50px;
  border-radius: 10px;
  margin: 7px 12px;
  width: 235px;
  cursor: pointer;
}

.brush-types-box:hover {
  border: 1px solid #acacacc4;
}

.brush-types-box h4 {
  color: white;
  font-size: 15px;
}

.brush-types-box img {
  width: 68px;
}

#def_brush_box {
  border: 1px solid aqua;
}

#brush-shapes-box h4 {
  color: white;
  font-size: 15px;
  margin: 3px 10px;
}

#brush-shapes-box {
  display: flex;
  flex-direction: column;
}

#brush-shapes-box2 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 9px;
}

.brush-shapes {
  background-color: #282828;
  width: 30px;
  text-align: center;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #282828;
  cursor: pointer;
}

#pen-tools {
  display: flex;
  position: absolute;
  width: 500px;
  height: 40px;
  color: white;
  margin: 6px 180px;
  padding: 6px 19px;
}

#pen-tools > h4 {
  margin: 3px 16px;
  font-size: 15px;
}

#pen-tools div select {
  width: 130px;
  color: white;
  background-color: #3c3c3c;
  border: 1px solid grey;
  margin-top: 1px;
}

.norm-tools {
  position: absolute;
  width: 600px;
  height: 40px;
  margin: 6px 200px;
}

.norm-inner {
  width: 400px;
  height: 38px;
  display: flex;
  flex-direction: row;
}

.norm-inner > h4 {
  font-size: 15px;
  color: white;
  margin: 10px 10px;
}

.norm-inner > h5 {
  font-size: 15px;
  color: white;
  margin: 8px 10px;
}

.norm-inp {
  width: 100px;
  height: 2px;
  margin: 19px 3px;
}

#eraser-tip {
  display: flex;
  height: 38px;
  position: absolute;
  margin: 2px 250px;
}

#eraser-tip button {
  width: 200px;
  margin: 3px 0px;
}

#eraser-tip {
  display: flex;
  height: 38px;
  position: absolute;
  margin: 2px 250px;
  justify-content: space-between;
  width: 300px;
}

#eraser-tip button {
  width: 127px;
  margin: 3px 0px;
}

#eraser-tip h4 {
  color: white;
  font-size: 14px;
  margin: 7px 0px;
}

#soft-eraser {
  background-color: aqua;
  color: black;
}

#cut-tools {
  width: 600px;
  position: absolute;
  height: 40px;
  margin: 6px 190px;
}

#cut-tools h4 {
  font-size: 14px;
  color: white;
  margin: 11px 10px;
}

#cut-innertools {
  display: flex;
  flex-direction: row;
  width: 360px;
}

#inner-cut-tools-box {
  display: flex;
  flex-direction: row;
  height: 40px;
  margin: 6px 10px;
  width: 85px;
  justify-content: space-around;
}

.cut-tools {
  background-color: #343434;
  cursor: pointer;
  width: 35px;
  border-radius: 7px;
  border: 1px solid #343434;
  padding: 0px 7.8px;
  height: 30px;
}

.cut-tools > img {
  width: 18px;
}

#draw-cut {
  border: 1px solid aqua;
}

#dodge-tools {
  width: 1100px;
  position: absolute;
  display: flex;
  flex-direction: row;
  height: 40px;
  margin: 6px 160px;
}

#dodge-mode {
  display: flex;
  flex-direction: row;
}

#dodge-mode h4 {
  font-size: 14px;
  color: white;
  margin: 10px 1px;
}

#dodge-mode-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 6px;
  margin-left: 9px;
}

#dodge-mode-btns button {
  margin-left: 0px;
}

.dodge-btns {
  font-size: 10px;
}

#dodge-size {
  display: flex;
  width: 227px;
  margin-left: 9px;
  padding: 9px 10px;
  justify-content: space-evenly;
}

#dodge-size-box {
  padding: 0px;
  margin-top: -6px;
}

#dodge-size h4 {
  font-size: 14px;
  color: white;
}

#dodge-size input {
  height: 3px;
  width: 111px;
}

#save-btn {
  width: 76px;
  height: 50px;
  font-size: 11px;
  background-color: #1a1a1a;
  color: white;
  border: 1px solid #3e3e3e;
  transition: 0.1s linear;
}

#addition-tools-box {
  margin-top: 115px;
  margin-left: 5px;
}

#additional-tools-btn:hover {
  background-color: #1a1a1a;
  border: 1px solid #1275a6;
}

#additional-tools-popover {
  width: 1300px;
  height: 600px;
  position: absolute;
  z-index: 999999;
  background-color: rgb(35, 38, 43);
  border: 1px solid grey;
  left: 50%;
  right: 50%;
  transform: translate(-50%);
  margin-top: 10px;
  display: none;
  transition: 0.2s linear all;
  box-shadow: 0px 0px 200px 90px #000;
}

#close-popup-tools {
  display: inline-block;
  background-color: #353535;
  margin: 8px -10px;
  position: absolute;
  right: 0;
  left: 96%;
  width: 50px;
  height: 28px;
  padding: 0px 13px;
  border-radius: 10px;
  cursor: pointer;
}

#close-popup-tools :hover {
  background-color: #1c1c1c;
}

.loader {
  border: 0px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid grey;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#adjust-tools {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 5px;
  height: 43px;
  left: 155px;
  width: 1100px;
  justify-content: space-around;
  align-items: center;
}
.adjust-tools-box {
  display: flex;
  flex-direction: row;
  height: 26px;
  border-radius: 9px;
}
.adjust-tools-box .adjust-inner-box {
  border: none;
  color: white;
  padding: 0px 7px;
  font-size: 14px;
  display: flex;
  width: 80px;
  align-items: center;
  justify-content: center;
  background-color: RGB(40, 43, 57);
}
.adjust-tools-box .adjust-btn {
  border: none;
  width: 20px;
  display: flex;
  background-color: aqua;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.active-icons {
  background-color: rgb(63, 66, 71);
  opacity:1;
}