/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */



@media (min-width: 1024px){
	.space-between {
		justify-content: space-between;
	}
}
.btn-outline-danger {
    border: unset !important;
    color: #ea5455 !important;
    border-color: rgba(0,0,0,0) !important;
    background: #fce4e4 !important;
}

.w-px-400 {
    width: 400px !important;
}

.bg-slate-200 {
    background-color: #e2e8f0;
}
.w-px {
    width: 1px;
}
.mx-3 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
}
.small-font {
    font-size: 11px;
    font-weight: bold;
}
.small-font a{
	color: var(--dark);
}
h4, .h4 {
       color: var(--primary);
}

input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #e84b29;
    padding: 10px 20px;
    border-radius: 0.357rem;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
  }
  
  input[type=file]::file-selector-button:hover {
    background: #e84b29;
  }
.inputfile{
    width: 100%;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 0.357rem;
    border: 1px solid #d8d6de;
}
.bg-grey {
    background-color: #f8f8f8;
    padding: 1.5rem 2rem;
    border-radius: 0.357rem;
}

@media (min-width:1024px){
    /*.invoice-icon{
        margin-right: 15em;
    }*/
}

/* Horizhotal Timeline */
@media (min-width:1024px){
    ul.timeline.new-timeline li.timeline-item {
        float: left;
        width: 20%;
    }

    ul.timeline.new-timeline .timeline-item {
        position: relative;
        padding-left: 2.5rem;
        border-left: unset !important;
        border-top: 1px solid #ebe9f1;
    }
    
    /*ul.timeline.new-timeline li:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        top: 0;
         border-bottom: solid 2px #000; 
        border-top: 1px solid #ebe9f1;
        animation: border_anim 3s linear forwards;
    }*/

    ul.timeline.new-timeline .timeline-item .timeline-point {
        top: -0.5rem !important;
       
    }
    
    /*ul.timeline.new-timeline .timeline-item .timeline-point {
        height: 2.75rem !important;
        width: 2.75rem !important;
    }*/
    
    ul.timeline.new-timeline .timeline-item .timeline-point .feather, [data-feather] {
        height: 1.2rem;
        width: 1.2rem;
        display: inline-block;
    }

    @keyframes border_anim {
        0%{
            width: 0%;
        }
        100%{
            width: 100%;
        }
    }
    
    ul.list-style-square li::marker {
        color: var(--primary);
        font-size: 1.2em;
    }
}



/* ------------------------------ */



/* Sidebar Banner */

@media (min-width: 961px){
    .bg-img {
        background-image: url(../app-assets/images/htcc2.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: top center;
    }
}

@media (max-width: 600px){
    .bg-img {
        background-image: url(../app-assets/images/htcc2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        padding: 50% !important;
        min-height: 450px;
        /* margin-bottom: 30px; */
    }
}
.auth-wrapper.auth-v2 .brand-logo {
    left: 0 !important;
    top: 0;
}

/* ---------- */

/* Mobile Add Expenses */

@media (max-width:600px){
    .d-mobile-none {
        display: none !important;
    }
    .bs-stepper .bs-stepper-header .line {
        display: block !important;
    }
    .bs-stepper .bs-stepper-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ------------------- */

/* File Upload */

input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #e84b29;
    padding: 10px 20px;
    border-radius: 0.357rem;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
    background: #e84b29;
}
.inputfile{
    width: 100%;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 0.357rem;
    border: 1px solid #d8d6de;
}
.bg-grey {
    background-color: #f8f8f8;
    padding: 1.5rem 2rem;
    border-radius: 0.357rem;
}

@media(max-width: 600px){
    .bg-grey {
        display: flex;
        flex-direction: column-reverse;
    }
    input[type=file]::file-selector-button {
       padding: 5px 4px;
       font-size: 12px;
    }
}


/* ------------------- */

@media (min-width:1024px){
    /*.invoice-icon{
        margin-right: 15em;
    }*/
}

ul {
    padding-inline-start: 30px;
}

input[type="date"].form-control {
    color: #999;
}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .bg-img {
        background-image: url(../app-assets/images/htcc2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        padding: 50% !important;
        min-height: 450px;
        /* margin-bottom: 30px; */
    }   

}

/* your css rules for ipad landscape */
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    .bg-img {
        background-size: cover;
    }
    
}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 820px) 
  and (max-device-width: 1180px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .invoice-icon {
        margin-right: 0 !important;
    }
    .bg-img {
        background-size: cover;
    }
}

/* ----------------------- */

/* First DELETE Button Remove - Repeater Form*/
.invoice-repeater .invoice-item:first-child .btn-outline-danger {
    display: none !important;
}

/* -------------------------- */