* {
  box-sizing: border-box;
}

/*@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
 // font-display: swap;
  src: url(noto700.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}


@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
//  font-display: swap;
  src: url(noto400) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}*/

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Bold'), local('Noto-Bold'),url(noto700.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}


@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto'), local('Noto-Regular'),url(noto400.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}


  @font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Noto'), local('Noto-Regular'),url('NotoSans-SemiBold.ttf') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/*@font-face {
	font-family: 'Noto';
	src: url('noto400.woff2');
  }*/

html { 

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	width: 100%;
    height: 100%;
	font-family:'Noto-Regular', sans-serif;
}

.card{
	height: 100%;
	display: inline-flex;
	width: 35%;
}

#cardRow, #cardRow2, #cardRow3{
	display: flex;
    justify-content: center;
}


/* Style the counter cards */
.cardColumn {
background-color: white;
  width: 85%;
  display: flex; 
	border: 1px solid #003963;
border-radius: 13px;
opacity: 1;
  padding: 6px;
	outline: 0px !important;
font-size:19px;
//font-family: 'Roboto-Regular', sans-serif;
    font-family: 'Noto', sans-serif !important;
    font-weight:400;

}

#title {
    margin-bottom: 7.7vh;
    font-family: 'Noto', sans-serif !important;
    font-weight:700;
    color: #003963;
	    text-align: center;
	position: relative;
	outline: 0px !important;
	text-align: left;
	margin-top: 20.5vh;
	margin-left: 8%;
	font-size: 28px;
}

#copyright-text {
    position: relative;
    margin-top: 4%;
    padding-left: 4%;
    text-align: left;
    z-index: 1;
    font-size: 14px;
    color: #707070;
	width:100%;
	bottom: 0px;
}

#cardRow2, #cardRow3{    margin-top: 1.24%;}

#backgroundDiv{
position:absolute;
width: 100%;
background-image: url(/login/img/Modified/background_desktop.svg);
height: 100%;
background-repeat: no-repeat;
}
body{
	margin : 0;
	background-color: #eaeaea;

}

#subHead {
font-size: 19px;
margin-right:3%;
    font-family: 'Noto', sans-serif !important;
    font-weight:600;

}
.rText{
    margin-left: 12%;
color: #707070;
width: 34%;
}
.number{
margin-left: 10%;
color: #3A3A3A !important;
}

.numText {
margin-left:3%;
color: #245989;
}

.arr {
margin-left:10%;
}

a{
color: #0772D8 !important;
}

input{
    border: none;
    background-color: transparent;
    outline: none;
    width: 80%;
}


/* Responsive columns */
@media (min-width: 280px) and (max-width: 4000px)
#backgroundDiv {
    position: absolute;
    background-image: url(/login/img/Modified/background_600.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    margin-left:5%;
}

.arr{
    display: none;
}
#backgroundDiv{
position:absolute;
background-image: url(/login/img/Modified/background_600.svg);
background-repeat: no-repeat;
background-size: cover;
}

.number {
    margin-left: 2%;
    color: #245989;
}

#title {
    margin-top: 20vh;
    margin-bottom: 5vh;
    font-size: 21px;
}

#subHead {
    margin-top: 0.8%;
    font-size: 15px;
}

.card {
    height: 100%;
    display: inline-flex;
    width: 98%;
}

.rText {
    margin-top: 5%;
    margin-left: 9%;
    color: #818181;
    width: 85%;
}

.cardColumn{
	width:90%;
	font-size:16px;
//	padding: 16px;
}



#cardRow, #cardRow2, #cardRow3 {
display: block;
    justify-content: center;}
}

}

/*@media only screen and (max-width: 599px){
	.cardColumn{
		width: 90%;
	}
	.column{    margin-left: 5%;}
	#title {
    margin-top: 20vh;
    margin-bottom: 2vh;
	font-size: 24px;
}
	#copyright-text {
    bottom: auto;
    padding-left: 4%;
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
}
#cardRow, #cardRow2, #cardRow3 {
display: block;
    justify-content: center;}
}*/
/* Extra small devices (phones, 600px and down) */
/*@media only screen and (min-width: 600px) and (max-width: 664px){
   #title {
    margin-top: 30vh;
    margin-bottom: 2vh;
    font-size: 30px;
}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (min-width: 665px) and (max-width: 767px) {
	#title {
    margin-top: 30vh;
    margin-bottom: 2vh;
    font-size: 30px;
}
.cardColumn{height: auto;}
}*/

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 601px) and (max-width: 991px) {
  .cardColumn{    padding: 12px;
		    height: auto;
	}
	   
#backgroundDiv{
position:absolute;
width: 100%;
background-image: url(/login/img/Modified/backgroud_768.svg);
height: 100%;
background-repeat: no-repeat;
}


}*/ 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.cardColumn{    height: auto;}  
	#title {margin-top: 31vh; font-size: 35px;}
#backgroundDiv {
    position: absolute;
    width: 100%;
    background-image: url(/login/img/Modified/background_768.svg);
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}


}

@media only screen and (min-width: 1200px) {
//	.cardColumn{padding: 24px;}
#backgroundDiv{
position:absolute;
width: 100%;
background-image: url(/login/img/Modified/background_desktop.svg);
height: 100%;
background-repeat: no-repeat;
}


}

#card1{
        padding-top:24px;
        padding-bottom:24px;
}

#card2{
        padding-top:24px;
        padding-bottom:24px;	
}

#card3{
	padding-top:40px;
	padding-bottom:40px;
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1300px) {
 html { 
	width: 100%;
    height: 100%;	
	}


#backgroundDiv{
position:absolute;
width: 100%;
background-image: url(/login/img/Modified/background_desktop.svg);
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}

}

@media only screen and (min-width: 1400px) {

.cardColumn{
font-size:24px;
}


}

@media only screen and (min-width: 1900px) {

.cardColumn{
font-size:27px;
}


}

@media only screen and (width: 1024px) and (height: 1366px){


#backgroundDiv {
    position: absolute;
    width: 100%;
    background-image: url(/login/img/Modified/background_768.svg);
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
}


@media only screen and (min-width: 601px) and (max-width:991px){
  .cardColumn{    padding: 12px;
                    height: auto;
        }

#backgroundDiv{
position:absolute;
width: 100%;
background-image: url(/login/img/Modified/background_768.svg);
height: 100%;
background-repeat: no-repeat;
background-size: cover
}
#title {
    margin-bottom: 4.7vh;
    font-family: 'Noto', sans-serif !important;
    font-weight: 700;
    color: #365889;
    text-align: center;
    font-weight: 700;
    position: relative;
    outline: 0px !important;
    text-align: left;
    margin-top: 11.5vh;
    margin-left: 8%;
    font-size: 24px;
}

#subHead {
    font-size: 16px;
    margin-right: 31%;
    font-family: 'Noto', sans-serif !important;
    font-weight: 400;
}
.cardColumn {
    background-color: white;
    width: 85%;
    display: flex;
    border: 1px solid #133863;
    border-radius: 13px;
    opacity: 1;
    padding: 6px;
    outline: 0px !important;
    font-size: 16px;
    //font-family: 'Roboto-Regular', sans-serif;
    font-family: 'Noto', sans-serif !important;
    font-weight: 400;
}

.card {
    height: 100%;
    display: inline-flex;
    width: 38%;
}
.arr {
    margin-left: 6%;
}

.rText {
    margin-left: 4%;
    color: #818181;
    width: 45%;
}

}



