:root {
    --main-blue: #1593cc;
}

/******************************
*  BUTTONS
******************************/
.btn-primary { background-color: var(--teal-dark); color: #ffffff !important;}
.btn-primary:focus, .btn-primary:hover, .btn-primary:active, .btn-primary:active:hover,
.btn-primary:active:focus { background-color: var(--teal-darker)}

.btn-info { background-color: #b9b9b9;}
.btn-info:focus, .btn-info:hover, .btn-info:active, .btn-info:active:hover,
.btn-info:active:focus { background-color: #777777;}

.btn-ai {
    background-color: rgb(92, 184, 92);
    color: #fff;
    transition: 0.3s;
}

.btn-ai:hover,
.btn-ai:focus {
    color: #fff;
    background-color: rgb(73, 148, 73);
    opacity: 1;
}

.btn-success {
    background-color: #e3960b;
    border: none;
}

.btn-success:focus, .btn-success:hover, .btn-success:active, .btn-success:active:hover,
.btn-success:active:focus {
    background-color: #b5790d !important;
}

/******************************
*  TOOL
******************************/
.toolpage .article h1 {
    font-size: 1.8rem;
}

.tool
{
    /*background: url("../images/wordfinder/homepage-background-spring.jpg") no-repeat top center;*/
    background: url("../images/wordfinder/homepage-background-autumn.jpg") no-repeat top center;
    /*background: url("../images/wordfinder/homepage-background-winter.jpg") no-repeat top center;*/
    background-size: cover;
    padding-bottom: 100px;
    min-height: 950px; /*was 1050*/
}

.loader
{
    margin: 20px auto;
    height: 28px;
    background-color: #F5F5F5;
    border: 1px solid #6B6B6B;
    border-radius: 4px;
}

.loader span
{
    display: block;
    height: 100%;
    background-color: #FF9115;
    line-height:28px;
    padding-left: 2px;
    color: #fff;
    -webkit-transition: width 2s linear 0s; /* For Safari 3.1 to 6.0 */
    transition: width 2s linear 0s;
}

.cell.check
{
    background-color: #bae2e4;
}

.cell.highlight
{
    background-color: #ffe2aa !important;
}

.cell.example {
    background-color: #f1f8f6 !important;
}

/******************************
*  STEPS WRAPPER
******************************/
.step_wrapper
{
    padding: 20px;
    border-top: 1px solid #6B6B6B;
    background-color: rgba(255,255,255, 0.9);
}

.step_wrapper .step
{
    display: inline-block;
    margin: 0 40px;
    color: #dcdcdc;
}

.step_wrapper .step.active
{
    color: var(--teal-light);
}

.step_wrapper .step h2,
.step_wrapper .step h3
{
    font-weight: normal;
    font-size: 1rem;
    margin: 10px 0 0 0;
}

/******************************
*  FORM
******************************/
.input-form {
    background-color: #fbfbfb;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #8a8a8a;
    border-radius: 4px;
}

.input-form h1 {
    font-size: 2rem;
    margin-top: 0;
}

.input-form .step_buttons {
    overflow: hidden;
}

.form-control {
    font-size: 1rem;
    height: auto;
}

.btnInputAdvanced {
    padding-right: 24px;
}

.btnInputAdvanced .icon {
    position: absolute;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.btnInputAdvanced.opened .icon {
    transform: rotate(90deg);
}

.fldAdvanced {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    padding: 15px 15px 0 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.fldAdvanced label {
    font-weight: normal;
}

.card h3 small {
    font-size: 0.8rem;
}

.card ul {
    list-style: none;
    padding-left: 0;
    font-size: 0.95rem;
}

.card ul.terms {
    padding-left: 18px;
    list-style: circle;
}

.card ul li.inactive {
    color: #999;
    text-decoration: line-through;
}

.license-message {
    font-size: 0.8rem;
}

.package-simple .card-body .no-design-alert,
.package-simple.disabled .card-body .step_buttons,
.package-simple.disabled .card-body .license-message {
    display: none;
}

.package-simple.disabled .card-body .no-design-alert {
    display: block;
    margin-bottom: 0;
    font-size: 0.9rem;
}

/******************************
*  RESULT
******************************/
.result-container {
    margin-top: 20px;
    border: 1px solid #8a8a8a;
    border-radius: 4px;
    padding: 20px;
    overflow: hidden;
    background-color: #fff;
}

/******************************
*  GALLERY
******************************/
.gallery-item .btn.btn-light {
    border: 1px solid #c3c4c5;
}

/******************************
*  DESIGN
******************************/
.design-item {
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    margin-top: 40px;
    margin-bottom: 40px;
    max-width: 311px;
}

/******************************
*  ERROR
******************************/
.has-error .form-control,
.is-invalid .form-control {
    background-color: #fff5f5;
    border-color: #a94442;
}

/******************************
*  ANIMATE
******************************/
.tool .row div[id="tool-form"],
.tool .row div[id="tool-result"]
{
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

.cookiebar {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    border-top: 1px solid #a1a1a1;
    color: #959595;
    letter-spacing: 0.5px;
}

.cookiebar-inner {
    max-width: 1170px;
    margin: 0 auto;
}

.cookiebar p {
    margin: 0;
    padding: 20px 0;
}

.cookiebar .btn {
    margin-top: 16px;
}

/*****
 TAGS
 */
.tags-input-wrapper {
    position: relative;
    background: #ffffff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    min-height: 196px;
}

.tags-input-wrapper input {
    border: none;
    background: transparent;
    outline: none;
    width: 180px;
}

.tags-input-wrapper .tag {
    display: inline-block;
    background-color: var(--teal-dark);
    color: white;
    border-radius: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.tags-input-wrapper .tag .text {
    display: inline-block;
    padding: 2px 2px 2px 8px;
}

.tags-input-wrapper .tag.important {
    background-color: #FF9115;
}

.tags-input-wrapper .tag a {
    margin: 0 6px 0 4px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
}

@media only screen and (max-width: 768px) {
    .cookiebar p {
        width: 80%;
        padding: 10px
    }

    .cookiebar .btn {
        margin-right: 10px;
    }
}