.sp-picker-container {
    padding: 0;
    width: 200px;
    background: transparent;
    padding-bottom: 85px;
    margin-bottom: 0;
    border: 0;
}
.sp-input-container {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: white;
}
.sp-input {
    border: 0;
    outline: none;
    margin: 0;
    width: 100%;
    padding: 8px;
    font-family: monospace;
    text-align: center;
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
}
.sp-alpha, .sp-hue, .sp-alpha-inner {
    border-radius: 3px;
}
.sp-slider, .sp-alpha-handle {
    height: 15px;
    width: 15px;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    top: -2px;
    background: #f8f8f8;
    opacity: 1;
}
.sp-alpha {
    height: 12px;
    bottom: -50px;
    right: 15px;
    left: 15px;
    position: absolute;
}
.sp-button-container {
    display: none;
}
.sp-alpha-inner {
    border: 0;
}
.sp-hue {
    position: absolute;
    bottom: -27px;
    border: none;
    height: 12px;
    right: 15px;
    left: 15px;
    background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.sp-container {
    border: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    border-radius: 5px;
}

.sp-color {
    border: 0;
    right: 0;
}

.sp-dragger {
    position: sticky;
    height: 10px;
    width: 10px;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    border: 1px white solid;
    background: transparent;
}


/* ----- Material Icons ----- */
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-display: block;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
         local('MaterialIcons-Regular'),
         url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
         url(../fonts/MaterialIcons-Regular.woff) format('woff'),
         url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
    font-family: "Roboto Regular";
    font-style: normal;
    font-display: block;
    font-weight: 400;
    src: url(../fonts/Roboto-Regular.ttf);
}
i.icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

i.icon.icon_zap:after{content:"flash_on";}i.icon.icon_check:after{content:"check";}i.icon.icon_wait:after{content:"access_time";}i.icon.icon_search:after{content:"search";}i.icon.icon_close:after{content:"close";}i.icon.icon_announcement:after{content:"new_releases";}i.icon.icon_unlisted:after{content:"visibility_off";}i.icon.icon_bookmark:after{content:"bookmark"}i.icon.icon_colorpicker:after{content:"color_lens"}i.icon.icon_inbox:after{content:"inbox"}i.icon.icon_paste:after{content:"content_paste"}i.icon.icon_photo:after{content:"photo"}i.icon.icon_error:after{content:"error"}i.icon.icon_build:after{content:"build"}i.icon.icon_settings:after{content:"settings"}i.icon.icon_swap_horiz:after{content:"swap_horiz"}i.icon.icon_star:after{content:"star"}i.icon.icon_link:after{content:"link"}i.icon.icon_help:after{content:"help"}i.icon.icon_books:after{content:"books"}i.icon.icon_email:after{content:"email"}i.icon.icon_notifications:after{content:"notifications"}i.icon.icon_bug_report:after{content:"bug_report"}i.icon.icon_dashboard:after{content:"dashboard"}i.icon.icon_airport_shuttle:after{content:"airport_shuttle"}i.icon.icon_favorite:after{content:"favorite"}i.icon.icon_forum:after{content:"forum"}i.icon.icon_warning:after{content:"warning"}i.icon.icon_info:after{content:"info"}i.icon.icon_cake:after{content:"cake"}i.icon.icon_privacy:after{content:"lock"}i.icon.icon_tos:after{content:"school"}
/* ----- Material Icons end ----- */





/* ----- Smooth shaking animation ----- */
.shaking {
    animation: shake .5s linear;
}

@keyframes shake {
    8%, 41% {
        transform: translateX(-10px);
    }
    25%, 58% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-5px);
    }
    92% {
        transform: translateX(5px);
    }
    0%, 100% {
        transform: translateX(0);
    }
}
/* ----- Smooth shaking animation end ----- */







.content .section .secondary {
    color: black;
    font-weight: bold;
    text-transform: lowercase;
    display: inline-block;
    padding-left: 4px;
    margin: 0;
    font-size: 27px;
}

.content .section .secondary, .side label .status.active {
    opacity: 0.35;
}

.content .section .primary {
    position: relative;
    font-size: 27px;
    font-weight: bold;
    text-transform: lowercase;
    margin: 0;
    display: inline-block;
    color: #5581b5;
}

.section.announcement .primary, .section.announcement .icon {
    color: #e05746;
}
/* ----- General layout end ----- */

/* ----- Old browser warning ----- */

.content .section.old-browser .primary, .content .section.old-browser .icon {
    color: #e05746;
}

.content .section.old-browser .tool-message {
    padding-top: 5px;
    color: #e05746;
}

/* ----- Old browser warning end ----- */



/* ----- Converter styling ----- */
.sides-primary-button {
    margin-top: 15px;
}
.sides-primary-button button:active {
    box-shadow: 0 1px 0 0 #2e4765;
    transform: translateY(2px);
}
.sides-primary-button button {
    position: relative;
    transition: all 0.1s ease;
    width: 100%;
    border: none;
    outline: none;
    font-family: "Roboto Regular";
    text-shadow: 0px 1px 0px black;
    font-weight: bold;
    color: white;
    font-size: 18px;
    padding: 10px 0 10px 0;
    box-shadow: 0px 3px 0 0 #2e4765;
    background: #476c98;
    border-radius: 5px;
    cursor: pointer;
}

/* Sublime Monokai default editor theme */
.side[data-theme="theme-editor"] label {
    color: #272822;
}
.side[data-theme="theme-editor"] .side-wrapper {
    background: #272822;
}
.sides .side[data-theme="theme-editor"] .side-wrapper:after {
    border-bottom: 8px #272822 solid;
}
.side[data-theme="theme-editor"] .side-widgets {
    background: #22231e;
    box-shadow: inset 0px 6px 6px -6px rgba(0, 0, 0, 0.5), 0px 3px 0 0 black;
}

/* Plaintext editor theme */
.side[data-theme="theme-plain"] label {
    color: #476c98;
}
.side[data-theme="theme-plain"] .side-wrapper {
    background: #f7f7f7;
}
.sides .side[data-theme="theme-plain"] .side-wrapper:after {
    border-bottom: 8px #f7f7f7 solid;
}
.side[data-theme="theme-plain"] .side-widgets {
    background: #ececec;
    box-shadow: inset 0px 6px 6px -6px rgba(0, 0, 0, 0.5), 0px 3px 0 0 #cccccc;
}
.side[data-theme="theme-plain"] .side-widgets .widget {
    color: #505050;
    text-shadow: none;
}

/* Binary editor theme */
.side[data-theme="binary"] label {
    color: black;
}
.side[data-theme="binary"] .side-wrapper {
    background: black;
    padding: 0;
}
.sides .side[data-theme="binary"] .side-wrapper:after {
    border-bottom: 8px black solid;
}
.sides .side[data-theme="binary"] .data-wrapper {
    height: 306px;
}
.side[data-theme="binary"] .side-widgets {
    background: #2f2f2f;
    box-shadow: inset 0px 6px 6px -6px rgba(0, 0, 0, 0.5), 0px 3px 0 0 black;
}
.side[data-theme="binary"] .side-widgets .widget {
    color: white;
    text-shadow: none;
}

.side[data-theme="binary"] .tool-combinator {
    background: #2f2f2f;
    box-shadow: 0 -3px #1a1a1a;
}
.sides .side[data-theme="binary"].error .side-wrapper {
    background: black;
}

.side {
    top: 0;
    font-size: 0;
    transition: width 0.2s ease;
    position: relative;
    display: inline-block;
    font-family: monospace;
}
.side:only-child {
    width: 100%;
}
.side > label {
    transition: left 0.2s ease;
}
.side > label .status {
    color: black;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sides-wrapper {
    width: 100%;
}
.sides-options-wrapper {
    margin-top: 10px;
}
.side > label, .sides-options-wrapper > label.caption {
    letter-spacing: 0px;
    text-transform: lowercase;
    user-select: none;
    position: relative;
    width: 100%;
    top: 0;
    margin-bottom: 5px;
    display: inline-block;
    left: 0;
    font-weight: bold;
    font-family: "Roboto Regular";
    color: #3A3A3A;
}
.sides-options-wrapper > label.caption{
	text-transform: capitalize;
}
.sides {
    width: 100%;
    padding-top: 7px;
}
.sides-wrapper.muted {
    opacity: 0.75;
}
.sides .side.error .side-wrapper:after {
    border-bottom: 8px rgba(85, 129, 181, 0.75) solid;
}

.sides .side-widgets {
   position: relative;
    /* overflow: hidden; */
    user-select: none;
    font-family: "Roboto Regular";
    font-size: 0;
    /* box-shadow: inset 0px 6px 6px -6px rgba(0, 0, 0, 0.5), 0px 3px 0 0 #2e4765; */
    /* background: #476c98; */
    /* border-radius: 0 0 5px 5px; */
    /* border: 1px solid #ccc; */
    margin-top: 10px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.side-widgets .widget {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 12px;
    text-align: center;
    /* width: 33.333%; */
    margin-right: 2px;
    vertical-align: middle;
    /* font-weight: bold; */
    /* text-shadow: 0px 1px 0px black; */
    border-radius: 0px;
}
.widget.widget-remove-chain-wrap {
    position: relative;
    width: 100%;
}
.toggle-remove-chain .remove-chain-text {
    position: absolute;
    left: 20px;
    text-align: left;
    top: -1px;
    opacity: 0.5;
    bottom: 0;
    right: 0;
    display: block;
}
.toggle-remove-chain .remove-chain-yes {
    position: absolute;
    right: 6px;
    top: -3px;
    bottom: 0;
}
.sides.tool .side.output .side-widgets .widget-remove-chain, .sides.tool.is-chained .side.output .side-widgets .widget-chain {
    display: none;
}
.sides.tool.is-chained .side.output .side-widgets .widget-remove-chain, .sides.tool .side.output .side-widgets .widget-chain {
    display: inline-block;
}
.widget-toggle .widget-chain-search {
    cursor: default;
    width: 100%
}

.widget-chain-search .chain-search-wrapper {
    left: 44px;
    top: -1px;
    right: 0;
    position: absolute;
    height: 100%;
}
.widget-chain-search .icon {
    display: none;
    position: absolute;
    opacity: 0.5;
    left: 12px;
    top: -1px;
}
.widget-toggle .widget-chain-search.state-wait .icon_wait {
    display: block;
}
.widget-toggle .widget-chain-search.state-search .icon_search {
    display: block;
}
.widget-toggle .widget-chain-search.state-error .icon_error {
    display: block;
}
.widget-chain-search .chain-search::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.tool-combinator {
    position: absolute;
    overflow: hidden;
    font-family: "Roboto Regular";
    z-index: 99;
    background: #41628b;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 -3px hsla(213, 36%, 33%, 1);
    right: 0;
    left: 0;
    bottom: 0;
    height: 0;
    transition: all 0.5s ease;
}
.side.output.combinator-active .tool-combinator {
    height: 175px;
}
.combinator-description {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}
.combinator-title {
    font-size: 15px;
    vertical-align: middle;
    line-height: 19px;
    display: inline-block;
    text-shadow: 0px 1px rgba(0, 0, 0, 0.5);
}
.combinator-tool {
    width: 50%;
    cursor: pointer;
    padding: 0px 4px 4px 8px;
    display: inline-block;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    border-radius: 4px;
    clear: none;
}
.combinator-tool:hover {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.combinator-tool.hidden {
    opacity: 0.4;
    pointer-events: none;
}
.combinator-tools {
    display: flex;
    flex-wrap: wrap;
}
.combinator-list {
    padding: 0 5px 5px 5px;
    position: absolute;
    right: 4px;
    left: 0;
    top: 3px;
    bottom: 3px;
    overflow-y: auto;
}
.widget-chain-search .chain-search {
    position: absolute;
    left: 0;
    top: 0;
    border: 0;
    width: 100%;
    background: transparent;
    color: white;
    outline: none;
    font-size: 16px;
    font-family: "Roboto Regular";
}
.side-widgets .side-widgets-toggle {
    transform: rotateX(90deg) translateY(-50%) translateZ(22px);
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 100%;
}
.side-widgets.toggled .side-widgets-wrapper:after {
    background: rgba(0, 0, 0, 0.5);
}
.side-widgets.toggled .side-widgets-toggle:after {
    background: transparent;
}
.side-widgets .side-widgets-wrapper:after, .side-widgets .side-widgets-toggle:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    background: transparent;
    transition: background 0.5s ease;
}
.side-widgets .side-widgets-toggle:after {
    background: rgba(0, 0, 0, 0.5);
}

.side-widgets.toggled .side-widgets-toggle, .side-widgets .side-widgets-wrapper {
    transform: rotateX(0deg) translateY(0px) translateZ(0px);
}
.side-widgets.toggled .side-widgets-wrapper {
    transform: rotateX(-90deg) translateZ(22px) translateY(50%);
}
.side-widgets-wrapper, .side-widgets-toggle {
    transition: transform 0.5s ease;
}

.side-widgets-toggle .toggle-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.side-widgets-toggle .widget-toggle {
    margin-right: 44px;
    display: none;
}
.side-widgets-toggle .widget-toggle.toggle-active {
    display: block;
}
.side-widgets-toggle .toggle-save-as .widget {
    width: 50%;
}
.side-widgets-toggle .toggle-unchainable .widget {
    width: 100%;
    opacity: 0.5;
    text-align: center;
    cursor: default;
}
.toggle-hide {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    width: 38px;
    text-align: center;
}
.toggle-hide .icon {
    color: #131111;
    top: 4px;
    right: -8px;
    font-size: 18px;
    transform: translateY(-50%);
    position: relative;
}
.side-widgets .widget.is-inactive {
    opacity: 0.5;
}
.side-widgets .widget.is-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.widget-load input {
    display: none;
}
.sides .side.error .side-widgets {
    opacity: 0.75;
}
.sides .side.error .side-wrapper {
    background: rgba(85, 129, 181, 0.75);
    box-shadow: none;
}
.sides .side.error .data-type{
    color: rgba(85, 129, 181, 0.75);
    position: relative;
}
.side.error label .data-type:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-radius: 5px;
    border-top: 4px red solid;
    transform: rotate(-10deg);
}
.sides .side.input {
    float: left;
}
.sides .side.output {
    float: right;
}
.sides .side label span{
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 2px;
}
.sides.section > .icon {
    top: 8px;
}

.sides.expanded .side {
    width: 100%;
}
.sides.expanded .side.output {
    float: left;
    margin-top: 20px;
}
.tool-inline {
    position: absolute;
    left: -44px;
    top: 60px;
}
.tool-inline i {
    color: rgba(0, 0, 0, 0.25);
    transition: color 0.1s ease;
    user-select: none;
    font-size: 29px;
}
.tool-toggle-layout i.expand, .sides.expanded .tool-toggle-layout i.expanded {
    display: block;
}
.tool-toggle-layout i.expanded, .sides.expanded .tool-toggle-layout i.expand {
    display: none;
}

.tool:nth-child(odd) .chain-link {
    right: -75px;
    position: absolute;
    display: block;
    top: 235px;
    border: 5px #d1d1d1 dashed;
    border-left: none;
    width: 25px;
    border-radius: 0 5px 5px 0;
    height: auto;
    bottom: -225px;
}
.tool:nth-child(even) .chain-link {
    position: absolute;
    display: block;
    left: -75px;
    top: 235px;
    border: 5px #d1d1d1 dashed;
    border-right: none;
    width: 25px;
    border-radius: 5px 0 0 5px;
    height: auto;
    bottom: -225px;
}

.tool + .tool:before {
    content: "settings";
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    left: -46px;
    top: -2px;
    visibility: hidden;
    font-family: "Material Icons";
    color: rgba(0, 0, 0, 0.35);
    font-size: 35px;
}

.tool:nth-child(odd) .chain-link:after {
    content: "";
    bottom: -8px;
    display: block;
    position: absolute;
    left: -10px;
    width: 0;
    height: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 10px solid #d1d1d1; 
    font-size: 0;
    line-height: 0;
}

.tool:nth-child(even) .chain-link:after {
    content: "";
    bottom: -8px;
    display: block;
    position: absolute;
    right: -10px;
    width: 0;
    height: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 10px solid #d1d1d1;
    font-size: 0;
    line-height: 0;
}
.tool:last-child .chain-link {
    display: none;
}
.tool-primary {
    margin-bottom: 0;
}
.tool-primary:last-child {
    margin-bottom: 30px;
}
.tool-chained {
    margin: 0;
}
.tool-chained .icon_settings, .tool-chained .tool-inline {
    display: none;
}



.tool-toggle-layout:hover i, .tool-swap:hover i, .tool-favorite:hover i, .tool-create-link:hover i, .tool-create-link.active i {
    color: rgba(0, 0, 0, 0.4);
}
.tool-tweet svg {
    width: 24px;
    height: 24px;
    left: 4px;
    position: relative;
    fill: rgba(0, 0, 0, 0.25);
}
.tool-tweet:hover svg {
    fill: rgba(0, 0, 0, 0.4);
}
.tool-tweet a {
    position: absolute;
    width: 100%;
    height: 100%;
}
.tool-toggle-layout, .tool-swap, .tool-favorite, .tool-create-link, .tool-tweet {
    cursor: pointer;
    position: relative;
    width: 29px;
    height: 29px;
    margin-bottom: 5px;
}
.tool-create-link.active .tool-link {
    opacity: 1;
    visibility: visible;
    bottom: -90px;
    padding: 5px 10px 10px;
}
.tool-link input[type="text"] {
    width: 100%;
    display: block;
    padding: 4px;
    outline: none;
    border: none;
    background: rgba(0, 0, 0, 0.15);
    color: white;
    border-radius: 3px;
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.tool-link {
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    bottom: -65px;
    position: absolute;
    font-size: 14px;
    white-space: normal;
    border-radius: 3px;
    color: white;
    min-width: 35px;
    width: 265px;
    left: -1px;
    z-index: 10;
    padding: 5px;
    background: #476c98;
    box-shadow: 0px 3px 0 0 #2e4765, 0 4px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.23);
}
.tool-link-text {
    margin-bottom: 5px;
}
.tool-link:before {
    position: absolute;
    left: 9px;
    top: -7px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #476c98 transparent;
}
.tool-create-link i {
    font-size: 24px;
    padding-left: 3px;
}
.tool-favorite i {
    font-size: 26px;
    padding-left: 2px;
}
.tool-swap[data-swap-to=""] {
    display: none;
}
.side-wrapper.immersive {
    padding: 0;
}
.side-wrapper.immersive:after {
    display: none;
}
.side-wrapper.horizontal-scrollbar textarea.data {
    white-space: pre;
    overflow-x: auto;
    overflow-y: auto;
}
.side-wrapper {
	z-index: 2;
    user-select: none;
    padding: 3px;
    font-size: 16px;
    position: relative;
    background: #fff;
    color: white;
    /* border-radius: 5px 5px 0 0; */
    border: 1px solid #ccc;
}
.sides .tool-favorite.active i {
    color: #f7d000;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
}
.converter-options {
    position: relative;
    width: 100%;
    padding: 8px;
    display: inline-block;
    border-radius: 5px;
    /*box-shadow: 0px 4px 0 0 #2e4765, 0px 4px 2px 0px rgba(0, 0, 0, 0.4);*/
    /*background: #476c98;*/
    color: #3D514A;
    min-width: 225px;
    user-select: none;
}
.sides .converter-options:before {
    border-bottom: 8px #476c98 solid;
}
.converter-options .option-group-legend {
	font-weight: bold;
    /* text-shadow: 0px 1px 0px black; */
    margin-bottom: 15px;
    display: block;
}

.converter-options .option-group input[type="text"]:disabled, .converter-options .option-group textarea:disabled {
    opacity: 0.75;
    cursor: default;
}
.side.input .side-box.empty .input-canvas-help {
    display: block;
}
.input-canvas-help span {
    display: block;
    position: relative;
    top: 50%;
    width: 80%;
    margin: 0 auto;
    transform: translateY(-50%);
    font-family: "Roboto Regular";
    color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    text-shadow: 0 1px white;
}
.input-canvas-help {
    position: absolute;
    pointer-events: none;
    user-select: none;
    width: 100%;
    height: 100%;
    display: none;
}
.input-canvas-help .help-mouse, .dragging .input-canvas-help .help-normal, .input-canvas-help .help-wait, .importing .input-canvas-help .help-normal {
    display: none;
}
.dragging .input-canvas-help .help-mouse, .importing .input-canvas-help .help-wait {
    display: block;
    text-align: center;
}
.side-box.empty .side-wrapper {
    background: rgba(0, 0, 0, 0.1);
}
.side-box.empty .side-widgets:after {
    display: none;
}
.side-box.empty .side-widgets {
    box-shadow: none;
    border-top: 1px rgba(0, 0, 0, 0.15) dashed;
    padding-bottom: 2px;
    background: rgba(0, 0, 0, 0.1);
}
.side-box.empty .side-widgets .widget, .side-box.empty .side-widgets .toggle-hide .icon {
    color: rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px white;
}
.side-box.empty {
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}
.data-wrapper {
    height: 300px;
}
.multitype-input .multitype-mode {
    display: none;
    width: 100%;
    height: 100%;
}
.multitype-input[data-multitype-mode="text"] .mode-text {
    display: block;
}
.multitype-input[data-multitype-mode="file"] .mode-file {
    display: block;
}
.data, .preview {
    resize: none;
    outline: none;
    border: none;
    display: block;
    transition: margin-top 0.1s ease;
    background: transparent;
    color: #000;
    height: 100%;
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;
}
.side.input canvas.preview {
    cursor: pointer;
}
canvas.preview, canvas.data {
    padding: 0;
    height: 306px;
    border-radius: 5px 5px 0 0;
    image-rendering: pixelated;
}

/* Removes Webkit scrollbars */
.preview-scrollable::-webkit-scrollbar {
    display: none;
}

/* Removes Firefox scrollbars */
.preview-scrollable::-moz-scrollbar {
    display: none;
}

.preview-scrollable {
    height: 306px;
    cursor: move;
    touch-action: none;
    border-radius: 5px 5px 0 0;

    /* Disables scrolling */
    overflow: hidden;

    /* Removes IE scrollbars */
    -ms-overflow-style: none;
}

.side-box .preview-scrollable canvas.preview {
    border-radius: 0;
    position: relative;
    z-index: 2;
    cursor: move;
    width: auto;
    height: auto;
}
.preview-scrollable canvas.background {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    z-index: 1;
}

.side-box.empty .preview-scrollable canvas.preview {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
}
.preview + .data, .preview-scrollable + .data {
    visibility: hidden;
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    z-index: -1;
}
.data::selection, .feedback-box textarea::selection {
    color: #5581b5;
    background: rgba(255, 255, 255, 0.99);
}
.side.error .data::selection {
    color: rgba(85, 129, 181, 0.5);
    background: rgba(255, 255, 255, 0.99);
}
.data::-webkit-scrollbar-corner, .binary-textarea-content::-webkit-scrollbar-corner {
    background: transparent;
}
.data::-webkit-scrollbar-thumb, .binary-textarea-content::-webkit-scrollbar-thumb, .feedback-box textarea::-webkit-scrollbar-thumb, .combinator-list::-webkit-scrollbar-thumb, .text-sample span::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: white;
}
.data::-webkit-scrollbar, .binary-textarea-content::-webkit-scrollbar, .feedback-box textarea::-webkit-scrollbar, .combinator-list::-webkit-scrollbar, .text-sample span::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.data::-webkit-scrollbar-track, .binary-textarea-content::-webkit-scrollbar-track, .feedback-box textarea::-webkit-scrollbar-track, .combinator-list::-webkit-scrollbar-track, .text-sample span::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}
.side .badge {
    transition: opacity 0.2s ease, top 0.2s ease;
    visibility: hidden;
    width: 100%;
    font-size: 16px;
    min-height: 60px;
    border-radius: 4px;
    padding: 6px;
    font-family: "Roboto Regular";
    top: -10px;
    user-select: none;
    left: 0;
    opacity: 0.25;
    padding-left: 55px;
    position: absolute;
    z-index: 999;
}
.badge-body {
    width: 100%;
    height: 100%;
}
.badge:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: -16px;
    border-top: 8px transparent solid;
    border-left: 8px transparent solid;
    border-right: 8px transparent solid;
    border-bottom: 8px transparent solid;
    left: 24px;
    transform: translateX(-10px);
}
.badge .badge-body .badge-title {
    font-weight: bold;
    text-shadow: 0 1px 0 black;
}
.badge-negative .badge {
    background: linear-gradient(to right, #b10000 0%, red);
    box-shadow: 0 3px 0 0 maroon;
    visibility: visible;
    top: 0;
    opacity: 1;
}
.badge-negative .badge:before {
    border-bottom: 8px #b10000 solid;
}
.badge-positive .badge {
    background: linear-gradient(to right, #10c104 0%, #14f105);
    box-shadow: 0 3px 0 0 green;
    visibility: visible;
    top: 0;
    opacity: 1;
}
.badge-positive .badge:before {
    border-bottom: 8px #10c104 solid;
}
.badge-positive .badge-icon:after {
    content: "";
    position: absolute;
    left: 21px;
    top: 14px;
    transform: rotate(45deg);
    width: 8px;
    border-bottom: 6px white solid;
    height: 20px;
    border-right: 6px white solid;
}
.badge-negative .badge-icon:after {
    content: "";
    position: absolute;
    left: 25px;
    top: 16px;
    transform: rotate(45deg);
    height: 28px;
    border-right: 6px white solid;
}
.badge-negative .badge-icon:before {
    content: "";
    position: absolute;
    left: 25px;
    top: 16px;
    transform: rotate(-45deg);
    height: 28px;
    border-right: 6px white solid;
}
.badge-warning .badge {
    background: linear-gradient(to right, #c7ac00 0%, #ebdf00);
    box-shadow: 0 3px 0 0 #9c9217;
    visibility: visible;
    top: 0;
    opacity: 1;
}
.badge-warning .badge:before {
    border-bottom: 8px #c7ac00 solid;
}
.badge-warning .badge-icon:after {
    content: "";
    position: absolute;
    left: 25px;
    top: 41px;
    height: 5px;
    border-right: 6px white solid;
}
.badge-warning .badge-icon:before {
    content: "";
    position: absolute;
    left: 25px;
    top: 16px;
    height: 21px;
    border-right: 6px white solid;
}
.badge-negative .badge ~ .side-wrapper .data, .badge-positive .badge ~ .side-wrapper .data , .badge-warning .badge ~ .side-wrapper .data {
    padding-top: 65px;
}
/* ----- Converter styling end ----- */





/* ----- Converter options styling ----- */
.option-group select {
    /*background: rgba(0, 0, 0, 0.15); */
    /* color: white; */
    /* border: 0; */
    width: auto;
    max-width: 100%;
    position: relative;
    top: -3px;
    font-size: 15px;
    border-radius: 3px;
    /* box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15); */
    height: 24px;
    display: block;
    outline: none;
    font-family: "Roboto Regular";
	padding: 0px 12px;
}
.select-wrapper {
	position: absolute;
    right: 0px;
    left: 0px;
    width: auto;
}
.select-wrapper ~ span.option-details {
    margin-top: 26px;
}
.option-group label {
    display: block;
}
[type="radio"],
[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
.example-required-options-text {
    padding-bottom: 2px;
}
.option-row.option-resetter .icon {
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 20px;
    opacity: 0.75;
}
[type="radio"] + label,
[type="checkbox"] + label, .option-row.option-resetter label {
    position: relative;
    padding-bottom: 6px;
    line-height: 16px;
    padding-left: 30px;
    cursor: pointer;
}
[type="radio"] + label:before,
[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 8px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
	border: 1px solid #ccc;
    background-color: transparent;
}

[type="radio"]:checked + label:hover:after {
    background-color: white;
}
[type="checkbox"]:checked + label:hover:after {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    border-radius: 50%;
}
[type="radio"]:checked + label:after {
    position: absolute;
    content: '';
    top: 8px;
    transform: translateY(-50%);
    left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.75);
}
[type="checkbox"]:checked + label:after {
    position: absolute;
    content: "";
    left: 6px;
    top: 2px;
    transform: rotate(45deg);
    width: 6px;
    border-bottom: 1px solid #ccc;
    height: 9px;
    border-right: 1px solid #ccc;	
}
.option-group {
    display: inline-block;
    vertical-align: top;
}
.option-row {
    display: block;
    position: relative;
    margin: 0 0 10px 0;
}

.option-group input[type="text"]:valid:focus + label, .option-group textarea:valid:focus + label {
    font-size: 10px;
}
.option-group input[type="text"] + label, .option-group textarea + label, .option-group .select-wrapper + label {
    display: block;
    position: absolute;
    top: -17px;
    left: 30px;
    font-size: 0;
}
.option-group input[type="text"]:valid, .option-group textarea:valid {
    /*color: white;*/
}

.option-group input[type="text"]::placeholder, .option-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.option-group input[type="text"], .option-group textarea {
    /*background: rgba(0, 0, 0, 0.15);*/
    /* color: white; */
    /* border: 0; */
    position: relative;
    top: -3px;
    font-size: 15px;
    border-radius: 3px;
    /* box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15); */
    padding: 4px;
    height: 24px;
    display: block;
    outline: none;
    font-family: "Roboto Regular";
}
.option-group textarea {
    resize: vertical;
    height: auto;
    min-height: 18px;
}
.option-group optgroup {
    outline: none;
}
.option-group input[type="text"]:valid + label:before, .option-group textarea:valid + label:before, .option-group .select-wrapper + label:before {
    opacity: 1;
}
.option-group input[type="text"].color {
	width: 87%;
}
.option-group .icon_colorpicker {
    position: absolute;
    right: 0px;
    font-size: 22px;
    cursor: pointer;
    top: -2px;
}
span.option-details {
    opacity: 0.6;
    padding-top: 3px;
    display: inline-block;
    vertical-align: top;
    white-space: pre-line;
    font-size: 13px;
    position: relative;
    top: -5px;
}

.examples .option-group b {
    text-shadow: 0px 1px 0px black;
    display: inline-block;
    padding-top: 5px;
}
.examples .option-group {
    display: block;
    margin: 10px 0 0 0;
    border-top: 1px rgba(255, 255, 255, 0.2) dotted;
}
.examples .option-row {
    margin: 5px 0 0 0;
}

.option-row.compact-2 input[type="text"],
.option-row.compact-2 .option-details {
    width: 85px;
}

.option-row.compact-3 input[type="text"],
.option-row.compact-3 .option-details {
    width: 55px;
}

.option-row.is-compact .option-details {
    //white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.option-row.is-compact input[type="text"]:focus + label {
    //font-size: 0;
}

.option-row.is-compact {
    display: inline-block;
}

.option-row.is-compact + .option-row.is-compact input,
.option-row.is-compact + .option-row.is-compact .option-details,
.option-row.is-compact + .option-row.is-compact label {
    margin-left: 0;
    left: 0;
}

.option-row.is-compact + .option-row.is-compact label::before {
    display: none;
}

.option-row.is-comment label:before {
    content: "";
    top: -5px;
    left: 3px;
    position: absolute;
    display: block;
    width: 18px;
    height: 22px;
    background-repeat: no-repeat;
    opacity: 0.75;
    background-image: url(../images/icon-question.png);
}
/* ----- Converter options styling end ----- */





/* ----- About this tool styling, all tools... ----- */
@keyframes cursor-blink {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.5;
    }
    51% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.pro-tip .url {
    background: white;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 95px;
    word-break: break-all;
    border: 1px #a9a9a9 solid;
    border-radius: 3px;
    line-height: 22px;
    font-size: 14.5px;
    padding: 4px;
}
.pro-tip .omnibox {
    background: #f2f2f2;
    margin: 8px 0 14px 0;
    padding: 5px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    position: relative;
}
.pro-tip .url .muted {
    opacity: 0.7;
}
.pro-tip .green {
    color: forestgreen;
}

/* .pro-tip .navigation {
    position: absolute;
    left: 0;
    height: 42px;
    font-size: 0;
    padding-left: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.pro-tip .navigation i {
    padding-top: 9px;
    opacity: 0.75;
    padding-right: 6px;
} */


body .section.all-tools .secondary {
    opacity: 1;
    position: relative;
}
.all-tools .secondary .search:focus + .cursor,  .all-tools .secondary .search:valid + .cursor{
    display: none;
}
.all-tools .secondary .search {
    opacity: 0.5;
    border: 0;
    width: 100%;
    outline: 0;
    font-family: "Roboto Regular";
    font-size: 27px;
    font-weight: bold;
    color: black;
}
.all-tools .tool-matches-amount:empty {
    display: none;
}
.all-tools .tool-matches-amount {
    position: absolute;
    color: white;
    background: crimson;
    z-index: 99;
    display: inline-block;
    border-radius: 19px;
    left: -22px;
    line-height: 19px;
    padding: 0px 6px 0px 6px;
}
.all-tools .tool-none-matches {
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-top: 10px;
    position: absolute;
    font-size: 16px;
    z-index: 99;
    opacity: 0;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.75);
    visibility: hidden;
}
.tool-none-matches .request-tool, .section.tool-unlisted .unlisted-feedback {
    text-decoration: underline;
    cursor: pointer;
}
.tool-none-matches .message {
    display: inline-block;
    padding: 15px;
    color: white;
    background: #5581b5;
    box-shadow: 0px 3px 0 0 #2e4765;
    border-radius: 3px;
}
.tool-none-matches .message:before {
    top: -6px;
    left: 30px;
}
.tool-none-matches a {
    color: white;
}
.all-tools .tool-none-matches.active {
    visibility: visible;
    opacity: 1;
}
.all-tools .secondary .search:focus, .all-tools .secondary .search:valid{
    opacity: 0.75;
}
.all-tools .secondary .cursor {
    animation: cursor-blink 1.2s infinite linear;
    width: 1px;
    height: 33px;
    display: block;
    position: absolute;
    left: 4px;
    top: 3px;
    background: black;
}
.all-tools .secondary .search::placeholder {
    color: black;
}
/* ----- About this tool styling, all tools... end ----- */





/* ----- Cards styling ----- */
.cards {
    font-size: 0;
    margin-left: -10px;
    position: relative;
    padding-bottom: 3px;
    display: flex;
    flex-wrap: wrap;
}
.card .title a {
    text-decoration: none;
    color: white;
}
.cards .card {
    transition: opacity 0.25s ease;
    vertical-align: top;
    width: 33.333%;
    display: inline-block;
    padding: 10px 0px 0px 10px;
    font-size: 16px;
}

.cards .card .block {
    cursor: pointer;
    user-select: none;
    height: 100%;
    transition: box-shadow 0.2s ease;
    background: #5581b5;
    color: white;
    box-shadow: 0px 3px 0 0 #2e4765;
    border-radius: 3px;
    padding: 4px 8px;
}
.cards .card:not(.hidden) .block:hover {
    box-shadow: 0px 3px 0 0 #2e4765, 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.cards .card .block .title {
    text-shadow: 0px 1px 0px black;
    padding-right: 25px;
    position: relative;
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 1px rgba(255, 255, 255, 0.2) dotted;
}
.cards .card .block .title:after {
    content: "chevron_right";
    color: white;
    position: absolute;
    right: -1px;
    top: -1px;
    font-family: 'Material Icons';
    font-size: 25px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.coming-soon-list.cards .card .block {
    background: #9e9e9e;
    box-shadow: 0px 3px 0 0 #6f6f6f;
}
.coming-soon-list.cards .card .block:hover {
    box-shadow: 0px 3px 0 0 #6f6f6f, 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.coming-soon-list.cards .card .block .title:after {
    content: "";
}
.cards .card .block .body {
    padding-top: 2px;
}
.examples.cards .card .block .title:after {
    content: "open_in_new";
}
.examples .wrapper {
    text-align: center;
    margin: 5px;
}
.sample .input-sample, .sample .output-sample {
    display: inline-block;
    font-family: monospace;
    position: relative;
    text-align: left;
    font-size: 14px;
    border-radius: 3px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.sample .text-sample span {
    white-space: pre-wrap;
    max-height: 295px;
    display: inline-block;
    vertical-align: top;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    text-overflow: ellipsis;
}
.sample {
    display: inline-flex;
    position: relative;
    align-items: center;
}
.sample.big {
    margin-right: 15px;
    display: block;
}
.sample.big .input-sample, .sample.big .output-sample {
    display: block;
}
.sample .input-sample {
    margin-right: 23px;
}
.sample.big .input-sample {
    margin-bottom: 8px;
    margin-right: 0;
}

/* Hides the arrow and output if there's no output,
   Hides the input if there's no input,
   Hides itself if there's no input and output */
.sample.without-output .input-sample:after, .sample.without-output .output-sample, .sample.without-output.without-input, .sample.without-input .input-sample {
    display: none;
}
.sample .input-sample:after {
    content: "";
    position: absolute;
    right: -21px;
    bottom: 50%;
    transform: translateY(50%);
    background-image: url(../images/icon-arrows.png);
    width: 17px;
    height: 21px;
    background-position-x: -26px;
    background-repeat: no-repeat;
    background-size: cover;
}
.sample.big .input-sample:after {
    background-position-x: 0;
    transform: none;
    bottom: -17px;
    right: -23px;
    width: 25px;
    height: 25px;
}
.examples .sample .image-sample {
    padding: 0;
    white-space: normal;
}
.sample .image-sample img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 3px;
    margin: 0 auto;
}
.file-sample .file-icon {
    width: 40px;
    height: 50px;
    margin-bottom: 5px;
    background: white;
    position: relative;
    border-radius: 2px;
    display: inline-block;
}

.sample .file-sample {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.file-sample .file-icon:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: transparent #5581b5 rgba(0, 0, 0, 0.2) transparent;
    border-radius: 0 0 0 3px;
    background: white;
    display: block;
    width: 0;
}

.file-sample .file-description {
    position: absolute;
    left: 55px;
    right: 0;
    display: inline-block;
}

.file-sample .file-header {
    position: relative;
}

.file-description .file-title, .file-description .file-subtitle {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-family: "Roboto Regular";
}

.file-description .file-title {
    font-weight: bold;
    text-shadow: 0 1px black;
    font-size: 18px;
}

.file-sample .file-content {
    font-family: monospace;
    position: relative;
    text-align: left;
    font-size: 14px;
    border-radius: 3px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.file-description .file-subtitle {
    font-size: 15px;
}
.cards .card.hidden {
    opacity: 0.4;
}
.card.favorite .block .title:before {
    content: "star";
    color: #f7d000;
    position: absolute;
    right: 27px;
    top: 1px;
    font-family: 'Material Icons';
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
/* ----- Cards styling end ----- */





/* ----- Subscribe box styling ----- */
.fullwidth-wrapper.show-notification.shadow-lock {
    box-shadow: 0 0 0 999em rgba(0, 0, 0, 0.5), 0 0 5px 0 rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.fullwidth-wrapper {
    transition: box-shadow 0.2s ease;
    background: #e05745;
    padding-top: 10px;
    padding-bottom: 20px;
    position: relative;
}
.fullwidth-wrapper .notification, .fullwidth-wrapper.show-notification .subscription {
    display: none;
}
.fullwidth-wrapper.show-notification .notification {
    display: block;
}
.subscribe.notification .onlinetools-subscribe-box button {
    display: inline-block;
    position: relative;
    width: 50%;
    padding: 14px;
    border-radius: 0;
    box-shadow: inset 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
}

.subscribe.notification .onlinetools-subscribe-box input {
    border-radius: 4px 4px 0 0;
}
.content .section.subscribe .icon {
    color: white;
}
.subscribe .onlinetools-subscribe-box {
    margin-top: 9px;
    width: 48%;
    background: transparent;
    border-radius: 4px;
    position: relative;
    display: block;
    font-size: 0;
    box-shadow: 0px 4px 0px 0px #863025;
}
.onlinetools-subscribe-box .onlinetools-subscribe-form, .feedback-box .feedback-form, .onlinetools-subscribe-box.complete .subscribe-success, .feedback-box.complete .feedback-success {
    display: block;
}
.onlinetools-subscribe-box .subscribe-success, .onlinetools-subscribe-box.complete .onlinetools-subscribe-form, .feedback-box .feedback-success, .feedback-box.complete .feedback-form {
    display: none;
}
.subscribe .body .onlinetools-subscribe-box:before {
    border-bottom: 8px white solid;
}
.subscribe .body .onlinetools-subscribe-box.complete:before {
    border-bottom: 8px rgba(0, 0, 0, 0.25) solid;
}
.subscribe .body .primary {
    color: white;
}
.subscribe .onlinetools-subscribe-box button {
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Roboto Regular";
    outline: none;
    font-size: 16px;
    color: white;
    border: none;
    background: #b74839;
    padding: 17px 14px 16px 15px;
    border-radius: 0 3px 3px 0;
    font-weight: bold;
    text-shadow: 0px 1px 0px black;
    cursor: pointer;
    box-shadow: inset 6px 0px 6px -6px rgba(0, 0, 0, 0.5);
}
.subscribe .onlinetools-subscribe-box input {
    font-family: "Roboto Regular";
    outline: none;
    border: none;
    font-size: 18px;
    padding: 15px 10px 15px 10px;
    border-radius: 4px;
    background: white;
    width: 100%;
    color: black;
}
.subscribe .subscribe-success {
    width: 100%;
    padding: 13px 10px 12px 10px;
    color: white;
    background: rgba(0, 0, 0, 0.25);
    font-size: 18px;
    border-radius: 4px;
}
.feedback .feedback-success {
    padding: 13px 10px 12px 10px;
    color: white;
    background: rgba(0, 0, 0, 0);
    font-size: 18px;
    border-radius: 5px;
    box-shadow: 0px 4px 0 0 rgb(46, 71, 101);
}
/* ----- Subscribe box styling end ----- */





/* ----- Footer styling ----- */
.feedback .feedback-box input::placeholder, .feedback .feedback-box textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.feedback .feedback-box input[type="text"] {
    border-bottom: 1px rgba(255, 255, 255, 0.2) dotted;
}

.feedback .feedback-submit {
    border: 0;
    outline: none;
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    background: #476c98;
    border-radius: 0px 0px 4px 4px;
    box-shadow: inset 0px 6px 6px -6px rgba(0, 0, 0, 0.5), 0px 4px 0 0 rgb(46, 71, 101);
    color: white;
    font-weight: bold;
    text-shadow: 0px 1px 0px black;
}
.feedback .feedback-box input, .feedback .feedback-box textarea {
    border: 0;
    color: white;
    resize: none;
    display: block;
    font-size: 18px;
    padding: 15px 10px 15px 10px;
    width: 100%;
    background: transparent;
    font-family: "Roboto Regular";
    outline: none;
}
.feedback .feedback-box textarea {
    margin-top: 10px;
    margin-bottom: 5px;
    margin-right: 5px;
    width: 99%;
    padding-top: 0;
    height: 150px;
}
.feedback .feedback-box {
    position: relative;
    width: 48%;
    background: #5581b5;
    border-radius: 5px;
    margin-top: 10px;
}
.created-by .primary {
    padding-bottom: 4px;
    display: inline;
}
.created-by .social {
    margin-bottom: 10px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: 10px;
}
.created-by .social .social-fb {
    display: inline-block;
    vertical-align: top;
}
.created-by .social .social-twitter {
    display: inline-block;
    vertical-align: top;
}
.section.created-by i.icon {
    color: rgba(237, 20, 20, 0.35);
}

/* For footer padding only */
.footer {
    font-family: "Roboto Regular";
}
.footer.container .content {
    margin-top: 40px;
    margin-bottom: 40px;
}

.browserling-logo {
    margin-left: 5px;
    margin-right: 10px;
}
.browserling-logo img {
    vertical-align: middle;
}

/* ----- Footer styling end ----- */





/* ----- Secret section styling ----- */
.secret {
    opacity: 0.30;
}
.secret.section .icon {
    opacity: 1;
}
.secret.section .primary {
    color: black;
}
.secret .coupon-code {
    color: #e05745;
}
/* ----- Secret section styling end ----- */




/* ----- Privacy policy section and ToS styling ----- */
.privacy-policy, .tos {
    opacity: 0.8;
}
.privacy-policy.section .body-content,
.tos.section .body-content {
    font-size: 14px;
}
/* ----- Privacy policy section and ToS styling end ----- */




/* ----- Responsive override ----- */

/* When on small screens (tablets) */
@media(max-width: 992px) {
    .container {
        width: 85%;
    }
    .logo {
        margin: 0 auto;
        display: block;
    }
    .sides .side.input, .sides .side.input + .side.output {
        clear: both;
        width: 100%;
    }
    .side.output {
        margin-top: 20px;
    }
    .sides .tool-inline .tool-toggle-layout {
        display: none;
    }
    .sides .side label .side-layout {
        display: none;
    }
    .section .onlinetools-subscribe-box, .section .feedback-box {
        width: 100%;
    }
    
    .section .onlinetools-subscribe-box input {
        width: 100%;
        padding-right: 100px;
        border-radius: 4px;
    }
    
    .section .onlinetools-subscribe-box button {
        position: absolute;
        right: 0;
    }
    .cards .card {
        width: 50%;
    }
    .tool:nth-child(odd) .chain-link {
        right: -45px;
    }
    .tool:nth-child(even) .chain-link {
        left: -45px;
    }
    .tool:last-child .chain-link {
        display: none;
    }
}

/* When on really small screens */
@media(max-width: 767px) {
    /*.side-widgets .side-widgets-wrapper:after, .side-widgets .side-widgets-toggle:after {
        display: none;
    }
    .side-widgets.toggled .side-widgets-toggle, .side-widgets .side-widgets-wrapper {
        visibility: visible;
    }
    .side-widgets.toggled .side-widgets-wrapper, .side-widgets .side-widgets-toggle {
        visibility: hidden;
    }
    .side-widgets .side-widgets-wrapper, .side-widgets .side-widgets-toggle {
        transform: none!important;
    }*/
    .side.output {
        margin-top: 20px;
    }
    .tool:nth-child(even) .chain-link, .tool:nth-child(odd) .chain-link {
        position: absolute;
        display: block;
        left: -40px;
        top: 235px;
        border: 5px #d1d1d1 dashed;
        border-right: none;
        width: 20px;
        border-radius: 5px 0 0 5px;
        height: auto;
        bottom: -225px;
    }
    .tool:nth-child(odd) .chain-link:after, .tool:nth-child(even) .chain-link:after {
        content: "";
        bottom: -8px;
        display: block;
        position: absolute;
        right: -10px;
        left: auto;
        width: 0;
        height: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-left: 10px solid #d1d1d1;
        border-right: none;
        font-size: 0;
        line-height: 0;
    }
    .tool:last-child .chain-link {
        display: none;
    }
    .cards .card {
        width: 100%;
    }
    .container {
        width: auto;
        margin-left: 10px;
        margin-right: 10px;
    }

    .header img {
        height: auto;
        max-width: 100%;
    }
    .header .fb-like {
        top: 4px;
    }
    .header .network {
        top: 4px;
        float: none;
        margin-left: 4px;
    }
    .container .content {
        margin-left: 49px;
    }
    .section > .icon {
        left: -49px;
    }
    .section .body .secondary {
        padding-left: 0;
    }
    
    .section .onlinetools-subscribe-box button {
        box-shadow: inset 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
        width: 100%;
        border-radius: 0;
        padding: 10px 0 10px 0;
        position: relative;
    }
    
    .section .onlinetools-subscribe-box input {
        border-radius: 4px 4px 0 0;
        padding-right: 10px;
    }
}
/* ----- Responsive override end ----- */

.fb-like:empty:after {
    content: "";
    background: url(/images/placeholder-fb.png) no-repeat;
    background-position-y: bottom;
    background-size: contain;
    width: 52px;
    height: 24px;
    display: block;
    position: relative;
    opacity: 0.5;
}
.footer .fb-like:empty:after {
    background-position-y: 0;
}
a.twitter-follow-button {
    font-size: 0;
}
a.twitter-follow-button:after {
    content: "";
    width: 133px;
    background: url(/images/placeholder-twitter.png) no-repeat;
    pointer-events: none;
    opacity: 0.5;
    display: inline-block;
    height: 20px;
}