/* BASICS */

@import url(http://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,700);

.CodeMirror {

  /* Set height, width, borders, and global font properties here */

  font-family: monospace;

  /* height: 300px; */

}



/* PADDING */



.CodeMirror-lines {

  padding: 4px 0; /* Vertical padding around content */

}

.CodeMirror pre {

  padding: 0 4px; /* Horizontal padding of content */

}



.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {

  background-color: white; /* The little square between H and V scrollbars */

}



/* GUTTER */



.CodeMirror-gutters {

  border-right: 1px solid #ddd;

  background-color: #f7f7f7;

  white-space: nowrap;

}

.CodeMirror-linenumbers {}

.CodeMirror-linenumber {

  padding: 0 3px 0 5px;

  min-width: 20px;

  text-align: right;

  color: #999;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

}



.CodeMirror-guttermarker { color: black; }

.CodeMirror-guttermarker-subtle { color: #999; }



/* CURSOR */



.CodeMirror div.CodeMirror-cursor {

  border-left: 1px solid black;

}

/* Shown when moving in bi-directional text */

.CodeMirror div.CodeMirror-secondarycursor {

  border-left: 1px solid silver;

}

.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {

  width: auto;

  border: 0;

  background: #7e7;

}

.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {

  z-index: 1;

}



.cm-animate-fat-cursor {

  width: auto;

  border: 0;

  -webkit-animation: blink 1.06s steps(1) infinite;

  -moz-animation: blink 1.06s steps(1) infinite;

  animation: blink 1.06s steps(1) infinite;

}

@-moz-keyframes blink {

  0% { background: #7e7; }

  50% { background: none; }

  100% { background: #7e7; }

}

@-webkit-keyframes blink {

  0% { background: #7e7; }

  50% { background: none; }

  100% { background: #7e7; }

}

@keyframes blink {

  0% { background: #7e7; }

  50% { background: none; }

  100% { background: #7e7; }

}



/* Can style cursor different in overwrite (non-insert) mode */

div.CodeMirror-overwrite div.CodeMirror-cursor {}



.cm-tab { display: inline-block; text-decoration: inherit; }



.CodeMirror-ruler {

  border-left: 1px solid #ccc;

  position: absolute;

}



/* DEFAULT THEME */



.cm-s-default .cm-keyword {color: #708;}

.cm-s-default .cm-atom {color: #219;}

.cm-s-default .cm-number {color: #164;}

.cm-s-default .cm-def {color: #00f;}

.cm-s-default .cm-variable,

.cm-s-default .cm-punctuation,

.cm-s-default .cm-property,

.cm-s-default .cm-operator {}

.cm-s-default .cm-variable-2 {color: #05a;}

.cm-s-default .cm-variable-3 {color: #085;}

.cm-s-default .cm-comment {color: #a50;}

.cm-s-default .cm-string {color: #a11;}

.cm-s-default .cm-string-2 {color: #f50;}

.cm-s-default .cm-meta {color: #555;}

.cm-s-default .cm-qualifier {color: #555;}

.cm-s-default .cm-builtin {color: #30a;}

.cm-s-default .cm-bracket {color: #997;}

.cm-s-default .cm-tag {color: #170;}

.cm-s-default .cm-attribute {color: #00c;}

.cm-s-default .cm-header {color: blue;}

.cm-s-default .cm-quote {color: #090;}

.cm-s-default .cm-hr {color: #999;}

.cm-s-default .cm-link {color: #00c;}



.cm-negative {color: #d44;}

.cm-positive {color: #292;}

.cm-header, .cm-strong {font-weight: bold;}

.cm-em {font-style: italic;}

.cm-link {text-decoration: underline;}

.cm-strikethrough {text-decoration: line-through;}



.cm-s-default .cm-error {color: #f00;}

.cm-invalidchar {color: #f00;}



/* Default styles for common addons */



div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}

div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }

.CodeMirror-activeline-background {background: #e8f2ff;}



/* STOP */



/* The rest of this file contains styles related to the mechanics of

   the editor. You probably shouldn't touch them. */



.CodeMirror {

  line-height: 1;

  position: relative;

  overflow: hidden;

  background: rgba(229, 229, 229, 1);

  color: black;

  font-size: 13px;

  /* box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.36) inset; */

}



.CodeMirror-scroll {

  overflow: scroll !important; /* Things will break if this is overridden */

  /* 30px is the magic margin used to hide the element's real scrollbars */

  /* See overflow: hidden in .CodeMirror */

  margin-bottom: -30px; margin-right: -30px;

  padding-bottom: 30px;

  height: 100%;

  outline: none; /* Prevent dragging from highlighting the element */

  position: relative;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

}

.CodeMirror-sizer {

  position: relative;

  border-right: 30px solid transparent;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

}



/* The fake, visible scrollbars. Used to force redraw during scrolling

   before actuall scrolling happens, thus preventing shaking and

   flickering artifacts. */

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {

  position: absolute;

  z-index: 6;

  display: none;

}

.CodeMirror-vscrollbar {

  right: 0; top: 0;

  overflow-x: hidden;

  overflow-y: scroll;

}

.CodeMirror-hscrollbar {

  bottom: 0; left: 0;

  overflow-y: hidden;

  overflow-x: scroll;

}

.CodeMirror-scrollbar-filler {

  right: 0; bottom: 0;

}

.CodeMirror-gutter-filler {

  left: 0; bottom: 0;

}



.CodeMirror-gutters {

  position: absolute; left: 0; top: 0;

  z-index: 3;

}

.CodeMirror-gutter {

  white-space: normal;

  height: 100%;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

  display: inline-block;

  margin-bottom: -30px;

  /* Hack to make IE7 behave */

  *zoom:1;

  *display:inline;

}

.CodeMirror-gutter-wrapper {

  position: absolute;

  z-index: 4;

  height: 100%;

}

.CodeMirror-gutter-elt {

  position: absolute;

  cursor: default;

  z-index: 4;

}



.CodeMirror-lines {

  cursor: text;

  min-height: 1px; /* prevents collapsing before first draw */

}

.CodeMirror pre {

  /* Reset some styles that the rest of the page might have set */

  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;

  border-width: 0;

  background: transparent;

  font-family: inherit;

  font-size: inherit;

  margin: 0;

  white-space: pre;

  word-wrap: normal;

  line-height: inherit;

  color: inherit;

  z-index: 2;

  position: relative;

  overflow: visible;

}

.CodeMirror-wrap pre {

  word-wrap: break-word;

  white-space: pre-wrap;

  word-break: normal;

}



.CodeMirror-linebackground {

  position: absolute;

  left: 0; right: 0; top: 0; bottom: 0;

  z-index: 0;

}



.CodeMirror-linewidget {

  position: relative;

  z-index: 2;

  overflow: auto;

}



.CodeMirror-widget {}



.CodeMirror-measure {

  position: absolute;

  width: 100%;

  height: 0;

  overflow: hidden;

  visibility: hidden;

}

.CodeMirror-measure pre { position: static; }



.CodeMirror div.CodeMirror-cursor {

  position: absolute;

  border-right: none;

  width: 0;

}



div.CodeMirror-cursors {

  visibility: hidden;

  position: relative;

  z-index: 3;

}

.CodeMirror-focused div.CodeMirror-cursors {

  visibility: visible;

}



.CodeMirror-selected { background: #d9d9d9; }

.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }

.CodeMirror-crosshair { cursor: crosshair; }



.cm-searching {

  background: #ffa;

  background: rgba(255, 255, 0, .4);

}



/* IE7 hack to prevent it from returning funny offsetTops on the spans */

.CodeMirror span { *vertical-align: text-bottom; }



/* Used to force a border model for a node */

.cm-force-border { padding-right: .1px; }



@media print {

  /* Hide the cursor when printing */

  .CodeMirror div.CodeMirror-cursors {

    visibility: hidden;

  }

}



/* See issue #2901 */

.cm-tab-wrap-hack:after { content: ''; }



/* Help users use markselection to safely style text background */

span.CodeMirror-selectedtext { background: none; }



/*SYTLES FOR PLUGIN*/

.cbcss_editor {

    width: 100%;

}

.cbcss_plugin_name,.cbcss_logo,.cbcss_editor{

    float: left;

}

h2.cbcss_plugin_name {

    font-family: 'Exo';

    line-height: 120px;

    /* float: right; */

    text-align: left;

    /* width: 80%; */

    font-size: 50px;

    font-weight: 200;

    text-transform: uppercase;

}

.loader {

    text-align: center;

    font-family: Exo;

    font-weight: 300;

    text-transform: uppercase;

    background: rgb(31, 98, 174);

    color: white;

    padding: 30px;

    font-size: 30px;

}



.loader.done {

    background: rgb(20, 168, 20);

}

.btn.utils {}



.btn {

    box-shadow: 0px 7px 0px 0px rgba(0, 0, 0, 0.34);

    width: 100px;

    height: 100px;

    /* display: inline-table; */

    perspective: 1500px;

    background: #474747;

    overflow: hidden;

    margin: 12px;

    position: relative;

    /* line-height: 2; */

    opacity: 0.6;

    overflow: hidden;

    color: white;

    float: left;

    text-align: center;

    display: block;

    /* transform-origin: 16% 34%; */

    transform: rotateX(30deg) translateZ(5px);

    transition: 0.2s ease-in-out;

    cursor: pointer;

    text-transform: uppercase;

    border-radius: 3px;

    vertical-align: middle;

}



.btn span {

    display: block;

    vertical-align: sub;

    font-size: 18px;

    position: relative;

    padding: 12px 0px;

    width: 100%;

    /* float: left; */

    height: 80%;

    line-height: 1;

    /* overflow: hidden; */

    /* float: left; */

    transition: 0.5s ease-in-out;

}



.btn span:before {

    width: 100%;

    font-size: 30px;

    line-height: 33px;

    position: absolute;

    bottom: 10px;

    height: 30px;

    left: 0px;

    color: #FFFFFF;

    /* border-radius: 0px 0px 3px 3px; */

    /* background: rgb(179, 179, 179); */

}



.btn:hover {

    transform: rotateX(30deg) translateZ(0px);

    opacity: 1;

    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.55);

}



.head_top {

    /* perspective: 400px; */

}



.extra {

    perspective: 1000px;

    float: left;

}



.btn:active {

    transform: rotateX(30deg) translateZ(-2px);

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.34);

    transition: 0s;

}



.head_top .settings-error {

    float: right;

    background: rgb(255, 255, 255);

    color: black;

    /* border-left: 4px solid; */

    font-family: 'Exo';

    font-size: 10px;

    font-weight: 100!important;

}



.head_top .settings-error p,.head_top .settings-error p strong {

    font-weight: 300!important;

    text-transform: uppercase;

}



.head_top .settings-error p {

    font-size: 20px;

}



.btn:hover span:before {

    /* transform: rotate(360deg); */

    font-size: 45px;

    bottom: 20px;

}



.btn span:before {

    transition: 0.4s ease-in-out;

    /* transform: rotate(0deg); */

}



.btn:hover span {

    font-size: 14px;

}