.nopadding {
    padding-left: 0 !important;
    padding-right: 30px !important;
    margin: 0 !important;
}

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

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.spacer {
    height: 120px;
}

.half-spacer {
    height: 60px;
}

.quarter-spacer {
    height: 40px;
}

.border-md-right {
    border-right: 1px solid silver;
}

.border-md-left {
    border-left: 1px solid silver;
}

@media (max-width: 768px) {
    .border-md-right {
        border-right: none;
    }
    .border-md-left {
        border-left: none;
    }
}

.navbar-nav.navbar-center {
    text-align: right;
}

@media (min-width: 769px){
    .navbar-nav.navbar-center {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
    }
}

@media (max-height: 1200px) {
    .spacer {
        height: calc(10px + 8vh);
    }
    .half-spacer {
        height: calc(5px + 3vh);
    }

    .quarter-spacer {
        height: calc(3px + 2vh);
    }
}


.menu-item {
    text-align: center;
}

.menu-row {
    position: relative;
    top: 25%;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#navigation {
    align-content: center;
}

#logo {
    width: 40px;
    height: 40px;
}

#footer {
    background-color: #2f2f2f;
    text-align: center;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: white;
    clear: both;
    position: relative;
    height: 50px;
    margin-bottom: 0;
}

a {
    color: #5a6674;
}

/* Unvisited link  */
a:visited {
    color: #5a6674;
}

/* Visited link    */
a:hover {
    color: #5a6674;
    text-decoration: none;
    font-weight: bold;
}

/* Mouse over link */
a:active {
    color: #5a6674;
}

/*Custom Checkbox*/
.custom-checkbox {
    text-align: left;
    margin-left: 25px;
    padding-left: 20px;
    margin-bottom: 5px;
}

.custom-control-label {
    color: white;
    font-size: small;
    font-family: 'Metropolis-medium', sans-serif;
    cursor: pointer;
    padding-top: 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: transparent !important;
}

.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
    background: rgba(199, 85, 176, 0.13);
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0 #fff, 0 0 0 0 rgba(0, 0, 0, 0.25)
}

.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    background-color: transparent;
    border: #c755b0 1px solid;
}

.custom-checkbox .custom-control-input:hover ~ .custom-control-label::before {
    background-color: rgba(199, 85, 176, 0.25) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: rgba(199, 85, 176, 1) !important;
}

.custom-control-label::before {
    cursor: pointer;
    background-color: transparent !important;
    border: #c755b0 1px solid !important;
}

.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
}

/* Scrollbar for code box*/
.CodeMirror-vscrollbar::-webkit-scrollbar-button:start:decrement {
    height: 50px;
    display: block;
    background: transparent;
}


.roundedButton {
    border-radius: 30px;
    border: 2px solid #0b092b;
    width: 50px;
    padding: 13px;
    margin-top: -5px;
}

.roundedButton:hover {
    cursor: default;
}

.roundedButton.ready {
    border: 2px solid #c956b2;
    transition: background .3s linear;
}

.roundedButton.ready:hover {
    background: #c956b229;
    transition: background .3s linear;
    cursor: pointer;
}

.roundedButton.working {
    border: 0 solid #1592F2;
    background: rgb(201, 86, 178);
    background: -moz-linear-gradient(90deg, rgba(201, 86, 178, 1) 0%, rgba(21, 146, 242, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(201, 86, 178, 1) 0%, rgba(21, 146, 242, 1) 100%);
    background: linear-gradient(90deg, rgba(201, 86, 178, 1) 0%, rgba(21, 146, 242, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c956b2", endColorstr="#1592f2", GradientType=1);
    padding: 15px;
    transition: background .3s linear;
}

.roundedButton.working:hover {
    cursor: default;
}

.roundedButton.done {
    border: 2px solid #1592F2;
    transition: background .3s linear;
}

.roundedButton.download {
    border: 2px solid #1592F2;
    transition: background .3s, opacity .1s linear;
}

.roundedButton.download:hover {
    background: #1592F229;
    transition: background .3s, opacity .1s linear;
    cursor: pointer;
}

.roundedButton.download.disabled {
    opacity: 0.1;
    background: transparent;
    transition: opacity .1s linear;
    cursor: default;
}

.roundedButton.download.disabled:hover {
}

.roundedButton.copy {
    margin-top: 25px;
    z-index: 101;
    margin-right: 25px;
    position: absolute;
    right: 0;
    top: 0;
    border: 2px solid #1592F2;
    transition: background .3s linear;
    padding: 8px;
}

.roundedButton.copy:hover {
    background: #1592F229;
    transition: background .3s linear;
    cursor: pointer;
}

.roundedButton.hidden {
    display: none;
}

.outputConversionBar {
    margin-top: 45%;
    z-index: 101;
    width: 70%;
    margin-left: 15%;
    position: absolute;
    left: 0;
    top: 0;
    color: #c956b2;
    font-style: italic;
}

.roundedProgress {
    border-radius: 30px;
}

.progress {
    background-color: transparent;
    border: 2px solid #c956b2;
}

.progress-bar {
    background-color: #c956b2;
    border-radius: 30px;
    position: absolute;
    height: 1rem;
    margin-top: -2px;
    margin-left: -1px;
}

.outputConversionBar.hidden {
    display: none;
}


.selLang {
    padding-top: 3px;
    cursor: pointer;
}

.notSelLang {
    padding-left: 20px;
    font-size: small;
    font-family: 'Metropolis-medium', sans-serif;
    padding-top: 14px;
    color: #0C4DC3;
    transition: font-size .2s linear, color .2s linear, padding-top .2s linear;
}

.notSelLang:hover {
    font-size: medium;
    padding-top: 10px;
    cursor: pointer;
    color: #1592F2;
    transition: font-size .2s linear, color .2s linear, padding-top .2s linear;
}

.controlPanel {
    border-radius: 30px;
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgb(77 75 116 / 35%);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.roundedTop {
    height: 50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background: #0b092b;
}

.tooltip {
    display: flex;
    justify-content: center;
    margin-bottom: 8px !important;
}

.tooltip-inner {
    background-color: #1592f2;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #1592f2;
    margin-top: -0.2px;
}

.CodeMirror {
    display: flex;
    /* display: block; */
    /* height: 100%!important; */
    min-height: 100% !important;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    flex-basis: 100%;
    flex-direction: column;
    text-align: left;
    resize: none !important;
}