#grmt_mixing-table_widget-2{width: calc(100% - 18rem);margin: 0 0 0 18rem;padding: 0;}

#file-upload-form h2 {font-family: "Roboto", sans-serif;font-size: 26px;line-height: 1;color: #454cad;margin-bottom: 0;}
#file-upload-form p {font-family: "Roboto", sans-serif;font-size: 18px;color: #5f6982;}
#file-upload-form label {text-align: center;background: #fff;border-radius: 7px;transition: all .2s ease;user-select: none;width: 100%;padding:20px 0;}
#file-upload-form .uploader label:hover {border-color: #454cad;}
#file-upload-form .uploader label:hover.hover {border: 3px solid #454cad;box-shadow: inset 0 0 0 6px #eee;}
#file-upload-form .fa{font-size:30px !important;color:rgba(0,0,0,0.5);padding:10px;}
#file-upload-form{position:relative;width:100%;display:flex;justify-content: center;align-items: center;}
#file-upload-form input[type="file"] {display: none;}
#file-upload-form .btn {display: inline-block;background-image: linear-gradient(90deg, #844eff 0%, #d902f6 100%);;font-family: inherit;font-weight: 700;font-size: 14px;text-decoration: none;text-transform: initial;border-radius: .2rem;outline: none;padding: 1rem 0;margin:20px 0;color: #fff;transition: all 0.2s ease-in-out;box-sizing: border-box;border: none rgba(0, 0, 0, 0.5);cursor: pointer;}
#file-upload-form.hidden{display:none;}

#start {display:flex;flex-direction: column;background:rgba(0,0,0,0.1);padding:10px;align-items: center;}

#start i:not(.fa) {text-align: left;}

#grmt-dropzone.dragover{border:2px solid #844eff;background:rgba(25,25,255,0.1);}

#grmt-audio_layer{display:flex;flex-direction: row;justify-content: center;align-items: center;width:100%;}
#grmt-audio_layer .track_settings svg{fill:white;}
#grmt-audio_layer .volume_setting{width:100%;padding:0 5px;display:flex;height:100%;flex-direction: row;align-items: center;justify-content: center;}
#grmt-audio_layer .volume_setting div{height: 100%;display: flex;flex: 1;align-items: center;}
#grmt-audio_layer .volume_setting div svg{width: 100%;max-height:50%;}
#grmt-audio_layer .volume_setting input{height:5px;}
#grmt-audio_layer .audio_tracks{display:flex;flex-direction: column;justify-content: center;align-items: center;width:90%;}
#grmt-audio_layer .audio_settings{display:flex;flex-direction: column;justify-content: center;align-items: center;width:10%;height:154px;}
#grmt-audio_layer .audio_settings .track_settings{display:flex;flex-direction: column;justify-content: center;align-items: center;width:100%;height:60px;}
#grmt-audio_layer .audio_settings .track_settings input{width:65%;}

#grmt-video_wrapper{height:fit-content;position: relative;width: fit-content;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;background-color: black;max-height:calc(var(--vh, 1vh) * 100);}
#grmt-video_wrapper:has(video){height:calc(var(--vh, 1vh) * 40);}
#grmt-video_wrapper video{height: calc(100% - 204px);width:100vw;padding: 5px 5px 0 5px;max-height: calc((var(--vh, 1vh) * 100) - 204px));}
#grmt-video_wrapper .fullscreen, .grmt_close_tool{display: flex;height: 30px;width: 30px;position: absolute;top: 10px;padding: 0;right: 10px;margin: 0;border: 0;outline: 0;background: transparent;cursor:pointer;z-index: 2;}
#grmt-video_wrapper .fullscreen .icon{fill:white;display: flex;width: 100%;height: 100%;}
#grmt-video_wrapper .fullscreen .icon.hidden{display:none;}
.grmt_close_tool{left: 10px;right:unset;fill:#ffffff;}

.grmt-upload-errors{width:100%;padding:20px;background:#d84b4b;color:white;border-radius:10px;justify-content: center;align-items: center;}

.grmt-player{background:#c9c9c9;}

#grmt-mixing-table{margin: 0 auto;width: calc(100% - 2rem);display:flex;flex-direction: column;max-height:calc(var(--vh, 1vh) * 100);height:fit-content;}
#grmt-mixing-table:has(.uploader.hidden){display:none;}
#grmt-mixing-table:has(#grmt-video_wrapper){display:flex;}
#grmt-mixing-table .timeline{display: flex;width: 100%;height:140px;background:ghostwhite;flex-direction: column;position: relative;}
#grmt-mixing-table .is-single-player{position:absolute;left:0;}
#grmt-mixing-table .track{height:60px;width:100%;display: flex;left:0;position: absolute;overflow: hidden;}

.track_container{position:relative;}
.track_container > svg, .track.locked > svg{width:100%;height:100%;}

.select_a_track{width: fit-content;color: white;padding: 10px;background: #d84b4b;border-radius: 10px;margin: 10px auto;height:40px;}

#grmt-mixing-table .track.locked{top:20px;background:rgba(0,0,0,0.5);}
#grmt-mixing-table .track{top:80px;}
#grmt-mixing-table .timeline .markers{display:flex;width:100%;height:120px;position: relative;}
#grmt-mixing-table .timeline .times{z-index: 2;display: flex;width: 100%;height: 20px;position: relative;background: darkgrey;}
#grmt-mixing-table .timeline .listener{display:flex;height:140px;background:transparent;width:100%;position:absolute;top:0;left:0;z-index:10;}
#grmt-mixing-table .timeline .tracker{height:100%;background:red;width:1px;position:absolute;bottom:0;align-items: flex-start;padding:20px 0 0 0;justify-content: center;overflow: visible;z-index:1;display:none;}
#grmt-mixing-table .timeline .tracker .timing{display: none;padding: 5px;background: black;color: white;z-index: 9;position: relative;width: fit-content;}
#grmt-mixing-table .timeline .markers .marker{height:100%;background:grey;width:1px;position:absolute;top:0;display:flex;}
#grmt-mixing-table .timeline .times .time{position:absolute;top:0;transform: translateX(-50%);width:fit-content;color:white;}

.grmt-controls{background:black;width:100%;display: flex;flex-direction: row;justify-content: center;}
.grmt-controls button{cursor:pointer;margin:0;background:transparent;outline:none;box-shadow:none;border:none;height:50px;width:50px;padding:5px;}
.grmt-controls button > svg{fill: white;height:100%;width:100%;}
.grmt-controls button.grmt-hidden{display:none;}

.grmt-slider {display:flex;padding:1px 0;width: 100%;}
.grmt-slider .slider {-webkit-appearance: none;appearance: none;width: 100%;height: 6px;background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 3px, rgba(255,255,255,1) 3px, rgba(255,255,255,1) calc(100% - 3px), rgba(0,0,0,1) calc(100% - 3px));outline: none;margin: 3px 0;}
.grmt-slider .slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 10px;height: 10px;background: #844eff;border-radius:50%;cursor: pointer;}
.grmt-slider .slider::-moz-range-thumb {width: 10px;height: 10px;border-radius:50%;background: #844eff;cursor: pointer;}

.grmt-loader {border: 8px solid #f3f3f3;border-top: 8px solid #844eff;border-radius: 50%;width: 50px;height: 50px;animation: spin 1s linear infinite;margin:50px auto;}
.selectable .thumbnail_mood_wrapper button{background: transparent;border: 2px solid black;cursor: pointer;border-radius: 1rem;}

.show_matching_tool{display:flex;justify-content:space-between;align-items:center;cursor:pointer;background-size: 200% 200% !important;animation: gradient_background 5s linear infinite;padding: .4rem;background: linear-gradient(65deg,#fd1751 0%,#ff8082 90%);border: 0;border-radius: 1rem;color: white;max-width:10rem;max-height:2.5rem;}
.show_matching_tool > svg{fill:#ffffff;height:1.5rem;width:auto;}

.volume_setting{width:fit-content;display:flex;justify-content: space-between;align-items: center;}
.volume_setting input[type="range"]{cursor:pointer;-webkit-appearance:none;border-radius:.25rem;max-height:10px;background: linear-gradient(to right, #d9d9d9 0%, #d9d9d9 100%, #555555 100%, #555555 100%) no-repeat center;outline: none;}
.volume_setting input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:.6rem;height:1rem;background:#fafafa;position:relative;z-index:3;box-shadow:0 0 2px 0 rgba(0,0,0,0.3);}
.volume_setting > svg{width:30px;height:30px;fill:#fff;}

#file-upload-btn{max-width:300px;width:100%;}

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

@keyframes gradient_background {
    0%{background-position:10% 0}
    50%{background-position:91% 100%}
    100%{background-position:10% 0}
}