@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
	color: #000;
	text-align: center;
	vertical-align: middle;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

body
{
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  transition: color 0.3s ease;
}



/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 99.7929%;
	padding-left: 0.1035%;
	padding-right: 0.1035%;
}

    .calculator {
        position: relative;
		max-width: 300px;
        margin: 0% auto 7% auto;
        padding: 20px;
        border-radius: 10px;
        border: 3px solid #42627D;
        background-color: #2F4659;
    }
	.calculatorTitle {
		font-family: Decalotype; 
		font-size:22px; 
		font-weight: bold; 
		display: block; 
		text-align: center; 
		width: 100%; 
		color: white;
		border-radius: 5px;
		padding: 5% 0 0% 0;
		margin: 0 0 -2% 0;
	}
    .input-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
		background-color:  #e30613;
		border-radius: 5px;
    }
    .input-group label {
        flex: 1;
        color: white;
		font-family: Decalotype; 
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin-right: 10px;
        white-space: nowrap;
		padding: 0 1%;
    }
    .input-group input {
        width: 33%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        color: #e30613;
        text-align: center;
        font-size: 16px;
    }
    button {
        width: 100%;
        border: none;
        border-radius: 5px;
        background-color: #e30613;
        color: #f9f9f9;
        cursor: pointer;
    }
    button:hover {
        background-color: #253746;
    }
	.calculateButton {
		font-family: Decalotype;
		font-weight: bold;
        font-size: 30px;
	}
    .result {
		font-family: Decalotype; 
		font-size:22px; 
		font-weight: bold; 
        margin-top: 10px;
        color: white;
        text-align: center;
    }
    span.note {
        font-size: 11px;
        display: block;
        text-align: center;
        width: 100%;
        color: #95B0C7;
        margin-top: 10px;
    }
    span.w {
        font-size: 14px;
        display: block;
        text-align: center;
        width: 100%;
        color: #95B0C7;
        margin-top: 10px;
    }
	.warningMessage {
        display: none;
        color: white;
        font-size: 14px;
        margin: 5px 0;
        text-align: center;			
	}
	
	.resultWarning {
        display: none;
        color: white;
        font-size: 14px;
        margin: 5px 0;
        text-align: center; 
	}
	
	
	
	
	
	
	.language-selector {
		background: #253746;
		position: relative;
		justify-content: center;
		width: 45px;
		margin: -4% 0 2% 87%; 
		text-align: center;
		border: solid 5px #253746;
		border-radius: 5px;
	}
	.selected-language {
		display: flex;
    	align-items: center;
    	justify-content: center; 
		height: 27px;
    	padding: 0px;
    	background: #253746;
    	cursor: pointer;
		text-align: center;
	}
	.language-options {
    	display: none;
    	position: absolute;
    	top: 100%;
    	left: 0;
    	width: 100%;
    	background: #253746;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	z-index: 1000;
    	text-align: center;
	}
	.language-options li {;
		height: 27px;
    	cursor: pointer;
    	display: flex;
    	justify-content: center;
    	align-items: center;
	}	
	.language-option {
    	cursor: pointer;
		margin: 5px 0 0 0;
    	display: flex;
    	align-items: center;
		text-align: center;
	}
	.language-option img {
    	height: 27px;
		text-align: center;
	}




	.RecapImage {
	  	clear: both;
  		position: absolute;
  		top: -1.5%;
  		left: 30%;
  		width: 40%;
	}




@media only screen and (min-width: 800px) {
.gridContainer {
	width: 100%;
	padding-left: 0.0983%;
	padding-right: 0.0983%;
}
}




/* Desktop Layout: 769px to a max of 1920px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1100px) {
.gridContainer {
	width: 100%;
	max-width: 1920px;
	padding-left: 0.1014%;
	padding-right: 0.1014%;
	margin: auto;

}
}