/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
/* 
// <uniquifier>: Use a uniquifier for the class name
// <weight>: Use a value from 100 to 900

.montserrat-<body> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */


body {
    /* padding: 0;
    margin: 0; */
    font-family: "Tajawal", sans-serif;
    height: 100vh;
    overflow: hidden;
    /* background-color: black; */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.51) 0%, rgba(0, 0, 0, 0.00) 47.92%, rgba(0, 0, 0, 0.58) 100%), linear-gradient(90deg, rgba(205, 183, 164, 0.22) 0%, rgba(0, 0, 0, 0.00) 51.04%, rgba(205, 183, 164, 0.22) 100%) ;
  
}


.none {
    display: none;
}

.dialog {
    width: 332px;
    padding: 20px;
    border: none;
    color: #EBE1D2;
}

.left_text {

    height: 8%;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;


    padding-right: 2%;
    width: 98%;


    padding-bottom: 0.75%;


    border-radius: 2px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.75turn, #EBE1D2, #EBE1D2, #EBE1D230, #EBE1D230, #EBE1D230);
    border-image-slice: 1;
    
	/* background-color: transparent;
	background-image: url("../images/pattern_banner.png");
	background-size: contain; */
}

.left_bg {
    opacity: 0.4;
    position: absolute;
    z-index: -99;
    left: 0;
    top: 0;
    width: 100%;
    height: 7rem;

    background-color: transparent;
	background-image: url("../images/pattern_banner.png");
	background-size: contain;
}

.header img {
    width: 80px;
    height: auto;
}

.left_text {
    /* padding-right: 1%; */
    /* padding-top: 0.5%; */
    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: #EBE1D2;
}

.left_text h1 {
    text-shadow: 0px 0px 50px #EBE1D2;
    font-family: "Tajawal";
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.15rem;
    line-height: normal;
}

.left_text p {
    color: #FFF;
    font-family: "Tajawal";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.08rem;
    line-height: normal;

    margin-top: -8%;
    margin-left: 25%;
}

.inputs {
    display: flex;    
    align-items: center;
    justify-content: flex-end;
}


.dialog {
    width: 480px;
    padding: 20px;
    margin-top: 1%;
    
    border-radius: 10px;

    border: none;
    color: #EBE1D2;
}


/* Header */


.title {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 5px;
    padding-right: 4%;
    margin-bottom: 20px;

    border-radius: 2px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.75turn, #EBE1D2, #EBE1D2, #EBE1D230, #EBE1D230, #EBE1D230);
    border-image-slice: 1;

}


.tit {
    padding-right: 3%;
    padding-bottom: 2%;
}


.title svg {
    width: 4rem;
    height: 4rem;
}


.title b {
    display: flex;
    justify-content: flex-end;

    font-family: "Tajawal";
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 2rem;
    letter-spacing: 0.10rem;

    color: #EBE1D2;
}

.title p {
    margin-top: -3%;
    margin-bottom: 0%;
    
    color: #FFF;
    font-family: "Tajawal", sans-serif;
    font-optical-sizing: auto;
    font-size: 14.3px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.10rem;
    text-align: center;
}

/* firstname */
#register p {
    font-family: "Tajawal", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14.3px;
    font-weight: 500;

    text-align: right;

    color: #ffffff;
    padding-right: 6%;
}


/* İnput */
input {
    margin-bottom: 15px;
    border: none;
    width: 90%;
    height:40px;
    outline: none;
    padding: 10px;
    padding-left: 0;
    color: #B6ACA1;

    text-align: right;
    flex-grow: 0;
    border-radius: 10px;



    background: linear-gradient(128deg, #0F0F0F58, #0F0F0Fe9) padding-box,
        linear-gradient(128deg, #0F0F0F00, #29272579, #2927256d) border-box;

    border: 1px solid transparent;
    padding-left: 2%;


    font-family: "Tajawal", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 15px;
    font-weight: 500;

}




input:checked {
    color: #EBE1D2;

}

input:hover {
    border: 0.0625rem solid #B6ACA1;
    box-shadow: 0rem 0rem 1.75rem #29272540;
    color: #EBE1D2;
    transition: all .25s ease;

}

input:focus {
    border: 0.1rem solid #EBE1D2;
    box-shadow: 0rem 0rem 1.75rem #B6ACA140;
    color: #ffffff;
    transition: all .25s ease;

	animation: input-focus 2s infinite;
	animation-timing-function: ease;
}

input:invalid {
    color: #a67b6e;
    transition: all .25s ease;
}


::placeholder {

    font-family: "Tajawal", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14.3px;
    font-weight: 500;
    opacity: 1;
}


::-webkit-calendar-picker-indicator {
    margin-left: .7rem;
    background-image: url('data:image/svg+xml;utf8,<svg width="29" height="29" viewBox="0 0 24 24" fill="wh" xmlns="http://www.w3.org/2000/svg"><path d="M2 12C2 8.229 2 6.343 3.172 5.172C4.343 4 6.229 4 10 4H14C17.771 4 19.657 4 20.828 5.172C22 6.343 22 8.229 22 12V14C22 17.771 22 19.657 20.828 20.828C19.657 22 17.771 22 14 22H10C6.229 22 4.343 22 3.172 20.828C2 19.657 2 17.771 2 14V12Z" stroke="white" stroke-width="1.5"/><path opacity="0.5" d="M7 4V2.5M17 4V2.5M2.5 9H21.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/><path d="M18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18C16.7348 18 16.4804 17.8946 16.2929 17.7071C16.1054 17.5196 16 17.2652 16 17C16 16.7348 16.1054 16.4804 16.2929 16.2929C16.4804 16.1054 16.7348 16 17 16C17.2652 16 17.5196 16.1054 17.7071 16.2929C17.8946 16.4804 18 16.7348 18 17ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14C16.7348 14 16.4804 13.8946 16.2929 13.7071C16.1054 13.5196 16 13.2652 16 13C16 12.7348 16.1054 12.4804 16.2929 12.2929C16.4804 12.1054 16.7348 12 17 12C17.2652 12 17.5196 12.1054 17.7071 12.2929C17.8946 12.4804 18 12.7348 18 13ZM13 17C13 17.2652 12.8946 17.5196 12.7071 17.7071C12.5196 17.8946 12.2652 18 12 18C11.7348 18 11.4804 17.8946 11.2929 17.7071C11.1054 17.5196 11 17.2652 11 17C11 16.7348 11.1054 16.4804 11.2929 16.2929C11.4804 16.1054 11.7348 16 12 16C12.2652 16 12.5196 16.1054 12.7071 16.2929C12.8946 16.4804 13 16.7348 13 17ZM13 13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13C11 12.7348 11.1054 12.4804 11.2929 12.2929C11.4804 12.1054 11.7348 12 12 12C12.2652 12 12.5196 12.1054 12.7071 12.2929C12.8946 12.4804 13 12.7348 13 13ZM8 17C8 17.2652 7.89464 17.5196 7.70711 17.7071C7.51957 17.8946 7.26522 18 7 18C6.73478 18 6.48043 17.8946 6.29289 17.7071C6.10536 17.5196 6 17.2652 6 17C6 16.7348 6.10536 16.4804 6.29289 16.2929C6.48043 16.1054 6.73478 16 7 16C7.26522 16 7.51957 16.1054 7.70711 16.2929C7.89464 16.4804 8 16.7348 8 17ZM8 13C8 13.2652 7.89464 13.5196 7.70711 13.7071C7.51957 13.8946 7.26522 14 7 14C6.73478 14 6.48043 13.8946 6.29289 13.7071C6.10536 13.5196 6 13.2652 6 13C6 12.7348 6.10536 12.4804 6.29289 12.2929C6.48043 12.1054 6.73478 12 7 12C7.26522 12 7.51957 12.1054 7.70711 12.2929C7.89464 12.4804 8 12.7348 8 13Z" fill="white"/> </svg>');
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
    width: 1.2em;
    height: 1.5rem;
    opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
    margin-left: .7rem;
    border-radius: 5px;
}

input::-webkit-inner-spin-button:hover,
input::-webkit-inner-spin-button:active{
    opacity: .8;
}


/* gender select */

.radio-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    
    /* margin-left: -12%; */
}

.radio-toolbar .male svg {
    margin-top: -10%;
}
.radio-toolbar .male label {
    cursor: pointer;
    width: 200px;
    height: 55px;
    border-radius: 8px;
    margin-right: 20%;
    margin-left: -10%;
    margin-top: -10%;
}

.radio-toolbar .female svg {
    margin-top: -10%;
}
.radio-toolbar .female label {
    cursor: pointer;
    width: 200px;
    height: 55px;
    border-radius: 8px;
    margin-right: 10%;
    margin-left: -10%;
    margin-top: -10%;
}

.radio-toolbar input[type="radio"] {
    opacity: 0;
    /* position: absolute; */
    /* width: 36%; */
}

#radiof {
    /* cursor: pointer; */
    /* position: absolute; */
    margin: 0%;
    margin-left: -11%;
    right: 8%;
    width: 220px;
    height: 0px;
}

#radiom {
    /* cursor: pointer; */
    /* position: absolute; */
    margin: 0%;
    margin-left: -20%;
    right: 23.7%;
    width: 220px;
    height: 0px;
}

.radio-toolbar label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 5%;
    padding-right: 5%;
    color: #B6ACA1;

    background: linear-gradient(128deg, #0F0F0F58, #0F0F0Fe9) padding-box,
        linear-gradient(128deg, #0F0F0F00, #29272579, #2927256d) border-box;

    border: 1px solid transparent;
    transition: all .25s ease;
    border-radius: 0.3125rem;

    font-family: "Tajawal", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    text-align: right;

}

.radio-toolbar input[type="radio"]:checked+div label {
    /* width: 36%; */
    border: 0.1rem solid #EBE1D2;
    box-shadow: 0rem 0rem 1.75rem #B6ACA140;
    transition: all .25s ease;
    color: #ffffff;

	animation: input-focus 2s infinite;
	animation-timing-function: ease;
}

input:hover {
    border: 0.0625rem solid #B6ACA1;
    box-shadow: 0rem 0rem 1.75rem #29272540;
    color: #EBE1D2;
    transition: all .25s ease;

}

.radio-toolbar input[type="radio"]:focus+div label {
    border: 0.1rem solid #EBE1D2;
    box-shadow: 0rem 0rem 1.75rem #B6ACA140;
    transition: all .25s ease;
    color: #ffffff;

	animation: input-focus 2s infinite;
	animation-timing-function: ease;
}

.radio-toolbar label:hover {
    border: 0.0625rem solid #B6ACA1;
    box-shadow: 0rem 0rem 1.75rem #29272540;
    color: #EBE1D2;
    transition: all .25s ease;

}

.radio-toolbar label:invalid {
    border: 0.0625rem solid #d14141;
    box-shadow: 0rem 0rem 1.75rem #d1414140;
    color: #d14141;
    transition: all .25s ease;


}



.radio-toolbar .buttonstyle {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

}

.radio-toolbar .buttonstyle svg {
    margin-left: -30%;
}


@keyframes input-focus {
	0% {
		/* opacity: 0.7; */
        border: 0.1rem solid #EBE1D2;
	}

	50% {
		/* opacity: 1; */
		border: 0.1rem solid #ebe1d2a2;
	}

	100% {
		/* opacity: 0.7; */	
        border: 0.1rem solid #EBE1D2;
	}
}

/* confirm and slogan */


#submit {
    display: block;

    height: 50px;
    width: 95%;

    margin-top: 35px;
    border-radius: 5px;

    cursor: pointer;

    color: white;
    background: #a3998e;
    border: 2px solid #EBE1D2;

    background-color: transparent;
	background-image: url("../images/pattern_banner.png"), linear-gradient(to left, #a3998e, #a3998e);
	background-size: contain;
    background-blend-mode: screen;

    transition: all 0.3s ease;
}

#submit p {

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #FFF;
    font-family: "Tajawal", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 10%;

    letter-spacing: 0.1em;

    cursor: pointer;

}

#submit:hover {
    cursor: pointer;
    

    background: #8E847B;

    background-color: transparent;
	background-image: url("../images/pattern_banner.png"), linear-gradient(to left, #a3998e, #a3998e);
	background-size: contain;
    background-blend-mode: screen;

    border: 2px solid #B6ACA1;
    box-shadow: 0rem 0rem 1.75rem #EBE1D240;
    transition: all .25s ease;

	animation: submit-focus 2s infinite;
	animation-timing-function: ease;
}

@keyframes submit-focus {
	0% {
		/* opacity: 0.7; */
    border: 2px solid #B6ACA1;
	}

	50% {
		/* opacity: 1; */
		border: 2px solid #EBE1D2;
	}

	100% {
		/* opacity: 0.7; */	
    border: 2px solid #B6ACA1;
	}
}

.bottom-slogan {
    height: 100%;
    width: 96%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin-top: 7%;
}


.bottom-slogan h3 {
    font-family: "Tajawal", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 11.3px;
    font-weight: 500;
    text-align: left;
    color: #b6b6b6;
    padding-left: 1%;
    padding-right: 2%;

}