@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700');



    body {
        font-size: 14px;
        color: #333;
        list-style: 26px;
        font-family: 'Roboto', sans-serif;
    }

    /** ======================  base css ==============================**/

    a:hover {
        text-decoration: none;
    }
    /** ======================  header ==============================**/

    /*
    DEMO STYLE
*/

    @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";



    body {
        font-family: 'Poppins', sans-serif;
        background: #fafafa;
    }

    p {
        font-family: 'Poppins', sans-serif;
        font-size: 1.1em;
        font-weight: 300;
        line-height: 1.7em;
        color: #999;
    }

    a,
    a:hover,
    a:focus {
        color: inherit;
        text-decoration: none;
        transition: all 0.3s;
    }


    .navbar {
        padding: 15px 10px;
        background: #fff;
        border: none;
        border-radius: 0;
        margin-bottom: 40px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .navbar-btn {
        box-shadow: none;
        outline: none !important;
        border: none;
    }


    .logo-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid blue;
        margin-top: -15px;
        margin-bottom: -15px;
    }

    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        margin: 40px 0;
    }

    /*
    DEMO STYLE
*/

    @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

    body {
        font-family: 'Poppins', sans-serif;
        background: #fafafa;
    }

    p {
        font-family: 'Poppins', sans-serif;
        font-size: 1.1em;
        font-weight: 300;
        line-height: 1.7em;
        color: #999;
    }

    a,
    a:hover,
    a:focus {
        color: inherit;
        text-decoration: none;
        transition: all 0.3s;
    }

    .navbar {
        padding: 15px 10px;
        background: #fff;
        border: none;
        border-radius: 0;
        margin-bottom: 40px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .navbar-btn {
        box-shadow: none;
        outline: none !important;
        border: none;
    }

    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        margin: 40px 0;
    }

    i,
    span {
        display: inline-block;
    }

    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

    .wrapper {
        display: flex;
        align-items: stretch;      
    }

    #sidebar {
        min-width: 250px;
        max-width: 250px;
        background-color: #e9ecef;
        color: #000;
        transition: all 0.3s;
        
    }

        #sidebar.active {
            min-width: 120px;
            max-width: 120px;
            text-align: center;
        }

            #sidebar.active .sidebar-header h3,
            #sidebar.active .CTAs {
                display: none;
            }

            #sidebar.active .sidebar-header strong {
                display: block;
            }

        #sidebar ul li a {
            text-align: left;
        }

        #sidebar.active ul li a {
            padding: 20px 10px;
            text-align: center;
            font-size: 0.85em;
        }

            #sidebar.active ul li a i {
                margin-right: 0;
                display: block;
                font-size: 1.8em;
                margin-bottom: 5px;
            }

        #sidebar.active ul ul a {
            padding: 10px !important;
        }

        #sidebar.active .dropdown-toggle::after {
            top: auto;
            bottom: 10px;
            right: 50%;
            -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
            transform: translateX(50%);
        }

        #sidebar .sidebar-header {
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #sidebar .sidebar-header strong {
                display: none;
                font-size: 1.8em;
            }


        #sidebar ul.components {
            padding: 20px 0;
            border-bottom: 1px solid #47748b;
        }

        #sidebar ul li a {
            padding: 10px;
            font-size: 1.1em;
            display: block;
        }

            #sidebar ul li a:hover {
                color: #fff;
            }

            #sidebar ul li a i {
                margin-right: 10px;
            }

        #sidebar ul li.active > a,
        a[aria-expanded="true"] {
            color: #fff;
            background: black;
        }

        #sidebar ul li ul li a:hover {
            color: black;
            background: white;
        }

    a[data-toggle="collapse"] {
        position: relative;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    ul ul a {
        font-size: 0.9em !important;
        padding-left: 30px !important;
        background: gray;
    }

    ul.CTAs {
        padding: 20px;
    }

        ul.CTAs a {
            text-align: center;
            font-size: 0.9em !important;
            display: block;
            border-radius: 5px;
            margin-bottom: 5px;
        }

    a.download {
        background: #fff;
        color: #7386D5;
    }

    a.article,
    a.article:hover {
        background: #6d7fcc !important;
        color: #fff !important;
    }

    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
    
    
    .wrapper.wrapper-active #content {
        width: calc(100vw - 133px);
    }

   
#content {
    width: calc(100vw - 263px);
    padding: 15px;
    min-height: 100vh;
    transition: all 0.3s;
}

    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width:1248px) {

    #buyerparticularTable tbody tr td input {
        width: 150px;
    }
}

@media (max-width:1344px) {

    #buyerparticularTable tbody tr td input {
        width: 150px;
    }
}

@media (max-width:1498px) {

    #buyerparticularTable tbody tr td input {
        width: 100px;
    }
}

@media (max-width:1632px) {


    #buyerparticularTable tbody tr td input {
        width: 210px;
    }
}

@media (max-width:2016px) {


    #buyerparticularTable tbody tr td input {
        width: 250px;
    }
}

    @media (max-width: 768px) {
        .wrapper #content {
            width: calc(100vw - 250px);
        }

        #sidebar {
            min-width: 80px;
            max-width: 80px;
            text-align: center;
            margin-left: -80px !important;
        }

        .dropdown-toggle::after {
            top: auto;
            bottom: 10px;
            right: 50%;
            -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
            transform: translateX(50%);
        }

        #sidebar.active {
            margin-left: 0 !important;
        }

        #sidebar .sidebar-header h3,
        #sidebar .CTAs {
            display: none;
        }

        #sidebar .sidebar-header strong {
            display: block;
        }

        #sidebar ul li a {
            padding: 20px 10px;
        }

            #sidebar ul li a span {
                font-size: 0.85em;
            }

            #sidebar ul li a i {
                margin-right: 0;
                display: block;
            }

        #sidebar ul ul a {
            padding: 10px !important;
        }

        #sidebar ul li a i {
            font-size: 1.3em;
        }

        #sidebar {
            margin-left: 0;
        }

        #sidebarCollapse span {
            display: none;
        }
    }