@use '../../root' as *;
@use '../../utilities' as *;


.progress-wrap {
    &:not(:last-child) {
        padding-bottom: 27px;
    }

	.progress-meta {
		display: flex;
		justify-content: space-between;
        padding-bottom: 9px;
		.title {
            color: $white;
            font-family: $body-font;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: -0.36px;
            text-transform: uppercase;
		}
		.title2 {
			color: rgba(31, 31, 31, 0.70);
			font-family: $body-font;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}

		.percentage {
            color: $white;
            font-family: $body-font;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px; 
            letter-spacing: -0.36px;
            text-transform: uppercase;
		}
		.percentage2 {
			color: rgba(31, 31, 31, 0.70);
			font-family: $body-font;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			padding-right: 24px;
		}

		&.mxw-424 {
			max-width: 375px;
			@include breakpoint (xs) {
				max-width: 420px;
			}
			@include breakpoint (md) {
				max-width: 510px;
			}
			@include breakpoint (lg) {
				max-width: 370px;
			}
			@include breakpoint (xxl) {
				max-width: 424px;
			}
		}
		&.mxw-375 {
			max-width: 340px;
			@include breakpoint (xs) {
				max-width: 370px;
			}
			@include breakpoint (md) {
				max-width: 450px;
			}
			@include breakpoint (lg) {
				max-width: 325px;
			}
			@include breakpoint (xxl) {
				max-width: 375px;
			}
		}
	}

	.progress-container {
		display: flex;
		align-items: center;
		position: relative;
		max-width: 625px;
		height: 8px;
		border-radius: 2px;
		background: rgba(31, 31, 31, 0.12);
		overflow: visible;

		.progress-bar {
			height: 6px;
			border-radius: 2px;
			background: #4D7B6B;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			z-index: 1;
            
		}
	}
}