/* hello */
:root{
    --root-bg-color: black;
    --root-bg-color-secondary: hsla(250, 50%, 20%, 0.2);
    --root-bg-color-secondary-tewwo: hsla(250, 50%, 95%, 0.2);
    --root-color: white;
    --root-border-color: white;
    --root-bg-color-btn: rgba(50, 50, 50, 0.5);
    --root-bg-color-btn-hoover: rgb(50 50 50);
    --root-bg-color-btn-focus: rgb(50 50 50);
    --root-bg-color-img: white;
    --root-shadow-color-btn-opened: rgba(0, 250, 0, 0.5);
    --root-shadow-color-btn-cloded: rgba(250, 0, 0, 0.5);
    --root-shadow-color-img: rgb(50 100 50);
}
.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: hsla(100, 50%, 0%, 0.1);
    border-radius: 17px;
    border: 1px solid gray;
    font-size: x-small;
}

.toggle:after{
    content: '';
    text-align: center;
    text-justify: center;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: gray;
    top: 0px;
    left: 0px;
    transition: all 0.5s;
}
.checkbox:checked + .toggle::after {
        left : 20px; 
    }

 .checkbox:checked + .toggle {
        background-color: white;
 }

  .checkbox { 
        display : none;
    }

body {
    
    margin: 0px;
    padding: 0px;
    background-color: var(--root-bg-color, black);
    color: var(--root-color, white);

    #app {
	#root{	      
	    p {
		margin-left: 10px;
	    }
	    #root-controls{

		#toogle-root-controls{
		    display: flex;
		    justify-content: right;
		    align-content: center;
		    gap: 20px;
		    color: var(--root-color, white);
		    margin-bottom: 10px;
		    border-bottom: 1px solid var(--root-border-color, white);;
		    background-color:  var(--root-bg-color-secondary, black);
		    
		    #toogle-root-contols-btn{
			width: 25px;
			height: 25px;
			margin-right: 10px;
			align-self: center;
			border: 1px solid var(--root-border-color, white);;
			background-color: var(--root-bg-color-btn, black);
			color: var(--root-color, white);
			border-radius: 4px;
			
		    }
		    #theme-container{
			margin-right: auto;
			margin-left: 10px;
			align-self: center;
		    }
		    
		}
		#root-select-control{
		    display: flex;
		    gap: 15px;
		    justify-content: center;
		 
		    button{
			align-self: center;
			border: 1px solid var(--root-border-color, white);;
			background-color: var(--root-bg-color-btn, black);
			color: var(--root-color, white);;
			border-radius: 4px;
			font-size: larger;
		    }
		}
	    }
	    #inst-selector {
		#toogle-hist-control {
		    display: flex;
		    justify-content: right;
		    align-content: center;
		    gap: 20px;
		    color: var(--root-color, white);;
		    margin-bottom: 10px;
		    border-bottom: 1px solid var(--root-border-color, white);;
		    background-color: var(--root-bg-color-secondary, black);

		    button{
			width: 25px;
			height: 25px;
			margin-right: 10px;
			border: 1px solid var(--root-border-color, white);;
			background-color: var(--root-bg-color-btn, black);
			align-self: center;
			color: var(--root-color, white);;
			border-radius: 4px;

		    }
		}
		#inst-type-selector{
		    display: flex;
		    gap: 6px;
		    align-content: center;
		    justify-content: center;
		    height: 35px;
		    button{
			background-color: var(--root-bg-color-btn, black);
			/* color: #fff; */
			/* border: none; */
			/* border-radius: 10px; */
			/* box-shadow: 0px 1px 3px 2px rgb(90 90 90); */
			margin-top: 10px;
			margin-right: 6px;
			width: 70px;
			border: 1px solid var(--root-border-color, white);;
			background-color: var(--root-bg-color-btn, black);
			align-self: center;
			color: var(--root-color, white);;
			border-radius: 4px;

		    }
		} /* <- end  #inst-type-selector */
		#response-div{
		    height: 70;
		    #inst-result-list-container{
			#inst-result-list {
			    display: flex;
			    flex-direction: row;
			    list-style-type: none;
			    flex-wrap: wrap;
			    gap: 10px;
			    .card {
				.inst-link{
				    width: 86px;
				    height: 33px;
				    img{
					width: 78px;
					height: 28px;

				    }
				}
			    }
			}
		    }
		} /*  end  #response-div*/
		#response-inst-card{
		    display: flex;
		    width: 370px;
		    flex-flow: column;
		    align-items: center;
		    #inst-selected{
		
		    }
		    form{
			width: 360px;
			border-radius: 6px;
			#inst-selected{
			    padding: 5px;
			    display: flex;
			    justify-content: center;			 
			    img {
				/* originally the dimensions where width: 155px, height: 55px */
				background-color: var( --root-bg-color-img, white);;
				padding: 2px;
				width: 93px;
				height: 33px;
				border-radius: 10px;
				box-shadow: 0px 0px 3px 4px var(--root-shadow-color-img, rgb(50 100 50));
			    }
			} /* inst-selected */
			fieldset{
			    border-radius: 8px;
			    margin-top: 5px;
			    border-width: 0.5px;
			    box-shadow: 0px 2px 3px 2px rgb(150 100 100);
			    border-width: 0px;
			    #tf-container{
				margin: 10px 0px;
				background: linear-gradient(to bottom, rgb( 70 70 70 / 60%), rgb(150 150 150 / 30%));
				padding: 3px;
				border-radius: 10px;

			    }
			} /* end fieldset */
			label#time-amount-selector{
			    width: 93px;
			    display: inline-block;
			    
			}
			input#button-submit{
			    margin-top: 0px;
			    margin-left: 20px;
			    border-radius: 10px;
			}
		    }
		}
	    }
	    #response-inst-table-container{
		display: flex;
		table{
		    table-layout: fixed;
		    width: 100%;
		    border-collapse: collapse;
		    border: 2px solid var(--root-border-color, white);;
		    thead th:nth-child(1) {
			width: 19%;
		    }
		    thead th:nth-child(2) {
			width: 15%;
		    }
		    thead th:nth-child(3) {
			width: 19%;
		    }
		    thead th:nth-child(4) {
			width: 15%;
		    }
		    thead th:nth-child(5) {
			width: 32%;
		    }
		    td, th{
			text-align: center;
			padding: 4px;
			span.green{
			    color: green;
			}
			span.red{
			    color: red;
			}
		    }
		    
		    tfoot th {
			text-align: left;
		    }
		    thead,
		    tfoot {
			/* background: url(leopardskin.jpg); */
			color: var(--root-color, white);;
			text-shadow: 1px 1px 1px black;
		    }
		    
		    thead th, tfoot th, tfoot td {
			background: linear-gradient(to bottom, rgb( 0 0 70 / 10%), rgb(100 100 100 / 60%));
			border: 3px solid hsla(270, 100%, 20%, 0.1);
		    }
		    
		}
		
		
	    }
	}
    }
}

.opened{
    box-shadow: 0px 2px 2px 2px var(--root-shadow-color-btn-opened, green);
}
.closed{
    box-shadow: 0px 1px 1px 1px var(--root-shadow-color-btn-closed, red);
}