@charset "utf-8";
/*----------intial declartaion of css----------*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
textarea { overflow: auto; vertical-align: top }
table { border-collapse: collapse; border-spacing: 0 }
button, html input[type="button"], input[type="reset"], input[type="submit"], textarea { -webkit-appearance: none; border-radius: 0 }
/* remember to define focus styles! */
:focus { outline: 0; }
a:hover{text-decoration: none;}
img { border: 0 none; max-width: 100%; }
a { outline: none; cursor: pointer; }
:focus{outline: none;}
iframe {display: block;}

/********************************* MAIN CSS START ******************************/
@font-face {
    font-family: 'Rubik-Light';
    src: url('../fonts/Rubik-Light.ttf');
}
@font-face {
    font-family: 'Rubik-Medium';
    src: url('../fonts/Rubik-Medium.ttf');
}
@font-face {
    font-family: 'Rubik-Regular';
    src: url('../fonts/Rubik-Regular.ttf');
}

body{width: 100%;float: left;margin: 0;padding: 0;font-size: 16px;line-height:28px;color: #333333;font-family: 'Rubik-Regular';}
section{
	clear:both;
}
b{
	font-family: 'Rubik-Medium';
	font-weight: normal;
	color:#111;
}
/*************** COMMON TAG **************/
h1{font-size: 48px;font-family: 'Rubik-Medium';}
h2{font-size: 40px;font-family: 'Rubik-Light';}
h3{font-size: 30px;font-family: 'Rubik-Medium';color: #222222;}
h4{font-size: 30px;}
h5{font-size: 25px;}
h6{font-size: 20px;font-family: 'Rubik-Medium';}
.padding{padding: 60px 0px;}
.bg-color{background-color: #f8f8f8;}
.form-group {
    margin-bottom: 1.5rem;
}
.rng-logo{
    max-width:100px;
}
.w-box{
    background-color:#fff;
    padding:50px;
    -webkit-box-shadow: 0px 2px 30px 0px rgb(54 54 54 / 17%);
    -moz-box-shadow: 0px 2px 30px 0px rgba(54, 54, 54, 0.17);
    box-shadow: 0px 2px 30px 0px rgb(54 54 54 / 17%);
}
.max-600{
    max-width:600px;
}
input.form-control{
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    border-radius:10px;
    border-color: #B8B8B8;
    height: calc(3.3rem + 2px);
    line-height: 1.25;
}
.orange-btn {
    background-color: #f89f32;
    color: #fff;
    padding:10px 38px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-family: 'Rubik-Medium';
    display: inline-block;
    min-width: 160px;
}
.orange-btn:hover {
    background-color: transparent;
    color: #f89f32;
    border: 1px solid #f89f32;
}
.forgot-pass {

    text-align: right;
    display: flex;
    justify-content: end;
    margin-top:12px ;
}
.btn-link{
    color:#f89f32;
    font-size:14px;
}
.detail-head{
    display: flex;
    justify-content: space-between;
}
.rng-details label{
    color:#666;
    font-size:15px;
    margin-bottom: 2px;
}
.rng-details h5{
   font-size:18px;
   line-height: 1.8rem;
}
.table1 tr td:last-child, .table1 tr th:last-child{
    width:200px;
    text-align: center;
}
.table1 .orange-btn{
    padding: 8px 38px;
    min-width: auto;
}
.rng-details tr th{
    background-color:#f3f3f3;;
}
.table-bordered thead td, .table-bordered thead th {
    border-bottom-width: 1px;
}
.table td, .table th {
    padding: 0.75rem 1.5rem;
    vertical-align: middle;
}
.detail-head{
    background-color: #fff;
    padding: 25px;
    align-items: center;
    margin-bottom:40px;
    border: 1px solid #ddd;
}
.date-rang{
    display: flex;
    align-items: center;
}
.date-rang .to{
    padding:15px;
}
.d-list{
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
    padding:0;
}
.d-list li{
    flex: 0 0 25%;
  max-width: 25%;
}
.filter .btn{
    width: 60px;
    min-width: auto;
    padding: 14px 15px;
    margin-left: 25px;
}

@media (max-width:991px) { 
    .d-list{
        flex-wrap: wrap;
      }
      .d-list li{
        flex: 0 0 50%;
        max-width:50%;
      }
}
@media (max-width:767px) { 
    .detail-head
    {
      padding:15px;
      margin-bottom:20px;
      flex-direction: column;
    }
    .w-box
        {
        padding: 20px;
     }
    .detail-head h3
        {
        font-size: 22px;
        margin: 18px 0;
        }
    .table1 tr td:last-child, .table1 tr th:last-child
        {
          width: auto;
        }    
        .d-list{
          display: flex;
          flex-wrap: wrap;
        }
        .d-list li{
            flex: 0 0 50%;
          max-width:50%;
   }
   .date-rang
   {
     flex-direction: column;
   }
   .date-rang .to
    {
    padding: 5px;
    }
    .filter .btn
        {
        width: 100%;
        min-width: auto;
        margin-left: 0;
        margin-top: 20px;
        }
        .padding
        {
          padding: 40px 0px;
        }
}