@import url('./font.css');

[ng-cloak], .ng-cloak {
    display: none !important;
}

img.lazy-img-class {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

    img.lazy-img-class.lazy-img-loaded {
        opacity: 1;
    }

body {
    direction: rtl;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f3f5fb;
    width: 100%;
    /*height: 100vh;*/
    /*font-family: "rokh";*/
    font-family: IRANSans;
    padding-top: 60px;
    padding-bottom: 110px;
    padding-left: 4%;
    padding-right: 4%;
    max-width: 768px;
    margin: auto;
}

* {
    /*font-family: "rokh";*/
    font-family: IRANSans;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


[ng-cloak], .ng-cloak {
    display: none !important;
}

#scrollTopBtn {
    position: fixed;
    bottom: 80px;
    right: calc(50% - 27px);
    z-index: 99;
    background-color: #f5bc40;
    color: white;
    border: none;
    padding: 2px 12px 2px 12px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s;
}

    #scrollTopBtn.show {
        display: block;
    }

/******** input with floating lable **************/
.form-field {
    position: relative;
    /*font-family: sans-serif;*/
    font-family: IRANSans;
    margin: 5px;
    width: 100%;
}

.form-field__input {
    width: 100%;
    padding: 12px 8px 12px 8px;
    font-size: 16px;
    border: 1px solid #aaa;
    border-radius: 4px;
    outline: none;
    text-align:center;
}

.form-field__label {
    position: absolute;
    top: 50%;
    right:10px;
    transform: translateY(-50%);
    background: white;
    padding: 0 4px;
    color: #888;
    font-size: 1rem;
    transition: all 0.2s ease;
    pointer-events: none;
}

.form-field__input:focus + .form-field__label,
.form-field__input:not(:placeholder-shown) + .form-field__label {
    top: -12px;
    right: 8px;
    font-size:1rem;
    color: #333;
}