/*
Colors:

White = #FFFFFF
Gray1 = #F0EFF4
Gray2 = #656274
Dark Gray = #0D0A1D
Dark Blue = #00132E
usblick logo = #2da24f
pink = #DA0268
black = #000000

Font:
Open Sans
paragraph - 14px

*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up)
	@media (min-width: 544px) {
  }

 Medium devices (tablets, 768px and up)
	@media (min-width: 768px) {
  }

 Large devices (desktops, 992px and up)
	@media (min-width: 992px) {
    }

 Extra large devices (large desktops, 1200px and up)
	@media (min-width: 1200px) {
  }
  */

/* FONTS */

body{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	overflow-x: hidden;
	background-color: #ffffff !important;
}


.s-xs { font-size: 10px; }
.s-sm { font-size: 12px; }
.s-n { font-size: 14px; }
.s-m { font-size: 18px; }
.s-l { font-size: 22px; }
.s-xl { font-size: 28px; }
.s-xxl { font-size: 34px; }

.l-space { letter-spacing: 1px; }
.f-bold{ font-weight: bold; }
.f-underline { text-decoration: underline; }
.f-justify{ text-align: justify; }
.f-center{ text-align: center; }

/* BACKGROUNDS */

.bg-white { background-color: #FFFFFF; }
.bg-gray1 { background-color: #F0EFF4; }
.bg-gray2 { background-color: #656274; }
.bg-darkgray { background-color: #0D0A1D; }
.bg-darkblue { background-color: #00132E; }
.bg-usblick { background-color: #2da24f; }
.bg-pink { background-color: #DA0268; }
.bg-black { background-color: #000000; }


.bg-darkgray-a {
	background: #132d46;
/* 	background: linear-gradient(90deg, rgba(12,149,0,1) 13%, rgba(14,162,59,1) 44%, rgba(0,194,26,1) 76%);
 */}

.bg-darkgray-b {
	background: transparent !important;
}


/* BUTTONS */
.btn-red {
	font-size: 18px;
	display: inline-block;
	outline: 0;
	border: 0;
	cursor: pointer;
	will-change: box-shadow,transform;
	background: radial-gradient( 100% 100% at 100% 0%, #1B9838 0%,  #1B9838 100% );
	box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%);
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 0.3em;
	color: #fff;
	height: 2.6em;
	text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-red:hover {
	box-shadow: 0px 0.1em 0.2em #cde2dd, 0px 0.4em 0.7em -0.1em  #cde2ddb6, inset 0px -0.1em 0px #6a6e79;
	transform: translateY(-0.1em);
}

.btn-red:active {
	box-shadow: inset 0px 0.1em 0.6em #cde2ddb6;
	transform: translateY(0em);
}


/* FORMS */

.text-field {
	height: 40px;
	width: 100%;
	color: #333;
	padding-left: 10px;
	border-left: 5px solid #2da24f;
	border-top: 1px solid #2da24f;
	border-bottom: 1px solid #2da24f;
	border-radius: 8px;
}

.link-usblick:hover {
	cursor: pointer;
	color: #2da24f;
	text-decoration: none;
}


/* ICONS */

.rotate {
	-webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.mat-expansion-panel-body {
	overflow: hidden !important;
}

.mat-nav-list .mat-list-item-content:hover {
    font-weight: 700;
	background-color: rgba(75, 83, 101, 1);
    border-radius: 6px;
}

.modal-backdrop {
	display: none;
}