@import url('http://fonts.cdnfonts.com/css/segoe-ui-4');

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
  font-family: "Segoe UI";
  font-weight: 200;
  src: local("Segoe UI Light");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 300;
  src: local("Segoe UI Semilight");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 400;
  src: local("Segoe UI");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 600;
  src: local("Segoe UI Semibold");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 700;
  src: local("Segoe UI Bold");
}
@font-face {
  font-family: "Segoe UI";
  font-style: italic;
  font-weight: 400;
  src: local("Segoe UI Italic");
}
@font-face {
  font-family: "Segoe UI";
  font-style: italic;
  font-weight: 600;
  src: local("Segoe UI Semibold Italic");
}
@font-face {
  font-family: "Segoe UI";
  font-style: italic;
  font-weight: 700;
  src: local("Segoe UI Bold Italic");
}
                
body {
  font-family: 'Segoe UI', sans-serif !important;
  /* font-family: 'Segoe UI'; */
  font-family: Segoe UI Semibold;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: #8D8D8D;
  margin: 0;
  background: #F9F6F6 0% 0% no-repeat padding-box;

}

.main-section {
  display: grid;
  grid-template-columns: 1fr 400px;

}

.options {
  background: #E9E9E9 0% 0% no-repeat padding-box;
  opacity: 1;
  padding: 30px;
  display: grid;
  max-height: 469px;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 5px 40px;
  background-color: #fff;
}
.details {
  background: #F9F6F6 0% 0% no-repeat padding-box;
}

.logo {
  width: 220px;
  height: 100%;
}

.year35-logo {
  width: 80px;
  height: 80px;
}

.search-wrap {
  height: 50px;
  border-radius: 10px;
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;

}

.search-text {
  color: #0A8F8B;
  font-weight: 700;
  align-items: center;
  display: flex;
  justify-content: center;
  font-family: Segoe UI Bold;
}

.search-field {
  height: 33px;
  width: 200px;
  border-radius: 21px;
  padding-left: 5px;
  position: absolute;
  border: 1px solid #707070;
  font-size: 14px;
}

.search-field-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
}

.search-button {
  height: 33px;
  width: 89px;
  background-color: #07877B;
  border-radius: 21px;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 115px;
  position: relative;
}

.callback-button {
  height: 33px;
  width: 89px;
  background-color: #07877B;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.table-wrap {
  padding: 40px;
}

.table-1 {
  margin-top: 40px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  font-size: 15px;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* padding: 5px; */
}

.hr-right {
  color: #707070;
  border: 1px solid #707070;
}

.main-text {
  font-family: Segoe UI Bold  !important;
}

.box-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* set column sizes here */
  grid-gap: 10px 20px;
  grid-auto-flow: row;
  /* height: 50px; */
}

.box {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.box a { 
  color: inherit; 
  cursor: pointer;
}

.icon-wrap {
  background-color: #07877B;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrap-white {
  background-color: #fff;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-wrap {
  background-color: #fff;
  width: 70%;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 10px;
  font-size: 14px;
}

.text-wrap a { color: inherit; }

.text-wrap-green {
  background-color: #07877B;
  width: 70%;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 10px;
  font-size: 14px;
  color: #fff;
}

.icon-wrap-white {
  background-color: #fff;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-style {
  width: 30px;
  height: 30px;
}

.contactus-wrapper {
  /* margin-top: 50px;
  margin-bottom: -100px; */
}

.contact-us {
  display: flex;
  justify-content: space-between;
}

hr.hr-left {
  display: block;
  height: 2px;
  border: 0;
  width: 100%;
  border-top: 1.5px solid #707070;
  margin: 3px 0;
  padding: 0;
}

.arrow-icon {
  width: 18px;
  height: 18px;
}

.option-text {
  font-family: Segoe UI Semibold Italic;
  font-style: italic;
  color: #707070;
  font-size: 14px;
}

.trade-table-wrap {
  padding: 40px;
}

.div-table {
  display: table;         
  width: 100%;         
  background-color: #fff;
  border-radius: 10px;
  /* padding: 20px; */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  font-size: 15px;
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 150px;         
  /* background-color: #ccc;   */
}

hr.hr-main {
  display: block;
  height: 2px;
  border: 0;
  width: 100%;
  border-bottom: 2px solid #707070;
  margin: 3px 0;
  padding: 0;
}

hr.hr-sub {
  display: block;
  height: 2px;
  border: 0;
  width: 100%;
  border-bottom: 1px solid #707070;
  margin: 3px 0;
  padding: 0;
}

hr {
  margin-top: 6px;
  margin-bottom: 6px;
}