.blue {background-color: #2092ed; color: #fff}
.indigo {background-color: #6610f2; color: #fff}
.purple {background-color: #8c43dd; color: #fff}
.pink {background-color: #e83e8c; color: #fff }
.red {background-color: #dd3d31; color: #fff}
.orange {background-color: #fd7e14; color: #fff}
.yellow {background-color: #ffc107; color: #000}
.green {background-color: #28a745; color: #fff}
.teal {background-color: #20c997; color: #fff}
.cyan {background-color: #17a2b8; color: #fff}
.white {background-color: #fff; color: #000}
.gray {background-color: #6c757d; color: #000}
.gray-dark {background-color: #343a40; color: #fff }
.primary {background-color: #dd3d31; color: #fff }
.secondary {background-color: #6c757d; color: #fff }
.success {background-color: #28a745; color: #fff }
.info {background-color: #8c43dd; color: #fff }
.warning {background-color: #ffc107; color: #fff }
.danger {background-color: #dd3d31; color: #fff }
.light {background-color: #f8f9fa; color: #fff }
.dark {background-color: #212529; color: #fff }
.theme {background-color: #dd3d31; color: #fff }
.template {background-color: #2092ed; color: #fff }
.snippet {background-color: #ffc107; color: #fff }
.guide {background-color: #28a745; color: #fff }
.twitter {background-color: #1da1f2; color: #fff }
.github {background-color: #333; color: #fff }
.facebook {background-color: #3b5998; color: #fff }
.twitch {background-color: #6441A4; color: #fff }
.white {background-color: #fff; color: #fff }

.color-blue {color: #2092ed;}
.color-indigo {color: #6610f2;}
.color-purple {color: #8c43dd;}
.color-pink {color: #e83e8c; }
.color-red {color: #dd3d31;}
.color-orange {color: #fd7e14;}
.color-yellow {color: #ffc107;}
.color-green {color: #28a745;}
.color-teal {color: #20c997;}
.color-cyan {color: #17a2b8;}
.color-white {color: #fff;}
.color-gray {color: #6c757d;}
.color-gray-dark {color: #343a40; }
.color-primary {color: #dd3d31; }
.color-secondary {color: #6c757d; }
.color-success {color: #28a745; }
.color-info {color: #8c43dd; }
.color-warning {color: #ffc107; }
.color-danger {color: #dd3d31; }
.color-light {color: #f8f9fa; }
.color-dark {color: #212529; }
.color-theme {color: #dd3d31; }
.color-template {color: #2092ed; }
.color-snippet {color: #ffc107; }
.color-guide {color: #28a745; }
.color-twitter {color: #1da1f2; }
.color-github {color: #333; }
.color-facebook {color: #3b5998; }
.color-twitch {color: #6441A4; }
.color-white {color: #fff; }

.blue:hover {background-color: #2092ed; color: #fff}
.indigo:hover {background-color: #6610f2; color: #fff}
.purple:hover {background-color: #8c43dd; color: #fff}
.pink:hover {background-color: #e83e8c; color: #fff }
.red:hover {background-color: #C72C21; color: #fff}
.orange:hover {background-color: #fd7e14; color: #fff}
.yellow:hover {background-color: #ffc107; color: #000}
.green:hover {background-color: #28a745; color: #fff}
.teal:hover {background-color: #20c997; color: #fff}
.cyan:hover {background-color: #17a2b8; color: #fff}
.white:hover {background-color: #fff; color: #000}
.gray:hover {background-color: #6c757d; color: #000}
.gray-dark:hover {background-color: #343a40; color: #fff }
.primary:hover {background-color: #dd3d31; color: #fff }
.secondary:hover {background-color: #6c757d; color: #fff }
.success:hover {background-color: #28a745; color: #fff }
.info:hover {background-color: #8c43dd; color: #fff }
.warning:hover {background-color: #ffc107; color: #fff }
.danger:hover {background-color: #dd3d31; color: #fff }
.light:hover {background-color: #f8f9fa; color: #fff }
.dark:hover {background-color: #212529; color: #fff }
.theme:hover {background-color: #dd3d31; color: #fff }
.template:hover {background-color: #2092ed; color: #fff }
.snippet:hover {background-color: #ffc107; color: #fff }
.guide:hover {background-color: #28a745; color: #fff }
.twitter:hover {background-color: #1da1f2; color: #fff }
.github:hover {background-color: #333; color: #fff }
.facebook:hover {background-color: #3b5998; color: #fff }
.twitch:hover {background-color: #6441A4; color: #fff }
.white:hover {background-color: #fff; color: #fff }

.color-blue:hover {color: #2092ed;}
.color-indigo:hover {color: #6610f2;}
.color-purple:hover {color: #8c43dd;}
.color-pink:hover {color: #e83e8c; }
.color-red:hover {color: #C72C21;}
.color-orange:hover {color: #fd7e14;}
.color-yellow:hover {color: #ffc107;}
.color-green:hover {color: #28a745;}
.color-teal:hover {color: #20c997;}
.color-cyan:hover {color: #17a2b8;}
.color-white:hover {color: #fff;}
.color-gray:hover {color: #6c757d;}
.color-gray-dark:hover {color: #343a40; }
.color-primary:hover {color: #dd3d31; }
.color-secondary:hover {color: #6c757d; }
.color-success:hover {color: #28a745; }
.color-info:hover {color: #8c43dd; }
.color-warning:hover {color: #ffc107; }
.color-danger:hover {color: #dd3d31; }
.color-light:hover {color: #f8f9fa; }
.color-dark:hover {color: #212529; }
.color-theme:hover {color: #dd3d31; }
.color-template:hover {color: #2092ed; }
.color-snippet:hover {color: #ffc107; }
.color-guide:hover {color: #28a745; }
.color-twitter:hover {color: #1da1f2; }
.color-github:hover {color: #333; }
.color-facebook:hover {color: #3b5998; }
.color-twitch:hover {color: #6441A4; }
.color-white:hover {color: #fff; }

.p-0 {padding: 0 !important; }
.pt-0,.py-0 {padding-top: 0 !important; }
.pr-0,.px-0 {padding-right: 0 !important; }
.pb-0,.py-0 {padding-bottom: 0 !important; }
.pl-0,.px-0 {padding-left: 0 !important; }
.p-1 {padding: 0.375rem !important; }
.pt-1,.py-1 {padding-top: 0.375rem !important; }
.pr-1,.px-1 {padding-right: 0.375rem !important; }
.pb-1,.py-1 {padding-bottom: 0.375rem !important;}
.pl-1,.px-1 {padding-left: 0.375rem !important; }
.p-2 {padding: 0.75rem !important; }
.pt-2,.py-2 {padding-top: 0.75rem !important;}
.pr-2,.px-2 {padding-right: 0.75rem !important;}
.pb-2,.py-2 {padding-bottom: 0.75rem !important; }
.pl-2,.px-2 {padding-left: 0.75rem !important; }
.p-3 {padding: 1.5rem !important; }
.pt-3,.py-3 {padding-top: 1.5rem !important; }
.pr-3,.px-3 {padding-right: 1.5rem !important; }
.pb-3,.py-3 {padding-bottom: 1.5rem !important; }
.pl-3,.px-3 {padding-left: 1.5rem !important; }
.p-4 {padding: 2.25rem !important; }
.pt-4,.py-4 {padding-top: 2.25rem !important; }
.pr-4,.px-4 {padding-right: 2.25rem !important; }
.pb-4,.py-4 {padding-bottom: 2.25rem !important; }
.pl-4,.px-4 {padding-left: 2.25rem !important;}
.p-5 {padding: 4.5rem !important;}
.pt-5,.py-5 {padding-top: 4.5rem !important;}
.pr-5,.px-5 {padding-right: 4.5rem !important; }
.pb-5,.py-5 {padding-bottom: 4.5rem !important; }
.pl-5,.px-5 {padding-left: 4.5rem !important; }
.margin-l-5 {margin-left: 5px;}
.margin-l-10 {margin-left: 10px;}
.margin-r-5 {margin-right: 5px;}
.margin-r-10 {margin-right: 10px;}
.margin-t-10 {margin-top: 10px;}
.btn-red {background-color: #dd3d31}
.w100-perc {width: 100%;}
.w10 {width: 10px;}
.w20 {width: 20px;}
.w30 {width: 30px;}
.w40 {width: 40px;}
.w50 {width: 50px;}
.w100 {width: 100px;}
.w200 {width: 200px;}
.w300 {width: 300px;}
.w400 {width: 400px;}
.w500 {width: 500px;}
.h100 {height: 100px;}
.h200 {height: 200px;}
.h300 {height: 300px;}
.h400 {height: 400px;}

@media (min-width: 576px) {
    .modal-dialog {
        width: 80%
    }
}

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #f9f9f9; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 35px; /* Place content 60px from the top */
    transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenav:hover {
}

.sidenav a {
    padding: 8px 8px 8px 20px;
    text-decoration: none;
    font-size: 20px;
    color: #888;
    display: block;
    transition: 0.1s;
}

.sidenav a:hover {
    color: #818181;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 12px;
    margin-left: 50px;
}

.sidenav .close-nav {
    border-bottom: 1px solid #ddd;
}

#main {
    transition: margin-left 0.1s;
    padding: 20px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.form-builder {
    padding: 3px;
    padding-right: 10px;
}

.label-nav {
    font-size: 10px;
}

.label-builder {
    width: 90px;
    text-align: right;
    float: left;
    padding: 5px;
    font-size: 10px;
}

.form-builder select {
    border-radius: 6px;
    font-size: 12px;
    background-color: #fff;
    width: 150px;
    padding: 3px;
    float: right;
}

.input-builder {
    border-radius: 6px;
    border: 1px solid #ccc;     
    font-size: 12px;
    width: 150px;
    padding: 3px;
    padding-left: 5px;
    float: right;
}

.box-box, .box-column {
    border: 2px solid transparent;
}

.box-box:hover, .box-column:hover {
    border: 2px solid red;
    background-color: rgba(0, 0, 0, 0.3);
}

.builder-header {
    background-color: #fff;
    font-size: 12px;
    padding: 10px 10px 2px 0;
    border: 1px solid #ddd;
    border-top: 0px;
    margin-bottom: 20px;
}

.builder-logo {
    padding: 4px 8px 4px 0px;
    font-size: 14px;
    background-color: #FF8C00;
    border-radius: 0 4px 4px 0;
    margin-right: 10px;
}

.btn-badge {
    color: #fff !important;
}

#goodMessage {
    position: absolute;
    top: 35px;
    width: 99%;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}

#badMessage, #goodMessage, .error-message {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.btn-rounded {    
    box-shadow: 2px 2px 4px rgba(0,0,0,.4);
    background-color: #449C44;
    color: #fff;
    font-size: 25px;
    min-width: 100px;
    min-height: 100px;
    padding: 12px 0 0 0;
    z-index: 10000000;
    border-radius: 50%;
    text-align: center;
}

.btn-flow, .btn-flow-2, .btn-flow-3, .btn-flow-4 {
    box-shadow: 2px 2px 4px rgba(0,0,0,.4);
    background-color: #449C44;
    color: #fff;
    font-size: 25px;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 50px;
    right: 3%;
    padding: 7px 0 0 0;
    z-index: 10000000;
    border-radius: 50%;
    text-align: center;
}

.btn-flow:hover, .btn-flow-2:hover, .btn-flow-3:hover, .btn-flow-4:hover {
    transform: scale(1.2);
    color: #fff;
}

.btn-flow-2 {
    bottom: 110px;
}

.btn-flow-3 {
    bottom: 170px;
}

.btn-flow-4 {
    bottom: 230px;
}

.btn-flow-red { background-color: #DC3545 !important; }
.btn-flow-light-green { background-color: #90EE90 !important; }
.btn-flow-dark-violet { background-color: #9400D3 !important; }
.btn-flow-violet { background-color: #8A2BE2 !important; }
.btn-flow-blue { background-color: #205081 !important; }

.content-editable p, .content-editable div, .content-editable h1,
.content-editable h2, .content-editable h3, .content-editable h4,
.content-editable img {
    border: 1px dashed transparent
}

.content-editable p:hover, .content-editable div:hover, .content-editable h1:hover,
.content-editable h2:hover, .content-editable h3:hover, .content-editable h4:hover,
.content-editable img:hover {
    border: 1px dashed #990000
}

.btn-action-builder, .btn-action-builder-up, .btn-action-builder-down {
    box-shadow: 2px 2px 4px rgba(0,0,0,.4);
    background-color: #777;
    color: #fff;
    font-size: 13px;
    position: absolute;
    width: 100px;
    height: 35px;
    top: 0;
    right: 20px;
    padding: 7px 10px 7px 10px;
    z-index: 100;
    border-radius: 0px;
    text-align: center;
}

.btn-action-builder-up {
    width: 30px;
    right: 150px;
}

.btn-action-builder-down {
    width: 30px;
    right: 120px;
}

.btn-action-builder:hover {
    color: #ccc !important
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.btn-primary {
    color: #fff !important;
}