/*===== HEADER =====*/

.wrapper .header {
    width: calc(100% - 230px);
    margin-left: 230px;
    transition: 0.3s;
    z-index: 1;
    background: #fff;
    position: fixed;
    height: 70px;
    display: flex;
    top: 0;
    border-bottom: 1px solid rgba(100, 100, 111, 0.2);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.wrapper.collapsed .header {
    width: calc(100% - 60px);
    margin-left: 60px;
}

/*===== TOGGLE BUTTON =====*/

.wrapper .header .header-menu{
    width: calc(100% - 0%);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.wrapper .header .header-menu .title span {
    color: #4CCEE8;
}

.wrapper .header .header-menu .sidebar-btn {
    color: #000;
    position: absolute;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s;
    transition-property: color;
}

.wrapper .header .header-menu .breadname {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    transition: 0.3s;
    padding: 15px 30px;
    margin-left: 20px;
}

.wrapper .header .header-menu .breadname span a {
    color: #000;
}

.wrapper .header .header-menu .sidebar-btn:hover {
    color: #666699;
}

.wrapper .header .header-menu ul {
    display: flex;
}

.wrapper .header .header-menu ul li a {
    background: #fff;
    color: #000;
    display: block;
    margin: 0 10px;
    font-size: 18px;
    width: 34px;
    height: 34px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    transition: 0.3s;
    transition-property: background, color;
}

.wrapper .header .header-menu ul li a::after hover {
    background: #4CCEE8;
    color: #fff;
}


/*===== LOGIN =====*/
.wrapper .header .login {
    padding: 15px 30px;
}

/*===== SIDEBAR =====*/
.wrapper .sidebar {
    z-index: 1;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAAQ4CAYAAADviKJ7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABSLSURBVHgB7d0LciPHlYbRIgCypdnA7Gd2OJu11CQAGkk2flFSv9isqrxZOCdMW/IjwgEKnzJv1uPuf//v/58ngIvdBPCFIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhCCAIQgACEIQAgCEIIAhCAAIQhACAIQggCEIAAhCEAIAhC73387TPeH3XR3NwE37rC7lODhfv/yc35+np6eztPpfJ4ufwjcmMPbP2lx+PSwv/zRfjqeztPx2OKgDHArDt/8D/a7l58WhBaGFghg2w4/+i/sd3fT/rJqeHjeTY9PwgBb9tOnDHdfthP/cxlCtkgA2/PuY8cWht8+HV7i4GQCtuWHW4Zv/g+/zBgeL/OFp6fTBIzvwxcmPRx2thGwEbNcqXjdRtzf7ydgXLNeunxdLZgtwJhmv5ehrRZ+/3Q/HQ5WCzCaRW5uaiuET/c7WwgYzKJ3O7YtxO+2EDCMxW9/3r1sIUQBRrDK8xDuRAGGsNoDUq7Dxp3rFaCsVZ+Y1FYIvz0cRAGKWv0RaqIAdXV5pqIoQE3dHrL6GgV3TEIlXZ+67PQBaun+GPbXB6/88l3YwIxKvJeh3Tr94DJn6K7Mi1rauyHcEAV9lXpz04MXxkBXpYLQYmDICP2Ue7djGzLe2zpAFyVf9trmCZ7RCOsr+/Znj3mH9ZUNQts6HPa2DrCmskFoHu6dOsCaSgehcRUjrKd8EF5eNmvACKsoH4TG05thHUMEwSoB1jFEEBqrBFjeMEGwSoDlDROExioBljVUEKwSYFlDBaHxzARYznBBaCsEVy/CMoYLQovBfj/c/20YwpDfrIMgwCKG/Ga9bhvsG2Buw/6t1ioB5jfst2q/t0KAuY0bBNsGmN3Q626rBJjX2EHYmSPAnAYPghUCzGnoILQRwk4UYDbDr7kFAeYzfBBsG2A+468QHD3CbIYPgmsRYD4bCIIowFw2cZBvjADz2EQQ7hQBZrGRFYIgwBy2sULQA5jFNoIwKQLMYRtbBvc4wSx8lYDYSBBsGWAOhopA2DIAIQhACAIQggDEJoLw/DwBM9jICkERYA5WCEAIAhDbCMIEzGEjKwRJgDlsIghnQYBZbGOFcBYEmIMZAhDb2DJYIcAshg+CGMB8xg+CgSLMZvggnE6CAHOxQgBi6CC0FpghwHyGDsJJDGBWYwfhdJ6A+VghADFsENrswE1NMK9hg3C0XYDZDRwEqwOY25BBsF2AZQwZhKej7QIsYcggOF2AZQwXhDZMtF2AZYwXBNsFWMxQQWh3NtouwHKGCoJrD2BZwwShzQ0EAZY1TBAen8QAljZEEKwOYB1DBOHx6TQByysfhLYycN8CrKN8EMwOYD2lg/D05KpEWFPZILQQPB7NDmBNZYPw+VEMYG0lg9C2Ci5RhvWVC4KtAvRTKggtBn98FgPopVQQ2pOQnCpAP2WC0OYGHo0GfZUIwtncAEroHoS2RfjT3ABK6BqE6xDR3ABq6BYEMYB6ugThuk0QA6hl9SBcY3AWAyhn1SCIAdS2WhDEAOo7TCswQIQxLB6E0+k8ffagExjCokFor1377AGpMIxFgtBWA+2+BPcmwFhmD4J5AYxr1iC0LcKjW5hhWLMEoQWgPQPRY89gbB8OwtNlaPh0erYqgA345SA4ToTteXcQWgja6YHtAWzPTwdBCGD7fhgEIYDb8dUgtLlAC8BRCOCm/C0Ipy+vXm8RMCyE23NoEThfAuDoEDj86aWqwBdl3/4MrE8QgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBODF3d00HSbg5rQv/+7yT3eXn/1+N13+8fLHggA3oAVgv7ubdpdv/mH3GoKvEQTYoOsKYH/4fgD+SRBgI15XAZcAXCJwacBPR+AtQYCBvY1A2xJ8lCDAYOaOwFuCAINoX/73zgTeSxCgsCVXA18jCFDQy0VCh/10v19uNfA1ggCFtFVAWw0c9n0uIhYEKKCF4P5+v8q24HsEATqqEoIrQYAO2vf/4eFQJgRXggAravPBh8uKoNeM4EcEAVbQ69TgvQQBFta2BZ8e9qVDcCUIsJD2/f9UcE7wPYIAC2jXEjxcfkZYFbwlCDCjqqcHP0sQYCajrgreEgT4oBFnBd8iCPABW1gVvCUI8Ava9/++XVdw2NabDAQB3qnF4PdPh82sCt4SBHiHrW0R/kkQ4Ce1exC2tkX4J0GAH9jSKcKPCAJ8x5bnBV8jCPANbUHw2w3FoBEE+IqtDw+/RRDgH1oMPl0GiLdIEOCN+/u2MrjNGDTbPkOBd7j1GDSCAJMYXAkCN08M/iII3DQx+DtB4GaJwb8JAjdJDL5OELg5YvBtgsBNeb0CUQy+RRC4GS9PRN747csf5dPhJtzd4I1Kv0IQ2Lxbu4X5IwSBzWtPOhKDnyMIbFo7Uaj66vWKfFJsVguBE4X3EQQ2qe0QHu795f1ePjE2xxDx1wkCm9PeqCQGv0YQ2JQ2N9j6uxOW5JNjM8wNPs6nx2aYG3ycILAJ7XoDMfg4QWB4L1sF1xvMQhAYXtsqMA9BYGi2CvMSBIbVOnDvPoVZ+TQZlrsY5ycIDKldgOQuxvn5RBmSC5CW4VNlOAaJyxEEhmKQuCyfLEMxSFyWIDCM1gGDxGX5dBlGWx2wLEFgCFYH6/AJM4RPD+5XWIMgUN5+d/fyw/IEgfIOHom2Gp80pZkdrMsnTWlOFtYlCJRldbA+nzZlWR2sTxAoqa0OnCysTxAoab9zR2MPgkBJnnfQh0+dctpWweqgD0GgHBci9eOTp5TXYaK/LHvxyVPK6zBxohNBoBTbhb58+pTh2oP+BIEyzA768xugDNuF/vwGKMF2oQZBoATbhRr8FijBdqEGvwW6s12oQxDoTgzqEAS623sqUhl+E3S3s0IoQxDoqs0Pdm5eKEMQ6MpxYy1+G3S131sdVCIIdGV+UIsg0I35QT2CQDdiUI8g0I3tQj2CQDc7FySV4zdCNw4Y6hEEumjjA+9eqEcQ6MJAsSZBoAurg5oEgS5csVyTXwtd7BShJL8VurBjqEkQ6MJQsSZBYHUGinUJAqtzxXJdgsDqLBDqEgQ6UISqBIHVWSHUJQiszglDXYLA+kwVyxIEVicHdQkCEILA6uwY6hIEIASBDiwRqhIEVufUsS5BAEIQgBAEIAQBCEEAQhCAEARW9/w8UZQg0IEiVCUIQAgCq7M+qEsQWJ0ZQl2CwOqez4pQlSAAIQis7mzPUJYgsDo9qEsQ6EARqhIEVmemWJcgsDpbhroEgdU9K0JZgkAXolCTINDFSQ9KEgS6eD6fJ+oRBLo4O2ooSRDoQg9qEgS6MFSsSRDoovVAFOoRBLpx0lCPINDN6eikoRpBoBtbhnoEgW48F6EeQaAbg8V6BIGujidzhEoEga5csViLINDVSRBKEQS6MkeoRRDozhyhDkGgu5NLFssQBLpr1yPYNdQgCHTXYuAipRoEgRKO7msoQRAo4eSRaiUIAiW0HYNrEvoTBMqwbehPECjDtqE/QaAM24b+BIFSbBv6EgRKadsGlyT0IwiU0mJwPJ0m+hAEynFvQz+CQDltsGi42IcgUJLhYh+CQEmGi30IAiW1GDwdDRfXJgiU5UlK6xMEyno9grRvWJMgUNrRtmFVgkBpjiDXJQiU9/RklbAWQaA8q4T1CAJDsEpYhyAwBKuEdQgCw3h8tEpYmiAwjPbuBvc4LEsQGMrj8eQehwUJAkNxj8OyBIHhtHscvEJ+GYLAcFoLPhswLkIQGJJjyGUIAsNqqwQ7h3kJAsNqcwQDxnkJAkN7Op5tHWYkCAzv0dZhNoLA8M62DrMRBDbB1mEegsBmOHX4OEFgM5w6fJwgsClt6+DBrL9OENicx6N7HX6VILA5rQV/fDZP+BWCwCa1FcKj5zC+myCwWe02afOE9xEENu3zk+sT3kMQ2LzPj0dDxp8kCGzeX0NGUfgRQeAmtBj86eThhwSBm3F28vBDgsBNaScPovBtgsDNaZc3e1fk1wkCN+lRFL5KELhZovBvgsBNE4W/EwRunij8RRBgEoUrQYAvREEQ4G9uPQqCAP/QonCrD2wVBPiKdkXjn59v7y5JQYBvaPc+3NpdkoIA3/H8EoXjy4rhFggC/EBbILSZwi0MGwUBftItDBsFAd6hbR3+2PCwURDgnTJX2OATnQUBfsHLXOFpe1sIQYAP2NoWQhDgg1oM/vPncROnEIIAM2mnEC0MI68WBAFm9Ha1MGIXBAEW0FYLrycRY13hKAiwkLZa+HxZKbyeRIyxXDhMwKJe3kJ9+Xk47KbDYT/d3U1lWSHASkbYRggCrOi6jWiDx4phEATo4G0YTuc68wUzBOjo9a3Ux2m/u5sO+zZj6Pv3aEGAAtoq4XQ+vcwZXoePfcIgCFDIdStxDcN+f3c5lVjvWEIQoKBrGO6Ody/biYf73SphEAQorIXheHp+uY7hOmdYctUgCDCI65zhumpoc4b2r3MSBBjM21VDWynMGQdBgIHNHQdBgI34dxymy89u2l3isPvJQAgCbNBrHNqNVa9PcbquHvZf4vCtQAgC3IC/Vg+vf94C0ZpwjUMLRfv3BAFuUAvEpQ9/u4/iJRITwPQaCUEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAEIQgBAEIAQBCEEAQhCAEAQgBAEIQQBCEIAQBCAEAQhBAOK/ijA7qaXCGkYAAAAASUVORK5CYII=);
    position: fixed;
    top: 0;
    width: 230px;
    transition: 0.3s;
    overflow-y: auto;
}

.wrapper .sidebar .sidebar-menu {
    overflow: hidden;
    height: 100vh;
}

.wrapper .sidebar .sidebar-menu ul{
    padding-left: 0px;
}

.wrapper .sidebar .sidebar-menu ul li a:hover,
.wrapper .sidebar .sidebar-menu ul li a:focus {
    text-decoration: none;
}
.wrapper .sidebar .sidebar-menu .item {
    width: 230px;
    overflow: hidden;
}


.wrapper .sidebar .sidebar-menu .item .menu-btn {
    display: block;
    color: #fff;
    position: relative;
    padding: 15px 15px;
    transition: 0.3s;
    transition-property: color;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn i {
    margin-right: 20px;
    padding-left: 5px;
}

.wrapper .sidebar .sidebar-menu .item .menu-btn img {
    margin-right: 10px;
}

.wrapper .main-container{
    width: calc(100% - 230px);
    margin-top: 70px;
    margin-left: 230px;
    padding: 15px;
    background: no-repeat;
    transition: 0.3s;
}

.wrapper.collapsed .sidebar{
    width: 60px;
}

.wrapper.collapsed .sidebar a span {
    transition: 0.3s;
    display: none;
}

.wrapper.collapsed .sidebar .sidebar-menu .item .menu-btn{
    font-size: 18px;
}
.wrapper.collapsed:not(.show) {
    display: block;
}

.wrapper .sidebar .sidebar-menu .item:hover {
    background-color: #000066;
}

/*===== MAIN CONTAINER =====*/

.wrapper.collapsed .main-container{
    width: calc(100% - 60px);
    margin-left: 60px;
    height: 100%;
}

.wrapper .main-container .card {
    background: #fff;
    padding: 20px;
    font-size: 14px;
    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid rgba(149, 157, 165, 0.2);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-top: 50px;
    height: auto;
}

/*===== WHEN CHOOSE A PAGE =====*/

.choose {
    border-left: 3px solid white;
    background-color: #000066;
}

/*===== Responsive =====*/
@media only screen and (min-device-width: 280px) and (max-device-width: 635px) {
    /*===== Header =====*/
    .wrapper .header {
        width: calc(100% - 40px);
        margin-left: 40px;
        height: 40px;
    }

    .wrapper.collapsed .header {
        width: calc(100% - 0%);
        margin-left: 0px;
        height: 40px;
    }

    /*===== TOGGLE BUTTON =====*/

    .wrapper .header .header-menu .sidebar-btn {
        font-size: 10px;
        font-weight: 500;
    }

    .wrapper .header .header-menu .breadname {
        font-size: 10px;
        font-weight: 500;
        padding: 10px 10px;
        margin-left: 10px;
    }

    .wrapper .header .header-menu ul li a {
        font-size: 10px;
        width: 25px;
        height: 25px;
        line-height: 15px;
    }
    /*===== LOGIN =====*/
    .wrapper .header .login {
        padding: 5px 15px;
        font-size: 10px;
    }
    /*===== SIDEBAR =====*/
    .wrapper .sidebar {
        width: 40px;
    }

    .wrapper .sidebar .sidebar-menu {
        overflow-y: auto;
        overflow-x: hidden
    }

    .wrapper .sidebar .sidebar-menu .item {
        width: 40px;
    }


    .wrapper .sidebar .sidebar-menu .item .menu-btn {
        padding: 8px 8px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn i {
        margin-right: 10px;
        padding-left: 3px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn span {
        display: none
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn img {
        margin-right: 2px;
    }

    .wrapper .main-container {
        width: calc(100% - 40px);
        margin-top: 50px;
        margin-left: 40px;
        padding: 10px;
    }

    .wrapper.collapsed .sidebar {
        display: none
    }

    .wrapper.collapsed .sidebar .sidebar-menu .item .menu-btn {
        font-size: 10px;
    }

    /*===== MAIN CONTAINER =====*/

    .wrapper.collapsed .main-container {
        width: calc(100% - 0px);
        margin-left: 0px;
    }

    .wrapper .main-container .card {
        padding: 10px;
        font-size: 10px;
        margin-left: 5px;
        margin-right: 0.5px;
        margin-top: 20px;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    /*===== Header =====*/
    .wrapper .header {
        width: calc(100% - 40px);
        margin-left: 40px;
        height: 40px;
    }

    .wrapper.collapsed .header {
        width: calc(100% - 0%);
        margin-left: 0px;
        height: 40px;
    }

    /*===== TOGGLE BUTTON =====*/

    .wrapper .header .header-menu .sidebar-btn {
        font-size: 10px;
        font-weight: 500;
    }

    .wrapper .header .header-menu .breadname {
        font-size: 10px;
        font-weight: 500;
        padding: 10px 10px;
        margin-left: 10px;
    }

    .wrapper .header .header-menu ul li a {
        font-size: 10px;
        width: 25px;
        height: 25px;
        line-height: 15px;
    }
    /*===== LOGIN =====*/
    .wrapper .header .login {
        padding: 5px 15px;
        font-size: 10px;
    }
    /*===== SIDEBAR =====*/
    .wrapper .sidebar {
        width: 40px;
    }

    .wrapper .sidebar .sidebar-menu {
        overflow-y: auto;
        overflow-x: hidden
    }

    .wrapper .sidebar .sidebar-menu .item {
        width: 40px;
    }


    .wrapper .sidebar .sidebar-menu .item .menu-btn {
        padding: 8px 8px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn i {
        margin-right: 10px;
        padding-left: 3px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn span {
        display: none
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn img {
        margin-right: 2px;
    }

    .wrapper .main-container {
        width: calc(100% - 40px);
        margin-top: 50px;
        margin-left: 40px;
        padding: 10px;
    }

    .wrapper.collapsed .sidebar {
        display: none
    }

        .wrapper.collapsed .sidebar .sidebar-menu .item .menu-btn {
            font-size: 10px;
        }

    /*===== MAIN CONTAINER =====*/

    .wrapper.collapsed .main-container {
        width: calc(100% - 0px);
        margin-left: 0px;
    }

    .wrapper .main-container .card {
        padding: 10px;
        font-size: 10px;
        margin-left: 5px;
        margin-right: 0.5px;
        margin-top: 20px;
    }
}

@media only screen and (min-device-width: 360px) and (max-device-width: 740px){

    /*===== Header =====*/
    .wrapper .header {
        width: calc(100% - 40px);
        margin-left: 40px;
        height: 40px;
    }

    .wrapper.collapsed .header {
        width: calc(100% - 0%);
        margin-left: 0px;
        height: 40px;
    }

    /*===== TOGGLE BUTTON =====*/

    .wrapper .header .header-menu .sidebar-btn {
        font-size: 10px;
        font-weight: 500;
    }

    .wrapper .header .header-menu .breadname {
        font-size: 10px;
        font-weight: 500;
        padding: 10px 10px;
        margin-left: 10px;
    }

    .wrapper .header .header-menu ul li a {
        font-size: 10px;
        width: 25px;
        height: 25px;
        line-height: 15px;
    }
    /*===== LOGIN =====*/
    .wrapper .header .login {
        padding: 5px 15px;
        font-size: 10px;
    }
    /*===== SIDEBAR =====*/
    .wrapper .sidebar {
        width: 40px;
    }

    .wrapper .sidebar .sidebar-menu {
        overflow-y: auto;
        overflow-x: hidden
    }

    .wrapper .sidebar .sidebar-menu .item {
        width: 40px;
    }


    .wrapper .sidebar .sidebar-menu .item .menu-btn {
        padding: 8px 8px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn i {
        margin-right: 10px;
        padding-left: 3px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn span {
        display: none
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn img {
        margin-right: 2px;
    }

    .wrapper .main-container {
        width: calc(100% - 40px);
        margin-top: 50px;
        margin-left: 40px;
        padding: 10px;
    }

    .wrapper.collapsed .sidebar {
        display: none
    }

    .wrapper.collapsed .sidebar .sidebar-menu .item .menu-btn {
        font-size: 10px;
    }

    /*===== MAIN CONTAINER =====*/

    .wrapper.collapsed .main-container {
        width: calc(100% - 0px);
        margin-left: 0px;
    }

    .wrapper .main-container .card {
        padding: 10px;
        font-size: 10px;
        margin-left: 5px;
        margin-right: 0.5px;
        margin-top: 20px;
    }

}

@media only screen and (min-device-width: 375px) and (max-device-width: 823px) {
    /*===== Header =====*/
    .wrapper .header {
        width: calc(100% - 40px);
        margin-left: 40px;
        height: 40px;
    }

    .wrapper.collapsed .header {
        width: calc(100% - 0%);
        margin-left: 0px;
        height: 40px;
    }

    /*===== TOGGLE BUTTON =====*/

    .wrapper .header .header-menu .sidebar-btn {
        font-size: 10px;
        font-weight: 500;
    }

    .wrapper .header .header-menu .breadname {
        font-size: 10px;
        font-weight: 500;
        padding: 10px 10px;
        margin-left: 10px;
    }

    .wrapper .header .header-menu ul li a {
        font-size: 10px;
        width: 25px;
        height: 25px;
        line-height: 15px;
    }
    /*===== LOGIN =====*/
    .wrapper .header .login {
        padding: 5px 15px;
        font-size: 10px;
    }
    /*===== SIDEBAR =====*/
    .wrapper .sidebar {
        width: 40px;
    }

    .wrapper .sidebar .sidebar-menu {
        overflow-y: auto;
        overflow-x: hidden
    }

    .wrapper .sidebar .sidebar-menu .item {
        width: 40px;
    }


    .wrapper .sidebar .sidebar-menu .item .menu-btn {
        padding: 8px 8px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn i {
        margin-right: 10px;
        padding-left: 3px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn span {
        display: none
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn img {
        margin-right: 2px;
    }

    .wrapper .main-container {
        width: calc(100% - 40px);
        margin-top: 50px;
        margin-left: 40px;
        padding: 10px;
    }

    .wrapper.collapsed .sidebar {
        display: none
    }

        .wrapper.collapsed .sidebar .sidebar-menu .item .menu-btn {
            font-size: 10px;
        }

    /*===== MAIN CONTAINER =====*/

    .wrapper.collapsed .main-container {
        width: calc(100% - 0px);
        margin-left: 0px;
    }

    .wrapper .main-container .card {
        padding: 10px;
        font-size: 10px;
        margin-left: 5px;
        margin-right: 0.5px;
        margin-top: 20px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /*===== Header =====*/
    .wrapper .header {
        width: calc(100% - 50px);
        margin-left: 50px;
        height: 50px;
    }

    .wrapper.collapsed .header {
        width: calc(100% - 0%);
        margin-left: 0px;
        height: 50px;
    }

    /*===== TOGGLE BUTTON =====*/

    .wrapper .header .header-menu .sidebar-btn {
        font-size: 12px;
        font-weight: 500;
    }

    .wrapper .header .header-menu .breadname {
        font-size: 12px;
        font-weight: 500;
        padding: 10px 10px;
        margin-left: 10px;
    }

    .wrapper .header .header-menu ul li a {
        font-size: 12px;
    }
    /*===== LOGIN =====*/
    .wrapper .header .login {
        padding: 5px 15px;
        font-size: 10px;
    }
    /*===== SIDEBAR =====*/
    .wrapper .sidebar {
        width: 50px;
    }

    .wrapper .sidebar .sidebar-menu .item {
        width: 50px;
    }


    .wrapper .sidebar .sidebar-menu .item .menu-btn {
        padding: 8px 8px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn i {
        margin-right: 10px;
        padding-left: 3px;
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn span {
        display: none
    }

    .wrapper .sidebar .sidebar-menu .item .menu-btn img {
        margin-right: 2px;
    }

    .wrapper .main-container {
        width: calc(100% - 50px);
        margin-top: 50px;
        margin-left: 50px;
        padding: 10px;
    }

    .wrapper.collapsed .sidebar {
        display: none
    }

    .wrapper.collapsed .sidebar .sidebar-menu .item .menu-btn {
        font-size: 12px;
    }

    /*===== MAIN CONTAINER =====*/

    .wrapper.collapsed .main-container {
        width: calc(100% - 0px);
        margin-left: 0px;
    }

    .wrapper .main-container .card {
        padding: 10px;
        font-size: 10px;
        margin-left: 5px;
        margin-right: 0.5px;
        margin-top: 20px;
    }
}

.icon-account {
    border-radius: 50%;
    border: 1px solid #ccc;
    width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
}