﻿.start-view .utility-message {
    padding: 20px 20px 40px 20px;
}

.start-view .utility-title {
    text-align: center;
}

.start-view .utility-welcome-logo {
    margin-top: 20px;
    padding-left: 3px;
}

.start-view .utility-form.instructions {
    padding: 30px 20px 40px;
}

.start-view .utility-form h2 {
    color: #fff;
    font-size: 21px;
    line-height: 21px;
    margin: 0;
}

.start-view label {
    color: #d1d3d4;
}

.start-view .available-trees {
    font-size: 14px;
}

.start-view .available-trees h3 {
    color: #9fb3c6;
    margin: 20px 0 0 0;
}

.start-view .unavailable-tree
{
    color: #aaaaaa;
    font-style: italic;
}
    .start-view .unavailable-tree span {
        text-decoration: line-through;
    }

    .start-view .unavailable-tree:after
    {
        content: " (Sold out!)";
    }

.start-view .availabletreeseparator:after
{
    content: ", ";
}

.start-view .availabletreeseparator:last-of-type:after
{
    content: "";
}

.start-view .actions {
    margin-top: 40px;
}

.start-view .actions a {
    margin-top: 30px;
    display: block;
    color: #fff;
    font-size: 14px;
}

.start-view .welcome-back-form .actions a {
    margin-top: 20px;
}

.start-view .actions button {
    min-width: 150px;
}

.start-form .campaign-drop-down {
    height: 52px;
    position: relative;
}

    .start-form .campaign-drop-down .icon-container,
    .start-form-popup .icon-container {
        float: left;
        margin-right: 10px;
        font-size: 0;
        padding: 5px;
        background: #e7ecf0;
    }

    .start-form .campaign-drop-down .icon,
    .start-form-popup .icon {
        width: 40px;
        height: 40px;
        display: inline-block;
        background: url('images/tree-type-sprite.png') no-repeat;
        background-position: 0 0;
    }

        .start-form .campaign-drop-down .icon.potted,
        .start-form-popup .icon.potted {
            background-position: -40px 0;
        }

    .start-form .campaign-drop-down .name,
    .start-form .campaign-drop-down .tree-height,
    .start-form-popup .name,
    .start-form-popup .tree-height {
        line-height: 20px;
    }

    .start-form .campaign-drop-down .tree-height,
    .start-form-popup .tree-height {
        color: #808285;
    }

    .start-form .campaign-drop-down .name,
    .start-form-popup .name {
        margin-top: 4px;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .start-form-popup {
        visibility: collapse;
        position: fixed;
        overflow-y: auto;
        margin-top: -10px;
        opacity: 0;
        background: #fff;
        border: 1px solid #215270;
        box-shadow: 0 3px 2px 0 rgba(0,0,0,0.25);
        z-index: 1000;
        -moz-transition: opacity 200ms linear;
        -o-transition: opacity 200ms linear;
        -webkit-transition: opacity 200ms linear;
        transition: opacity 200ms linear;
        font-size: 14px;
    }

    .start-form-popup.open {
        visibility: visible;
        margin-top: -1px;
        opacity: 1;
        -moz-transition: margin-top 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 150ms linear;
        -o-transition: margin-top 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 150ms linear;
        -webkit-transition: margin-top 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 150ms linear;
        transition: margin-top 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 150ms linear;
    }

    .start-form .campaign-drop-down .campaign-item,
    .start-form-popup .campaign-item {
        cursor: pointer;
        color: #231f20;
        height: 50px;
        overflow: hidden;
        white-space: nowrap;
    }

        .start-form .campaign-drop-down .campaign-item:hover,
        .start-form-popup .campaign-item:hover {
            background: #e7ecf0;
        }

            .start-form .campaign-drop-down .campaign-item:hover .icon,
            .start-form-popup .campaign-item:hover .icon {
                background-color: #d0d9e2;
            }

        .start-form .campaign-drop-down .campaign-item.selected,
        .start-form-popup .campaign-item.selected {
            background: #27527e;
            color: #fff;
        }

            .start-form .campaign-drop-down .campaign-item.selected .tree-height,
            .start-form-popup .campaign-item.selected .tree-height {
                color: #fff;
            }

            .start-form .campaign-drop-down .campaign-item.selected .icon,
            .start-form-popup .campaign-item.selected .icon,
            .start-form-popup .campaign-item.selected .icon-container {
                background-color: #22496e;
            }

        .start-form .campaign-drop-down .campaign-item.no-selection,
        .start-form-popup .campaign-item.no-selection {
            padding-top: 14px;
            padding-left: 10px;
            color: #414042;
            font-style: italic;
        }

        .start-form .campaign-drop-down .campaign-item + .campaign-item,
        .start-form-popup .campaign-item + .campaign-item {
            border-top: 1px solid #d0d9e2;
            height: 51px;
        }

    .start-form .campaign-drop-down .selected-value {
        height: 100%;
        width: 100%;
        background: #fff;
        border: 1px solid #215270;
        padding-right: 30px;
        cursor: pointer;
    }

        .start-form .campaign-drop-down .selected-value:focus {
            outline: none;
            border-color: #479ce2;
        }

        .start-form .campaign-drop-down:not(.single-mode) .selected-value:after {
            content: "";
            height: 0;
            width: 0;
            display: inline-block;
            border-top: 6px solid #231f20;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -3px;
        }

        .start-form .campaign-drop-down .selected-value .campaign-item:hover {
            background: none;
        }

            .start-form .campaign-drop-down .selected-value .campaign-item:hover .icon {
                background-color: #e7ecf0;
            }

    .start-form .campaign-drop-down.disabled .selected-value {
        cursor: default;
        border-color: #808285;
        background: #f1f2f2;
    }

        .start-form .campaign-drop-down.disabled .selected-value:after {
            border-top-color: #808285;
        }

        .start-form .campaign-drop-down.disabled .selected-value .no-selection {
            color: #808285;
        }

    .start-form .campaign-drop-down.disabled .campaign-item,
    .start-form .campaign-drop-down.single-mode .campaign-item,
    .start-form .campaign-drop-down.single-mode .selected-value {
        cursor: default;
    }

    .start-form .next-view-message {
        border-radius: 6px;
        padding: 6px 10px;
        color: #fff;
        font-size: 13px;
        line-height: 16px;
        background: rgba(190, 74, 39, 0.8);
    }

#welcome-video-help-container {
    text-align: center;
}

#welcome-video-help {
    display: inline-block;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 15px;
    border-radius: 15px;
    background: #f7f9ed;
    color: #27517d;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    animation: shadow-pulse-start 1.5s infinite;
}

@keyframes shadow-pulse-start {
    0% {
        box-shadow: 0 0 0 0px #f7f9ed;
    }

    100% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
}

@media (min-width: 768px) {
    #start-container {
        width: 800px;
        height: auto;
    }

    .start-view .view-container-inner {
        background: rgba(36,82,126,.85);
    }

    .start-view .start-form {
        display: inline-block;
        padding: 15px;
        /*overflow: auto;*/
        -webkit-overflow-scrolling: touch;
    }

        .start-view .start-form .utility-message {
            background: #f7f9ed;
            border-radius: 6px;
        }

    .start-view .utility-welcome {
        color: #27517d;
        text-align: justify;
    }

    .start-view .utility-title {
        text-align: left;
    }

    .start-view .utility-welcome-logo {
        margin: initial;
        float: right;
        padding-left: 10px;
        padding-bottom: 5px;
    }
    
    .utility-message,
    .utility-form-instructions {
        display: inline-block;
    }

    .start-view .utility-form.instructions,
    .content-area .view-container-inner .utility-form .content {
        padding: 0;
    }

    .start-view .utility-form.instructions {
        padding-left: 15px;
        background: none;
    }

    .start-view footer {
        display: none;
    }

}

/* Partner Images */

.partner-images-container-header {
    padding-top: 10px;
    text-align: center;
    color: #27517d !important;
}

.partner-images-container {
    max-width: 430px;
    text-align: center;
}

.partner-image-container {
    flex: 1;
    margin-top: auto;
    margin-bottom: auto;
}

.partner-images-subcontainer {
    display: flex;
}

.partner-image-single {
    padding: 10px;
    max-height: 150px;
    max-width: 150px;
}