html {
  font-size: 14px;
}

a.reset-link {
    color:unset;
    text-decoration:unset;
}

@font-face {
    font-family: "FarumaDhivehi";
    src: url(/fonts/faruma.ttf) format("truetype");
}
.text-dv {
    direction: rtl;
    font-family: 'FarumaDhivehi'
}
.text-dv > * {
    direction: rtl;
    font-family: 'FarumaDhivehi' !important
}

@media (min-width: 768px) {
    html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 200px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-horizontal dd {
        margin-left: 220px;
    }
}

dt {
    font-weight:500
}

.dl-horizontal dd:before,
.dl-horizontal dd:after {
    display: table;
    content: " ";
}


.dl-horizontal dd:after {
    clear: both;
}



/*
.logo {
    position: absolute;
    width: 80px;
    bottom: -20px;
    left: 39%;
    right: 50%;

    box-shadow: aqua;
    border-radius: 16px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; *
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

    .logo.left {
/*        right: 5px;
        left: revert*
    } */

.pos-rel {
    position: relative
}

.visible-xs {
    display: none;
}


/*All mobile styles attached only between 320px and 1024px*/
@media (min-width: 320px) and (max-width: 1024px) {

    /*fix the icon not in center issues*/
    button.navbar-toggler {
        position: absolute;
        right: 12px;
        top: 10px;
    }

    .visible-xs {
        display: block !important;
    }

    .cc-container .content {
        height: 600px !important;
    }
}

/*All desktop styles attached only after 1025px*/
@media (min-width: 1025px) {
}

.form-group {
	margin-bottom: 10px;
}

.display-4 {
	margin-bottom: 30px;
}


/* ALERTS */

.alert b {
	font-weight: 600 !important;
}

.alert {
	background-color: #f3fafb;
	border-color: #2babad;
	color: #525257;
	padding-left: 45px;
}

.alert svg {
	position: absolute;
	left: 18px;
	top: 20px;
	font-size: 16px;
}

.alert .keep-svg-def svg {
	position: inherit !important;
}

.alert.alert-success {
	background-color: #f3fafb;
	border-color: #2babad;
}

.alert.alert-danger {
	background-color: #fff3ef;
	border-color: #d5351f;
}

.alert.alert-info {
	background-color: #fbfafa;
	border-color: #dcdcdc;
}

.alert.alert-warning {
	background-color: #fffaf2;
	border-color: #e9b550;
}


/* Loading CSS text */
/* HTML: <div class="loader"></div> */
.loader-text {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    white-space: pre;
    font-size: 30px;
  }
  .loader-text:before {
    content: "Loading...";
    animation: l34 1s infinite alternate;
  }

  @keyframes l34{
    0%,15%,75%,100% {
     content:"Loading...";
    }
    20% {content:"Loading..."}
    25% {content:"Lo ding..."}
    30% {content:"Load ng..."}
    35% {content:" oading..."}
    40% {content:"L ading..."}
    45% {content:"Loadin ..."}
    50% {content:"Loa ing..."}
    55% {content:"Loading  ."}
    60% {content:" oa ing..."}
    65% {content:"L ading..."}
    70% {content:"Load n ..."}
  }

  .icon {
    height: 150px;
    width: 200px;
  }

  .icon img {
    width: 100%;
    object-fit: scale-down;
    height: 100%;
  }


  .cc-items .card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: all ease-in-out 400ms;
    border: 5px solid #f6f6f6;
    border-radius: 20px;
  }

  .cc-items .card-title {
    margin-bottom: 15px;
  }

  .cc-items .card:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-color: #d4d0d0;
  }

  .cc-items h4, .cc-items h6 {
    font-family: var(--font-default);
  }

  .w-70 {
      width: 70% !important;
  }

  .cc-images {
    display: flex;
    justify-content: center;
  }