@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Gabriela&display=swap");
body,
p,
a {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  font-family: "Lato", sans-serif;
  color: #727272;
}

button:focus, button:active {
  outline: none;
}

.btn {
  border: none;
}

.btn,
.form-control {
  outline: none;
  box-shadow: none;
  border-radius: 0;
  border: 1px solid #dedede;
  font-family: "Roboto", sans-serif;
  cursor: pointer;
  transition: 0.4s all;
}
.btn:focus, .btn:hover,
.form-control:focus,
.form-control:hover {
  box-shadow: none;
  outline: none;
  color: inherit;
}
.btn-small,
.form-control-small {
  font-size: 12px;
  padding: 6px 14px;
}
.btn-view-all, .btn-custom,
.form-control-view-all,
.form-control-custom {
  font-size: 14px;
  text-transform: uppercase;
  padding: 8px 26px;
}
.btn.btn-custom-large, .btn.btn-custom-small,
.form-control.btn-custom-large,
.form-control.btn-custom-small {
  padding: 12px 32px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  border: none;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#297ff8+0,52b6f9+100 */
  background: rgb(41, 127, 248); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgb(41, 127, 248) 0%, rgb(82, 182, 249) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgb(41, 127, 248) 0%, rgb(82, 182, 249) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgb(41, 127, 248) 0%, rgb(82, 182, 249) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: gradient(startColorstr="#297ff8", endColorstr="#52b6f9", GradientType=1); /* IE6-9 fallback on horizontal gradient */
  letter-spacing: 0.03em;
  transition: 0.3s all;
}
.btn.btn-custom-large:hover, .btn.btn-custom-small:hover,
.form-control.btn-custom-large:hover,
.form-control.btn-custom-small:hover {
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#52b6f9+0,297ff8+100 */
  background: rgb(82, 182, 249); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgb(82, 182, 249) 0%, rgb(41, 127, 248) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgb(82, 182, 249) 0%, rgb(41, 127, 248) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgb(82, 182, 249) 0%, rgb(41, 127, 248) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: gradient(startColorstr="#52b6f9", endColorstr="#297ff8", GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
.btn.btn-custom-small,
.form-control.btn-custom-small {
  padding: 10px 24px;
  font-size: 12px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.btn.btn-custom-small:hover,
.form-control.btn-custom-small:hover {
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
.btn.btn-custom-small.ghost,
.form-control.btn-custom-small.ghost {
  background-color: transparent;
  border-color: #297ff8;
  color: #297ff8;
}
.btn.btn-custom-small.ghost:hover,
.form-control.btn-custom-small.ghost:hover {
  background-color: #297ff8;
  color: #fff;
}
.btn.btn-primary,
.form-control.btn-primary {
  background-color: #297ff8;
  color: #fff;
  border-color: #297ff8;
}
.btn.btn-primary:hover,
.form-control.btn-primary:hover {
  background-color: transparent;
  border-color: #297ff8;
  color: #000;
}
.btn.btn-secondary,
.form-control.btn-secondary {
  background-color: #24b969;
  color: #fff;
  border-color: #24b969;
}
.btn.btn-secondary:hover,
.form-control.btn-secondary:hover {
  background-color: transparent;
  border-color: #24b969;
  color: #000;
}

@media screen and (max-width: 991px) {
  .btn-small,
  .form-control-small {
    font-size: 11px;
  }
  .btn-view-all, .btn-custom,
  .form-control-view-all,
  .form-control-custom {
    font-size: 12px;
  }
  .btn.btn-custom-large, .btn.btn-custom-small,
  .form-control.btn-custom-large,
  .form-control.btn-custom-small {
    font-size: 12px;
  }
}
@media screen and (max-width: 767px) {
  .btn.btn-custom-large, .btn.btn-custom-small,
  .form-control.btn-custom-large,
  .form-control.btn-custom-small {
    padding: 8px 20px;
    font-size: 13px;
  }
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  font-size: 14px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

p {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
  transition: 0.4s all;
}

p {
  line-height: 1.7;
}

a {
  color: #000;
  text-decoration: none;
  display: block;
  overflow: hidden;
  transition: 0.4s all;
}
a:hover, a:focus, a:active {
  text-decoration: none;
  font-style: normal;
  cursor: pointer;
  outline: none;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.no-border-right {
  border-right: none !important;
}

.no-border-left {
  border-left: none !important;
}

.no-border-top {
  border-top: none !important;
}

.no-border-bottom {
  border-bottom: none !important;
}

h2, h3, h4, h5, h6, .link {
  font-weight: 400;
  line-height: 1.5;
}
h2.bold, h3.bold, h4.bold, h5.bold, h6.bold, .link.bold {
  font-weight: 600;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 15px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 13px;
}

h6 {
  font-size: 12px;
}

.link {
  cursor: pointer;
  transition: 0.4 all;
}

.action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.action .link {
  margin-left: 5px;
  transform: translateY(0);
  font-size: 13px;
  background-color: #24b969;
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  font-family: "Open Sans", sans-serif;
}
.action .link i {
  font-size: 11px;
  color: #fff;
  height: 22px;
  width: 22px;
  line-height: 22px;
  text-align: center;
  background-color: #67b915;
}
.action .link:nth-child(2) i {
  background-color: #297ff8;
}
.action .link:last-child i {
  background-color: #e71616;
}
.action .link:hover {
  transform: translateY(-3px);
}

.active, .suspend {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  color: #727272;
}
.active::before, .suspend::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 8px;
  width: 8px;
  border-radius: 100%;
}
.active.active::before, .suspend.active::before {
  background-color: #67b915;
}
.active.suspend::before, .suspend.suspend::before {
  background-color: #e71616;
}

.color {
  color: #297ff8;
}

.red {
  color: #e71616;
}

.yellow {
  color: #e9ae0c;
}

.green {
  color: #67b915;
}

.orange {
  color: #eb7303;
}

.purple {
  color: #c400ff;
}

.check {
  display: grid;
  grid-template-rows: repeat(3, min-content);
  grid-auto-flow: column;
}
.check li {
  padding-left: 15px;
  font-size: 13px;
  color: #727272;
  position: relative;
}
.check li::before {
  content: "\f00c";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: FontAwesome;
  font-size: 11px;
  color: #67b915;
}

.page {
  padding: 30px;
  margin: 30px;
  box-shadow: 0 0 9px 1px #dedede;
  min-height: calc(100vh - 182px);
}
.page h1 {
  font-size: 32px;
  font-weight: 600;
  color: #297ff8;
  border-bottom: 1px solid #dedede;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.page .list li {
  position: relative;
  margin: 8px 0;
}
.page .list li a {
  font-size: 15px;
  color: #333333;
  padding: 6px 0;
  display: inline;
}
.page .list li span {
  margin-left: 10px;
  text-transform: capitalize;
  font-size: 11px;
  padding: 2px 2px 3px 0;
  background-color: #24b969;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.page .list li span:hover i {
  transform: rotateY(180deg);
}
.page .list li i {
  font-size: 10px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  transform: rotateY(0);
  transition: 0.4s all;
}
.page .list li:hover a {
  color: #24b969;
}

.highlight-expiry {
  border: 2px solid #f00;
  background-color: #fff3f3;
}

@media screen and (max-width: 1200px) {
  h2 {
    font-size: 14px;
  }
  h3 {
    font-size: 14px;
  }
  h4 {
    font-size: 13px;
  }
  h5 {
    font-size: 12px;
  }
  h6 {
    font-size: 11px;
  }
}
.header {
  padding: 0 30px;
  margin-top: 15px;
}
.header .wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.header .brand, .header .filter, .header .navigation {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.header .brand img, .header .filter img, .header .navigation img {
  max-width: 240px;
}
.header .brand.filter, .header .filter.filter, .header .navigation.filter {
  justify-content: flex-start;
}
.header .brand.filter h5, .header .filter.filter h5, .header .navigation.filter h5 {
  margin-right: 10px;
}
.header .brand.filter h5 i, .header .filter.filter h5 i, .header .navigation.filter h5 i {
  font-size: 11px;
  margin-right: 5px;
}
.header .brand.filter select, .header .filter.filter select, .header .navigation.filter select {
  padding: 5px 12px;
  border-radius: 0;
  cursor: pointer;
}
.header .brand.filter select:focus, .header .brand.filter select:hover, .header .filter.filter select:focus, .header .filter.filter select:hover, .header .navigation.filter select:focus, .header .navigation.filter select:hover {
  outline: none;
}
.header .navigation li a {
  font-size: 13px;
  color: #727272;
  text-transform: capitalize;
  margin: 0 8px;
}
.header .navigation li a:hover {
  color: #297ff8;
}

@media screen and (max-width: 992px) {
  .header .brand img, .header .filter img, .header .navigation img {
    max-width: 160px;
  }
}
.content {
  min-height: calc(100vh - 137px);
  padding: 0 30px 30px;
}
.content .contentWrapper .block {
  display: flex;
  flex-direction: row;
  padding: 20px 0;
  margin: 15px 0;
  box-shadow: 0 0 9px 1px #dedede;
}
.content .contentWrapper .block .item {
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  color: #727272;
  flex: 0 0 14%;
}
.content .contentWrapper .block .item.title {
  color: #64647c;
  font-weight: 600;
}
.content .contentWrapper .block .item.sn {
  flex: 0 0 60px;
  text-align: center;
}
.content .contentWrapper .block .item.other {
  flex: 0 0 20%;
}
.content .contentWrapper .block .item.high {
  flex: 0 0 22%;
}
.content .contentWrapper .block .item.main {
  flex: 0 0 calc(44% - 180px);
}
.content .contentWrapper .block .item.action {
  text-align: right;
  flex: 0 0 100px;
}
.content .contentWrapper .block.title {
  background-color: #297ff8;
  padding-bottom: 15px;
  margin-bottom: 10px;
  color: #fff;
}
.content .contentWrapper .block.title .title {
  color: #fff;
}
.content.callforWebsite .indicator ul {
  justify-content: flex-end;
}
.content.callforWebsite .indicator ul li {
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 5px;
  margin-left: 20px;
}
.content.callforWebsite .indicator ul li span {
  height: 16px;
  width: 16px;
  border: 1px solid #fff;
  margin-right: 6px;
}
.content.callforWebsite .indicator ul li span.priority {
  background-color: rgba(3, 126, 226, 0.3);
}
.content.callforWebsite .indicator ul li span.callback {
  background-color: rgba(255, 108, 3, 0.56);
}
.content.callforWebsite .indicator ul li span.cancelled {
  background-color: rgba(255, 0, 0, 0.41);
}
.content.callforWebsite .contentWrapper .block {
  padding: 10px 0;
  margin: 10px 0;
}
.content.callforWebsite .contentWrapper .block .item {
  color: #353535;
}
.content.callforWebsite .contentWrapper .block .item.title {
  color: #fff;
}

@media screen and (max-width: 1200px) {
  .content .contentWrapper {
    min-width: 1000px;
  }
}
.page.detail {
  box-shadow: none;
  margin: 10px;
  padding-top: 20px;
}
.page.detail .pageTitle {
  background-color: #297ff8;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;
}
.page.detail .pageTitle h1 {
  color: #fff;
  padding: 20px;
  font-size: 24px;
  border-bottom: none;
  margin-bottom: 0;
}
.page.detail .pageTitle .button {
  padding: 20px;
  font-size: 14px;
  color: #fff;
}
.page.detail .pageTitle .button em {
  font-style: normal;
}
.page.detail .pageTitle .button i {
  font-size: 12px;
  margin-right: 5px;
}
.page.detail .pageTitle .button span {
  font-size: 14px;
  display: none;
}
.page.domainLisingPage ul li a {
  font-size: 17px;
  padding: 15px 0;
  color: #727272;
}

.detailPage {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.detailPage .block {
  flex: 0 0 calc(50% - 15px);
}
.detailPage .block:nth-child(even) {
  margin-left: 15px;
}
.detailPage .block:nth-child(odd) {
  margin-right: 15px;
}
.detailPage .block .blockTitle {
  font-size: 18px;
  font-weight: 600;
  color: #24b969;
  margin-bottom: 15px;
}
.detailPage .block .main {
  padding: 0 20px 20px;
  box-shadow: 0 0 9px 1px #dedede;
  margin-bottom: 30px;
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-auto-flow: column;
}
.detailPage .block .main.check {
  grid-template-rows: repeat(3, min-content);
}
.detailPage .block .main.check li::before {
  top: calc(50% + 10px);
}
.detailPage .block .main.access {
  grid-template-rows: repeat(1, min-content);
}
.detailPage .block li {
  padding-top: 20px;
}
.detailPage .block li .diff {
  padding-bottom: 8px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 10px;
  color: #297ff8;
  display: inline-block;
}
.detailPage .block li .answer {
  font-size: 16px;
  color: #333333;
}
.detailPage .block li .answer span {
  display: inline-block;
  font-size: 13px;
  width: 85px;
}
.detailPage .block li .answer em {
  font-style: normal;
  font-size: 14px;
}
.detailPage .block li .link {
  color: #297ff8;
}
.detailPage .block.mainAccess {
  flex: 0 0 100%;
}
.detailPage .block.mainAccess .access {
  display: none;
  flex-direction: row;
}
.detailPage .block.mainAccess .access li {
  margin-right: 45px;
}
.detailPage .block.moreDetail {
  flex: 0 0 100%;
}
.detailPage .block.moreDetail .main {
  grid-template-rows: repeat(2, min-content);
}
.detailPage .block.moreDetail li .answer span {
  display: inline-block;
}

@media screen and (max-width: 1376px) {
  .detailPage .block li .answer span {
    display: block;
  }
  .detailPage .block li .answer + .answer span {
    margin-top: 10px;
  }
}
@media screen and (max-width: 992px) {
  .detailPage .block {
    flex: 0 0 100%;
  }
  .detailPage .block:nth-child(even) {
    margin-left: 0;
  }
  .detailPage .block:nth-child(odd) {
    margin-right: 0;
  }
  .detailPage .block .blockTitle {
    font-size: 16px;
  }
  .detailPage .block .main {
    grid-template-rows: repeat(1, min-content);
    grid-auto-flow: row;
  }
  .detailPage .block .main.check {
    grid-template-rows: repeat(3, min-content);
  }
  .detailPage .block .main.access {
    grid-template-rows: repeat(1, min-content);
  }
}
@media screen and (max-width: 768px) {
  .page.detail .pageTitle h1 {
    font-size: 14px;
    padding: 12px;
  }
  .page.detail .pageTitle .button {
    padding: 12px;
    font-size: 12px;
  }
  .page.detail .pageTitle .button > em, .page.detail .pageTitle .button > i {
    display: none;
  }
  .page.detail .pageTitle .button span {
    display: block;
  }
  .detailPage .block .blockTitle {
    font-size: 16px;
  }
  .detailPage .block .main {
    margin-bottom: 20px;
  }
  .detailPage .block li {
    padding-top: 12px;
  }
  .detailPage .block li .answer {
    font-size: 14px;
  }
  .detailPage .block li .answer em {
    display: inline-block;
  }
  .detailPage .block li .answer span {
    display: inline-block;
  }
  .detailPage .block.mainAccess .access {
    flex-direction: column;
  }
}
.footer-bottom {
  background-color: #428ef9;
  padding: 8px 0;
}
.footer-bottom .wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.footer-bottom .wrapper .copyright, .footer-bottom .wrapper a, .footer-bottom .wrapper .by {
  color: #fff;
  font-size: 14px;
}
.footer-bottom .wrapper .copyright {
  margin-right: 5px;
}
.footer-bottom .wrapper .develop .by, .footer-bottom .wrapper .develop a {
  display: inline;
}
.footer-bottom .wrapper .develop .by i, .footer-bottom .wrapper .develop a i {
  font-size: 12px;
  margin: 0 4px;
}
.footer-bottom .wrapper .develop a {
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .footer-bottom .wrapper {
    flex-direction: column;
  }
  .footer-bottom .wrapper .copyright, .footer-bottom .wrapper a, .footer-bottom .wrapper .by {
    font-size: 13px;
  }
  .footer-bottom .wrapper .copyright {
    margin-right: 0;
  }
}
.loginPage {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.loginPage .loginImage {
  flex: 0 0 50%;
  height: 100vh;
  background: url(../images/login.jpg) no-repeat 100%/cover;
}
.loginPage .loginImage img {
  height: 100vh;
  max-width: initial;
  display: none;
}
.loginPage .loginForm {
  border-radius: 7px;
  flex: 0 0 50%;
}
.loginPage .loginForm .error {
  color: #e71616;
  width: 100%;
  text-align: center;
  padding: 15px;
  margin-top: -30px;
}
.loginPage .loginForm form {
  width: 400px;
}
.loginPage .loginForm .logo {
  text-align: center;
}
.loginPage .loginForm .logo img {
  max-height: 70px;
}
.loginPage .loginForm h2 {
  color: #297ff8;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 15px 15px 25px 0;
}
.loginPage .loginForm .formGroup {
  position: relative;
  margin-bottom: 15px;
}
.loginPage .loginForm .formGroup label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.loginPage .loginForm .formGroup label.custom-sel {
  padding-left: 25px;
}
.loginPage .loginForm .formGroup .formInput {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #dedede;
  padding-left: 0;
  height: 30px;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.loginPage .loginForm .formGroup .formInput::-webkit-input-placeholder {
  color: #afafaf;
}
.loginPage .loginForm .formGroup .formInput:-moz-placeholder {
  color: #afafaf;
}
.loginPage .loginForm .formGroup .formInput::-moz-placeholder {
  color: #afafaf;
}
.loginPage .loginForm .formGroup .formInput:-ms-input-placeholder {
  color: #afafaf;
}
.loginPage .loginForm .formGroup .formInput:focus {
  outline: none;
}
.loginPage .loginForm .formGroup i {
  position: absolute;
  right: 30px;
  top: 32px;
  font-size: 14px;
  color: #626262;
}
.loginPage .loginForm .sign-in-button .formGroup {
  padding-left: 0;
  display: inline-block;
  margin-bottom: 0;
}
.loginPage .loginForm .sign-in-button .forgot {
  color: #297ff8;
  font-size: 13px;
  text-transform: capitalize;
  display: inline-block;
  float: right;
  padding-top: 2px;
  padding-right: 10px;
}
.loginPage .loginForm .sign-in-button .btn {
  display: inline-block;
  padding: 8px 0;
  line-height: 1.7;
  color: #fff;
  cursor: pointer;
  background-color: #297ff8;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
  margin-top: 15px;
  width: 100%;
  overflow: hidden;
  letter-spacing: 0.05em;
  border: none;
}
.loginPage .loginForm .sign-in-button .btn:hover {
  background-color: #0864e6;
}

@media screen and (max-width: 992px) {
  .loginPage .loginImage {
    background: none;
  }
  .loginPage .loginImage img {
    max-width: 100%;
    display: block;
    object-fit: cover;
    object-position: right;
  }
  .loginPage .loginForm {
    margin-left: -100px;
  }
}
@media screen and (max-width: 768px) {
  .loginPage .loginImage {
    display: none;
  }
  .loginPage .loginForm {
    margin-left: 0;
    flex: 0 0 100%;
    height: 100vh;
    display: flex;
    align-items: center;
  }
  .loginPage .loginForm h2 {
    font-size: 18px;
  }
  .loginPage .loginForm form {
    width: 350px;
    margin: 0 auto;
    padding: 35px 20px;
    box-shadow: 0 0 8px 6px #f8f8f8;
  }
}
@media screen and (max-width: 450px) {
  .loginPage .loginForm form {
    width: 100%;
    margin: 15px;
  }
}

/*# sourceMappingURL=style.css.map */