@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400;500;600;700&display=swap');

@font-face {
    font-family: DGMataryah;
    src: url(fonts/DGMataryah-Regular.ttf);
  }

body {
    font-family: 'Markazi Text', serif; font-size: larger;
    background-color:#2b2829;
    
}

.font {font-family:DGMataryah;font-weight:normal;}

.container-ghmza {
    background-color:#e5e4d0;
    background-image: url(img/patt.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 45%;
    padding:25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 15px;
}

.btn-bg {
    background: url(img/btn-submit.svg);
    width: 187px;
    height: 103px;
    background-repeat: no-repeat;
    background-size: cover;
    border:none;
}

.btn-box {
    background: url(img/btn-bg-o-a.svg);
    width: 187px;
    height: 103px;
    background-repeat: no-repeat;
    background-size: cover;
    border:none;
}

.btn-box-x {
    background:#e0e43b;
    box-shadow: 5px 3px 1px #312e2f;
    border-radius: 5px;
}
.btn-box-x:hover {
    background:#52bab7;
    color:#e0e43b;
}

.btn-bg-2 {
    background: url(img/cont.svg);
    width: 247px;
    height: 103px;
    background-repeat: no-repeat;
    background-size: cover;
    border:none;
    font-size: xx-large;
    padding: 0 0px 26px 12px;
    color:#312e2f;
}

.btn-bg-2:hover {
color:#d7704e;
font-weight: bold;
cursor: pointer;
}

.btn-back {

    width: 108px;

    border: none;
    text-align: center;
    font-size: smaller;
    display: inline-block;
    color:#312e2f;
}

.btn-min, .btn-max {
    border: 3px solid #000;
    background: #e0e43b;
    font-size: xxx-large;
    line-height: 1px;
}

.btn-min {border-right: 1px solid;}
.btn-max {border-left: 1px solid;}

.yellow-o {
    background-image: url(img/yellow-o.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}

.form-group {text-align: right;}

label {font-weight: 700;}

.ar {text-align: right; direction:rtl}

.box-cont {
    background: url(img/box-cont-01.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 230px;
    
}

.box-cont-normal {
    border: 6px solid #000;
    background: #e0e43b;
    border-radius: 17px;
    box-shadow: -5px 8px 0px 7px #000;
    margin-bottom: 7vh;
    margin-left: 7px;
}

.mkhmkh-logo {
    background: url(img/mkhmkh-logo.svg?10525122024);
    background-repeat: no-repeat;
    width: 300px;
    height: 199px;
    background-size: 185px;
    position: absolute;
    top: 12px;
}

.ghmza-footer {
    background: url(img/ghmza-logo.svg?10525122024);
    background-repeat: no-repeat;
    width: 100%;
    height: 74px;
    background-size: 80px;
    background-position: left;
    margin-top: 12vh;
    filter:invert(1);
}

.btn-mkhmkh {
    background-repeat: no-repeat !important;
    width: 259px;
    height: 144px;
    display: inline-block;
    background-size: cover !important;
}
.btn-indi {background: url(img/btn-indi.svg);}
.btn-group {background: url(img/btn-group.svg);}

/* Radio */
.radio label {
	
	cursor: pointer;
	font-weight: 500;
	position: relative;
	overflow: hidden;
	margin-bottom: 0.375em;
	
	input[type="radio"] {
		position: absolute;
		left: -9999px;
		&:checked + span {
			background-color: #e0e43b;
			&:before {
				box-shadow: inset 0 0 0 0.4375em #d7704e;
			}
		}
	}
	span {
		display: flex;
		align-items: center;
		padding: 0.175em 0.45em 0.175em 0.175em;
		border-radius: 99em; 
		transition: 0.25s ease;
		&:hover {
			background-color: mix(#fff, #000, 84%);
		}
		&:before {
			display: flex;
			flex-shrink: 0;
			content: "";
			background-color: #fff;
			width: 1.5em;
			height: 1.5em;
			border-radius: 50%;
			margin-right: 0.375em;
			transition: 0.25s ease;
			box-shadow: inset 0 0 0 0.125em #dbdf30;
		}
	}
}

#loadingScreen {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #312e2f;
    
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#loadingIcon {
    width: 120px;
    height: 120px;
    animation: scaleAnimation 1s infinite alternate;
}

.logo-spacer {
    margin-bottom:20vh
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

@media screen and (min-width: 1200px) {
    
    .logo-spacer {
        margin-bottom:12vh
    }
    
  }