.vazirmatn {
    font-family: "Vazirmatn-Medium", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }
:root{
--shadow: 0px 4px 3px 0px rgb(31, 31, 31);
--default-color: #0d1721;
--default-color-light: #ebe9e2;
--bg-color: #393939;
--dark-color: hwb(0 18% 82%);
--dark-color2: hwb(240 30% 63%);
--light-color: hsl(0 18% 82%);
--light-color2: hsl(240 31% 61%);
}
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes rotational {
    to {
        --angle: 360deg; /* Full rotation */
    }
}

body {
    background: conic-gradient(
            from var(--angle),
            var(--dark-color),
            var(--dark-color2),
            var(--dark-color)
        ),
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJnZW9tZXRyaWMiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PHBhdGggZD0iTTAgMGg1MHY1MEgwVjB6TTUwIDUwaDUwdjUwSDUwVjUweiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjREREREREIiBzdHJva2Utb3BhY2l0eT0iMC4xIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNnZW9tZXRyaWMpIi8+PC9zdmc+'),
        #38373c80;
    background-blend-mode: multiply;
    background-size: 200% 200%;
    animation: rotational 20s linear infinite; /*Smooth rotation*/
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0% 100%;
    transition: background 0.5s ease; /* Smooth transition for mode change */
}

body.dark-mode {
    background: conic-gradient(
            from var(--angle),
            var(--light-color),
            var(--light-color2),
            var(--light-color)
        ),
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJnZW9tZXRyaWMiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PHBhdGggZD0iTTAgMGg1MHY1MEgwVjB6TTUwIDUwaDUwdjUwSDUwVjUweiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjREREREREIiBzdHJva2Utb3BhY2l0eT0iMC4xIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNnZW9tZXRyaWMpIi8+PC9zdmc+'),
        #beb8d680;
    background-blend-mode: multiply;
    background-size: 200% 200%;
    animation: rotational 20s linear infinite; /* Smooth rotation */
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0% 100%;
    transition: background 0.5s ease; /* Smooth transition for mode change */
    }

*{
    font-family: "Vazirmatn";
}
.chip{
    padding: 0 10px !important;
    border-radius: 10px !important;
    margin: 2px !important;
    background-color: white !important;
}
a:hover{
    text-decoration: none;
}

@media screen and (max-width: 1000px) {
    #navbar-items-ul{
        display: flex;
        flex-wrap: wrap;
        overflow: visible;
        flex-direction: row;
    }
    #navbar-items-ul li{
        margin-left: 10px;
    }
}
#submit button{
    text-align: center;
    width: 20%;
}
.row{
    margin-right:0 !important;
    margin-left:0 !important;
    margin-top: 1%;
}
.title{
    text-align:center;
}
form .form-group input,form .bootstrap-select {
    margin-bottom: 5%;
}
form .form-group:not(.row){
    border:2px solid white;
}
.EventActivities{
    padding: 0 0 0 0 !important;
}
.EventActivities .main{
    /* margin-bottom: 1%;
    margin-top: 1%;
    background: radial-gradient(white, gray);
    background-image: radial-gradient(white, gray); */
    background-color: #d8d8d8 !important;
    margin-bottom: 20px;
    border-radius: 20px;
    padding:  10px calc(((100% - 15px) - 95%) / 2) !important;
}
.activitEvent{
    border: 1px solid rgba(0, 0, 0, 0.158) !important;
    margin-top: 1%;
    border-radius: 10px;
    box-shadow: var(--shadow);
    background-color: rgb(255, 255, 255);
    width: 30% ;
    flex-direction: row;
    align-items: baseline;
    padding-top: 0.5%;
}
.NoticActivities{
    background-color: #d8d8d8 !important;
    margin-bottom: 20px;
    border-radius: 20px;
    padding:  10px calc(((100% - 15px) - 95%) / 2) !important;
    text-align: center;
}
.ActivitNotic{
    border: 1px solid rgba(0, 0, 0, 0.158) !important;
    margin-top: 1%;
    margin-bottom: 1%;
    border-radius: 10px;
    box-shadow: var(--shadow);
    background-color: rgb(255, 255, 255);
    width: 30%;
    padding: 5 5px !important;
}
#reply-div{
    width: 100%;
    padding: 15 15px !important;
}
.short-fields{
    margin-left: calc(3.333333333333333% / 2);
    margin-right: calc(3.333333333333333% / 2);
}
.short-fields-2{
    margin-left: calc(70% / 2);
    margin-right: calc(70% / 2);
}
.EventActivities .main .col-md-12{
    /* margin-top: 1%; */
    border: 1px solid rgba(0, 0, 0, 0.137) !important;
}
th,td{
    text-align: center;
}
table{
    widows: 100%;
}
.breadcrumb{
    background-color: rgb(255, 255, 255);
    margin-top: -13.9px;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow);
    border-radius: 0px 0px 15px 15px;
}
table:not(.default) .odd{
    background-color: rgb(224, 224, 224) !important;
}
table:not(.default) thead tr{
    background-color: black !important;
    color: white !important;
}
.tableparent:not(.default){
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    box-shadow: var(--shadow) !important;
}
.back{
    background-color:rgb(153, 255, 255,0.3);
}
.flasher {
    color:white;
    background: white;
    background-color: red;
    animation: blinker 30s linear infinite;
}
@keyframes blinker {
  50% {
    background-color: blue;
  }
}
.blinking-box{
    --angle: 0deg;
    background: none !important;
    border: 3px solid;
    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1 !important;  
    animation: 10s rotate linear infinite !important;
  
}
@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.justify-content-md-center{
    display: none;
}
table{
    width: 100% !important;
}
.title {
    font-size: 200%;
    font-weight: bold;
}
button, textarea{
    background-color: white; 
    color: var(--default-color); 
    border-radius: 0.25rem !important;
    padding: 5px !important;
    color: #0d1721;
    font-size: 1rem !important;
}
input{
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition:box-shadow 0.15s ease-in-out;
}
a.btn-primary, button.btn-primary-link{
    padding: 7px !important;
    background-color: white; 
    color: var(--default-color); 
    border: none !important;
    border-radius: 0.25rem !important;
    box-shadow: 0px 3px 3px 2px rgb(82, 82, 82) !important;
    color: #0d1721;
    font-size: 1.1rem !important;
}
a.btn-secondary, button.btn-secondary-link{
    padding: 7px !important;
    border: none !important;
    border-radius: 0.25rem !important;
    box-shadow: 0px 3px 3px 0px rgba(82, 82, 82, 0.452) !important;
    font-size: 1.2rem !important;
}
.select2-search__field, .select2-search__field:focus, .select2-search__field:hover{
    border: 1px solid rgb(107, 107, 107) !important;
    text-align: right;
}
button{
    cursor: pointer;
}
button:focus{
    outline: none !important;
}
input, textarea{
    border-radius: 2px;
    transition-property: border-radius;
    transition-duration: 2s;
}
input:focus{
    outline: none !important;
    border-radius: 8px;
    box-shadow: 0 0 0 0.1rem rgb(152 186 223 / 45%) !important;
}
textarea{
    margin-bottom: 10px;
}
.select2-selection[aria-labelledby="select2-id_letter-container"], .select2-selection[aria-labelledby="select2-id_item-container"], .select2-selection--single[aria-labelledby="select2-id_letter-container"]{
    background-color: white; 
    color: var(--default-color); 
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0px 3px 3px 2px rgb(82, 82, 82) !important;
    color: #0d1721;
    font-size: 1rem !important;
    width: 100%;
}
#foreign-reciever-div{
    padding-bottom:10px !important;
}
.select2-results{
    box-shadow: var(--shadow);
}
.form-background{
    /* background-color: rgb(255, 255, 255);
    color: var(--default-color);
    border:1px solid #9d9d9d;
    border-radius: 15px;
    box-shadow: var(--shadow) !important; */
    background-color: transparent;
    box-shadow: none;
    border: none !important;
}
/* .form-input-bg{
    background-color: #707070;
    border: 1px solid #9d9d9d !important;
    border-radius: 6px;
    box-shadow: var(--shadow);
} */
.form-group{
    background-color: white;
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding:  5 10 0 10px !important;
}
.form-group:has(input), .form-group:has(button){
    text-align: center;
    border-radius: 10px;
}
/* , .form-group:has(a) */
.form-group:has(button[type=submit]){
    display: flex;
    justify-content: center;
    background-color: transparent;
    padding: 5 0 10 0px !important;
    border: none !important;
    box-shadow: none;
}
.form-input-bg{
}

.left{
    float: left;
    margin-right: 5px;
}

@media screen and (max-width:770px){
    .left{
        float: left;
        margin-right: 0px;
    }
}

.right{
   float: left;
}

.form-group label{
    color: var(--default-color);
}
input[type="search"]{
    margin-right: 10px;
}
nav[aria-label="breadcrumb"]{
    background-color: transparent;
    box-shadow: none !important;
}
hr#light{
    margin: auto 15%;
    border-top: 1px solid #979797;
}
.alert{
    border: none;
    border-radius: 12px !important;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    padding: 10px 12px;
    margin: 8px 0px;
}
.alert:hover{
    background-color: rgba(255, 255, 255);
}
.alert h4{
    color: var(--default-color);
    font-weight: bolder;
}
.alert a{
    color: #007aff;
    transition: color 0.2s;
    font-size: 1.1rem;
}
.alert a:hover{
    color: #272727;
}
.alert::before{
    content: '';
    border-radius: 12px;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
}
.alert-info[data-notify="container"]{
    background-color: rgba(255, 255, 255) !important;
    top: 85px !important;
    z-index: 10000000;
    height: 40px;
}
.alert-info[data-notify="container"] span[data-notify="message"]{
    position: fixed;
    right: 50px !important;
}
.alert-info[data-notify="container"] btn[data-notify="dismiss"]{
    top: 9px;
    scale: 1.4;
    color: #0c5460;
    opacity: 0.9
}
button.close{
    box-shadow: none !important;
}
button.close span{
    text-shadow: none !important;
    font-weight: normal;
    font-size: 2rem;
}
.dropdown-menu:has(li){
    min-width:170px !important;
    max-width:200px ;
    padding:5 0 5 0px !important;
}
.dropdown-toggle{
    color: var(--default-color);
    font-size: 1.1rem;
}
.dropdown-toggle:hover{
    color: var(--default-color);
}
#notification-container{
    background-color: rgba(255, 255, 255, 0.397);
    width: 20%;
    height: auto;
    max-height: none !important;
    min-width: 200px;
    max-width: 1000px !important;
    padding: 0 10px !important;
    box-shadow: 0px 4px 5px 0px rgba(31, 31, 31, 0.5);
    backdrop-filter: blur(20px);
    margin-right: 80%;
    border-radius: 0px 0px 10px 10px !important;
    overflow: visible !important;
    transform: translateX(3rem);
    

}
#notif-dropdown-div{
    padding: 3px 1px !important;
}
#notif-dropdown-div:hover{
    background-color: transparent;
}
.bell{
    animation: ring 7s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes ring {
    0% { transform: rotate(0); }
    2% { transform: rotate(15deg); }
    4% { transform: rotate(-15deg); }
    6% { transform: rotate(10deg); }
    8% { transform: rotate(-10deg); }
    10% { transform: rotate(5deg); }
    12% { transform: rotate(-5deg); }
    14%, 100% { transform: rotate(0); }
}
@keyframes delay-animation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    50.01% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
button.note-btn{
    box-shadow: none !important ;
    border-right: 1px solid rgba(0, 0, 0, 0.37) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.37) !important;
    margin: 0px 2px !important;
}
button.note-color-btn{
    box-shadow: none !important ;
}
div.panel-heading{
    border-bottom: 1px dashed black;
}
span.note-icon-caret{
    visibility: hidden !important;
}
/* Hover effect for event activity cards */
.main:hover {
    transform: scale(1.02); /* Slightly enlarge the card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a stronger shadow */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Hover effect for form-background containers */
/*.form-background:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}*/

/* Hover effect for chips */
.chip:hover {
    background-color: #ddd; /* Change background color on hover */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* Hover effect for buttons */
.btn:hover {
    opacity: 0.9; /* Slightly reduce opacity */
    transition: opacity 0.3s ease; /* Smooth transition */
}
label.required::after {
  content: " *";
  color: red;
}