@font-face {
    font-family: 'Montserrat Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Regular'), url('../fonts/Montserrat-Regular.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Italic'), url('../fonts/Montserrat-Italic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Thin'), url('../fonts/Montserrat-Thin.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Thin Italic'), url('../fonts/Montserrat-ThinItalic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraLight'), url('../fonts/Montserrat-ExtraLight.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat ExtraLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraLight Italic'), url('../fonts/Montserrat-ExtraLightItalic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Light';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Light'), url('../fonts/Montserrat-Light.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Light Italic'), url('../fonts/Montserrat-LightItalic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Medium'), url('../fonts/Montserrat-Medium.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Medium Italic'), url('../fonts/Montserrat-MediumItalic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat SemiBold'), url('../fonts/Montserrat-SemiBold.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat SemiBold Italic'), url('../fonts/Montserrat-SemiBoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Bold'), url('../fonts/Montserrat-Bold.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Bold Italic'), url('../fonts/Montserrat-BoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraBold'), url('Montserrat-ExtraBold.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat ExtraBold Italic'), url('../fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Black';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Black'), url('../fonts/Montserrat-Black.woff') format('woff');
}


@font-face {
    font-family: 'Montserrat Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Black Italic'), url('../fonts/Montserrat-BlackItalic.woff') format('woff');
}

/* SIDE BAR */
/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

#sidebar-wrapper {
    z-index: 999;
    position: fixed;
    min-height: 100vh;
    min-width: 200px !important;
    width: 14vw;
    margin-left: -13rem;
    -webkit-transition: margin .3s ease-out;
    -moz-transition: margin .3s ease-out;
    -o-transition: margin .3s ease-out;
    transition: margin .3s ease-out;
}

#sidebar-wrapper .sidebar-heading {
    padding: 20px 1.25rem;
    font-size: 13px;
    ;
}

#sidebar-wrapper .list-group {
    width: 100%;
    margin: 00px;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 100px;
}

#wrapper.toggled #page-content-wrapper {
    margin-left: 0px;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0px;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
        -webkit-transition: margin .3s ease-out;
        -moz-transition: margin .3s ease-out;
        -o-transition: margin .3s ease-out;
        transition: margin .3s ease-out;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: min(-14vw, -200px);
    }

    #wrapper #page-content-wrapper {
        margin-left: max(14vw, 200px);
    }

    #wrapper .toggled #page-content-wrapper {
        opacity: 0.5;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    #sidebar-wrapper {
        margin-left: -15rem;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0;
    }

    #wrapper .toggled #page-content-wrapper {
        opacity: 0.4;
        margin-left: 0;
    }

}

.sidebar-wrapper>a:hover {
    background-color: #0abeaf;
}

/* END SIDEBAR */
.navbar {
    height: 60px;
    box-shadow: inset 1px 1px #eeeeee;
}

html,
body {
    height: 100%;
    font-family: 'Montserrat Regular', monospace;
    overflow-x: hidden;
}

/* THEME  */
.text-theme-color {
    color: #0abeaf;
}

.bg-theme-color {
    color: white;
    background-color: #0abeaf;
}

.color-c1 {
    color: #F6821F
}

.color-c2 {
    color: #FE0000
}

.color-c3 {
    color: #FCAE18;
}

.bg-c1 {
    background-color: #F6821F;
    color: white;
}

.bg-c2 {
    background-color: #FE0000;
    color: white;
}

.bg-c3 {
    background-color: #FCAE18;
    color: white;
}

/* c1 = #F6821F
c2 = #F7952A
c3 = #FCAE18
c4 = #FFE682
c5 = #FE0000
c6 = #0ABEAF */

.body {
    background-image: url('../assets/back.jpeg');
    background-position: center;
    background-size: cover;
}

.btn-theme {
    color: white;
    background-color: #0abeaf;
}

.btn-theme:active,
.btn-theme:hover,
.btn-theme:focus {
    opacity: 0.8 !important;
    color: #ffffffff !important;
}

/* Custom bootstrap */

input,
.form-control {
    border-radius: 0 !important;
}

.card,
.btn {
    border-radius: 0 !important;
}


/* END THEME */

.btn:focus {
    outline: none;
    box-shadow: none;
}

/* --- PREMIUM UI --- */
.premium-ui .card,
.premium-ui .btn,
.premium-ui .form-control .premium-ui-element {
    border-radius: 10px !important;
}

.premium-card {
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: none !important;
    border-radius: 16px !important;
    padding: 40px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.premium-title {
    font-family: 'Montserrat Bold', monospace;
    font-size: 24px;
    margin-bottom: 10px;
    color: #2c3e50;
}

.premium-subtitle {
    font-family: 'Montserrat Regular', monospace;
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 30px;
}

/* Gradient Buttons */
.premium-btn {
    border: none;
    border-radius: 30px !important;
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat SemiBold', monospace;
}

.premium-btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0062cc 100%);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
    color: white;
}

.premium-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.6);
    color: white !important;
}

.premium-btn-warning {
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4);
    color: white;
}

.premium-btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.6);
    color: white !important;
}

.premium-btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
    color: white;
}

.premium-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.6);
    color: white !important;
}

/* File List */
.premium-file-list {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
}

.file-item {
    display: flex;
    align-items: center;
    background: white;
    margin-bottom: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.2s;
    text-decoration: none !important;
}

.file-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.file-icon {
    font-size: 24px;
    margin-right: 15px;
    opacity: 0.8;
}

.file-name {
    font-weight: 500;
    color: #34495e;
    flex-grow: 1;
}

.file-action i {
    color: #bdc3c7;
    transition: color 0.2s;
}

.file-item:hover .file-action i {
    color: #2c3e50;
}

/* Loader */
.premium-loader {
    margin-top: 20px;
}

/* --- RESPONSIVE PREMIUM UI --- */
@media (max-width: 768px) {
    .premium-card {
        padding: 20px 15px;
        /* Reduced padding */
        margin-top: 1rem;
        border-radius: 12px !important;
    }

    .premium-title {
        font-size: 18px;
        /* Smaller title */
    }

    .premium-subtitle {
        font-size: 13px;
    }

    .file-item {
        padding: 10px;
    }

    .file-name {
        font-size: 13px;
        word-break: break-all;
        /* Prevent long filenames from overflowing */
    }

    .premium-btn {
        width: 100%;
        /* Full width button on mobile */
        padding: 12px;
    }
}

.delete-btn {
    color: #e74c3c;
    /* Red */
    margin-left: 25px;
    /* Increased spacing */
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-btn:hover {
    background: #ffebee;
    color: #c0392b;
    transform: scale(1.1);
}

/* Sidebar Chevrons */
#sidebar-wrapper .dropdown-toggle::after {
    display: none;
}

#sidebar-wrapper .dropdown-toggle .chevron-icon {
    transition: transform 0.3s ease;
}

/* When collapsed (closed), point right (0deg default) */
#sidebar-wrapper .dropdown-toggle.collapsed .chevron-icon {
    transform: rotate(0deg);
}

/* When expanded (open - collapsed class removed), point down (90deg) */
#sidebar-wrapper .dropdown-toggle:not(.collapsed) .chevron-icon {
    transform: rotate(90deg);
}