/** NEW CSS 2023+*/
/* Better CSS in 2023 - we should use this whenever there are multiple items that need to be 'wrapped' because it is auto-responsive
and does not require media queries */
/** GLOBAL CSS */

/**
    CSS copied from airdrop.css which is likely to appear in the wasp-pop files
*/
.margin-bottom0px {
    margin-bottom: 0px;
}

.margin-bottom5px {
    margin-bottom: 5px;
}

.margin-bottom10px {
    margin-bottom: 10px;
}

.margin-bottom20px {
    margin-bottom: 20px;
}

.margin-right5px {
    margin-right: 5px;
}

.margin-right10px {
    margin-right: 10px;
}

.margin-right20px {
    margin-right: 20px;
}

.margin-top5px {
    margin-top: 5px;
}

.margin-top10px {
    margin-top: 10px;
}

.margin-top20px {
    margin-top: 20px;
}

.margin-left5px {
    margin-left: 5px;
}

.margin-left10px {
    margin-left: 10px;
}

.margin-left20px {
    margin-left: 20px;
}


/** Standard list display - FLEX - Great for lists of items that need to appear uniform and responsive - suits the need for when items scale along horizontal axis and 
    drop to next row on smaller devices
*/
.flex-parent {
    /* First - create a flex layout context */
    display: flex;
    /* define flow direction - row in this case */
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    gap: 0.5rem;
    /* Then we define how to distribute remaining space */
    justify-content: center;
}

/* Standard button sizes */

/* Child elements standard square option buttons 140*140 as used on new jobs modal */
.flex-child-140x140 {
    width: 140px;
    height: 140px;
}

/* Standard controls */
.flex-child-control-label {
    width: 26%;
}

.flex-child-control-input {
    width: 70%;
}

    .flex-child-control-input input {
        /* Input fills 100% of parent - can be removed when we rm bootstrap components */
        width: 100%;
    }

/* Standard layouts - modals, inputs etc... each layout = 96% to take into account gap */

.flex-child-1-horizontal {
    width: 24%;
    margin: auto;
}

.flex-child-2-horizontal {
    width: 48%;
    margin: auto;
}

.flex-child-3-horizontal {
    width: 72%;
    margin: auto;
}


/** Standard transitions - help user visualise the swap between sections */
.fade-in {
    opacity: 0;
    -webkit-animation: fadein 0.5s fadein;
    -webkit-animation-delay: 0.5s;
    animation: fadein 1s forwards;
}

@-webkit-keyframes fadein {
    100% {
        opacity: 1;
    }
}

@keyframes fadein {
    100% {
        opacity: 1;
    }
}
/** NEW CSS 2023+*/

/* Child elements standard 140*140 */
.flex-child-140x140 {
    width: 140px;
    height: 140px;
}

/** Standard transitions - help user visualise the swap between sections */
.fade-in {
    opacity: 0;
    -webkit-animation: fadein 0.5s fadein;
    -webkit-animation-delay: 0.5s;
    animation: fadein 1s forwards;
}

@-webkit-keyframes fadein {
    100% {
        opacity: 1;
    }
}

@keyframes fadein {
    100% {
        opacity: 1;
    }
}

/* Show hide iteration - great for warnings */

/* The element to apply the animation to */
.show-hide-repeat {
    animation: showHideRepeat 2s infinite;
    opacity: 0;
}

@keyframes showHideRepeat {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes showHideRepeat {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}

.reveal-element {
    animation: revealElement 2s;
}

@keyframes revealElement {
    from {
        height: 0;
    }
}

@-webkit-keyframes showHideRepeat {
    from {
        height: 0;
    }

    50% {
        height: 50%;
    }

    to {
        height: 100%;
    }
}


/** NEW CSS 2023+*/