/* Importing Some Files */
@import "rtl.css";
@import "font-awesome.min.css";
/* Main Styles */

#main{
    display: flex;
    flex-direction: column;
    flex-grow:1;
    justify-content:center;
}
body{
    direction:rtl;
    min-height:100vh;font-family:'vazir';
    display:flex;
    flex-direction:column;
    background-color:#EBECF0;
}
#main{
    flex-grow:1;
}
#main .container-fluid form{
    max-width:500px;
}
#main .container-fluid > a:first-child{
    width:300px;
    margin: 80px auto;
}
.bt{
    transition:all 0.2s ease-in-out;
    border-radius:360px;
    box-shadow:-5px -5px 20px white,  5px 5px 20px #BABECC;
    padding:8px;
}
.bt:hover{
    box-shadow:-2px -2px 5px white, 2px 2px 5px #BABECC;
}
.bt:focus{
    box-shadow:none;
    outline:none;
}
#main .container-fluid{
    flex-grow:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
#main-container{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}
#main .input-group-middle select[name="letter"]{
    border-radius:0;
}
#main .input-group-middle{
    margin:0 -1px;

}
#main .input-group-middle .form-control{
    border-radius: 0;
    flex-grow:0;
    width:40px;
}
button:focus{
    outline:none;
}
.fa{
    vertical-align:-2px;
}
#print{
    display:none;
}
#main .input-group-middle:nth-of-type(2){
    position:relative;
}
#message{
    position:fixed;
    top:20px;
    right:20px;
}
.styled{
    color:#BABECC;
    text-shadow:1px 1px 1px white;
}
input , select{
    background-color:#EBECF0;
    box-shadow:inset 2px 2px 5px #BABECC, inset -5px -5px 10px white;
    border:none;
    transition:all 0.2s ease-in-out;
    font-size:16px;
    padding:8px 16px;
}
input[name="search_name"]{
    border-radius:0 360px 360px 0;
    direction:ltr;
}
input:focus , select:focus{
    box-shadow:inset 1px 1px 2px #BABECC, inset -1px -1px 2px white;
}
#main .input-group-middle .input-group-text , select[name="letter"]{
    height:100%;
}
select[name="letter"]{
    appearance:none;
}
select[name="letter"] option{
    direction:ltr;
}
#main .input-group-middle .input-group-text , #main .input-group-append .input-group-text{
    user-select:none;
}
#main .input-group-append .input-group-text{
    border-radius:360px 0 0 360px !important;
}

#sabte-kharabi,#vorod_samaneh,#paigiri-kharabi
{
    position:absolute;
    top:10px;

    background-color:#c71016;
    color:white;
    font-family:'vazir';
    border-radius: 20px;
    padding: 0.5em 0.8em;
}
#paigiri-kharabi
{
    right:10.5em;
}
#sabte-kharabi
{
    right:10px;
}
#vorod_samaneh
{
    left:10px
}
#bazsazi
{
font-family:'vazir';
background: #c71016;
color:white;
margin-right:10px
}
#paigiri_code::placeholder
{
    font-family:'vazir';
}

#buttons_main
{
    margin-bottom:40px;
}
#paigiri_button,#kharabi_button
{
    font-family: inherit;
}
#paigiri_button span,#kharabi_button span
{
    padding-left:5px;
    
}

.modal-content
{
    width:100%;
    
}
/* Footer Styles */
footer{
    background-color:#EBECF0;
    border-top:1px solid #BABECC;
}
.form-control
{
    font-family: 'vazir'!important;
}
.form-group input
{
font-family: 'vazir'!important;
text-align:center;
direction:ltr;
}
.usage
{
    font-family:'vazir';
}
input::placeholder
{
    font-family:'vazir'
}
/* Changeable Styles With Media Queries */
@media screen and (max-width:576px)
{
.styled
{
    font-size:17px;
}

}
@media screen and (min-width:768px){

}
@media screen and (min-width:992px){

}
@media screen and (min-width:1200px){

}