:root {
    --primary_color: #0c0e35;
    --secondary_color: #121552;
    --text_primary: #fefefe;
    --text_secondary: #2364a9;
    --button_color_ready: #1f4c79;
    --button_color_active: #0f81de;
    --button_color_on_air: #d61a0e;
    --healty_color: #27e83d;
    --warning_color: #f6f646;
    --critical_color: #fb1a1a;
    --active_color: #a2168d;
    --pink_color: #e105e1;
    --blue_color: #1383e6ab;
    --yellow_color: #FFFF00;
    --green_color: #107810;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--primary_color);
    color: var(--text_primary);
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.full_screen_loader{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    z-index: 11;
    transition: all 0.5s ease-in-out;
    background-color: var(--primary_color);
}

.loader_logo{
    width: 100px;
    height: 100px;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
}

.loader_div{
    position: relative;
    width: 100px;
    height: 5px;
    border-radius: 0.5rem;
    border: 0.05rem solid var(--text_primary);
    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    font-family: Arial, Helvetica, sans-serif;
    
}

.loader_bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--text_primary);
    border-radius: 0.5rem;
    transition: all 0.5s ease-in-out;
    transform-origin: left;
}

.loader_text{
    position: absolute;
    top:15px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text_primary);
    position: relative;
    width: 100%;
    height: 100%;
}



.container {
    width: 100%;
    height: 100%;
    display:flex;
    flex-direction: column;
    gap: 1rem;
}

.header_section {
    width: 100%;
    height: 7%;
    background-color: var(--primary_color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.logo_section {
    width: 8rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.logo_section img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.title_section {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.6rem;
    letter-spacing: 0.1rem;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

.user_section {
    width: max-content;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content:end;
    align-items: center;
    margin-right: 1rem;
    gap: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}

.nav_icon{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--secondary_color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.nav_icon:hover{
    
    color: var(--button_color_active);
}

.user_name{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}

.user_name p:first-child{
    color: var(--text_primary);
    font-size: 0.9rem;
    font-weight: 300;
    text-align: right;
}
.user_name p:last-child{
    font-size: 0.8rem;
    color: var(--text_secondary);
    text-align: right;

}

.user_icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--secondary_color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.playout_and_asset_container {
    width: 100%;
    height: 78%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap:0.5rem;
    overflow: hidden;
}

.playout_section {
    width: 47%;
    height: 100%;
    display:flex;
    flex-direction: column;
    border-radius: 1rem;
    background-color: var(--secondary_color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

}

.asset_section {
    width: 47%;
    height: 100%;
    border-radius: 1rem;
   background-color: var(--secondary_color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    overflow: hidden;
}

.current_status_section {
    width: 90%;
    height: 15%;
    backdrop-filter: blur(20px);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 0 3rem;
    gap: 2rem;
    font-family: Arial, Helvetica, sans-serif;
}

/* playout section header */
.playout_header{
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.playout_title{
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text_primary);
    text-transform: uppercase;
}
.playout_button_group{
    width: max-content;
    height: 100%;
    font-size: 0.6rem;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.playlist_button{
    width: max-content;
    height: 1.5rem;
    display: flex;
    font-weight: 600;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background-color: var(--button_color_ready);
    border-radius: 0.3rem;
    gap: 0.2rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    user-select: none;
}

.edit_playlist_btn{
    background-color: var(--pink_color);
}
.edit_playlist_btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 32px 0 var(--pink_color);
}

.play_pause_button{
    background-color: var(--green_color);
}
.play_pause_button:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 32px 0 var(--green_color);
}

.skip_button{
    background-color: var(--button_color_active);
}
.skip_button:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 32px 0 var(--button_color_active);
}

.delete_all_button{
    background-color: var(--button_color_on_air);
}
.delete_all_button:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 32px 0 var(--button_color_on_air);
}

/*playlist style*/


.playout_content{
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    user-select: none;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.playlist_table{
    width: 95%;
    height: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    color: var(--text_primary);
    display: block;
    table-layout: fixed;
    overflow-y: auto;
    position: relative;
}

.playlist_table_header{
    display: table;
    width: 100%;
    table-layout: fixed;
    background-color: var(--primary_color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.playlist_table_header th{
    padding: 0.5rem;
    text-align: left;
    position: sticky;
    top: 0;
}
.playlist_table_body{
    display: table;
    width: 100%;
    table-layout: fixed;
}

.playlist_table_body tr{
    width: 100%;
    height: 2rem;
    max-height: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.playlist_table_body tr td{
    padding: 0.5rem;
    text-align: left;
}

.playlist_table_header th:nth-child(3),
.playlist_table_body tr td:nth-child(3){
    width :40%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.playlist_table_header th:nth-child(1),
.playlist_table_body tr td:nth-child(1){
    width :2rem;
    text-align: center;
}

.playlist_on_air{
    background-color: var(--active_color);
    position: relative;
    transition: all 0.5s ease;
}


.on_air_progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 70%;
    background-color: var(--healty_color);
    border-radius: 0.3rem;
    box-shadow: 0 0 10px 0 var(--healty_color);
    z-index: 1;
    pointer-events: none;
    transition: width 0.5s ease;
}

.playlist_ready{
    background-color: var(--button_color_active);
}

/* asset section */

.asset_header{
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap:0.1rem;
    overflow: hidden;
}

.asset_tab{
    font-size: 0.8rem;
    width: 17%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--primary_color);
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.asset_tab.active{
    background-color: var(--button_color_ready);
}
.asset_tab:hover{
    background-color: var(--button_color_ready);
}

.asset_content{
    width: 100%;
    height: 92%;
    overflow: hidden;
}

.asset_content iframe{
    width: 100%;
    height: 100%;
    border: none;
}

.file_manager_container{
    width: 100%;
    height: 100%;
    background-color: var(--secondary_color);
}

.file_manager_header{
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap:0.1rem;
    overflow: visible;
    position: relative;
    z-index: 100;
    padding: 0 2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fm_button,
.fm_button * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fm_button:hover{
    transition: all 0.3s ease-in-out;
    background-color: var(--primary_color);
}

.fm_button.active{
    background-color: var(--primary_color);
}

.storage_indicator{
    width: 5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.57rem;
    color: var(--text_primary);
    background-color: var(--primary_color);
    border-radius: 0.3rem;
    position: relative;
    overflow: hidden;
}

.storage_bar{
    width: 2rem;
    height:100%;
    background-color: var(--green_color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.storage_text{
    user-select: none;
    z-index: 1;
}

.file_manager_content{
    width: 100%;
    height: 92%;
    overflow: hidden;
}

.fm_table{
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    color: var(--text_primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fm_table_header{
    display: table;
    width: 100%;
    table-layout: fixed;
    background-color: var(--primary_color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fm_table_header th{
    padding: 0.5rem;
    text-align: left;
    position: sticky;
    top: 0;
}

.fm_table_body{
    display: block;
    width: 100%;
    flex: 1;
    overflow-y: auto;
}

.fm_table_body::-webkit-scrollbar{
    width: 0.5rem;
}

.fm_table_body::-webkit-scrollbar-track{
    background-color: var(--secondary_color);
}

.fm_table_body::-webkit-scrollbar-thumb{
    background-color: var(--primary_color);
}

.fm_table_body::-webkit-scrollbar-thumb:hover{
    background-color: var(--primary_color);
}

.fm_table_body tr{
    display: table;
    width: 100%;
    table-layout: fixed;
    height: 2rem;
    max-height: 2rem;
    min-height: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.fm_table_body tr:hover{
    background-color: var(--primary_color);
}

.fm_table_body tr td{
    padding: 0.5rem;
    text-align: left;
}

.fm_table_header th:nth-child(1),
.fm_table_body tr td:nth-child(1){
    width :5%;
    text-align: center;
}

.fm_table_header th:nth-child(2),
.fm_table_body tr td:nth-child(2){
    width :40%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fm_table_header th:nth-child(3),
.fm_table_body tr td:nth-child(3){
    width :15%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fm_table_header th:nth-child(4),
.fm_table_body tr td:nth-child(4){
    width :8%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fm_table_header th:nth-child(5),
.fm_table_body tr td:nth-child(5){
    width :17%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;  
}

.fm_table_body tr td:nth-child(6){
    width :max-content;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;  
}

.fm_table_body tr td i{
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text_primary);
    transition: all 0.3s ease-in-out;
}

.fm_table_body tr td i:hover{
    color: var(--danger_color);
    transform: scale(1.2);
}

/* alert dialog style */

.alert_dialog{
    width:100%;
    height:100%;
    background-color: rgba(5, 4, 32, 0.8);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

.alert_dialog.hidden{
    display: none;
}

.alert_dialog i{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--danger_color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text_primary);
    font-size: 3rem;
}

.alert_dialog p{
    font-size: 1.2rem;
    color: var(--text_primary);
    font-family: Arial, Helvetica, sans-serif;
}

.alert_buttons{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width : 100%;
    height: 2rem;
}

.alert_button{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width : 8rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    background-color: var(--primary_color);
    color: var(--text_primary);
    border-radius: 0.3rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: none;
    outline: none;
}

.alert_button:hover{
    background-color: var(--button_color_ready);
    transform: translateY(-5px);
}

.alert_ok_button{
    background-color: var(--button_color_on_air);
}

.alert_ok_button:hover{
    background-color: var(--button_color_on_air);
    transform: translateY(-5px);
}

.alert_cancel_button{
    background-color: var(--button_color_ready);
    
}

.alert_cancel_button:hover{
    background-color: var(--button_color_ready);
    transform: translateY(-5px);
}

.alert_text{
    text-align: center;
    line-height: 2rem;
}

.dialog_request{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.dialog_response{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.dialog_response.hidden{
    display: none;
}

.dialog_request.hidden{
    display: none;
}
.dialog_response i{
    font-size: 1.5rem;
    color: var(--secondary_color);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--green_color);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* edit dialog */
.edit_file_dialog{
    width:100%;
    height:100%;
    background-color: rgba(5, 4, 32, 0.8);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

.edit_file_dialog.hidden{
    display: none;
}

.edit_file_dialog_header{
    width: 100%;
    height: 3rem;
    min-height: 3rem;
    display: flex;
    background-color: var(--primary_color);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.edit_file_dialog_header span{
    font-size: 1rem;
    color: var(--text_primary);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
}

.edit_file_dialog_content{
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    gap: 1rem;
}
.edit_file_dialog_content::-webkit-scrollbar{
    width: 0.5rem;
}
.edit_file_dialog_content::-webkit-scrollbar-track{
    background-color: var(--secondary_color);
}

.edit_file_dialog_content::-webkit-scrollbar-thumb{
    background-color: var(--button_color_ready);
    border-radius: 0.5rem;
}

.edit_file_dialog_content > div{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
}

.edit_file_dialog_input label{
    font-size: 1rem;
    color: var(--text_primary);
    font-family: Arial, Helvetica, sans-serif;
    outline: none;
    color: var(--text_primary);
    background-color: var(--primary_color);
}

.edit_file_dialog_content input[type="text"]{
    width: 100%;
    height: 3rem;
    padding: 0.5rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(248, 248, 248, 0.2);
    outline: none;
    color: var(--text_primary);
    background-color: var(--primary_color);
}

.edit_file_dialog_input_details{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
}

.edit_file_dialog_content textarea{
    width: 100%;
    height: 15rem;
    padding: 0.5rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(248, 248, 248, 0.2);
    outline: none;
    color: var(--text_primary);
    background-color: var(--primary_color);
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 400;
}
    
.edit_file_dialog_content textarea::-webkit-scrollbar{
    width: 0.5rem;
}

.edit_file_dialog_content textarea::-webkit-scrollbar-track{
    background-color: var(--primary_color);
}

.edit_file_dialog_content textarea::-webkit-scrollbar-thumb{
    background-color: var(--button_color_ready);
    border-radius: 0.5rem;
}

.edit_file_dialog_footer{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width : 100%;
    height: 20%;
}

.edit_file_dialog_content > .edit_file_dialog_input_thumbnail{
    width:80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    height: max-content;
}
.edit_save_btn{
    background-color: var(--green_color);
}
.edit_save_btn:hover{
    background-color: var(--green_color);
    transform: translateY(-5px);
}
.thumbnail_preview_and_upload{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 1rem;
    width: 100%;
}

.image_preview{
    position:relative;
    width: 50%;
    height: 13rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(248, 248, 248, 0.2);
    outline: none;
    color: var(--text_primary);
    background-color: var(--primary_color);
    transition: all 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
}

.image_preview i{
    font-size: 2rem;
    color: var(--text_primary);
    transition: all 0.3s ease-in-out;
}

.upload_thumbnail_button{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 50%;
    height: 13rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(248, 248, 248, 0.2);
    outline: none;
    color: var(--text_primary);
    background-color: var(--primary_color);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overflow: hidden;

}

.upload_thumbnail_button:hover{
    color:var(--button_color_active);
    border-color: var(--button_color_active);
}

.upload_thumbnail_button i{
    font-size: 2rem;
    color: var(--text_primary);
    transition: all 0.3s ease-in-out;
}

.upload_thumbnail_button span:nth-child(2){
    font-size: 1.2rem;
    color: var(--text_primary);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: center;
}

.upload_thumbnail_button span:nth-child(3){
    font-size: 0.7rem;
    color: var(--button_color_ready);
    font-family: Arial, Helvetica, sans-serif;
    
}

.drop_zone{
    border: 2px dashed var(--text_primary);
    background-color: var(--bg_primary);
    transition: all 0.3s ease-in-out;
}

.drop_zone.dragover{
    border-color: var(--button_color_active);
    background-color: var(--button_color_ready);
}



.drop_zone.dragover i{
    font-size: 2rem;
    color: var(--button_color_active);
}

/* upload option */

.file_manger_upload_button{
    position: relative;
    overflow: visible;
    cursor: pointer;
    z-index: 10;
    gap: 0.5rem;
}

.upload_options{
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: max-content;
    background-color: var(--primary_color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    visibility: visible;
    gap: 0.1rem;
    border-radius: 0.3rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.upload_options.hidden{
    display: none;
}


.upload_option_item{
    width: 100%;
    height: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.upload_option_item:last-child{
    border-bottom: none;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}


.upload_option_item:hover{
    background-color: var(--button_color_ready);
}


.upload_chevron{
    transition: all 0.3s ease-in-out;
}

.upload_chevron.active{
    transition: all 0.3s ease-in-out;
    transform: rotate(180deg);
}

.upload_progress{
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color:var(--green_color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease-in-out;
    border-radius: 0.3rem;
    z-index: -1;
}

/* loading */

.loading_animation{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.loading_animation i{
    font-size: 2rem;
    color: var(--text_primary);
    transition: all 0.3s ease-in-out;
}

.edit-mode{
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    color: var(--text_primary);
    background-color: var(--secondary_color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 5px;
    font-size: 0.8rem;
}

.edit-mode:hover{
    color: var(--button_color_active);

}


/* responsive design */
@media (max-width: 1368px) {
    .header_section{
        margin-top: 1rem;
    }
   .logo_section{
       width: 6rem;
       height: 3rem;
   }
   .playout_section,.asset_section{
       border-radius: 0.5rem;
       font-size: 0.8rem;
   }
    
}