/**
 * @author  Ikaros Kappler
 * @date    2018-07-06
 * @version 1.0.0
 **/



body {
    display           : block;
    margin            : 0px;
    padding           : 0px;
    height            : 100%;
    overflow          : hidden;
}

.font-mono {
    font-family       : monospace;
    font-size         : 13px;
    line-height       : 23px;
}

.pastebee header {
    display           : flex;
    align-items       : center;
    width             : 100%;
    height            : 42px;
    padding-left      : 12px;
}

.pastebee header a {
    display           : flex;
    color             : white;
    text-decoration   : none;
}

.pastebee header a:hover {
    text-decoration   : underline;
}

.pastebee header a:active {
    text-decoration   : underline;
}

.pastebee header div {
    display           : flex;
    align-items       : center;
}

.pastebee header #logo {
    display           : inline-block;
    height            : 32px;
    width             : 32px;
    background        : url('../img/logo-128x128-white.png');
    background-repeat : none;
    background-size   : contain;
    margin-right      : 4px;
}

.pastebee header #appname {
    display           : inline-block;
}

.pastebee header #version {
    display           : inline-block;
    font-size         : 7pt;
}

.pastebee header .search-wrapper {
    display           : flex;
    align-items       : right;
    justify-content   : top;
}

.pastebee header .search-wrapper #search-icon {
    cursor            : pointer;
}

.pastebee header .search-wrapper #search-container {
    display           : block;
    background        : white;
    min-height        : 32px;
    min-width         : 100vw;
    width             : 100vw;
    position          : absolute;
    left              : 0px;
    top               : 42px;
    z-index           : 9999;
}

.pastebee header .search-wrapper #search-container #search-input {
    width             : 250px;
}

.pastebee header .search-wrapper #search-container #clear-search {
    display           : inline-block;
    cursor            : pointer;
    color             : black;
}

.pastebee header .search-wrapper #search-container #search-results {
    display           : block;
    width             : 100%;
    font-family       : Helvetica, Arial, sans-serif;
    padding-left      : 16px;
    color             : black;
}

.pastebee header .search-wrapper #search-container #search-results a {
    color             : black;
    font-size         : 10pt;
}

.pastebee header * form {
    display           : flex;
}

.pastebee .info {
    position     : absolute;
    width        : 100%;
    top          : 42px;
    height       : 66px;
    padding-left : 12px;
}

.pastebee .info input[name=title] {
    width        : 550px;
    max-width    : 100%;
}

.pastebee .linenos {
    position      : absolute;
    left          : 0px;
    top           : 108px;
    display       : inline-block;
    width         : 32px;
    height        : calc( 100% - 112px );
    z-index       : -100;
    text-align    : right;
    box-sizing    : border-box;
    padding-right : 12px;
    padding-top   : 2px;
}

.pastebee textarea, .pastebee pre {
    position     : absolute;
    left         : 32px;
    top          : 108px;
    background   : transparent;
    display      : inline-block;
    width        : calc( 100% - 42px );
    height       : calc( 100% - 112px );
    resize       : none;
    box-sizing   : border-box;
}

/* Helper classes */
.center-v {
    position           : relative;
    top                : 50%;
    transform          : translateY(-50%);
}

.d-none {
    display            : none !important;
}

.mtop-transition-0px {
    margin-top         : 0px;
    webkit-transition  : margin-top .5s;
       moz-transition  : margin-top .5s;
        ms-transition  : margin-top .5s;
         o-transition  : margin-top .5s;
           transition  : margin-top .5s;
}

.mtop-transition-36px {
    margin-top         : -36px;
    webkit-transition  : margin-top .5s;
       moz-transition  : margin-top .5s;
        ms-transition  : margin-top .5s;
         o-transition  : margin-top .5s;
           transition  : margin-top .5s;
}





/*** custom checkbox ***/
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 8px; } /* allow space for check mark */



/* Line numbers from highlightjs-line-numbers.js */
/* for block of numbers */
td.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: right;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 10px !important;

    /* your custom style here */
}

/* for block of code */
td.hljs-ln-code {
    padding-left: 10px;
}

td.hljs-ln-code div.hljs-ln-line:before {
    display : inline-block;
    content : " ";
}


/* Add a break point for smaller devices */
@media only screen and (max-width: 720px) {
    .pastebee .info {
	height       : 112px;
    }
    .pastebee .linenos {
	top           : 154px;
	height        : calc( 100% - 154px );
    }
    .pastebee textarea, .pastebee pre {
	top          : 154px;
	height       : calc( 100% - 154px );
    }
}

/* Add a break point for really small evices */
@media only screen and (max-width: 380px) {
    .pastebee .info {
	height       : 132px;
    }
    .pastebee .linenos {
	top           : 174px;
	height        : calc( 100% - 174px );
    }
    .pastebee textarea, .pastebee pre {
	top          : 174px;
	height       : calc( 100% - 174px );
    }
}