/* cagdas custom */

button:focus {
  outline: 0;
}
#logo-div img {
  max-width: 200px;
  padding: 20px;
}

#button-div {
  height: 340px;
  width: 70px;
  position: relative;
  float: right;
  margin-top: 20px;
  margin-right: 20px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  background-color: RGBA(12, 12, 12, 0.5);
}

.button-item {
  padding: 0;
  margin: 0 auto;
  display: block;
  border: none;
  width: 58px;
  height: 58px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-position: center !important;
  margin-top: 22px;
}

.save {
  background: transparent url("f-save.png") no-repeat;
}
.new {
  background: transparent url("f-add.png") no-repeat;
}
.duplicate {
  background: transparent url("f-edit.png") no-repeat;
}
.raw {
  background: transparent url("f-raw.png") no-repeat;
}

.enabled.save {
  background: transparent url("save.png") no-repeat;
}

.enabled.new {
  background: transparent url("add.png") no-repeat;
}

.enabled.duplicate {
  background: transparent url("edit.png") no-repeat;
}
.enabled.raw {
  background: transparent url("raw.png") no-repeat;
}

.enabled:hover {
  cursor: pointer;
  border: 1px solid #4a4b52;
}

body {
  background: #282a37;
  padding: 20px 50px;
  margin: 0px;
}

/* textarea */

textarea {
  background: transparent;
  border: 0px;
  color: #fff;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: monospace;
  outline: none;
  resize: none;
  font-size: 13px;
}

/* the line numbers */

#linenos {
  color: #7d7d7d;
  z-index: -1000;
  position: absolute;
  top: 20px;
  left: 0px;
  width: 30px; /* 30 to get 20 away from box */
  font-size: 13px;
  font-family: monospace;
  text-align: right;
}

/* code box when locked */

#box {
  padding: 0px;
  margin: 0px;
  width: 100%;
  border: 0px;
  outline: none;
  font-size: 13px;
  overflow: inherit;
}

#box code {
  padding: 0px;
  background: transparent !important; /* don't hide hastebox */
}

/* key */

#key {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: +1000; /* watch out */
}



#box3,
#messages li {
  background:RGBA(12, 12, 12, 0.5);
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 14px;
  padding: 10px 15px;
  margin-top:170px;
  margin-right:100px;
  -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

#box3 .label,
#messages li {
  color: #fff;
  font-weight: bold;
}

#box3 .shortcut {
  color: #c4dce3;
  font-weight: normal;
}

#messages {
  position: fixed;
  top: 0px;
  right: 138px;
  margin: 0;
  padding: 0;
  width: 400px;
}

#messages li {
	background:rgba(23,62,72,0.8);
	margin:0 auto;
	list-style:none;
}

#messages li.error {
  background: rgba(102, 8, 0, 0.8);
}




/* Reset Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background: #2c3e50;
  background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select */
.select {
  position: relative;
  display: flex;
  width: 7em;
  height: 2em;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
  left:104px;
}
select {
  flex: 1;
  padding: 8px .5em;
  color: #fff;
  cursor: pointer;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: -7px;
  right: 0;
  padding: 0 .6em;
  background: #34495e;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
/* Transition */
.select:hover::after {
  color: #f39c12;
}

#check-btn{
  height:37px;
  display:block;
  margin:0 auto;
  margin-top:20px;
  padding:3px 20px;
  font-size:19px;
  width:120px;
  font-weight: 900;
  border:2px solid;
  cursor:pointer;
}

#slct:disabled {
  color:#aaa;
}

.raw-active{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height: 100%;
  background-color: #fff;
  z-index: +1000;
}

#info-area{
  width: 180px;
  height: 35px;
  position: relative;
  left: 37px;
  background-color: #34495e;
}
#info-p{
  font-size: 18px;
  text-align: center;
  line-height: 2;
  color:white;

}

#info-span{
  color: white;
  font-size: 14px;
  position: relative;
  left: 44px;
}