:root{
    --darktheme: #2B2B23;
    --mustardtheme: #C5D663;
}


.text-bold{
    font-weight: bold;
}
.text-underline{
    text-decoration: underline;
}
.text-uppercase{
    text-transform: uppercase;
}

.text-small{
    font-size: small;
}
.text-smaller{
    font-size: smaller;
}

.text-large{
    font-size:large;
}
.text-larger{
    font-size: larger;
}

.text-mustardtheme{
    color: var(--mustardtheme);
}
.bg-mustardtheme{
    background: var(--mustardtheme);
}
.bg-darktheme{
    background: var(--darktheme);
}

.btn-search:hover{
    background-color: rgba(255, 255, 255, 0.1);
    transition: .15s ease-in-out;
}

.btn-search{
    transition: .15s ease-in-out;
}

.bg-lightopacity{
    background: rgba(255, 255, 255, 0.623);
}

.text-lightopacity{
    color: rgba(255, 255, 255, 0.623);
}

body{
    background: var(--darktheme);
}

.cued_item{
    transition: .2s ease-in-out;
}

/* YOUTUBE PLAYER TOOL STARTS HERE */

.clip{
    border-radius: 0px;
    font-size: small;
    padding: 0px 5px;
    background-color: rgba(255, 255, 255, 0.214);
    border: none;
}

.clip_action_container{
    margin-right: 10px;
    background-color: rgba(255, 255, 255, 0.067);
    flex-wrap: wrap;
}

.clip_action_container .clip_action_btn{
    background-color: black;
    color: white;
    border: solid white .1px;
    font-size: small;
    opacity: .5;
}

.clip_action_container .clip_action_btn:hover{
    opacity: 1;
}

.clip_highlight{   
    background-color: rgb(255, 255, 255);
}

#player{
    width:100%;
    min-height: 450px
}

#error_msg{
    display: none;
}

.hide_decoy{
    display: none;
}

.player-buttons{
    width: 100%;
}

#start_input{
    border-radius: 10px;
    text-align: center;
    border: none;
    background: rgb(235, 235, 235);
}
#end_input{
    border-radius: 10px;
    text-align: center;
    border: none;
    background: rgb(235, 235, 235);
}
.player_buttons button{
    border-radius: 3px;
    border: none;
    box-shadow: 1px 1px var(--darktheme);
    background: rgba(255, 255, 255, 0.500);
    color:rgba(0, 0, 0, 0.679)
    /* margin-right: 50px; */
}
.player_buttons button:hover{
    background: rgba(255, 255, 255, 0.794);
    /* margin-right: 50px; */
}

.player_buttons2 button{
    border-radius: 3px;
    border: none;
    /* box-shadow: 1px 1px var(--darktheme); */
    background: rgba(104, 102, 102, 0.2);
    color:rgba(0, 0, 0, 0.679)
    /* margin-right: 50px; */
}
.player_buttons2 button:hover{
    background: rgba(104, 102, 102, 0.1);
    /* margin-right: 50px; */
}

.add-btn input{
    border: solid 2px var(--mustardtheme);
    border-radius: 10px;
    width: 80%;
    text-align: center;
    font-size: 15px;
}
.btn-theme{
    /* border: solid 2px var(--mustardtheme); */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.182);
    border: none;
    /* color: white; */
    padding:5px 15px
}
.btn-theme:hover{
    /* border: solid 2px var(--mustardtheme); */
    background-color: rgba(255, 255, 255, 0.3);
}

.list-container{
    /* border: dashed 1px var(--mustardtheme); */
    /* border: dashed 1px rgba(255, 255, 255, 0.158); */
    min-height: 100%;
}

.remove_btn{
    background: none;
    border: none;
    color: #c5d663a4;
    padding: 5px;
    margin-left: 10px;
    cursor: pointer;
}

.remove_btn:hover{
    color: var(--mustardtheme);
}
.actionbtn{
background: var(--mustardtheme);
padding:2px 4px;
margin-left: 7px;
margin-bottom: 7px;
border-radius:5px;
cursor: pointer;
color: var(--darktheme) !important;
text-decoration: none;
opacity: 0.7;
}

.actionbtn:hover{
    opacity: 1;
}

.otherbtn{
    /* background: var(--mustardtheme); */
    padding:2px 4px;
    margin-left: 7px;
    margin-bottom: 7px;
    border-radius:5px;
    cursor: pointer;
    color: var(--darktheme) !important;
    text-decoration: none;
    opacity: 0.7;
    border: solid 1px black;
    }
    
.otherbtn:hover{
    opacity: 1;
}

.otherbtn_active{
    background: yellow;
    opacity: 1;
}
.otherbtn_active:hover{
    background: yellow;
    opacity: .8;
}


#empty_list{
    
}

#local_data_select{
    padding: 5px;
    border: none;
    border-radius: 5px;
}

.footer{
    min-height: 100px;
    width: 100%;
    margin-top:0px;
    border-top:dashed #C5D663 3px; 
    min-height:50px;
    background: #ffffff72;
}


.footer {
    min-height: 100px;
    width: 100%;
    margin-top:20px;
    border-top:dashed #C5D663 1.5px; 
    /* border-top:dashed #ffffff 1.5px;  */
    min-height:50px;
    background: #ffffff72;
    padding: 10px 0;
}

.footer_links a{
    color: rgb(67, 35, 35);
    text-decoration: none;
    font-weight: 600;
    transition: .1s ease-in-out;
}

.footer_links a:hover{
    color: white;
    transition: .1s ease-in-out;
}
/* ENDOF YOUTUBE PLAYER TOOL */
/* ------------------------------------------------- */

/* MOVIES AND ENTERTAINMENT TOOL STARTS HERE */
.video_container{
    position: relative;
    height: 150px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 20px;
}
.img_container{
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    background-color: rgb(199, 199, 165);
}

.img_container img{
    min-height: 100%;
}

.overlay_caption{
    height: 100%;
    width: 100%;
    position: absolute;
    /* border: solid black; */
    background-color: #c5d6632e;
    transition: .2s ease-in-out;
}

.overlay_caption .caption_title{
    color: rgba(97, 50, 50);
    transition: .2s ease-in-out;
    background-color: rgba(255, 255, 255, 0.858);
    padding: 10px;
    border-radius: 20px;
}

.overlay_caption .caption_title a{
    color: rgba(97, 50, 50);
    text-decoration: none;
}

.overlay_caption:hover .caption_title{
    /* background-color: rgba(255, 255, 255, 0.51); */
    opacity: .6;
}
.overlay_caption:hover a{
    background-color: rgba(97, 50, 50, 0.822);
}
.overlay_caption:hover .caption_info{
    background-color: rgba(97, 50, 50, 0.822);
}
.overlay_caption:hover{
    background-color: #c5d6635b;
    transition: .2s ease-in-out;
}

.overlay_caption .watch_btn{
    text-decoration: none;
    padding: 10px;
    background-color: rgba(97, 50, 50, 0.308);
    color: white;
    border-radius: 5px;
}
.overlay_caption .watch_btn:hover{
    background-color: rgb(97, 50, 50);
}

.overlay_caption .caption_info{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    text-align: center;
    background-color: rgba(97, 50, 50, 0.600);
    color: white;
}

.overlay_caption .caption_info:hover{
    background-color: rgba(97, 50, 50);
}

.playing_video{
    background: rgba(255, 238, 0, 0.13);
    padding: 10px;
    border-radius: 20px;
    transition: .3s ease-in-out;
}
/* ENDOF MOVIES AND ENTERTAINMENT TOOL */
/* ------------------------------------------------- */


/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* background-color: rgba(0, 0, 0, 0.4); */
    background-color: rgba(255, 255, 255, 0.9);
  }
  
  .modal-content {
    /* background-color: #fefefe; */
    background-color:rgba(97, 50, 50, 1);
    /* background-color: #5f5e5e; */

    margin: 7% auto;
    padding: 20px;
    /* border: 1px solid #888; */
    width: 90%;
    min-height: 60%;
    border: none;    
  }
 
  .close {
    color: var(--mustardtheme);
    float: right;
    font-size: 28px;
    font-weight: bold;
    opacity: 0.8;
  }
  
  .close:hover,
  .close:focus {
    /* color: rgb(214, 15, 15); */
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
  }

  /* END MODAL */

/* ADD VIDEOS */
.field_container{
    margin-bottom: 20px;
}
.field_label{
    color: var();
    font-weight: bold;
}
.field_container input{
    background: var(--mustardtheme);
}
.field_container textarea{
    background: var(--mustardtheme);
}
.field_container select{
    background: var(--mustardtheme);
    /* scrollbar-color: transparent transparent;
    scrollbar-width: thin; */
}


/* MOVIES LIST */
.action_btn{
    background: var(--mustardtheme);
    padding: 2px 10px;
    border-radius:10px;
    color: black;
    cursor: pointer;
    opacity: .6;
    text-decoration: none;
}
.action_btn:hover{
    opacity: 1;
    color: black;
}


.link:hover{
    opacity: .7;
}