/* ----------------------------------------------------------- BUTTONS */
.bt-round {
    height: 46px;
    border-radius: 23px;
    font-size: 14px;
    font-family: var(--f-text);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    cursor: pointer;
}
.bt-corner {
    height: 46px;
    border-radius: var(--br-10);
    font-size: 14px;
    font-family: var(--f-text);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    cursor: pointer;
}

/* BT width */
.w100px {width: 100px}
.w160px {width: 160px}
.w200px {width: 200px}
.w300px {width: 300px}
.w70 {width: 70%}
.w100{width: 100%;}

/* BT padding */
.bt-pad-30 {padding: 0px 30px;}

/* Colors for different color combinations */
/* Dark button */
.bt-color1 {    
    background-color: var(--700);
    border: 1px solid var(--700);
    color: var(--text-light);
}
.bt-color1:hover {
    border: 1px solid var(--100);
}

.bt-color2 {    
    background-color: var(--trans);
    border: 1px solid var(--700);
    color: var(--text-dark);
}
.bt-color2:hover {
    background-color: var(--200);
}

.bt-color3 {    
    background-color: var(--red-800);
    border: 1px solid var(--trans);
    color: var(--text-light);
}
.bt-color3:hover {
    background-color: var(--red-900);
}

.bt-icon {
    display: flex; justify-content: center; align-items: center;
}



/* -----------------------------------------------------------  LINES */
.line-dark-100 {
    width: 100%; height: 1px;
    background-color: var(--500);
}
.line-dark-100-vertical {
    width: 1px; height: 100%;
    background-color: var(--500);
}

/* -----------------------------------------------------------  ICONS */
.icon-account {
    width: 36px; height: 36px;
    fill: var(--700);
    margin: 0;
    padding: 4px;
    cursor: pointer;
    transition: all 0.5s ease;
}
.icon-account:hover {fill: var(--500)}

.icon-manage-listing {
    width: 24px; height: 24px;
    fill: var(--700);
    margin: 0;
    padding: 4px;
}

.icon-error {
    width: 72px; height: 72px;
    fill: var(--700);
    margin: 0;
    padding: 4px;
    cursor: pointer;
    transition: all 0.5s ease;
}

/* -----------------------------------------------------------  IMG and VIDEO */
.img-sq-100w {
    width: 100%; aspect-ratio: 1/1;
    border-radius: var(--br-10);
    object-fit: cover; object-position: center; display: block;
}
.img-100w-round-border {
    width: 100%;
    border-radius: var(--br-10);
    border: solid 2px var(--text-dark);
}
.img-200px {
    width: 200px; height: auto;
}
.img-30 {
    width: 30%; height: auto;
}
.img-modal {
    height: 90%; aspect-ratio: 1/1;
}
.video_modal {
    width: 500px; aspect-ratio: 3/2;
    border-radius: var(--br-10);
}

/* -----------------------------------------------------------  CARDS */
.card-100 {
    width: 100%;
    border: solid 1px var(--500);
    border-radius: var(--br-10);
    padding: 20px 20px; box-sizing: border-box;
}

.card-100-with-footer {
    position: relative;
    width: 100%;
    border: solid 1px var(--500);
    border-radius: var(--br-10);
    padding: 20px 20px 46px 20px; box-sizing: border-box;
}
.card-footer {
    position: absolute;
    right: 20px;
    bottom: 10px;
}


/* ----------------------------------------------------------- @media */

@media only screen and (max-width: 900px) {
    .img-modal {
        width: 90%;
        height: auto;
        aspect-ratio: 1/1;
    }
    .img-30 {
        width: 40%; height: auto;
    }
    .video_modal {width: 80vw;}
}
@media only screen and (max-width: 600px) { /* Top and side NAV to top and bottumn */
    .w300px {width: 200px}
    .img-30 {
        width: 50%; height: auto;
    }
    .img-200px {width: 160px;}
}
@media only screen and (max-width: 400px) {
    .w300px {width: 200px}
    .img-30 {
        width: 60%; height: auto;
    }
}