/*** Upper Section ***/
.section {
    margin-bottom: 25px;
}

.logo-wrapper {
    padding-right: 15px;
}

.logo {
    width: 100%;
    max-width: 200px;
}

.edit-item {
    display: none;
}

.hide-edit {
    display: none !important;
}

.display img {
    max-width: 100%;
    max-height: 600px;
    margin-left: auto;
    margin-right: auto;
}

/*.cancel-guide-btn,
.cancel-guide-add-btn {
    color: black;
    font-size: 24px;
    font-weight: 800;
}

.edit-guide-btn,
.save-guide-btn,
.save-section-text-btn,
.cancel-guide-btn,
.cancel-guide-add-btn {
    display: inline-block;
    float: right;
}

    .edit-guide-btn img,
    .save-guide-btn img,
    .save-section-text-btn img,
    .delete-icon {
        height: 24px;
    }

        .edit-guide-btn img:hover,
        .save-guide-btn img:hover,
        .save-section-text-btn img:hover,
        .delete-icon:hover,
        .cancel-guide-btn:hover,
        .cancel-guide-add-btn:hover {
            cursor: pointer;
            filter: drop-shadow(0 0 1px #666);
        }*/

/*.edit-input,
.edit-input-btn {*/
.edit-input {
    display: none;
    margin-bottom: 10px;
}

.edit-label {
    display: none;
    font-size: 16px;
    font-weight: var(--mf-normal);
}

.add-btn-container {
    width: 100%;
}

    .add-btn-container .add-btn {
        float: right;
    }

.new-container {
    display: none;
}

.section-text-container {
    margin-bottom: 20px;
}

.edit-section-text,
.section-text {
    font-size: 20px;
}

.section-text {
    display: inline-block;
}

    .section-text * {
        white-space: normal !important;
    }

/*.section-text-container .save-section-text-btn {
    margin-top: 4px;
    margin-right: 10px;
}*/

@media only screen and (max-width: 768px) {
    .divider {
        margin-right: 0;
    }

    .title-row {
        font-size: 18px;
    }

    .edit-section-text,
    .section-text {
        font-size: 16px;
    }
}

@media only screen and (max-width: 768px) {
    /* */
}


/*** Steps Section ***/
.step-section .collapse-header {
    background-color: var(--mf-blue);
    color: white;
    font-size: 24px;
    font-weight: var(--mf-bold);
    padding: 5px;
}

    .step-section .collapse-header .title {
        display: inline-block;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .step-section .collapse-header .edit-step-header {
        margin-bottom: 0;
    }

    .step-section .collapse-header .toggle-collapse {
        color: white;
        text-decoration: none;
        vertical-align: middle;
    }

    .step-section .collapse-header .open-collapse[aria-expanded=true],
    .step-section .collapse-header .close-collapse[aria-expanded=false] {
        display: none;
    }

    .step-section .collapse-header .edit-step-header-container {
        display: inline-block;
    }

        .step-section .collapse-header .edit-step-header-container span {
            float: none;
            margin-top: 0;
            margin-bottom: 0;
        }


    .step-section .collapse-header .edit-btn-wrapper i {
        color: white;
    }

/*.step-section .collapse-header .edit-step-header-container .cancel-guide-btn {
            color: white;
        }

        .step-section .collapse-header .edit-step-header-container .save-guide-btn img {
            margin-top: -7px;
        }*/

.step-section #stepsCard {
    padding: 0;
}

    .step-section #stepsCard .card {
        border-radius: 0 0 10px 10px;
    }

.step-section .step-header {
    font-weight: var(--mf-bold);
    font-size: 24px;
}

/*.step-section .delete-step-btn {
    display: inline-block;
    float: right;
    margin-left: 10px;
    font-weight: 800;
}

/step-section .save-guide-btn {
    margin-right: 10px;
}

.step-section .cancel-guide-btn,
.step-section .cancel-guide-add-btn {
    font-size: 28px;
    margin-top: -1px;
}*/

.step-section .step-btn {
    width: 170px;
}

.video-wrapper {
    text-align: center;
}

    .video-wrapper iframe {
        max-width: 100%;
        max-height: 100%;
    }

.sort-handle div {
    padding: 0 4px;
    height: 100%;
    max-height: 40px;
    font-weight: 600;
    background-color: #eee;
    border-radius: 5px;
}

.step-section .upload-icon {
    width: 24px;
}

.edit-step-btn-group {
    margin-top: 5px;
    margin-bottom: 10px;
}

    .edit-step-btn-group .edit-input,
    .edit-step-btn-group .edit-label,
    .edit-step-btn-group .edit-input-btn {
        margin: initial;
    }

@media only screen and (min-width: 768px) {
    .mobile-break {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .step-section .step-header {
        font-size: 18px;
        padding: 10px;
    }

    .step-section .cancel-guide-btn,
    .step-section .cancel-guide-add-btn {
        margin-top: -6px;
    }

    .video-wrapper iframe {
        width: 300px;
        height: 170px;
    }
}

@media only screen and (max-width: 600px) {
    .step-section .step-body {
        padding: 10px;
    }

    .step-section .step-btn {
        width: 150px;
    }
}


/*** Factors Section ***/
.factor-section {
    background-color: var(--mf-gray-l80);
    border-radius: 10px;
    padding: 10px;
}

.factor-header {
    font-size: 28px;
    font-weight: var(--mf-bolder);
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
}

.factor-col {
    margin-bottom: 15px;
    background-color: white;
    border-radius: 10px;
    padding-bottom: 10px;
}

    .factor-col .row {
        padding: 5px;
    }

.category-row {
    color: var(--mf-blue);
    font-size: 24px;
    font-weight: var(--mf-bolder);
    text-align: center;
}

.factor-row {
    font-size: 20px;
    font-weight: var(--mf-bold);
}

.factor-icon {
    width: 24px;
    margin-left: 7px;
}

.form-check-input:checked {
    background-color: black;
    border-color: black;
}

.form-check-input:focus {
    border-color: black;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(128, 128, 128, 0.25);
}

.factor-label {
    color: black;
}

.grayed-out {
    color: gray;
}


/*** Guide Section ***/
.guide-section {
    background-color: var(--mf-gray-l80);
    border-radius: 10px;
    padding: 20px;
}

    .guide-section .title-row {
        text-align: center;
    }

        .guide-section .title-row span {
            font-size: 28px;
            font-weight: var(--mf-bolder);
        }

        .guide-section .title-row .btn {
            float: right;
        }

    .guide-section .table-wrapper {
        background-color: white;
        border-radius: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        max-height: 400px;
        overflow-y: auto;
    }

    .guide-section .header-row {
        text-align: center;
        font-weight: var(--mf-bold);
        border-bottom: 1px solid black;
    }

    .guide-section .item-row {
        border-bottom: 1px solid black;
    }

        .guide-section .item-row:hover {
            background-color: var(--mf-gray-l90);
        }

        .guide-section .item-row div {
            padding: 5px;
        }

        .guide-section .item-row .link-col {
            text-align: right;
            padding-right: 10px;
        }