@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
*, *::after, *::before {margin:0;padding: 0;}
html{
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  word-wrap: break-word;
}
body{
    font-family: 'Ubuntu', sans-serif;
}
.bg-light {
    background-color: #f9f9f9 !important;
}

.bg-dark{
    background-color: #152035 !important;
}
.bg-dark2{
    background-color: #185fa2 !important;
}
.text-muted {
	color: #a3aeb9 !important;
}
.color-blue{
    color: #185fa2 !important;
}
/*----container----*/

/*----card----*/
.card{
    border: 0 !important;
    border-radius: 1rem;
}
.card-header{
    background-color: #fff !important;
    border: 0 !important;
}
/*----btns----*/
.btn-primary{
    background-color: #3abbd9;  
    border-color: #3abbd9;
}
.btn-outline-primary {
	color: #185fa2 ;
	border-color: #185fa2 ;
}
.btn-outline-primary:hover {
	color: #fff;
	background-color: #185fa2 ;
	border-color: #185fa2 ;
}

.btn-primary:hover{
    background-color: #f47321;
    border-color: #f47321;
}
.btn-secondary{
    background-color: #f47321;
    border-color: #f47321;
    color: #fff;
}
/*----forms----*/
.form-label {
	color: #152035;
	font-weight: 500;
}
/*----tables----*/
.table > :not(caption) > * > * {
	padding: 1.5rem .5rem;
   

}
thead{
    color: #185fa2;
    font-weight: 500;
}
/*----login----*/
.login, .register-page{
    height: 100vh;
}
 h1{
    font-size: 2rem;
    font-weight: 700;
}
.input-group-text{
    background-color: #185fa2;
    color: #fff;
}
.form-control{
    border-color: #dde3ee;
}
.register{
    color: #b3bdca;
    font-weight: 600;
}
.register a{
    color: #185fa2;
    font-weight: 800;
    text-decoration: none;

}

/*----homepage----*/
header{
    background-color: #152035;
    color: #fff;
}
/*----tabs----*/
.nav-link{
    background-color: #185fa2 !important;
    color: #fff;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,  .nav-link:hover{
    color: #fff !important;
    background-color: #f47321 !important;
}
@media only screen and (max-width: 769px){
    .nav-tabs li{
        display: block;
        width: 100% !important;
    }
    .nav-tabs button{
        display: block;
        width: 100% !important;
    }
}
/*----cart pie----*/
.cart-pie{
    width: 300px;
    height: 300px;
}
@media only screen and (min-width: 30.0625em){ /*481px*/ 
    .cart-pie{
        width: 430px;
        height: 430px;
    } 
}
/*----delete btn----*/
.btn-parent{
    position: relative;
    padding-right: 3px;
}
.delete-btn, .edit-btn{
    background: none;
    border: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: crimson;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease-in-out;
    position: absolute;
    right: -4rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    z-index: 1;
}
.edit-btn{
    background-color: #185fa2;
    right: -2.2rem;
    font-size: 0.8rem;
}
.table tbody td:hover .delete-btn, .table tbody td:hover .edit-btn{
    opacity: 1;
    visibility: visible;
}
.save-btn {
	background: none;
	border: 0;
	width: 2.5rem;
	height: 2.5rem;
	color: rgb(41, 144, 64);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
}
.delete2-btn {
	opacity: 1;
	visibility: visible;
	position: static;
	top: auto;
	transform: none;
	font-size: 0.7rem;
	height: 1.4rem;
}
.table-inputs input {
width: 150px;   
}
/*----year box----*/
.year-box .card{
    border-radius: 0;
    width: 100%;
}
.year-box a{
    color: #000;
    text-decoration: none;
}
.w-83 {
    width: 100%;
}
@media only screen and (min-width: 36em){ /*576px*/ 
    .w-83 {
        width: 78%;
    }
}
@media only screen and (min-width: 48.0625em){ /*769px*/ 
    .w-83 {
        width: 67%;
    } 
}
@media only screen and (min-width: 62.0625em){/*993px*/
    .w-83 {
        width: 75%;
    } 
}
@media only screen and (min-width: 75.0625em){/*1201px*/
    .w-83 {
        width: 81%;
    }
}
@media only screen and (min-width: 85.4375em){/*1367px*/
    .w-83 {
        width: 83%;
    }   
}  
/*----badges---*/
.badge {
	font-size: 0.8rem;
	padding: .5rem 0.9rem;
	font-weight: 400;
	text-decoration: none;
}
.bg-primary {
	background-color: #185fa2 !important;
    color: #fff !important;
}
.card-custom{
    max-width: 70rem;
    width: 100%;
}
.btn-x{
    width: 100%;
    font-size: 1.5rem;
    padding: 0;
}
.select-width{
    width:100%;
    margin-bottom: .5rem;
}
@media only screen and (min-width: 33.75em){/*540px*/ 
    .select-width{
        width:14.9rem;
        margin-bottom: 0;
    }
}
@media only screen and (min-width: 48.0625em){ /*769px*/ 
    .select-width{
        width:20.9rem;
    } 
}