body,
html {
    font-family: "Montserrat", sans-serif !important;
    margin: 0;
    padding: 0;
    min-width: 100%;
}

.oag-app-naming {
    margin-top: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oag-app-title {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    border-bottom: 0 !important;
    letter-spacing: 1px;
    text-decoration: underline;
    text-decoration-color: #dc6536 !important;
}

.oag-app-subtitle {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    color: #ffd0bd;
    letter-spacing: 1px;
}

.no-compatible-size {
    display: none;
}

.main-header {
    background-color: #0e426d;
    width: 100%;
    height: 200px;
}

.oag-logo-header {
    display: flex;
    align-items: center;
}

.oag-logo-header-app-name {
    margin-left: 1.5em;
    letter-spacing: 2.5px;
}

.oag-logo-header img {
    width: auto;
    max-height: 170px;
    margin-top: 1em;
    margin-left: 1.75em;
}

.oag-logo-header h1 {
    color: #ffffff;
    font-size: 3.5em;
    border-bottom: 1px solid #dc6536;
    margin-bottom: 0;
    font-weight: bold;
}

.oag-logo-header h5 {
    margin-top: 0.5em;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffd0bd;
}

.container-box {
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 1em;
    padding: 1.5em;
    padding-top: 1em;
}

.full-content {
    width: 100%;
}

.inner-content {
    display: flex;
    justify-content: space-between;
}

.inner-content .left-side {
    width: 49%;
}

.inner-content .right-side {
    width: 49%;
}

.left-content {
    width: 65%;
    height: auto;
    padding: 2% 5% 5% 5%;
}

.right-content {
    width: 35%;
    min-height: 100%;
    margin-top: 2%;
}

.footer-content {
    background: #3C4148;
    color: #ffffff;
    padding: 1.5em;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}

.footer-top-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer-info-left {
    width: 35%;
    text-align: left;
    padding-right: 5%;
    display: flex;
}

.footer-info-right {
    width: 30%;
    display: flex;
}

.footer-top-content-spacer {
    width: 10%;
}

.footer-info-icon,
.footer-contact-icon {
    border-radius: 50%;
    border: 2px solid #ffffff;
    padding: 11px;
    font-weight: bold;
    height: 40px;
    margin-right: 1em;
    margin-top: 0.1em;
}

.footer-info-icon {
    padding: 15px;
    padding-top: 11px;
}

.footer-phone-link {
    color: #ffffff;
    font-weight: 600;
}

a.footer-phone-link:hover {
    color: #ffffff !important;
}

.footer-bottom-content {
    width: 100%;
    padding-top: 0.5em;
    margin-top: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-left: 3.2em;
}

.text-red-bold {
    font-weight: bold;
    color: #ff0000;
}

.text-bold {
    font-weight: bold;
}

.clear-btn-text,
.search-btn-text {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.10em;
}

.btn-trigger-search {
    width: 70%;
}

.btn-clear-search {
    width: 30%;
}

.account-actions-divider {
    color: #b1b1b1;
    font-weight: bold;
    padding: 1.25em 0.25em 1.25em 0.25em;
    text-align: center;
    display: flex;
    align-items: center;
}

.account-actions-divider-line {
    width: 40%;
    border-bottom: 1px solid #b1b1b1;
}

.account-actions-divider-text {
    width: 20%;
}

.account-btns {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.specific-search-box {
    display: flex;
    flex-direction: row;
    border: 1px solid #c1c1c1;
    width: 100%;
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
}

    .specific-search-box button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .specific-search-box input {
        padding: 0.5em;
        border: none;
        width: 100%;
    }

        .specific-search-box input:focus {
            outline: none;
        }

        .specific-search-box input::placeholder {
            color: #c1c1c1;
        }

        .specific-search-box input::-ms-input-placeholder {
            color: #c1c1c1;
        }

    .specific-search-box:hover {
        border-color: #AAAAAA;
    }

    .specific-search-box:focus-within {
        border-color: rgb(193 193 193);
        box-shadow: 0 0 0 5px rgb(193 193 193 / 20%);
    }

.advanced-search-box {
    /*border: 1px dashed #b1b1b1;*/
    padding: 0.75em;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.advanced-search-box-separator {
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    margin: 1em 0;
    margin-bottom: 0;
}

.advanced-search-contact2,
.advanced-search-contact,
.advanced-search-location {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-left: 0.1em;
    margin-bottom: 1em;
}

.advanced-search-primary-applicant,
.advanced-search-registration-no,
.advanced-search-business-name {
    margin-left: 0.1em;
}

.advanced-search-input-item {
    margin-left: 0.5em;
}

.search-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.advanced-search-business-name-input {
    width: 22em !important;
}

.advanced-search-primary-applicant-input {
    width: 22em !important;
}

.advanced-search-city-input {
    width: 11em !important;
}

.advanced-search-select-state {
    width: 12.25em !important;
}

.advanced-search-zip-code {
    width: 6.5em !important;
}

.advanced-search-phone-input {
    width: 11em !important;
}

.width-6em {
    width: 6em !important;
}

.width-14em {
    width: 14em !important;
}

.width-16em {
    width: 16em !important;
}

.pull-right {
    float: right;
}

.margin-bottom-1em {
    margin-bottom: 1em !important;
}

.margin-right-1em {
    margin-right: 1em;
}

.important-info a {
    text-decoration: none;
    color: #ffffff;
}

.card-header .icon-chevron-down {
    transition: .3s transform ease-in-out;
}

.card-header .collapsed .icon-chevron-down {
    transform: rotate(90deg);
}

.reg-number-prefix {
    border-right: 1px solid #c1c1c1;
    color: #9c9c9c;
    font-weight: bold;
}

.form-label {
    width: 10em;
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

.form-label-contact-start {
    width: 3.75em;
    text-align: left;
    display: flex !important;
    justify-content: flex-start !important;
}

.result-container {
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #bbbbbb;
}

.card-body.result-container,
.result-container p.card-text,
.result-container > p {
    padding: 0;
    margin: 0;
}

button.btn.btn-outline-danger.btn-download-as-pdf {
    padding: 0.18em 0.25em;
}
button.btn-outline-danger.btn-download-as-pdf:hover {
    background: #ffd5d9;
}
button.btn-outline-danger.btn-download-as-pdf:hover span {
    color: #000000;
}

.green-color {
    color: #1e7e34;
}

.red-color {
    color: #e40016;
}

/*COMMON USAGE CLASSES*/
.no-editable-element {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*SEARCH CONTROLS*/
.form-label-contact-phone,
.form-label-contact-county,
.form-label-contact-city,
.form-label-contact-address {
    width: 4.75em;
    text-align: left;
    display: flex !important;
    justify-content: flex-start !important;
}

.advanced-search-address-input {
    width: 27.25em !important;
}

.form-label-contact-zip,
.form-label-contact-state {
    width: 3em;
    text-align: left;
    display: flex !important;
    justify-content: flex-start !important;
}

.advanced-search-select-county {
    width: 11em !important;
}

.include-expired {
    display: flex;
    align-items: center;
    padding: 0.1em 0;
}

/*---- INPUT WITH PREFIX ----*/
.input-with-prefix {
    border: 1px solid #ced4da;
    padding-top: 0.1em;
    border-radius: 0.3em;
    width: auto;
    min-width: 50%;
    display: flex;
    align-items: center;
}

    .input-with-prefix:focus {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
    }

    .input-with-prefix input {
        display: inline-block;
        min-width: 6em;
        border: none;
        padding-left: 0.2em;
    }

        .input-with-prefix input:focus {
            box-shadow: none;
        }

.padding-right-05em {
    padding-right: 0.5em;
}

/*---- DROPDOWN STYLE-----*/
.dropdown {
    position: relative;
    box-sizing: content-box;
    width: 210px;
    height: 1em;
    padding: 18px 21px;
    background-color: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

    .dropdown:hover svg {
        transform: scale(1.1);
    }

    .dropdown button {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 3;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
    }

        .dropdown button:focus ~ svg {
            transform: rotate(-180deg);
        }

    .dropdown .options {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }

    .dropdown input {
        display: none;
    }

        .dropdown input:checked + label {
            display: block;
            z-index: 2;
            font-weight: 600;
            transform: none !important;
        }

    .dropdown label {
        position: absolute;
        width: 100%;
        z-index: 1;
        padding: 18px 21px;
        line-height: 1;
        background-color: #fff;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.2s ease;
    }

        .dropdown label:hover {
            background-color: #d6d6d6;
        }

    .dropdown button:focus + .options input:not(:checked) + label,
    .dropdown .options label:active,
    .dropdown .options label:active ~ label {
        transform: translateY(calc(var(--index) * 100%));
    }

    .dropdown button:focus + .options input:checked + label ~ label,
    .dropdown .options input:checked ~ label:active,
    .dropdown .options input:checked ~ label:active ~ label {
        transform: translateY(calc((var(--index) - 1) * 100%));
    }

    .dropdown svg {
        position: absolute;
        width: 21px;
        top: 25%;
        right: 14px;
        z-index: 2;
        fill: currentColor;
        transition: transform 0.1s;
    }

/*DETAILED VIEW TEMPLATE*/
.detailed-business-info-container {
    margin: 1em;
}

.detailed-business-info-header {
    font-weight: 700;
    color: #676767;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #bebebe;
}

.detailed-business-info-content {
    width: 90%;
    padding: 0.15em;
}

.detailed-business-info-content-1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.detailed-business-info-content-divider {
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 0.5em;
}

.hidden {
    display: none;
}

.download-result-excel {
    display: flex;
    align-items: flex-end;
}

.download-result-as {
    font-size: 0.75em;
    text-transform: uppercase;
    color: #999999;
    margin-right: 0.5em;
}

.download-result-icon-as {
    color: #4e4e4e;
    font-size: 1.25em;
    cursor: pointer;
    padding: 0 0.1em;
}

span.icon-document-file-xlsx.download-result-icon-as:hover {
    color: #1e7e34;
}

/*********************************SYNCFUSION GRID*************************************/
@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700";

.e-control, .e-css {
    font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont" !important;
    font-weight: 400 !important;
}

.e-altrow {
    background-color: rgba(0,0,0,0.05);
}

.e-columnheader, .e-headercell {
    background-color: rgba(0,0,0,0.05) !important;
}

.e-grid .e-headercelldiv {
    color: black;
    font-size: 14px;
}

.e-grid .e-rowcell {
    padding-left: 9.75px !important;
    padding-right: 9.75px;
}

.e-grid td.e-active {
    background: transparent !important;
}

.e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell] {
    padding-left: 55% !important;
}

.empty-result-template {
    text-align: center;
}

.e-emptyRecord {
    display: block;
    margin: 0.25em auto;
    font-size: 3rem;
}

th.e-detailheadercell {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition-property: height, visibility;
        transition-duration: .35s;
    }
}

/* Not Compatible */
@media screen and (min-width: 0px) and (max-width: 320px) {

    .main-header,
    .container-box,
    .footer-content {
        display: none;
    }

    .no-compatible-size {
        display: block;
        width: fit-content;
    }

    body {
        background-color: #0e426d;
    }

    .oag-app-naming {
        margin-top: 0.5em;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .oag-app-title {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        cursor: pointer;
        border-bottom: 0 !important;
        letter-spacing: 1px;
        text-decoration: underline;
        text-decoration-color: #dc6536 !important;
    }

    .oag-app-subtitle {
        font-weight: 700;
        font-size: 10px;
        text-transform: uppercase;
        color: #ffd0bd;
        letter-spacing: 1px;
    }

    .oag-logo-navbar {
        width: 12em;
        margin: 4em;
        margin-bottom: 1em;
        margin-top: 2em;
    }

    .oag-app-title {
        font-size: 1.75em;
    }

    .oag-app-subtitle {
        font-size: 0.85em;
    }

    .compatibility-message {
        font-size: 1.75em;
        margin: 0.54em;
        text-align: center;
        color: #ffffff;
        border: 1px dashed #ffffff;
        margin-top: 0;
    }

    .compatibility-warning {
        color: #ff8c3f !important;
        font-size: 5em;
        text-align: center;
        margin-top: 0.25em;
    }

    .loader-modal-container,
    .bottom-controls {
        display: none;
    }
}

/* Mobile */
@media screen and (min-width: 320px) and (max-width: 480px) {
    .inner-content {
        flex-direction: column;
    }

    .inner-content .right-side,
    .inner-content .left-side {
        width: 100%;
    }

    .oag-logo-header-app-name {
        font-size: 20px;
        text-align: center;
        margin-left: 0;
    }

    .oag-logo-header h1 {
        font-size: 18px;
    }

    .oag-logo-header h5 {
        font-size: 10px;
    }

    .oag-logo-header img {
        width: 8em;
        margin: 6em;
        margin-bottom: 1em;
        margin-top: 2em;
    }

    .oag-logo-header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main-header {
        height: 15em;
    }

    .footer-top-content-spacer {
        width: 0%;
    }

    .footer-top-content {
        flex-direction: column;
    }

    .footer-info-left {
        width: 100%;
        margin-bottom: 2em;
    }

    .footer-info-right {
        width: 100%;
    }

    .footer-bottom-content {
        width: fit-content;
    }

    .footer-content {
        padding-bottom: 4.5em;
    }

    .download-result-as {
        display: none;
    }

    .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell] {
        padding-left: 50% !important;
    }

    .detailed-business-info-header {
        display: none;
    }

    .btn-trigger-search {
        width: 60% !important;
    }

    .btn-clear-search {
        width: 40% !important;
    }
}

/* Tablets */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .inner-content {
        flex-direction: column;
    }

    .inner-content .right-side,
    .inner-content .left-side {
        width: 100%;
    }

    .footer-top-content-spacer {
        width: 0%;
    }

    .footer-top-content {
        flex-direction: column;
    }

    .footer-info-left {
        width: 100%;
        margin-bottom: 2em;
    }

    .footer-info-right {
        width: 100%;
    }

    .footer-bottom-content {
        width: fit-content;
    }

    .footer-content {
        padding-bottom: 4.5em;
    }

    .oag-logo-header img {
        width: 8em;
        margin: 3em;
        margin-right: 0;
        margin-bottom: 1em;
        margin-top: 2em;
    }

    .oag-logo-header-app-name {
        margin-left: 0.85em;
        margin-top: 0.5em;
    }

    .oag-logo-header h1 {
        font-size: 1.5em;
    }

    .oag-logo-header h5 {
        font-size: 1em;
        margin-top: 0.25em;
    }

    .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell] {
        padding-left: 35% !important;
    }

    .detailed-business-info-header {
        display: none;
    }
}

/* Tablets Portrait*/
@media (min-width: 768px) and (max-width: 1024px) {
    .inner-content {
        flex-direction: column;
    }

    .inner-content .right-side,
    .inner-content .left-side {
        width: 100%;
    }

    .footer-top-content-spacer {
        width: 0%;
    }

    .footer-info-left {
        width: 100%;
        margin-bottom: 2em;
    }

    .footer-info-right {
        width: 100%;
    }

    .footer-bottom-content {
        width: fit-content;
    }

    .oag-logo-header img {
        width: 9em;
        margin: 2em;
        margin-right: 0;
        margin-bottom: 1em;
        margin-top: 1.5em;
    }

    .oag-logo-header h1 {
        font-size: 2.5em;
    }
}

/* Laptops and Desktops */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
}

/*PLACEHOLDER*/
div[name="btnGreenPlaceholder"] {
    height: 52px;
}

/*VALIDATION*/
.form-select.is-valid:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    padding-right: 2.25em;
}
.form-control.no-validation-icon:valid {
    background-image: none;
}
.form-control.no-validation-icon.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}
.form-select.is-valid, .was-validated .form-select:valid,
.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #ced4da !important;
}
.border-red-validation {
    border: 1px solid #dc3545;
}

/*ALERT PLACEHOLDER*/
.alert-placeholder .alert {
    margin-bottom: 0 !important;
}

/*SCROLL BTN AND EFFECTS*/
.scroll-top {
    position: relative;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #3498db;
    text-indent: -9999px;
    display: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    margin-right: 10px;
}
.scroll-top span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #ffffff;
}
.scroll-top:hover {
    background-color: #e74c3c;
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
}

/*BOOTSTRAP EXTENDED*/
.bi {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    fill: currentcolor
}
.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}
/*LOADING LOGO */
.loader-modal-container {
    pointer-events: none;
    background: black;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
}
.screen-middle {
    position: absolute;
    top: 35%;
    left: 45%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}
.logo-container-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 225px;
    height: 225px;
    border-radius: 50%;
    background-color: #3C4148;
    box-shadow: 0 0px 15px #3c4148;
}
.logo-container-loader img {
    height: 175px;
    width: 175px;
}
.spinner-loader {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 100%;
    border: 16px solid #3C4148;
    border-top: 16px solid #70972f;
    border-radius: 50%;
    animation: spinLogo 1.5s linear infinite;
}
@keyframes spinLogo {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*ONBOARDING*/
.onboarding-button {
    cursor: pointer;
    width: 50px;
    height: 50px;
}
.help-icon {
	 position: relative;
	 width: 50px;
	 height: 50px;
	 color: #1a1a1a;
	 background: #ed1c5b;
	 border-radius: 50%;
	 border: none;
	 transition: box-shadow 400ms cubic-bezier(0.2, 0), transform 200ms cubic-bezier(0.2, 0);
}
.help-icon::before {
    content: "\f128";
    font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    color: #ffffff;
    font-size: 25px;
}
.help-icon:hover {
    box-shadow: 0 0 1px 6px rgb(255 0 94 / 52%);
    border: 1px dashed #9f003a;
    background: #ff0000;
}

.row-icon-left-help,
.valid-row-pointer-icon,
.invalid-row-check-icon,
.valid-row-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0.1em solid #ababab;
}
.valid-row-pointer-icon,
.row-icon-left-help {
    color: #666666;
}
.valid-row-check-icon {
    color: #198754;
}
.invalid-row-check-icon {
    color: #dc3545;
}
.first-row-help-toggle {
    padding-bottom: 1em;
    border-bottom: 1px solid #ababab;
    margin-bottom: 1em;
}
.icon-colored-green {
    color: #1e7e34;
}
.icon-colored-light-red {
    background: #ffd5d9;
}
.download-selector-help {
    font-weight: bold;
    font-size: 1.5em;
    width: fit-content;
    margin: 0.25em;
    border: 0.025em dashed #ababab;
    padding: 0.25em;
}

.wt-overlay {
    background: transparent;
}

.wt-overlay-custom {
    z-index: 10041;
    display: none;
}

/*BOTTOM CONTROLS*/
.bottom-controls {
    position: fixed;
    bottom: 18px;
    right: 70px;
    display: grid;
    grid-template-columns: auto auto;
    margin-right: 10px;
    z-index: 2;
}

/*
    TOGGLE YES NO CUSTOM
*/
.toggle-container {
  font-weight: bold;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  width: 5em;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
input[type="checkbox"].toggle-yes-no {
  opacity: 0;
  position: absolute;
  left: -99999em;
}
input[type="checkbox"].toggle-yes-no + label {
  height: 2em;
  line-height: 2em;
  background-color: #ccc;
  padding: 0 0.5em;
  border-radius: 0.5em;
  display: inline-block;
  position: relative;
  cursor: pointer;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  border: 0.05em solid #666666;
  width: 100%;
}
input[type="checkbox"].toggle-yes-no + label:before, input[type="checkbox"].toggle-yes-no + label:hover:before {
  content: ' ';
  position: absolute;
  top: 0.05em;
  left: 0.05em;
  width: 1.75em;
  height: 1.85em;
  background: #fff;
  z-index: 2;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 0.5em;
  border: 1px solid #666666;
}
input[type="checkbox"].toggle-yes-no + label .toggle-off {
  color: #666666;
}
input[type="checkbox"].toggle-yes-no + label .toggle-on {
  color: #ffffff;
}
input[type="checkbox"].toggle-yes-no + label .toggle-off {
  margin-left: 2em;
  display: inline-block;
}
input[type="checkbox"].toggle-yes-no + label .toggle-on {
  display: none;
}
input[type="checkbox"].toggle-yes-no:checked + label .toggle-off {
  display: none;
}
input[type="checkbox"].toggle-yes-no:checked + label .toggle-on {
  margin-right: 46px;
  display: inline-block;
}
input[type="checkbox"].toggle-yes-no:checked + label, input[type="checkbox"].toggle-yes-no:focus:checked + label {
  background-color: #1fb36e;
}
input[type="checkbox"].toggle-yes-no:checked + label:before, input[type="checkbox"].toggle-yes-no:checked + label:hover:before, input[type="checkbox"].toggle-yes-no:focus:checked + label:before, input[type="checkbox"].toggle-yes-no:focus:checked + label:hover:before {
  background-position: 0 0;
  top: 0.04em;
  left: 100%;
  margin-left: -1.8em;
}

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

::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #6d6d6d;
}