/*@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");*/

html {
    font-size: 16px;
}

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body,
td,
th,
input,
button {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    font-weight: 500;
    font-size: .9rem !important;
    color: #000;
}
    
    .text-blue {
        color: blue;
    }

.bg-green {
    background-color: #3333ff;
}

.btn {
    text-decoration: none;
    font-size:12px !important;
}

.btn-primary {
    border: 0;
    padding: 0.5em;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
    background-color: orange;
}

.sidebar {
    width: 65px;
    background-color: #FFFFFF;
    position: fixed;
    top: 0px;
    left: 0;
    min-height: 100%;
    z-index: 10;
    overflow-x: hidden;
    color: rgba(163, 175, 183, 0.9);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    height: 100vh;
    font-size: 14px;
    -webkit-transition: all .25s;
    -o-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
    scrollbar-width: none;
}

    .sidebar .sidebar-content {
        opacity:999;
        position: relative;
        display: block;
    }

    .sidebar a {
        color: rgba(163, 175, 183, 0.9);
        text-decoration: none;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .sidebar a span {
            visibility: hidden;
            opacity: 0;
        }

    .sidebar .user-menu a {
        padding: 6px 22px;
    }

    .sidebar .user-menu img {
        margin-right: 10px;
    }

    .sidebar li:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .sidebar .user-menu {
        background-color: #eaeaea;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 600;
    }

        .sidebar .user-menu a {
            color: #000000;
            padding-left:11px;
        }

        .sidebar .user-menu .dropdown-toggle::after {
            display: none;
        }

    .sidebar .hide {
        display: none !important;
        opacity: 0;
    }

    .sidebar .show {
        display: block !important;
        opacity: 1;
    }

    .sidebar .hidden-ul {
        background-color: #263238;
    }

        .sidebar .hidden-ul li:first-child {
            font-size: 16px;
            font-weight: 600;
        }

    .sidebar li i{
        margin-right: 18px;
        margin-top: 10px;
    }


    .sidebar::-webkit-scrollbar {
        display: none;
    }

    .sidebar:hover, .sidebar-expand {
        width: 245px;
    }

        .sidebar:hover a span, .sidebar-expand a span {
            visibility: visible;
            opacity: 1;
            white-space: nowrap;
        }

.sidebar-reponsive {
    top: 121px !important;
}

    .sidebar-reponsive .sidebar-content {
        margin-top: 0;
    }

/*Fix Left Menu on mobile screen*/
@media (max-width: 550px) {
    .default-sidebar {
        width: 0;
    }

    .page-content {
        margin: 0;
    }

    .page-container.sidebar-show-expand .page-content {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .default-sidebar {
        width: 0;
    }

    .page-content {
        margin: 0;
    }

    .page-container.sidebar-show-expand .page-content {
        margin: 0;
    }
}

.stt {
    font-size: 10px;
    padding: 0.125rem 1.2rem;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
    font-style: initial;
}

.stt-developing {
    color: white;
    background-color: #007bff;
}

.stt-design {
    color: black;
    background-color: #ffc107;
}

.stt-testing {
    color: white;
    background-color: #17a2b8;
}

.stt-canceled {
    color: white;
    background-color: #dc3545;
}

.bg-dark {
    background-color: #6f7287 !important;
}

.form-search {
    max-width: 300px;
}

.navbar-dark .navbar-brand {
    color: red;
}

.navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: sticky;
    background: linear-gradient(90deg, #E53935 15.47%, #E35D5B 94.73%);
    height: 60px;
}

    .navbar a {
        color: white;
        text-decoration: none;
    }

    .navbar .navbar-logo, .navbar .navbar-toggle-custom, .navbar .navbar-reponsive {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        margin-left:27px;
    }

        .navbar .navbar-logo a, .navbar .navbar-toggle-custom a, .navbar .navbar-reponsive a {
            padding: 0 12px;
        }

            .navbar .navbar-logo a img, .navbar .navbar-toggle-custom a img, .navbar .navbar-reponsive a img {
                width: 200px;
            }

            .navbar .navbar-logo a.logo {
                text-transform: uppercase;
                font-size: 1.8em;
                /*text-shadow: 2px 2px 5px #333;*/
                font-weight: 700;
                padding-left: 0px;
            }

    .navbar .navbar-toggle-custom {
        max-width: 38px;
    }

        .navbar .navbar-toggle-custom i:last-child {
            display: none;
            transition: all 1s ease-in-out;
        }

        .navbar .navbar-toggle-custom.sidebar-expand i:last-child {
            display: inline-block;
            transition: all 1s ease-in-out;
        }

        .navbar .navbar-toggle-custom.sidebar-expand i:first-child {
            display: none;
        }

    .navbar .navbar-reponsive {
        cursor: pointer;
        display: none;
        color: white;
    }

    .navbar .nav-menu:nth-child(4) {
        margin-right: auto;
    }

    .navbar .user-dropdown img {
        width: 35px;
        height: 35px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .navbar ul {
        list-style: none;
    }

    .navbar .nav-menu {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 0 !important;
        height: 100%;
    }

        .navbar .nav-menu .nav-item {
            -webkit-transition: all .2s ease;
            -o-transition: all .2s ease;
            -moz-transition: all .2s ease;
            transition: all .2s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            font-size: 0.8em;
            padding: 0 10px;
        }

            .navbar .nav-menu .nav-item .nav-icon i {
                font-size: 1.5em;
            }

            .navbar .nav-menu .nav-item:hover {
                background-color: rgba(0, 0, 0, 0.1);
                -webkit-transition: all .2s ease;
                -o-transition: all .2s ease;
                -moz-transition: all .2s ease;
                transition: all .2s ease;
            }

        .navbar .nav-menu .user-dropdown .nav-item:hover {
            background-color: transparent;
            color: #ebebeb;
        }

    .navbar .dropdown-menu-sub {
        position: absolute;
        top: 100%;
        margin-top: 8px;
        left: 0;
        width: 300px;
        background-color: #fff;
        -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
        display: none;
    }

        .navbar .dropdown-menu-sub .list-menu-items-collapse {
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }

            .navbar .dropdown-menu-sub .list-menu-items-collapse li {
                flex: 0 0 50%;
            }

            .navbar .dropdown-menu-sub .list-menu-items-collapse .nav-item {
                display: flex;
                flex-direction: row;
                padding: 10px;
            }

                .navbar .dropdown-menu-sub .list-menu-items-collapse .nav-item .nav-icon {
                    margin-right: 5px;
                }

        .navbar .dropdown-menu-sub li a {
            color: #757575;
        }

        .navbar .dropdown-menu-sub .dropdown-menu-header {
            padding: 15px 22px;
            background-color: #fff;
            border-bottom: 1px solid #e0e0e0;
        }

        .navbar .dropdown-menu-sub .dropdown-content {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            max-height: 350px;
            height: 100%;
            overflow-y: auto;
            /*padding: 15px 0;*/
            padding: 0;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

            .navbar .dropdown-menu-sub .dropdown-content li {
                flex: 0 0 33.333333%;
                padding: 7px 18px;
                /*margin: 5px;*/
                -webkit-transition: all .2s ease;
                -o-transition: all .2s ease;
                -moz-transition: all .2s ease;
                transition: all .2s ease;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }

                .navbar .dropdown-menu-sub .dropdown-content li a {
                    padding: 0;
                    font-size: 13px;
                    color: #757575;
                }

        .navbar .dropdown-menu-sub table {
            width: 100%;
        }

            .navbar .dropdown-menu-sub table tbody {
                width: 100%;
            }

                .navbar .dropdown-menu-sub table tbody tr {
                    width: 100%;
                }

                    .navbar .dropdown-menu-sub table tbody tr td {
                        padding: 10px 12px;
                        border-bottom: 1px solid #e0e0e0;
                        font-size: 13px;
                    }

            .navbar .dropdown-menu-sub table a {
                color: #757575;
            }

        .navbar .dropdown-menu-sub .dropdown-menu-content li {
            position: relative;
            padding: 8px 18px;
        }

            .navbar .dropdown-menu-sub .dropdown-menu-content li i {
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
            }

            .navbar .dropdown-menu-sub .dropdown-menu-content li .text-link {
                margin-left: 40px;
                font-size: 13px;
            }

                .navbar .dropdown-menu-sub .dropdown-menu-content li .text-link a {
                    color: #428bca;
                    font-weight: 600;
                }

                    .navbar .dropdown-menu-sub .dropdown-menu-content li .text-link a:hover {
                        color: #D65C4F;
                    }

        .navbar .dropdown-menu-sub .dropdown-notification li {
            padding: 10px 18px;
            position: relative;
        }

        .navbar .dropdown-menu-sub .dropdown-notification img {
            width: 40px;
            position: absolute;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
        }

        .navbar .dropdown-menu-sub .dropdown-notification strong, .navbar .dropdown-menu-sub .dropdown-notification .price {
            display: block;
            font-size: 15px;
            color: #757575;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .navbar .dropdown-menu-sub .dropdown-notification strong, .navbar .dropdown-menu-sub .dropdown-note .price {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .navbar .dropdown-menu-sub .dropdown-notification strong {
            display: block;
            font-size: 14px;
            font-weight: 600;
        }

        .navbar .dropdown-menu-sub .load-more-notification {
            padding: 15px 22px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
            color: #757575;
            font-size: 16px;
            margin-bottom: 0 !important;
            position: relative;
            cursor: pointer;
            text-align: center;
        }

        .navbar .dropdown-menu-sub .load-more-notification a{
            color: unset;
        }
            .navbar .dropdown-menu-sub .load-more-notification i {
                position: absolute;
                right: 22px;
            }

        .navbar .dropdown-menu-sub .load-more-note {
            padding: 15px 22px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
            color: #757575;
            font-size: 16px;
            margin-bottom: 0 !important;
            position: relative;
            cursor: pointer;
        }

            .navbar .dropdown-menu-sub .load-more-note i {
                position: absolute;
                right: 22px;
            }

        .navbar .dropdown-menu-sub .dropdown-content-admin {
            padding: 7px;
        }

            .navbar .dropdown-menu-sub .dropdown-content-admin li {
                padding: 8px 11px;
                font-size: 13px;
            }

                .navbar .dropdown-menu-sub .dropdown-content-admin li i {
                    margin-right: 10px;
                }

    .navbar .nav-link {
        position: relative;
        padding: 0 !important;
        height: 100%;
    }

    .navbar .sidebar-toggle i::before {
        font-size: 21px;
    }

    .navbar .big-icon {
        font-size: 16px;
    }

.status {
    width: 6px;
    height: 6px;
    margin-right: 5px;
    vertical-align: 1px;
    display: inline-block;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.status-success {
    background-color: #239169;
}

.icon-sucsess::before {
    color: #239169;
}

.icon-heart::before {
    color: #D65C4F;
}

.quantities {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 0 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 11px;
}

.icon-dropdown {
    margin-left: 3px;
    font-size: 9px;
}

.right-0 {
    position: absolute;
    right: 0 !important;
    left: auto !important;
}

.menu-hover:hover {
    background-color: #f2f2f2;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
    cursor: pointer;
}

.border-bottom {
    border-bottom: 1px solid #e0e0e0 !important;
}

.width-180 {
    width: 180px !important;
}

@media (max-width: 900px) {
    .navbar .nav-menu:nth-child(4) {
        left: 0;
        z-index: 1;
      /*  width: 65%;*/
    }

    .navbar .nav-menu:nth-child(5) {
        order:3;
        margin-left: 0;
        right: 0;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
      /*  width: 35%;*/
    }

    .navbar .nav-menu {
        display: flex;
      /*  top: 61px;*/
       /* background-color: #3F51B5;*/
        position: absolute;
        height: 60px;
    }

    .navbar .navbar-reponsive {
      /*  display:none;*/
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -moz-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        margin-right: 20px;
    }
        .navbar .navbar-reponsive i {
            display:none;
        }
        .navbar .navbar-logo {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin: auto;
    }

    .navbar .navbar-toggle-custom {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        margin-left: 10px;
    }
}

.dropdown.open .dropdown-menu {
    display: block;
    position: absolute;
}

.quantities {
    bottom: 14px;
}

@media (max-width: 700px) {
    .navbar .nav-menu {
        display: flex !important;
    }

    .navbar .nav-menu:nth-child(5) {
        width: 100%;
    }
}

.ck-editor {
    width: 100% !important;
}

.disabled:hover {
    cursor: not-allowed !important;
}

.disabled a:hover {
    cursor: not-allowed !important;
}

b, strong {
    font-weight: bold !important;
}

.ck-editor__editable_inline {
    min-height: 150px !important;
}

#myBtn {
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 5px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    color: #203866; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 2px 6px 2px 5px; /* Some padding */
    border-radius: 30px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    width: 30px;
}

    #myBtn:hover {
        background-color: #555; /* Add a dark-grey background on hover */
    }