:root{
  --f-system: -apple-system,San Francisco,BlinkMacSystemFont,Roboto,Segoe UI;
      --f-fallback: Helvetica,Arial,sans-serif;
  --bs-font-sans-serif:  "Montserrat", sans-serif;
  --header-height:50px;
	scroll-padding-top: calc(var(--header-height)+10px);
	scroll-behavior: smooth;
  --color-header: #fff;
  --color-yellow: #ffc107;
  --color-white: #fff;
  --color-black: #131921;
  --color-dark: #282828;
  --color-blue: #007185;
  --color-primary:#0275d8;
  --color-gray: #c5c5c5;
  --color-muted:#848484;    
  --color-red:#ff0000;
  --color-green:#009b5c;   
  --color-pink: #ff3f6c;
  --primary: #4682b4;
  --primary-dark: #38678f;
  --primary-darker: #294d6b;   
  --primary-color: #fff;
  --secondary: #ff0000;
  --border: #c5c5c5;
  --alt: #fff; 
  --color-rose: #FFC0C0; 
  --color-lime: #25D366;
  --color-light-gray: #FAFAFA;
  --footer-color: #172342;
  --footer-text: #fff;
--font-size-small: .75em;
--font-size-medium: 1em;
--font-size-large: 1.2em;
--font-size-x-large: 1.4em;
--font-size-xx-large: 2em;
--font-size-xxx-large: 2.2em;
--font-weigth-small: 400;
--font-weigth-medium: 500;
--font-weigth-large: 600;
--font-weigth-x-large: 700;
--font-weigth-xx-large: 800;
--font-weigth-xxx-large: 900;
}
.bg-cream{
     background-color: var(--color-cream) !important;
}
.bg-rose{
    background-color: var(--color-rose) !important;
}
.bg-pink{
    background-color: var(--color-pink) !important;
}
.bg-lime{
    background-color: var(--color-lime) !important;
}
.bg-yellow{
	background-color: var(--color-yellow) !important;
}
.bg-white{
	background-color: var(--color-white) !important;
}
.bg-dark{
	background-color: var(--color-dark) !important;
}
.bg-blue{
	background-color: var(--color-blue) !important;
}
.bg-red{
    background-color: var(--color-red) !important;
}
.bg-gray{
	background-color: var(--color-gray) !important;
}
.bg-primary{
    background-color: var(--color-primary) !important;
}
.bg-muted{
    background-color: var(--color-muted) !important;
}
.bg-green{
    background-color: var(--color-green) !important;
}
.bg-light{
    background-color: var(--color-gray) !important;
}

.text-rose{
    color: var(--color-rose) !important;
}
.text-primary{
    color: var(--color-primary) !important;
}
.text-yellow{
	color: var(--color-yellow) !important;
}
.text-white{
	color: var(--color-white) !important;
}
.text-black{
	color: var(--color-black) !important;
}
.text-blue{
	color: var(--color-blue) !important;
}
.text-red{
    color: var(--color-red) !important;
}
.text-danger{
    color: var(--color-red) !important;
}
.text-gray{
	color: var(--color-gray) !important;
}
.text-green{
    color: var(--color-green) !important;
}
.text-muted{
     color: var(--color-muted) !important;
}
.text-pink{
     color: var(--color-pink) !important;
}
.fs-s{
    font-size: var(--font-size-small) !important;
}
.fs-m{
    font-size: var(--font-size-medium) !important;
}
.fs-l{
    font-size: var(--font-size-large) !important;
}
.fs-xl{
    font-size: var(--font-size-x-large) !important;
}
.fs-xxl{
    font-size: var(--font-size-xx-large) !important;
}
.fs-xxxl{
    font-size: var(--font-size-xxx-large) !important;
}

.fw-s{
    font-weight: var(--font-weigth-small) !important;
}

.fw-m{
    font-weight: var(--font-weigth-medium) !important;
}
.fw-l{
    font-weight: var(--font-weigth-large) !important;
}
.fw-xl{
    font-weight: var(--font-weigth-x-large) !important;
}
.fw-xxl{
    font-weight: var(--font-weigth-xx-large) !important;
}
.fw-xxl{
    font-weight: var(--font-weigth-xxx-large) !important;
}


.bolder {
  font-weight: bolder;
}




.row {
    flex-wrap: wrap;
}
.flex-row{
    flex-direction: row;
}
.flex-col{
    flex-direction: column;
    padding: 0;
}
.flex-start{
	justify-content: start ;
	align-items: center ;
}
.flex-center{
	justify-content: center ;
	align-items: center ;
}

.flex-end{
	justify-content: end !important;
	align-items: center !important;
}

.content-center {
  justify-content: center !important;
}

.item-center {
  align-items: center !important;
}
.space-between{
	justify-content: space-between;

}

.space-around{
	justify-content: space-around;
}


.section{
	background-color: #f9f9f9;
	height: 122vh;
	padding-top: 10px;
	  margin: 12px 0;
}
.uppercase{
	text-transform: uppercase;
}
.strong{
	font-weight: bolder;
}



.mx-10{
  margin-left: 10px;
  margin-right: 10px;
}

.my-10{
  margin: 10px 0;
}
.px-10{
  padding-left: 10px;
  padding-right: 10px;
}
.py-10{
  padding-top: 10px;
  padding-bottom: 10px;
}
.mb-10{
    margin-bottom: 10px;
}
.mt-10{
    margin-top: 10px;
}

.pl-10{
    padding-left: 10px !important;
}
.pr-10{
    padding-right: 10px !important;
}
.horizontal{
	flex-direction: row;
	justify-content: start;
	align-items: center;
}
.border{
    width: auto;
    border: 1px solid #d4d5d9;
}
.border-bottom{
    margin-bottom: 10px;
	width: auto;
	border-bottom: 1px solid #d4d5d9;
}
.border-top{
    margin-top: 20px;
    width: auto;
    border-top: 1px solid #d4d5d9;
}
.border-yellow th{
    border: 1px solid var(--color-yellow) !important;
}
.headline{
	color: #000;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0 0 15px;
    letter-spacing: .4px;
}
.d-block {
  display: block !important;
}


.blink-text{    
  -webkit-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Safari 4+ */
  -moz-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Fx 5+ */
  -o-animation: NAME-YOUR-ANIMATION 1s infinite;  /* Opera 12+ */
  animation: NAME-YOUR-ANIMATION 1s infinite;  /* IE 10+, Fx 29+ */
        
    }
@-webkit-keyframes NAME-YOUR-ANIMATION {
        0%,49%  { color: #10c018;}
        50%,100% { color: #ef0a1a;}
}
/*
button, .btn {
    background-color: var(--color-gray);
    border: 1px solid var(--color-yellow);
    margin: 1em 0.1em 0 0;
    padding: 0.6em 1.2em;
    color: var(--primary-color);
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial;
    line-height: normal;
}

button:hover, .btn:hover {
    background-color: var(--color-gray);
    border: 1px solid var(--color-yellow);
    color: var(--color-blue);
}*/

.btn {
    display: inline-block;
    width: 100%;
    padding: 10px 10px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    color: white;            
}


.btn-green:hover {
    background-color: green !important; 
}
.btn-green:hover {
    background-color: green !important; 
}


form {
    width: 100%;
}


input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea {
    padding: 0.6em 0.6em;
    font-size: 1em;
    font-family: Arial;
    width: 100%;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus {
    border: 1px solid var(--primary);
    outline: 0;
}

input[type="text"], input[type="number"], input[type="email"], input[type="password"], button, textarea, select, .button {
    border-radius: 2px;
}

textarea {
    padding: 0.6em 0.6em;
    width: 100%;
    height: 100%; 
    box-sizing: border-box;
    border: 1px solid var(--border); 
    line-height: 1.6em;       
}

label {
    margin: 1.4em 0 0.4em 0;
    clear: both;
    display: block;
}

label span {
    color: green;
}



.alt {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: #333;        
}

.alt:hover {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}


input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
input[type="checkbox"]::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #ccc; /* Color of the checkbox when unchecked */
    clip-path: circle(70% at 50% 50%);
}
input[type="checkbox"]:checked::before {
    content: '✔';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #4caf50; /* Color of the checkbox when checked */
    color: white;
    text-align: center;
    line-height: 16px;
    clip-path: circle(70% at 50% 50%);
}
input[type="radio"] {
  top: 0;
  left: 0;
  position: relative;
  width: 16px; 
  height: 16px;
  clip-path: circle(55% at 50% 50%); 
}
.radio-input input:checked{
    border: none;
    background: #ff3f6c;
}
.form-control-sm{
    padding: 0.4em 0.4em !important;
    font-size: 1em;
    width: 100%;
   
}

table {
    border-collapse: collapse;
    width: 100%;
}


th {
    background-color: var(--primary);
    color: var(--primary-color);
}

th, td {
    border: 0.2px var(--border) solid;
    padding: 5px;
}
td {
    vertical-align: middle !important;
}
.table-border  th,.table-border td {
    border: 1px solid var(--border) ;
    padding: 5px;
    background-color: #fff ;
    }

.table-hover td:hover {
    cursor: pointer;
}

.table-hover tr:hover, .table-hover tr:nth-child(odd):hover {
    background-color: #fdfdea;
}

.table-hover tr:nth-child(odd) {
    background-color: #f3f3f3;
}

.table-borderless  th,.table-borderless td {
    border: none;
    padding: 5px;
    background-color: #fff ;
    }
.table-outline{
    border: 1px solid var(--border) !important;
}
.table-outline th,.table-outline td {
    border: none !important;
    padding: 5px;
}

.td-center{
        text-align: center !important;
        vertical-align: middle !important;
}
hr {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 1px;
}

.float-right {
    float: right;
    position: relative;
}

.float-left {
    float: left;
    position: relative;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}
 /*
.container {
    width: 90%;
   max-width: 940px;
    margin: 0 auto;
    padding: 1em;
}*/

.pagination {
    display: inline-block;
    margin: 1em 0;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
}

.pagination a.active {
    background-color: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}