.mrhost-account-order-shortcode {
    font-family: "DM Sans", sans-serif;
}

/* =========================
   BREADCRUMB
========================= */
.mrhost-account-order-shortcode .mrhost-order-breadcrumb {
    font-size: 15px;
    margin-bottom: 15px;
	text-align: left;
}

.mrhost-account-order-shortcode .mrhost-order-breadcrumb a {
    color: #1D1E20;
    text-decoration: none;
    transition-duration: 350ms
}

.mrhost-account-order-shortcode .mrhost-order-breadcrumb a:hover {
    color: #673DE6;
}

/* =========================
	   TITLES
========================= */
.mrhost-account-order-shortcode .mrhost-order-title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}

.mrhost-account-order-shortcode .mrhost-order-text {
    font-size: 15px;
    margin-bottom: 15px;
}

/* ===========================
	ORDER GRID
=========================== */
.mrhost-order-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:35px;
    margin-bottom:40px;
}

/* iPad */

@media (max-width:1024px){
	.mrhost-order-grid{
	    grid-template-columns:repeat(2,1fr);
	}
}

/* Mobil */

@media (max-width:768px){

	.mrhost-order-grid{
	    grid-template-columns:1fr;
	}
}


/* ===========================
		CARD
=========================== */

.mrhost-order-card{
    background: #FAFBFF;
    border:1px solid #D5DFFF;
    border-radius:14px;
    padding:28px;
    transition:.25s ease;
	text-decoration:none;
	color:inherit;
	cursor:pointer;
    min-height:220px;
    display:flex;
    flex-direction:column;

}

.mrhost-order-card:hover{
    background:#F4F5FF;
    border-color:#7253ED;
}


/* ===========================
	ICON
=========================== */

.mrhost-order-icon{
    width:58px;
    height:58px;
    border-radius:14px;
    background:#fff;
    border:1px solid #D5DFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    transition:.25s ease;
}

.mrhost-order-card:hover .mrhost-order-icon{
    border-color:#7253ED;
}

.mrhost-order-icon i{
    font-size:25px;
    color:#7253ED;
}

/* ===========================
	TEXT
=========================== */

.mrhost-order-card h3{
    font-size:20px;
    font-weight:600;
    margin:0 0 10px;
}

.mrhost-order-card p{
    margin:0;
    line-height:1.6;
    font-size:15px;
}