@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");

/* Eliminate all default margins */
* {
    margin:0;
}

/* Page body and major layout sections */
body{
    font-family: Arial, Helvetica, sans-serif;
    color:navy;
}
header{
    height: 3rem;
    line-height: 3rem;
    background-color: lightblue;
}
nav{
    height: 2rem;
    line-height: 2rem;
    background-color: peachpuff;
    display:flex;
}

main{
    margin-bottom: 4rem;
    padding: 8px;
}

footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:2rem;
    line-height:2rem;
    background-color: lightblue;
}
header, nav, footer{
    padding: 0 1rem 0 1rem;
}
/* Links in the nav bar */
nav a{
    display: inline-block;
    height: 100%;
    padding: 0 20px 0 20px;
    text-decoration:none;
    border-right: solid 1px silver;
}
nav a:hover{
    background-color: brown;
    color: white;
}

/* Form container and form */
.form-container{
    display: flex;
    justify-content: center;
}

/* CSS click-to-edit rows */
table.list-rows{
    border-collapse:collapse;
}

table.list-rows td,
table.list-rows th{
    padding: 0.2rem;
    border: solid 1px silver;
    vertical-align: middle;
}
table.list-rows th{
    background-color: lightblue;
    text-align:center;
}

table.list-rows tr:hover {
    background-color: yellow;
}

table.list-rows tr td:nth-child(1) {
    text-align:center;
}
table.list-rows a {
    text-decoration:none;
    color:darkgrey;
    font-style: italic;
}
/* CSS for Add/Edit forms */
.form-container form legend{
    font-size: 1.1rem;
    font-weight: bold;
}
.form-container form fieldset{
    border:solid 1px silver;
    border-radius: 0.375rem;
}
.form-container form table tr td:nth-child(1){
    text-align:right;
}
.form-container form table tr:last-child td{
    padding-top:.5em;
}

/* Form controls */
input[type=text], select{
    border:solid silver 1px;
    padding: 0.2rem;
    border-radius: 0.375rem
}
input[type='reset'], input[type='submit'],button{
    border:outset 1px;
    border-radius: 0.375rem;
    padding: 0.375rem;
    color:white;
}
input[type='reset']:active, input[type='submit']:active{
    border:inset 1px;
}
input[type='reset']{
    background-color: #6c757d;
}
input[type='submit']{
    background-color: #0d6efd;
}

/* This is the confirmation box in form_edit_video.html */
#confirm-delete{
    display: none;
    width:fit-content;
    padding: 1em;
    margin: 1em auto;
    border: solid 1px red;
    text-align:center;
}

#confirm-delete button.cancel {
    background-color: darkgray
}
#confirm-delete button.caution{
    background-color: red
}

/* font-awesome character size and color */
.fa {
    font-size: 1.2rem;
    text-decoration: none;
    color: darkgray;
}
a.fa:hover{
    cursor: hand;
}

/* added by omar 26.03.2024 */

.slidecontainer {
    width: 100%; /* Width of the outside container */
  }
  
  /* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }
  
  /* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }
  
.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }