.title {
    font-size: 2em;
}

/*TEXT COLORS*/

.text-blue {
    color: #0478BA;
}

.text-light-gray {
    color: #999;
}

.text-gray {
    color: #707070;
}

.text-dark-blue {
    color: #124076;
}

.text-gray-blue {
    color: #549DBE;
}

.text-light-blue {
    color: #6CC3EA;
}

.text-green {
    color: #50c264;
}

.br-sm {
    clear: both;
    display: block;
    height: 5px;
}

.integration-type-buttons {
    display: flex;
    justify-content: center;
    width: 480px;
    margin: 30px auto 10px auto;
    border-radius: 6px;


    button {
        width: 50%;
        background: #fff;
        color: #C1C1C1;
        padding: 12px 0px;
        font-size: 16px;
        border: none;
        border-top: 1px solid #C1C1C1;
        border-bottom: 1px solid #C1C1C1;
    }

    button:first-child {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    button:last-child {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    button:first-child:not(.selected) {
        border-left: 1px solid #C1C1C1;
    }

    button:last-child:not(.selected) {
        border-right: 1px solid #C1C1C1;
    }

    button.selected {
        background: #0478BA;
        color: #fff;
        border-top: 1px solid #0478BA;
        border-bottom: 1px solid #0478BA;
    }

    button.selected:first-child {
        border-left: 1px solid #0478BA;
    }

    button.selected:last-child {
        border-right: 1px solid #0478BA;
    }

}

.upgrade-instructions-container {
    padding: 15px 20px;
}


/*BUTTONS*/
/*light-blue*/

.btn-light-blue:focus {
    box-shadow: 0 0 0 0.2rem rgba(125, 186, 220, 0.5);
}

.btn-light-blue {
    color: #fff !important;
    font-weight: 400 !important;
    background: #66afd9 !important;
    border: 1px solid #65a8d1 !important;
}

.btn-light-blue.btn-reverse {
    background: #fff;
    border: 1px solid #66afd9;
    color: #65a8d1;
}


.btn-light-blue:hover {
    color: #fdfdfd;
    background: #65bae3;
    border: 1px solid #63b1d9;
}

.btn-light-blue.btn-reverse:hover {
    background: #fdfdfd;
    border: 1px solid #65a8d1;
    color: #649ec7;
}


.btn-light-blue:active {
    color: #fbfbfb;
    background: #65a6cf;
    border: 1px solid #649cc5;
}

.btn-light-blue.btn-reverse:active {
    background: #fbfbfb;
    border: 1px solid #649ec7;
    color: #5f94bd;
}


/*green*/

.btn-green:focus {
    box-shadow: 0 0 0 0.2rem rgba(140, 194, 56, 0.5);
}

.btn-green {
    font-weight: 400;
    color: #fdfdfd;
    background: #55c25b;
    border: 1px solid #53b859;
}

.btn-green.btn-reverse {
    background: #fdfdfd;
    border: 1px solid #55c25b;
    color: #53b859;
}

.btn-green:hover {
    color: #fff;
    background: #55cc5b;
    border: 1px solid #53c259;
}

.btn-green.btn-reverse:hover {
    background: #ffffff;
    border: 1px solid #55cc5b;
    color: #53c259;
}

.btn-green:active {
    color: #fbfbfb;
    background: #55b85b;
    border: 1px solid #54ae57;
}

.btn-green.btn-reverse:active {
    background: #fbfbfb;
    border: 1px solid #55b85b;
    color: #54ae57;
}

/*default*/

.btn-default:focus {
    box-shadow: 0 0 0 0.2rem rgba(221, 221, 221, 0.5);
}

.btn-default {
    color: white;
    font-weight: 400;
    background: #dddddd;
    border: 1px solid #c3c3c3;
}

.btn-default.btn-reverse {
    background: #fdfdfd;
    border: 1px solid #dddddd;
    color: #c3c3c3;
}

.btn-default:hover {
    background: #e2e2e2;
    border: 1px solid #cdcdcd;
}

.btn-default.btn-reverse:hover {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    color: #c3c3c3;
}

.btn-default:active {
    background: #d8d8d8;
    border: 1px solid #b9b9b9;
}

.btn-default.btn-reverse:active {
    background: #fbfbfb;
    border: 1px solid #d8d8d8;
    color: #c3c3c3;
}


/*blue*/

.btn-blue:focus {
    box-shadow: 0 0 0 0.2rem rgba(4, 120, 186, 0.5);
}

.btn-blue {
    color: white;
    font-weight: 400;
    background: #0478BA;
    border: 1px solid #046eae;
}

.btn-blue.btn-reverse {
    background: #fff;
    border: 1px solid #0478BA;
    color: #046eae;
}

.btn-blue:hover {
    background: #0482c4;
    border: 1px solid #0478b8;
    color: #fdfdfd;
}

.btn-blue.btn-reverse:hover {
    background: #fdfdfd;
    border: 1px solid #0482c4;
    color: #0478b8;
}

.btn-blue:active {
    background: #046fb0;
    border: 1px solid #0465a4;
    color: #fbfbfb;
}

.btn-blue.btn-reverse:active {
    background: #fbfbfb;
    border: 1px solid #046fb0;
    color: #0465a4;
}

.need-help-box {
    margin-top: 50px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: #F7F7F7;
}