.elementor-382 .elementor-element.elementor-element-f6a9ca1:not(.elementor-motion-effects-element-type-background), .elementor-382 .elementor-element.elementor-element-f6a9ca1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-382 .elementor-element.elementor-element-f6a9ca1 > .elementor-container{max-width:1100px;}.elementor-382 .elementor-element.elementor-element-f6a9ca1{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:0px;padding:0150px 100px 150px 100px;}.elementor-382 .elementor-element.elementor-element-f6a9ca1 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-382 .elementor-element.elementor-element-25e784d > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-382 .elementor-element.elementor-element-25e784d{text-align:center;}.elementor-382 .elementor-element.elementor-element-25e784d .elementor-heading-title{font-family:"Forza", Sans-serif;font-size:2.5em;font-weight:bold;line-height:1.3em;color:var( --e-global-color-primary );}.elementor-382 .elementor-element.elementor-element-4d5ee3a > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-382 .elementor-element.elementor-element-4d5ee3a{text-align:center;}.elementor-382 .elementor-element.elementor-element-4d5ee3a .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:1.5em;font-weight:normal;line-height:1.5em;color:var( --e-global-color-primary );}.elementor-382 .elementor-element.elementor-element-c0575dd > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-382 .elementor-element.elementor-element-c0575dd:not(.elementor-motion-effects-element-type-background), .elementor-382 .elementor-element.elementor-element-c0575dd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://degreegrading.com/wp-content/uploads/grades-banner.png");background-position:0px 291px;background-repeat:repeat;background-size:contain;}.elementor-382 .elementor-element.elementor-element-c0575dd > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(360deg, #000000 60%, #00000087 100%);opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-382 .elementor-element.elementor-element-c0575dd > .elementor-container{max-width:1100px;}.elementor-382 .elementor-element.elementor-element-c0575dd{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:100px;padding:100px 0px 100px 0px;}.elementor-382 .elementor-element.elementor-element-6b1cf25 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:0px;}.elementor-382 .elementor-element.elementor-element-dc5cf4e > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-382 .elementor-element.elementor-element-dc5cf4e{text-align:left;}.elementor-382 .elementor-element.elementor-element-dc5cf4e .elementor-heading-title{font-family:"Forza", Sans-serif;font-size:3.5em;font-weight:300;color:var( --e-global-color-secondary );}.elementor-382 .elementor-element.elementor-element-cf710ef > .elementor-widget-container{margin:-10px 0px 0px 0px;}.elementor-382 .elementor-element.elementor-element-cf710ef{text-align:left;}.elementor-382 .elementor-element.elementor-element-cf710ef .elementor-heading-title{font-family:"Forza", Sans-serif;font-size:3.5em;font-weight:300;color:var( --e-global-color-text );}.elementor-382 .elementor-element.elementor-element-cc5aa1b{width:var( --container-widget-width, 103.953% );max-width:103.953%;--container-widget-width:103.953%;--container-widget-flex-grow:0;text-align:left;}.elementor-382 .elementor-element.elementor-element-cc5aa1b > .elementor-widget-container{margin:0px 0px 25px 0px;}.elementor-382 .elementor-element.elementor-element-cc5aa1b .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:1.3em;font-weight:600;line-height:1.5em;color:var( --e-global-color-text );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-382 .elementor-element.elementor-element-8b83c11 .elementor-button{background-color:var( --e-global-color-text );font-family:"Forza", Sans-serif;font-size:18px;letter-spacing:0.3px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-radius:25px 25px 25px 25px;padding:10px 50px 10px 50px;}.elementor-382 .elementor-element.elementor-element-8b83c11 > .elementor-widget-container{margin:025px 0px 0px 0px;}.elementor-382 .elementor-element.elementor-element-24c5751{width:var( --container-widget-width, 94.007% );max-width:94.007%;--container-widget-width:94.007%;--container-widget-flex-grow:0;}.elementor-382 .elementor-element.elementor-element-c3d95ab:not(.elementor-motion-effects-element-type-background), .elementor-382 .elementor-element.elementor-element-c3d95ab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-382 .elementor-element.elementor-element-c3d95ab > .elementor-container{min-height:400px;}.elementor-382 .elementor-element.elementor-element-c3d95ab{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-382 .elementor-element.elementor-element-c3d95ab > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(max-width:1024px){.elementor-382 .elementor-element.elementor-element-f6a9ca1{padding:100px 100px 100px 100px;}.elementor-382 .elementor-element.elementor-element-25e784d .elementor-heading-title{font-size:32px;}.elementor-382 .elementor-element.elementor-element-c0575dd > .elementor-container{max-width:725px;}.elementor-382 .elementor-element.elementor-element-c0575dd:not(.elementor-motion-effects-element-type-background), .elementor-382 .elementor-element.elementor-element-c0575dd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;background-size:contain;}.elementor-382 .elementor-element.elementor-element-c0575dd{padding:050px 0px 50px 0px;}.elementor-382 .elementor-element.elementor-element-dc5cf4e{text-align:center;}.elementor-382 .elementor-element.elementor-element-dc5cf4e .elementor-heading-title{font-size:3em;}.elementor-382 .elementor-element.elementor-element-cf710ef{text-align:center;}.elementor-382 .elementor-element.elementor-element-cf710ef .elementor-heading-title{font-size:3em;}.elementor-382 .elementor-element.elementor-element-cc5aa1b > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-382 .elementor-element.elementor-element-cc5aa1b{text-align:center;}.elementor-382 .elementor-element.elementor-element-cc5aa1b .elementor-heading-title{font-size:1.5em;}.elementor-382 .elementor-element.elementor-element-8b83c11 .elementor-button{padding:10px 50px 10px 50px;}}@media(max-width:767px){.elementor-382 .elementor-element.elementor-element-f6a9ca1{padding:50px 10px 50px 10px;}.elementor-382 .elementor-element.elementor-element-25e784d{text-align:center;}.elementor-382 .elementor-element.elementor-element-25e784d .elementor-heading-title{font-size:2.5em;}.elementor-382 .elementor-element.elementor-element-4d5ee3a .elementor-heading-title{font-size:1.2em;line-height:1.5em;}.elementor-382 .elementor-element.elementor-element-c0575dd:not(.elementor-motion-effects-element-type-background), .elementor-382 .elementor-element.elementor-element-c0575dd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:top center;background-repeat:repeat;background-size:contain;}.elementor-382 .elementor-element.elementor-element-c0575dd{margin-top:0px;margin-bottom:0px;padding:50px 0px 50px 0px;}.elementor-382 .elementor-element.elementor-element-dc5cf4e{text-align:center;}.elementor-382 .elementor-element.elementor-element-dc5cf4e .elementor-heading-title{font-size:3em;line-height:1.2em;}.elementor-382 .elementor-element.elementor-element-cf710ef{text-align:center;}.elementor-382 .elementor-element.elementor-element-cf710ef .elementor-heading-title{font-size:3em;line-height:1em;}.elementor-382 .elementor-element.elementor-element-cc5aa1b > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-382 .elementor-element.elementor-element-cc5aa1b{text-align:center;}.elementor-382 .elementor-element.elementor-element-cc5aa1b .elementor-heading-title{font-size:1.4em;line-height:1.5em;}.elementor-382 .elementor-element.elementor-element-8b83c11 > .elementor-widget-container{margin:25px 0px 25px 0px;}.elementor-382 .elementor-element.elementor-element-8b83c11 .elementor-button{font-size:16px;padding:10px 50px 10px 50px;}}@media(min-width:768px){.elementor-382 .elementor-element.elementor-element-6b1cf25{width:40.299%;}.elementor-382 .elementor-element.elementor-element-2799dec{width:59.701%;}}@media(max-width:1024px) and (min-width:768px){.elementor-382 .elementor-element.elementor-element-6b1cf25{width:50%;}.elementor-382 .elementor-element.elementor-element-2799dec{width:50%;}}/* Start custom CSS for heading, class: .elementor-element-cc5aa1b */@media only screen and (min-width: 769) {
.elementor-382 .elementor-element.elementor-element-cc5aa1b {
    text-align: left !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-24c5751 */.slider-container {
    margin: 20px 0;
}

.slider {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #14141d;
    border-radius: 50px;
}

.thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #000000;
    border-color: #65BC46;
    border-style: solid;
    border-width: 5px;
    border-radius: 50%;
    cursor: pointer; /* Makes it clear it's draggable */
}

.fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: green;
}



button {
    padding: 10px 15px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
}

.option-container {
    margin: 20px 0;
}

.option-button {
    display: flex;
    border: 1px solid black;
    overflow: hidden;
}

.option-container .option-button .left-option,
.option-container .option-button .right-option {
    flex: 1;
    padding: 10px;
    border: none;
    background: #14141d; /* Default color */
    color: #fff !important;
    font-family: "Forza", sans-serif !important;
    font-size: 1em !important;
    cursor: pointer;
    transition: background 0.3s;
}

.left-option {
    border-right: 1px solid black;
    border-radius: 50px 0 0 50px !important;
}

.right-option {
    border-radius: 0 50px 50px 0 !important;
}

.option-container .option-button .left-option.active {
    background-color: #65BC46 !important;
    color: #000 !important;
}

.option-container .option-button .right-option.active {
    background-color: #BA2E37 !important;
    color: #000 !important;
}

.option-container .option-button .left-option:hover {
    background-color: #65BC46;
    color: #000 !important;
}

.option-container .option-button .right-option:hover {
    background-color: #BA2E37 !important;
    color: #000 !important;
}

input[type="range"] {
    --percentage: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, currentColor calc(var(--percentage) * 100%), transparent calc(var(--percentage) * 100%), transparent);
}

/* For Firefox */
input[type="range"]::-moz-range-track {
    background: linear-gradient(90deg, currentColor calc(var(--percentage) * 100%), transparent calc(var(--percentage) * 100%), transparent);
}

/* Custom thumb styling for Webkit */
input[type="range"]::-webkit-slider-thumb {
    /* Add custom styles for the thumb if needed */
}

/* Custom thumb styling for Firefox */
input[type="range"]::-moz-range-thumb {
    /* Add custom styles for the thumb if needed */
}

.slider.zeroPoints .fill {
    background-color: #BA2E37;  /* Example color for 0 points */
}
.slider.onePoint .fill {
    background-color: #f57f20;  /* Example color for 1 point */
}
.slider.twoPoints .fill {
    background-color: #d4ba31;  /* Example color for 2 points */
}
.slider.threePoints .fill {
    background-color: #65BC46;  /* Example color for 3 points */
}

.slider-container {
    margin-bottom: 35px
}

.slider-container label, .option-container label {
    font-weight: bold;     
    color: #ffffff;
    margin-right: 10px;         
    font-size: 1.1em;
    display: inline-block;            
}

#surfaceValue, #cornersEdgesValue, #centeringValue {
    color: #65BC46;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom:10px;
    display: inline-block
}

.zeroPointsValue {
    color: #BA2E37 !important;  /* Color for 0 points */
}

.onePointValue {
    color: #f57f20 !important;  /* Color for 1 point */
}

.twoPointsValue {
    color: #d4ba31 !important;  /* Color for 2 points */
}

.threePointsValue {
    color: #65BC46 !important;  /* Color for 3 points */
}


.zeroPointsThumb {
    border-color: #BA2E37 !important;  /* Color for 0 points */
}
.onePointThumb {
    border-color: #f57f20 !important;  /* Color for 1 point */
}
.twoPointsThumb {
    border-color: #d4ba31 !important;  /* Color for 2 points */
}
.threePointsThumb {
    border-color: #65BC46 !important;  /* Color for 3 points */
}

.content-container {
            display: flex;
            justify-content: space-between;
        }

        .left-column,
        .right-column {
            flex: 1; /* equally divide the width */
            padding: 15px;
        }

        .left-column {
            max-width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }

        .right-column {
            max-width: 50%;
        }
        
        
@media (max-width: 768px) {
    .content-container {
        flex-direction: column-reverse;
    }
    
    .left-column, .right-column {
        width: 100%;
        max-width: 100%; /* reset the max-width to take full width on mobile */
    }
}


.circle-image-container {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid #14141d;
    background-color: #14141d;
    overflow: hidden;  /* This will ensure the image inside is clipped by the border-radius */
    display: flex;     /* These two lines ensure the image is centered */
    align-items: center;
}

.circle-image {
    width: 100%;       /* Fill the width of its container */
    object-fit: cover;
    object-position: center 10px;  /* Adjust the image by 10px downwards */
    display: block;
    transform: scale(1.2);
}

#totalPointsContainer {
    background-color: #14141d;
    font-family: 'Forza', sans-serif;
    font-weight: 800;
    font-size: 1.3em;
    padding: 1px 35px;
    color: #000000;
    border-radius: 10px;
    text-align: center;
    margin-top:20px;
    text-transform: uppercase;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Forza';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://degreegrading.com/wp-content/uploads/2021/11/Forza-Bold-1.woff2') format('woff2'),
		url('https://degreegrading.com/wp-content/uploads/2021/11/Forza-Bold-2.woff') format('woff');
}
@font-face {
	font-family: 'Forza';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://degreegrading.com/wp-content/uploads/2021/11/Forza-Book-1.woff2') format('woff2'),
		url('https://degreegrading.com/wp-content/uploads/2021/11/Forza-Book-1.woff') format('woff');
}
@font-face {
	font-family: 'Forza';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://degreegrading.com/wp-content/uploads/2021/11/Forza-Thin-1.woff2') format('woff2'),
		url('https://degreegrading.com/wp-content/uploads/2021/11/Forza-Thin-1.woff') format('woff');
}
/* End Custom Fonts CSS */