:root {
    --main-color: #1A34E0;
    --white-color: #FFFFFF;
    --secondry-color: #001489;
    --sky-color: #7E8CEA;
    --nuvy-color: #131B39;
    --light-sky-color: #55A8DD;
    --gray-color : #cfd1d2;
}

@font-face {
    font-family: 'lama'; /* Name your font family */
    src: url('font/LamaSans-Medium.otf'); /* Locate the .ttf file within your directory*/
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'lama';
}


ul {
    list-style: none !important;
}
a {
    text-decoration: none !important;
}
body {
    background-color: var(--secondry-color);
    height: 100vh;
    direction: rtl;
    font-family: 'lama';
    /* height: 1000px; */
}

header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px !important;
   color:var(--white-color);  
   margin-top: 40px !important;
}
header , main{
    width: 566px;
    margin: auto;   
}

header h1 {
    font-weight: 700;
    font-family: 'lama' !important;

}
header img , footer div img {
    width : 92px;
    height: 44px;
}

header .header_link a {
    color:var(--white-color);
    font-size: 20px;
    transition: .2s;
    padding: 10px;
    display: inline-block;
    border-radius: 50%;
    outline: none;
    user-select: none;
}
header .header_link {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
header .header_link:hover a {
    background-color: var(--white-color);
    color:var(--main-color);
}

.info_div {
    margin-top: 64px;
    width: 100%;
}

.info_div .info{
width:100%;
margin-bottom: 20px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 8px;
}

.table_div table thead th {
    color: #1A34E0;
}

.table_div table tbody td {
    font-weight: 400 !important;
    color: #1A34E0;
}





.info_div .info .station, .info_div .info .duration {
    width: 100%;
}
.info_div .info  select {
    background-color: #fff;
    width: 100% !important;
    padding: 2%;
    font-size: 18px;
    color: var(--main-color);
    outline: none;
    /* border-color: #2932b9 !important; */
    border-radius: 4px;
}
.info_div .info span
{ 
    font-size:18px;
    color: var(--white-color);
    font-weight: 200;
}
.info_div .info .dice_div {
    width: 100%;
    display: flex;
    justify-content: space-between !important;
    align-items: center;
}

.clear {
    font-size: 14px;
    color: #fff;
    background-color: transparent;
    font-family: 'lama';
}

.info_div .info button 
{
  outline: none;
  background-color: transparent;  
  border: .4px solid #55A8DD;
  color:var(--white-color);
  font-size:20px;
  font-weight: 500;
  border-radius: 5px;
  padding:6px 10px !important;
}
.info_div .info button svg {
    color: #55A8DD
}

.none {
    display: none !important;
}


.info_div .result-div
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}



.info:last-child {
    display: block;
}
.info_div .info h3 
{
  outline: none;
  background-color: transparent;  
  /* border: .4px solid  #2932b9; */
  color:var(--white-color);
  width:90px !important;
  height: 40px !important;
  font-size:16px !important;
  font-weight: 600;
  border-radius: 10px;
}

.info_div .info h3 svg {
    color: #2932b9 !important;
}
.table_div table{
    width: 100%;
    color: var(--nuvy-color);
}


.table_div table thead,
.table_div table tbody {
    border-bottom: 50px solid !important;

}
.table_div table thead th,
.table_div table tbody td
{
  border:.3px solid var(--main-color);
  background-color: var(--white-color);
  height: 50px;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}




header a {
   text-decoration:none;
   color:#fff;
}

footer {
    width:80%;
    color: #fff;
    margin: auto;

}

footer div {
    width:80%;
    margin: auto;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:auto
    /* z-index: 100; */
}
footer h6 {
    font-size:20px;
}
footer a {
    color: #FFFFFF;
    text-decoration: none;
}
@media (max-width: 600px) {
    header , main {
        width:85% !important;
    }
  
    .info_div .info button {
        font-size:18px;
        font-weight: 400; 
    }

    
    .table_div table thead th,
    .table_div table tbody td {
        font-size: 12px;
        height: 40px;
    }
}

@media (min-width: 600px)
{
    header , main {
        width:85% !important;
    }
    header {
        padding-top:45px;
    }
    main {
      padding-top:10px;

    }
    header img {
        width:84px;
        height:40px;
    }
    header h2 {
        font-size: 20px;
    } 
    
}
@media (min-width: 992px) {
    main {
        display: grid;
        /* grid-template-columns: 1fr 1fr; */
        gap:65px
    }
    .table_div {
        margin-top: 64px;
    }
    .info_div .info  select {
        padding: 1%;
    }
    header ,main{
        width:80% !important;
    }
    .info_div .info button {
        /* width: 120px; */
        font-size: 18px !important;
    }
}