@font-face {
    font-family: "Tajawal-Medium";
    src: url("../fonts/Tajawal/Tajawal-Medium.ttf");
}

@font-face {
    font-family: "Tajawal-Bold";
    src: url("../fonts/Tajawal/alfont_com_Tajawal-Bold.ttf");
}

@font-face {
    font-family: "Tajawal-ExtraBold";
    src: url("../fonts/Tajawal/alfont_com_Tajawal-ExtraBold.ttf");
}

body {
    font-family: "Tajawal-Medium", sans-serif !important;
}


/* General */
.font-family-medium {
    font-family: "Tajawal-Medium", sans-serif !important;
}

.font-family-bold {
    font-weight: 900 !important;
    font-family: "Tajawal-Bold", sans-serif !important;
}

.font-family-ExtraBold {
    font-weight: 900 !important;
    font-family: "Tajawal-ExtraBold", sans-serif !important;
}

.form-check-input:checked[type=checkbox] {
    background-image: url('../images/site/check.svg') !important;
}

.form-select {
    background-image: url('../images/site/arrow-down.svg') !important;
}

.page-content {
    padding: calc(50px - 33px) calc(22px / 2) 60px !important;
}

.h-700 {
    height: 700px !important;
}

@media (max-width: 499px) {
    .h-700 {
        height: 500px !important;
    }
}

.dir-rtl {
    direction: rtl !important;
}

.form-group {
    margin-bottom: 1rem;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.btn-delete-site {
    padding: 1px 5px !important;
    margin-right: 10px;
}

.circle-image-menu {
    border-radius: 50%;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border: 3px solid #9870b6;
}

    .circle-image-menu img {
        height: auto;
        max-width: 100%;
    }

.group-name {
    position: absolute;
    right: 91px;
    top: 60px;
    font-size: 13px;
    font-weight: 600;
    color: gray;
    opacity: 0.7;
}

.line-height-none {
    line-height: 0 !important;
}

.user-name-site {
    position: absolute;
    right: 91px;
    top: 35px;
}

.font-wight-bold {
    font-weight: 600 !important;
}

.font-wight-bolder {
    font-weight: 900 !important;
}

.spinner-border {
    width: 3rem !important;
    height: 3rem !important;
}


/* Panel Home */
.panel-1:hover {
    --bs-bg-opacity: 1;
    background-color: #776ACF !important;
    transition: .3s
}

.panel-2:hover {
    --bs-bg-opacity: 1;
    background-color: #E1665D !important;
    transition: .3s
}

.panel-3:hover {
    --bs-bg-opacity: 1;
    background-color: #6DCBA3 !important;
    transition: .3s
}

.panel-4:hover {
    --bs-bg-opacity: 1;
    background-color: #44474b !important;
    transition: .3s
}

    .panel-1:hover .text-hover-site,
    .panel-2:hover .text-hover-site,
    .panel-3:hover .text-hover-site,
    .panel-4:hover .text-hover-site {
        color: #ffffff !important
    }

    .panel-1:hover .avatar-title i,
    .panel-2:hover .avatar-title i,
    .panel-3:hover .avatar-title i,
    .panel-4:hover .avatar-title i {
        padding-left: 15px !important;
        transition: .5s
    }

.certificate {
    position: absolute;
    left: 2%;
    bottom: 27%;
}

    .certificate img {
        width: 72px;
    }

.footer {
    height: auto !important;
}

@media (max-width: 675px) {
    .certificate {
        position: relative;
        text-align: center
    }
}

@media (max-width: 576px) {
    .page-content {
        min-height: 100vh;
    }
}

.left-0 {
    left: 0 !important;
}


.top-auto {
    top: auto !important;
}