$bck_color: rgb(41, 42, 48);
$padding: 15px;
$thumbnail_height : 48px;


.end-label {
    margin-top: 6px;
}

#sanil_ssi_db_selected_icons {
    display: none !important;
}

#settings-tabs {
    background: #B8B8B8;
    border: solid 1px #929292;
    height: 42px;



    li {
        border: solid 1px #929292;
        margin: 3px 0 0 7px;
        float: left;
    }

    a {
        text-decoration: none;
        font-size: 16px;
        color: #23282D;
        display: block;
        padding: 10px 25px;
        background: #dcdcdc;
        transition: 0.4s;

        &:hover {
            background: #fff;
        }
    }


    li.active {
        border-bottom-color: #F1F1F1;

        a {
            background: #F1F1F1;
        }

    }


}


#settings-wrapper {

    *:not(i) {
        font-family: "Roboto";
    }

    input.number {
        width: 75px;
        float: left;
        margin-right: 5px;
    }

    [type=checkbox] {
        float: left;
        margin-right: 15px;
        margin-top: 7px;
    }

    .mb-50 {
        margin-bottom: 50px;
    }

    .section.cards {

        .section-title {
            font-size: 17px;
            color: #23282D;
            margin-bottom: 15px;
        }

        .section-contents {
            background: #fff;
            padding: 20px;
            overflow-x: auto;
        }

    }

    .icons-search-wrapper {
        background: #F6F6F6 url(../../images/search.svg) no-repeat;
        background-position: calc(100% - 13px) 9px;
        margin-bottom: 20px;

        input {
            padding: 4px 45px 4px 10px;
            border: solid 1px #B0CFE1;
            background: transparent;
            font-size: 16px;
            color: #000;
            font-family: roboto;
            font-weight: 300;
            border-radius: 0;
            // width: calc( 100% - 42px )
            width: 100%;
        }

    }
}

#available-icons-container {
    overflow: hidden;
    // overflow-y: auto;
    // max-height: 310px;
    margin-bottom: -20px;

    a.icon-wrapper {
        float: left;
        margin: 0 10px 20px 0;

        .icon-holder {
            display: flex;
            width: 85px;
            height: 60px;
            box-sizing: border-box;
            border: 1px solid #ededed;
            outline: 2px solid transparent;
            font-size: 30px;
            text-align: center;
            text-align: center;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #000;
            margin: 2px;
        }


        &:hover,
        &.selected {
            cursor: pointer;

            .icon-holder {
                border-color: #00A7F6;
                outline-color: #00A7F6;
            }

            .label {
                color: #00A7F6;
            }
        }

        &.selected {
            cursor: not-allowed;
        }
    }

}


#selected-icons-container {
    margin-bottom: -20px;
    // min-width: 505px;

    .error-msg {
        color: red;
        clear: both;
        margin-left: 124px;
        padding: 0 0 15px;
        display: none;
    }



    .icon-row {

        overflow: hidden;
        margin-bottom: 20px;
        background: none;
        border: 0;

        .icon-holder {
            display: flex;
            width: 60px;
            height: 60px;
            box-sizing: border-box;
            border: 1px solid #ededed;
            font-size: 20px;
            text-align: center;
            text-align: center;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #000;
            float: left;
            margin-right: 25px;
            margin-bottom: 4px;
            border-radius: 50%;
            box-shadow: 0px 2px 5px #e8e8e8;

        }

        .drag,
        button.remove-item-btn,
        button.more-options-btn {
            cursor: pointer;
            height: 38px;
            position: relative;
            float: left;
            margin-top: 12px;
            margin-right: 25px;
        }

        .drag {
            background: url(../../images/drag.svg) no-repeat center;
            display: block;
            border: none;
            text-indent: -99999px;
            cursor: move;
            width: 12px;

        }

        button.drag:focus,
        button.drag:active {
            box-shadow: none !important;
            border: 0;
            outline: 0;
        }

        .url-input {
            border: solid 1px #A6A6A6;
            border-radius: 3px;
            font-size: 14px;
            color: #23282D;
            font-family: roboto;
            font-weight: 300;
            padding: 4px 10px;
            height: 38px;
            float: left;
            margin-top: 12px;
            margin-right: 25px;
            width: calc(100% - 87px - 37px - 152px - 68px);
        }



        .more-options-btn {
            background: none;
            border: solid 1px #A6A6A6;
            padding-right: 30px;
            padding-left: 15px;
            border-radius: 3px;
            width: 127px;

            &:after {
                content: "";
                width: 0;
                height: 0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 6px solid black;
                top: 16px;
                position: absolute;
                right: 15px;
            }

        }

        @keyframes flashing_btn_anim {
            0% {
                background: none;
            }

            49% {
                background: yellow;
            }

            100% {
                background: none;
            }
        }

        .more-options-btn.flashing-anim {
            animation: flashing_btn_anim 0.8s infinite;
            animation-iteration-count: 2;
            animation-delay: 0.5s;
        }

        .remove-item-btn {

            background: none;
            border: none;
            font-size: 12px;
            padding: 0px 0 0;
            color: #909090;
            margin-right: 0 !important;
            width: 43px;

            &:before {
                content: "";
                height: 18px;
                background: url('data:image/svg+xml;utf8,<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.70203 16C1.70203 17.1 2.60203 18 3.70203 18H11.702C12.802 18 13.702 17.1 13.702 16V4H1.70203V16ZM14.702 1H11.202L10.202 0H5.20203L4.20203 1H0.702026V3H14.702V1Z" fill="black"/></svg>') no-repeat center;
                display: block;
            }

            &:hover {
                color: red;

                &:before {
                    background-image: url('data:image/svg+xml;utf8,<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.70203 16C1.70203 17.1 2.60203 18 3.70203 18H11.702C12.802 18 13.702 17.1 13.702 16V4H1.70203V16ZM14.702 1H11.202L10.202 0H5.20203L4.20203 1H0.702026V3H14.702V1Z" fill="red"/></svg>');
                }
            }

        }


    }


    .more-options-container {
        clear: both;
        overflow: hidden;
        background: #f7f7f7;
        margin-left: 124px;
        border-radius: 3px;
        padding: 0px 20px 20px;

        .title {
            border-bottom: solid 1px #c3c3c3;
            padding-bottom: 5px;
            margin-bottom: 25px;
            font-size: 14px;
            color: #3F51B5;

            button {
                float: right;
                margin-top: -2px;
                font-size: 12px;
                cursor: pointer;
            }
        }

        label {
            width: 200px;
            float: left;
            font-weight: 600;
            margin-top: 6px;
        }

        .tooltip-label {
            width: 300px;
            max-width: 100%;
        }

        .moc-input-wrapper {
            float: left;
            width: calc(100% - 200px);
        }

        .moc-input-wrapper.has-color-picker {
            margin-bottom: -20px;
        }

        .form-group {
            overflow: hidden;
            margin-bottom: 20px;
            padding: 5px 1px 0px;
        }

        .colorpicker-group {
            float: left;
            width: 25%;
            min-width: 200px;
            max-width: 270px;
            margin-bottom: 20px;

            p {
                margin: 0 0 3px;
                font-weight: 600;
            }
        }

        button.remove-item {
            display: none;
        }
    }

}


@media(max-width: 767px) {
    #selected-icons-container {

        .icon-row {

            .url-input,
            button.more-options-btn {
                width: calc(100vw - 185px);
                margin: 0 0 10px;
            }

            .remove-item-btn {
                display: none;
            }

        }

        .error-msg {
            margin: 0;
        }

        .more-options-container {
            width: calc(100vw - 82px);
            margin: 0;
            padding: 0 10px;

            label {
                width: 100%;
                margin-bottom: 5px;
            }

            .moc-input-wrapper {
                margin-top: 6px;
                width: 100%;
            }

            button.remove-item {
                margin: 0 0 15px;
                display: block;
                width: 100%;
                padding: 7px 0;
            }

        }

    }



}