:root {   
    /* Typography */
    --textXJumbo : 24px;
    --textJumbo : 20px;
    --textXLG : 18px;
    --textLG : 16px;
    --textXMD : 14px;
    --textMD : 13px;
    --textSM : 12px;
    --textXSM : 11px;

    /* Rounded */
    --roundedCircle : 100%;
    --roundedJumbo : 30px;
    --roundedXLG : 24px;
    --roundedLG : 18px;
    --roundedMD : 14px;
    --roundedSM : 12px;
    --roundedMini : 6px;

    /* Spacing */
    --spaceJumbo : 35px;
    --spaceXLG : 24px;
    --spaceLG : 20px;
    --spaceXMD : 16px;
    --spaceMD : 12px;
    --spaceSM : 10px;
    --spaceXSM : 8px;
    --spaceXXSM : 6px;
    --spaceMini : 4px;

    /* Color Pallete */
    --successBG : #198754;
    --dangerBG : #dc3545;
    --warningBG : #ffc107;

    --primaryColor : #000000;
    --whiteColor : #FFFFFF;
    --secondaryColor : #414141;
    --thirdColor : #ededed;
}

.content {
    width: 1280px;
    display: block;
    margin-inline: auto;
    min-height: 75vh;
    padding: 0 var(--spaceLG) var(--spaceLG) var(--spaceLG);
}

a {
    text-decoration: none;
    cursor: pointer;
}
a:hover, a {
    color: var(--primaryColor);
}
.container {
    background: var(--whiteColor);
    text-align: start;
    padding: var(--spaceMD);
}
.bordered {
    border: 1.75px solid var(--primaryColor);
    border-radius: var(--roundedMD);
}
.img {
    border-radius: var(--roundedMD);
}

.msg-error-input {
    font-size: var(--textSM);
    font-style: italic;
    text-decoration: none;
    color: var(--dangerBG) !important;
}
.avatar_dashboard {
    width: 20vh;
    border: var(--roundedMini) solid black;
    border-radius: 100%;
    display: block;
    margin-inline: auto;
}

.gallery-btn {
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
    border: 2px solid black; border-radius: 15px;
    padding: var(--spaceMD);
    text-align: left;
    background: var(--whiteColor);
}
.gallery-btn:hover {
    transform: scale(1.05);
}

.modal-content {
    border: 3px solid black; 
    border-radius: var(--roundedLG);
}

.bg-danger-light {
    background-color: rgba(240, 34, 116, 0.2);
    border: 2px solid var(--dangerBG);
}
  
table thead {
    background: var(--primaryColor);
    color: var(--whiteColor); 
    font-size: var(--textXMD);
    text-align: center;
}
table tbody {
    font-size: var(--textMD);
}

.swal2-popup {
    border: 4px solid black !important;
    border-radius: var(--roundedLG);
    box-shadow: rgba(255, 255, 255, 0.75) 0px 5px 15px;
}
.swal2-confirm {
    background: var(--successBG);
}
.swal2-cancel {
    background: var(--dangerBG);
}

.nodata-icon {
    width: 120px;
}

.alert {
    font-size: var(--textXMD);
}
.alert h5 {
    font-size: var(--textLG);
}

/* Maps Dialog */
.gm-ui-hover-effect {
    background: black !important;
    border-radius: 100%;
    position: absolute !important;
    right: 6px !important;
    top: 6px !important;
}
.gm-ui-hover-effect span {
    color: white !important;
}
.gm-control-active {
    background: black !important;
    border: 1.75px solid white !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
}
.gmnoprint div{
    background: transparent !important;
    box-shadow: none !important;
    position: absolute;
    top: -30px;
    right: -15px;
}
.gm-control-active span {
    background: white !important;
}

.no-animation {
    transform: none !important;
}

.form-check-input {
    width: var(--spaceXLG);
    height: var(--spaceXLG);
    margin-right: var(--spaceMD);
}

/* Desktop style */
.btn-menu-main {
    height:60px; 
    border-radius: var(--roundedJumbo);
    z-index: 996;
    min-width: 200px;
    padding-top: var(--spaceXMD);
    margin-right: var(--spaceMD);
    padding-inline: var(--spaceXLG);
}

/* Mobile & Tablet style */
@media screen and (max-width: 1023px) {
    .content {
        width: 100%;
        padding: 0 var(--spaceSM) var(--spaceSM) var(--spaceSM);
    }
    .btn-main-page {
        padding: var(--spaceSM);
        margin-bottom: var(--spaceXSM);
    }
    .dropdown-menu {
        margin-top: 0 !important;
    }
    .btn-menu-main {
        width:60px; 
        height:60px; 
        min-width: auto;
        right:var(--spaceXLG); 
        bottom:var(--spaceXLG);
        margin-right: 0;
        position: fixed;
        border-radius: 100%;
        z-index: 996;
        padding-inline: inherit;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
}