@font-face {
    font-family: text_bold;
    src: url("../fonts/montserrat_bold.ttf");
}
@font-face {
    font-family: text_regular;
    src: url("../fonts/montserrat_regular.ttf");
}
@font-face {
    font-family: text_thin;
    src: url("../fonts/montserrat_thin.ttf");
}

:root{
    --primary-light:#3B84F1;
    --primary:#5271ff;
    --primary-darker:#223baa;
    --danger:#ff385a;
    --text-color-dark:#000000B3;
    --text-color-light:#5b5b5b;
    --warning:#ffc107;
    --success:#34cc36;
    --overlay-color:rgba(29, 20, 110, 0.37);
    --gold:#FFD700;
}

body{
    overflow-x: hidden;
}


*{
    margin:0;
    padding:0;
    font-family: "Poppins", sans-serif;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

a{
    text-decoration: none;
    color:black;
}


a>button:hover{
    cursor: pointer;
}

button:hover{
    cursor: pointer;
}

input[type="checkbox"]:hover{
    cursor: pointer;
}

input[type="radio"]{
    width: 15px;
    height: 15px;
}

input[type="radio"]:hover{
    cursor: pointer;
}

.hidden{
    display: none!important;
}

/* TEXT */
.text_primary{
    color: var(--primary) !important;
}

.text_danger{
    color:var(--danger) !important;
}

.text_warning{
    color: var(--warning) !important;
}

.text_info{
    color: var(--primary)!important;
}
.text_success{
    color: var(--success)!important;
}
.text_light{
    color: var(--text-color-light)!important;
}

/* POSITIONING */

.m_auto{
    margin: auto!important;
}
.mt_20{
    margin-top: 20px!important;
}
.mb_40{
    margin-bottom: 40px!important;
}

/* DIMENSIONS */

.w_100{
    width: 100%!important;
}

/* INPUTS */

.default_input{
    min-height: 30px;
    border-radius: 7px;
    outline: none;
    border:solid 1px rgba(0, 0, 0, 0.37);
    padding: 0 10px;
}
.input_disabled{
    background-color: rgba(199, 199, 199, 0.384)!important;
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 1))!important;
    pointer-events: none!important;
}
/* BUTTONS */

.transparent_button{
    background-color: transparent;
    outline:none;
    border:none;
    min-height: 30px;
    color: white;
    font-family: text_bold;
    font-size: medium;
    border-radius: 7px;
}

.default_button{
    background-color: var(--primary);
    outline:none;
    border:none;
    min-height: 30px;
    color: white;
    font-family: text_bold;
    font-size: medium;
    border-radius: 7px;
}

.danger_button{
    background-color: var(--danger);
    outline:none;
    border:none;
    min-height: 30px;
    color: white;
    font-family: text_bold;
    font-size: medium;
    border-radius: 7px;
}

.success_button{
    background-color: var(--success);
    outline:none;
    border:none;
    min-height: 30px;
    color: white;
    font-family: text_bold;
    font-size: medium;
    border-radius: 7px;
}

.button_sm{
    font-size: smaller;
}

/* Containers */

.bordered_container{
    border-radius: 20px;
    box-shadow: 0cm 0px 5px 1px rgba(0, 0, 0, 0.144);
    
}


.container_col_2{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.d_flex_row{
    display: flex;
    flex-direction: row;
}

.d_flex_column{
    display: flex;
    flex-direction: column;
}
/* Tables */


.default_table{
    
    border-spacing: 0;
}

.default_table th{
    
    font-weight: 600;
    background-color: #5271ff9c;
    padding: 5px 0;
    font-size: small;
}



.default_table th:nth-child(1)
{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.default_table th:last-child
{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}



.default_table td{
    margin-top: 10px;
    height: 50px;
    text-align: center;
    margin-top: 20px;
    border-bottom: solid 1px rgba(128, 128, 128, 0.322);
    font-size: 13px;
}





.default_table td>button{
    padding: 5px 7px;
}
.default_table td>button>img{
    width: 20px;
    height: 20px;
}

.clickable_row:hover{
    background-color: #5271ff1f;
    cursor: pointer;
}


.labeled_hr{
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.labeled_hr h4{
    padding: 0 10px;
    white-space: nowrap;
}

.custom_hr{
    width: 100%;
    height: 1px;
    position: relative;
}

.labled_hr_primary .custom_hr{
    background-color: var(--primary);
}


/* Custom Scrollbar */


::-webkit-scrollbar {
    width: 10px;
    margin-right: 5px;
    border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--primary);
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 5px;
    border:2px solid rgba(31, 31, 71, 0.342)
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Loading Animation */

.loader {
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 2vh;
    height: 2vh;
    animation: spin .5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    #progress_spinner_background{
        width: 60%;
    }
}


/* Analytics */
.labeled_summary_container{
    display: flex;
    font-size: smaller;
    color:var(--text-color-light);
    font-weight: 600;
}

.labeled_summary_container>label{
    
}
.labeled_summary_container>p{
    color: var(--primary);
    margin-left: 10px;
}

/* Pagination Loading */
.pagination_container{
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination_container>p{
    color: gray;
    font-size: smaller;
    margin-right: 20px;
}

.loader_container{
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader_container>p{
    color: gray;
    font-size: smaller;
    margin-right: 20px;
}


#switch_dropdown_container{
    width: 90%;
    margin: 20px auto;
    margin-top: 0;

}

#switch_dropdown_container>select{
    height: 50px;
    font-size: large;
    font-weight: 500;
    width: 200px;
    margin: 0 10px;
    border: none;
    border-bottom: 5px solid var(--primary);
    color: var(--text-color-dark);
    border-radius: 5px;
    margin-right: 40px;
    
}


.tab_navigator{
    display: flex;
    flex-direction: row;
    width: 60%;
    margin: auto;
    min-height: 40px;
    gap: 10px;
}

.tab_nav_button{
    height: 40px;
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    font-weight: bold;
    font-size: large;
    
    border-bottom: 1px solid var(--primary);
    animation:unselect 50ms ease-in;    
    
}

.tab_nav_selected{
    animation:select 150ms ease-in;    
    border-bottom: 5px solid var(--primary);
    
}

@keyframes select{
    from{
        border-bottom: 1px solid var(--primary);
    }
    to{
        border-bottom: 5px solid var(--primary);
    }
}
@keyframes unselect{
    from{
        border-bottom: 5px solid var(--primary);
    }
    to{
        border-bottom: 1px solid var(--primary);
    }
}