Warranty Result CSS

html {

	font-size: 62.5%;

}

@media screen and (max-width: 37.5em) {

  html {

	font-size: 50%;

}

}

.g-recaptcha{

}

.loader-container {

		display: flex;

		align-items: center;

		justify-content: center;

}

.loader {

		display: block;

        width: 48px;

        height: 48px;

        border-radius: 50%;

        position: relative;

        animation: rotate 1s linear infinite

      }

      .loader::before , .loader::after {

        content: "";

        box-sizing: border-box;

        position: absolute;

        inset: 0px;

        border-radius: 50%;

        border: 5px solid #FDE602;

        animation: prixClipFix 2s linear infinite ;

      }

      .loader::after{

        border-color: #155C8F;

        animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;

        inset: 6px;

      }

      @keyframes rotate {

        0%   {transform: rotate(0deg)}

        100%   {transform: rotate(360deg)}

      }

      @keyframes prixClipFix {

          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}

          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}

          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}

          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}

          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}

}

#warranty-search-form {

	display: flex;

	flex-direction: column;

	flex-wrap: wrap;

	justify-content: center;

	align-items: center;

	gap: 1rem;

}

#warranty-serial-input {

	height: 3rem;

	min-width: 35rem;

	max-width: 60rem;

	font-size: 14px;

	transition: all 0.2s;

	margin-bottom: 1.2rem;

	border-radius: 0.8rem;

}

#warranty-serial-input:focus {

	outline: none;

	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

@media screen and (max-width: 37.5em) {

  #warranty-serial-input {  

	min-width: 30rem;

	max-width: 90vw;

}

}

#warranty-submit-btn {

	color: #FFF;

	background-color: #155C8F;

	border: none;

	border-radius: 50rem;

	height: 2rem;

	width: 8rem;

	font-size: 14px;

	font-weight: bold;

	transition: all 0.2s;

	display: flex;

    align-items: center;

    justify-content: center;

}

#warranty-submit-btn:hover{

	transform: translateY(-0.2rem);

	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.warranty-table-container{

	overflow-x: auto;

	padding: 0 1rem;

}

.warranty-table{

	width: 100%;

	font-size: 14px;

}

@media screen and (max-width: 37.5em) {

  .warranty-table{

	font-size: 12px;

}

}

.warranty-table-head{

}

.warranty-table-header{

	color: #155C8F;

	font-size: inherit;

	padding: 0.2rem 0.4rem;

}

.warraty-table-row-data-header {

	padding: 0.2rem 0.4rem;

}

.warraty-table-data{

	padding: 0.2rem 0.4rem;

	font-size: inherit;

}

.warraty-table-data--status--exprired{

	color:red;

	font-weight: bold;

}

.warraty-table-data--status--under-warranty{

	color:green;

	font-weight: bold;

}

.warranty-result {

	width: 100%

	min-height: 50px;

}

/* warranty card */

.warranty-card {

	color: #212529;

	max-width: 50rem;

	border: solid 1px #f1f3f5;

	border-radius: 1.4rem;

	padding: 2rem;

	background-color: #f1f3f5;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 6rem;

	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

}

.warranty-card__general-info-container {

	display: flex;

	margin-bottom: 3rem;

	gap: 1rem;

}

@media screen and (max-width: 37.5em) {

.warranty-card__general-info-container {

	flex-direction: column

}

}

.warranty-card__image-container {

	display:flex;

	align-items: center;

	justify-content: center;

}

@media screen and (max-width: 37.5em) {

.warranty-card__image-container {

	display:flex;

	align-items: center;

	justify-content: flex-start;

}

}

.warranty-card__product-image {

	height: 10rem;

	border-radius: 1.4rem;

}

.warranty-card__general-info-content {

	display: flex;

	flex-direction: column

}

.warranty-card__general-info-content .warranty-card__product-name {

	font-size: 2rem;

	font-weight: bold;

	line-height: 1.2;

	padding: 0;

	margin-bottom: 1rem;

	color: #212529;

}

.warranty-card__general-info-content .warranty-card__product-purchased-date {

	margin-top: auto;

	font-size: 1.4rem;

	padding: 0;

	color: #212529;

}

.warranty-card__general-info-content .warranty-card__product-serial {

	font-size: 1.4rem;

	padding: 0;

	color: #212529;

}

.warranty-card__warranty-detail-container {

}

.warranty-card__warranty-detail-container .warranty-card__header {

	font-size: 1.6rem;

	font-weight: bold;

	color: #212529;

}

.warranty-card__warranty-detail-content {

	background-color: #fff;

	border: solid 1px #fff;

	border-radius: 1.4rem;

	padding: 1rem 2rem;

	margin-bottom: 1.5rem;

}

.warranty-card__warranty-detail-content .warranty-card__warranty-status {

	padding: 0.25rem 0.5rem;

	max-width: max-content;

	background-color: #fff;

	border: solid 1px #fff;

	border-radius: 0.4rem;

	font-weight: bold;

	font-size: 1.2rem;

	margin-bottom: 1rem;

}

.warranty-card__warranty-detail-content .warranty-card__warranty-status--active {

	background-color: #40c057;

	color: #fff;

}

.warranty-card__warranty-detail-content .warranty-card__warranty-status--expired {

	background-color: #fa5252;

	color: #fff;

}

.warranty-card__warranty-detail-content .warranty-card__warranty-type {

	font-size: 1.4rem;

	font-weight: bold;

	padding: 0;

	color: #212529;

}

.warranty-card__warranty-detail-content .warranty-card__warranty-expired-date {

	font-size: 1.2rem;

	padding: 0;

	color: #212529;

}

#warranty-result .warranty-card__not-found {

	color: #212529;

	max-width: 50rem;

	border: solid 1px #f1f3f5;

	border-radius: 1.4rem;

	padding: 2rem;

	background-color: #f1f3f5;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 6rem;

	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

	font-size: 1.4rem;

}