﻿main {
    background-color: #f3f3f3;
    min-height: 1850px;
}


/* Hero */
.hero {
    background-color: #0094ff;
    background: -webkit-linear-gradient(#1f4f72, #1774b8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#1f4f72, #1774b8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#1f4f72, #1774b8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#1f4f72, #15639d); /* Standard syntax */
    color: #FFF;
    padding: 50px 0;
}
    .hero .container {
        position: relative;
    }

    .hero .hero-title {
        font-size: 32px;
        font-weight: 200;
        padding-left: 135px;
    }
    .hero .hero-desc {
        padding-left: 136px;
        font-weight: 300;
        color: #d7e3ec;
        max-width: 830px;
    }
    .hero .hero-icon {
        position: absolute;
        font-size: 75px;
        left: 25px;
        top: 8px;
    }

    .hero button.wishlist {
        background: white;
        line-height: 35px;
        border: 0;
        padding: 0 14px;
        text-align: center;
        font-weight: 500;
        font-family: 'Poppins';
        font-size: 16px;
        color: #2098ff;
        border-radius: 4px;
        margin-top: 20px;
        display: none;
    }

    .discussionOverview {
        padding-top: 40px;
    }
    .discussionOverview .container {
        position: relative;
    }

    .discussionOverview .search {
        position: relative;
        margin-bottom: 20px;
    }
        .discussionOverview .search .searchbox {
            background-color: #FFF;
            /* margin-bottom: 8px; */
            border: 1px solid #ddd;
            padding: 0 10px;
            outline: none;
            border-radius: 4px;
            line-height: 38px;
            font-size: 17px;
            width: calc(100% - 84px);
            padding-left: 34px;
        }
        .discussionOverview .search .icon {
            position: absolute;
            left: 10px;
            top: 8px;
            font-size: 17px;
            color: #868e96;
        }
        .discussionOverview .search .searchSubmit {
            padding: 0;
            line-height: 36px;
            border: 0;
            background: #e9edf1;
            border-radius: 4px;
            margin-left: 2px;
            color: #868e96;
            border: 1px solid #c0c8d0;
            font-weight: 500;
            margin-left: 4px;
            width: 100px;
        }
        .discussionOverview .search .searchButton {
            margin: 0;
            padding: 0;
            position: absolute;
            right: 0;
            width: 86px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 38px;
            font-family: 'Poppins';
            color: #2698ff;
            outline: none;
        }
        .discussionOverview .search .searchSelector {
            margin: 0;
            padding: 0;
            position: absolute;
            right: 0;
            width: 33px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 38px;
            font-size: 20px;
            color: #2698ff;
            color: #a8b4bf;
            outline: none;
        }
        .discussionOverview .search .searchSelector.advanced {
            color: #2698ff;
        }
            .discussionOverview .search .searchButton:hover,
            .discussionOverview .search .searchSelector:hover {
                background-color: #f2f9ff;
                cursor:pointer;
            }
        .discussionOverview .search .advancedSearch {
            position: relative;
        }
            .discussionOverview .search .advancedSearch .arrow {
                margin-left: 10px;
                font-size: 20px;
                margin-right: 14px;
            }
            .discussionOverview .search .advancedSearch .checkbox {
                margin-right: 4px;
            }
                .discussionOverview .search .advancedSearch .checkbox input {
                    transform: scale(1.3);
                }
            .discussionOverview .search .advancedSearch .checkboxDesc {
            }
    .discussionOverview .noresults {
        background-color: #FFF;
        /* margin-bottom: 8px; */
        border: 1px solid #d8b0b0;
        padding: 20px 12px;
        font-weight: 500;
        color: #ca5858;
        margin-bottom: 40px;
        border-radius: 4px;
    }

    .discussionOverview .askQuestion {
        text-align: right;
        padding-bottom: 8px;
    }
        .discussionOverview .askQuestion button.desktop {
            background: white;
            /* height: 30px; */
            line-height: 35px;
            border: 1px solid #7fbdf3;
            padding: 0 14px;
            text-align: center;
            font-weight: 500;
            font-family: 'Poppins';
            font-size: 16px;
            color: #2098ff;
            border-radius: 4px;
        }
            .discussionOverview .askQuestion button.desktop:hover {
                color: #FFF;
                background-color: #2098ff;
                cursor: pointer;
                border: 1px solid #2098ff;
            }
        .discussionOverview .askQuestion button.mobile {
            display: none;
        }
            .discussionOverview .askQuestion button.mobile:hover {
            }

    .discussionOverview .discussions {
        width: calc(100% - 360px);
    }
    .discussionOverview .sidemenu {
        position: absolute;
        top: 0;
        right: 0;
        width: 350px;
    }

        .discussionOverview .sidemenu .box {
            background-color: #FFF;
            margin-bottom: 8px;
            border: 1px solid #ddd;
            padding: 0;
            border-radius: 4px;
        }

.sidemenu .box .box-title {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    font-size: 17px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}
.sidemenu .box .box-items {
}
    .sidemenu .box .box-items .box-item {
        padding: 8px 10px;
        border-bottom: 1px solid #ddd;
        font-size: 15px;
        font-family: 'Poppins', sans-serif;
        position: relative;
    }
    .sidemenu .box .box-items .box-item:last-of-type {
        border-bottom: 0;
    }
        .sidemenu .box .box-items .box-item .box-item-title {
            padding-left: 40px;
        }
        .sidemenu .box .box-items .box-item .box-item-title a {
            font-size: 15px;
        }
            .sidemenu .box .box-items .box-item .box-item-title span.solved {
                font-size: 12px;
                background-color: #86c370;
                color: #FFF;
                display: inline-block;
                margin-right: 6px;
                margin-left: -1px;
                width: 20px;
                text-align: center;
                line-height: 20px;
                border-radius: 10px;
            }
        .sidemenu .box .box-items .box-item .box-item-desc {
            padding-left: 40px;
            color: #7d868e;
            /* padding-top: 3px; */
            /* line-height: 25px; */
            font-size: 13px;
        }
            .sidemenu .box .box-items .box-item .box-item-desc a {
                color: #282d31;
            }
        .sidemenu .box .box-items .box-item .box-item-info {
            padding-left: 40px;
            color: #9fa5ab;
            padding-top: 3px;
            line-height: 25px;
        }
            .sidemenu .box .box-items .box-item .box-item-info span.icon {
                margin-right: 5px;
            }
            .sidemenu .box .box-items .box-item .box-item-info span.tag {
                margin-right: 12px;
            }

        .question.post .post-icon,
        .sidemenu .box .box-items .box-item .box-item-icon {
            position: absolute;
            top: 16px;
            width: 30px;
            height: 30px;
            background-color: #eee;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            color: #7f8890;
        }
            .question.post .post-icon.loading,
            .sidemenu .box .box-items .box-item .box-item-icon.loading {
                background-color: unset;
            }
        .question.post .post-icon {
            top: 12px;
            right: 13px;
        }
            .question.post .post-icon .loading,
            .sidemenu .box .box-items .box-item .box-item-icon .loading {
                font-size: 23px;
            }
                .question.post .post-icon .newPosts,
                .sidemenu .box .box-items .box-item .box-item-icon .newPosts {
                    display: none;
                    background-color: #2098ff;
                    border-radius: 50%;
                    color: #FFF;
                    font-weight: 500;
                    font-size: 14px;
                }
                .question.post .post-icon .unread,
                .sidemenu .box .box-items .box-item .box-item-icon .unread {
                    display: none;
                }
                .question.post .post-icon .read,
                .sidemenu .box .box-items .box-item .box-item-icon .read {
                    font-size: 16px;
                    display: none;
                }

.sidemenu .box.stickyposts .box-title {
    background-color: rgba(255, 77, 77, 0.07);
    border-radius: 4px 4px 0 0;
    border: 1px solid #e8d1d1;
    margin: -1px;
}
    .sidemenu .box.stickyposts .box-title span.icon {
        margin-right: 8px;
        color: #ea0000;
    }

.pages {
    padding-top: 20px;
}
    .pages ul {
        list-style: none;
        padding: 0;
    }
    .pages li {
        margin-right: 4px;
        font-size: 14px;
        display: inline-block;
    }
    .pages .btn {
        padding: 0 10px;
        line-height: 27px;
        vertical-align: unset;
        border: 0;
        border-radius: 3px;
    }
        .pages .btn:hover {
            cursor: pointer;
            background-color: #1774b8;
            color: #FFF;
        }
    .pages .input {
    }
        .pages .input input {
            line-height: 27px;
            border: 0;
            background: #d9dee2;
            width: 60px;
            text-align: right;
            padding: 0 6px;
            border-radius: 3px 0 0 3px;
            outline: none;
        }
        .pages .input button.go {
            line-height: 27px;
            border: 0;
            background: #8895a0;
            color: #FFF;
            text-align: right;
            padding: 0 6px;
            text-transform: uppercase;
            border-radius: 0 3px 3px 0;
            font-weight: 500;
            outline: none;
        }
            .pages .input button.go:hover {
                background: #2098ff;
                cursor: pointer;
            }
    .pages .counter {
    }

pre {
    background-color: #f4f5f7;
    padding: 5px 10px;
}

#modals .modal.loginRequired {
    left: calc(50% - 250px);
    top: calc(50% - 140px);
    width: 500px;
    height: 238px;
}
#modals .modal.loginRequired .modal-content {
    padding: 30px;
}
    #modals .modal.loginRequired .modal-content p {
        font-size: 18px;
    }
    #modals .modal.loginRequired .modal-content button {
        border: 0;
        background-color: #217abd;
        color: #FFF;
        font-size: 16px;
        font-weight: 500;
        padding: 7px;
        border-radius: 3px;
        margin-top: 15px;
    }
        #modals .modal.loginRequired .modal-content button:hover {
            background-color: #2c93e0;
            cursor: pointer;
        }

#modals .modal.create {
    height: 540px;
    top: calc(50% - 250px);
    z-index: 10000;
}
    #modals .modal.create .modal-content {
        padding: 14px;
    }
        #modals .modal.create .modal-content input.question {
            background-color: #FFF;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            max-width: none;
            padding: 6px 12px;
            font-size: 18px;
            font-weight: 300;
            color: #000;
            margin-bottom: 14px;
            outline: none;
            box-shadow: none;
        }
        #modals .modal.create .modal-content textarea.post {
            background-color: #FFF;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            max-width: none;
            padding: 9px 12px;
            height: 335px;
            max-height: unset;
            font-size: 16px;
            font-weight: 300;
            color: #000;
            margin-bottom: 12px;
            outline: none;
            font-family: 'Poppins';
            box-shadow: none;
        }
    #modals .modal.create .modal-content ul.tags {
        padding: 0;
        list-style: none;
        margin-bottom: 0;
    }
        #modals .modal.create .modal-content ul.tags li {
            display: inline-block;
            margin-right: 0;
            padding: 0 11px;
            line-height: 30px;
            border-radius: 15px;
            font-size: 15px;
        }
        #modals .modal.create .modal-content ul.tags li:last-of-type {
            margin-right: 0;
        }
            #modals .modal.create .modal-content ul.tags li:hover {
                background-color: #e8ecef;
                padding: 0 11px;
                line-height: 30px;
                border-radius: 15px;
                cursor: pointer;
            }
            #modals .modal.create .modal-content ul.tags li.active {
                background-color: #2098ff;
                color: #FFF;
            }
            #modals .modal.create .modal-content ul.tags li.tag,
            #modals .modal.create .modal-content ul.tags li.tag:hover {
                background-color: #FFF;
                padding: 0;
                font-weight: 500;
                cursor: default;
            }


@media (max-width: 991.98px) {
    main {
        min-height: unset;
    }
    .discussionOverview .discussions {
        width: 100%;
    }

    .discussionOverview .sidemenu {
        display: none;
    }
    #modals .modal.create {
        width: 720px;
        left: calc(50% - 360px);
    }
}

@media (max-width: 767.98px) {

    .hero {
        padding: 20px 0;
    }

        .hero .hero-title {
            padding-left: 0;
            width: 100%;
            padding-top: 90px;
            text-align: center;
            font-size: 27px;
            font-weight: 300;
        }

        .hero .hero-desc {
            text-align: center;
            font-size: 16px;
            padding: 10px 6px;
        }

        .hero .hero-icon {
            text-align: center;
            left: 0;
            top: 0;
            width: 100%;
            font-size: 60px;
        }

    #modals .modal.create {
        left: calc(50% - 275px);
        width: 550px;
        height: 584px;
        top: calc(50% - 267px);
    }
}

@media (max-width: 575.98px) {
    #modals .modal,
    #modals .modal.create {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
    }

    .hero button.wishlist {
        display: unset;
    }

    .discussionOverview {
        padding-top: 0;
    }

        .discussionOverview .container {
            margin: 0;
            padding: 0;
        }

        .discussionOverview .discussions {
            background-color: #d0d5d8;
            padding-bottom: 1px;
        }

        .discussionOverview .search {
            margin-bottom: 7px;
            padding-top: 8px;
            border: 0;
            border-radius: 0;
        }

            .discussionOverview .search .searchbox {
                border-radius: 0;
                padding-left: 38px;
                width: 100%;
                border-left: 0;
                border-right: 0;
            }

            .discussionOverview .search .icon {
                left: 12px;
                top: 14px;
            }

            .discussionOverview .search .searchButton {
                display: none;
            }

            .discussionOverview .search .searchSelector {
                width: 56px;
            }
            .discussionOverview .search .advancedSearch {
                background: #f9f9f9;
                margin-top: 0px;
                height: 33px;
            }

        .discussionOverview .askQuestion {
            position: fixed;
            bottom: 10px;
            right: 6px;
            z-index: 10;
            width: 60px;
            height: 60px;
            text-align: center;
            padding: 0;
        }

            .discussionOverview .askQuestion button.desktop {
                display: none;
            }

            .discussionOverview .askQuestion button.mobile {
                display: block;
                background: #2196f3;
                width: 53px;
                height: 53px;
                border-radius: 50%;
                color: #FFF;
                border: 0;
                font-size: 28px;
                text-align: center;
                line-height: 53px;
                margin: 0;
                padding: 0;
            }

    #modals .modal.create .modal-content ul.tags li.tag,
    #modals .modal.create .modal-content ul.tags li.tag:hover {
        display: none;
    }

    #modals .modal.create .modal-content ul.tags li,
    #modals .modal.create .modal-content ul.tags li:hover {
        margin-right: 5px;
        padding: 0 7px;
        line-height: 30px;
        border-radius: 15px;
    }

    #modals .modal.create .modal-content textarea.post {
        height: calc(100% - 127px);
    }

    #modals .modal.loginRequired {
        left: 3%;
        top: calc(50% - 120px);
        width: 94%;
    }
}
