@font-face {
	font-family: 'Yekan';
	src:	url('Yekan.eot'); /* IE9 Compat Modes */
	src:	url('Yekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('Yekan.woff2') format('woff2'), /* Modern Browsers */
			url('Yekan.woff') format('woff'), /* Modern Browsers */
			url('Yekan.otf') format('opentype'), /* Open Type Font */	
			url('Yekan.ttf') format('truetype'); /* Safari, Android, iOS */
	font-weight: normal;
	font-style: normal;
	text-rendering: optimizeLegibility;
	font-display: auto;
}

*{

    font-family: Yekan;
}

html, body {
  width: 100%;
  height:100%;
}

body {
    background: linear-gradient(-45deg, #031d3b, #08556d, #193945, #462001);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

a{

    text-decoration: none;

    color: skyblue;

    transition: 0.5s;

}

a:hover{

    color: #0fbe99;

}

.title{
    padding: 3% 0 1% 0;
    text-align: center;
    color: white;
    direction: rtl;
}


.x-input{

    border: none;
    
    background: none;

    border-bottom: #fff 0.5vh solid;

    font-size: 14px;

    color: #ffff;

    width: 50%;

    text-align: center;

}

.x-input:focus{

    border: none;

    background: none;

    border-bottom: #5359b6 0.5vh solid;

    outline: none;

    font-size: 14px;

    color: #ffff;

    outline-style: none;
    
    box-shadow: none;

}

.x-warranty{

    color: white;

    direction: rtl;

}

.warrantySection{

    display: none;

}

.device-selection{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.show-serial{
    text-align: center;
    padding: 5% 0 5% 0;
}

.show-serial p{
    color: white;
    font-size: 30px;
    display: none;
}

.cp-btn{
    display: none;
}

.submit-dialog{
    border-color: white;
    border-radius: 10px;
}

.dialog-exp{
    padding: 0 2% 0 2%;
    text-align: center;
}

.dialog-btns{
    text-align: center;
}

.loading {
    display: none;
    width: 22px;
    height: 22px;
}

.submit-btn{
    width: 79px;
    height: 39px;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}