/*
	* Styleesheet of IT Management system
	Light blue: #353C6C;
	Dark blue: #2F3865;
	Purple: #6D31F9;
	Red: #FF2366;
	Yellow: #ffc800;
	Green: #02BC77;
*/

@import url("./styles/fonts.css");

/* --- Reset settings --- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
table { border-collapse: collapse; border-spacing: 0; }

* a {outline: none; border: none;}
* a:hover {outline: none; border: none;}
* a:active {outline: none; border: none;}
* a:focus {outline: none; border: none;}
* a:visited {outline: none; border: none;}
* img {outline: none; border: none;}
* img:hover {outline: none; border: none;}
* img:active {outline: none; border: none;}
* img:focus {outline: none; border: none;}
* img:visited {outline: none; border: none;}

/* --- Generall settings --- */
body {width: 100%; padding: 0px; margin: 0px auto; position: relative; font-family: Montserrat, sans-serif; color: #fff; background: #24262e; font-size: 16px;}

h1 {font-weight: 700; color: #fff; text-transform: uppercase; font-size: 28px; margin: 0.67em 0;}
h2 {font-weight: 700; color: #fff; text-transform: uppercase; font-size: 24px; margin: 0.83em 0;}
h3 {font-weight: 700; color: #fff; text-transform: uppercase; font-size: 20px; margin: 1.00em 0;}
h4 {font-weight: 700; color: #fff; text-transform: uppercase; font-size: 18px; margin: 1.33em 0;}
h5 {font-weight: 700; color: #fff; text-transform: uppercase; font-size: 16px; margin: 1.67em 0;}
h6 {font-weight: 700; color: #fff; text-transform: uppercase; font-size: 12px; margin: 2.33em 0;}
p{font-size: 1.1em; font-family: inherit; font-weight: 400; color: #fff; text-decoration:none; word-spacing: normal; text-align: justify; letter-spacing: 0; line-height: 1.2em;}
input, select, textarea{width: 100%; box-sizing: border-box; background: none; margin: 10px 0; padding: 5px; font: inherit; color-scheme: dark; line-height: 1.5em; border-width: 0 0 1px 0; border-color: #808080;}
textarea{resize: vertical;}
label{display: block; padding: 10px 0 0; color: #8e8e8e;}
:focus-visible{outline: none;}
input::placeholder, textarea::placeholder{font-family: inherit;}
input::-ms-input-placeholder , textarea::-ms-input-placeholder {font-family: inherit;}
input[type="date"]::-webkit-calendar-picker-indicator {padding: 5px;}

/* input::-ms-input-placeholder , textarea::-ms-input-placeholder {font-family: 'Montserrat', sans-serif;} */

/* --- Scrollbar Gradient Purple/Blue --- */
html{/* scrollbar firefox */ scrollbar-color: #00aeff #a68eff; }
::-webkit-scrollbar{width: 7px;}
::-webkit-scrollbar-track{border-radius: 10px; background-color: rgba(255, 255, 255, 0.1);}
::-webkit-scrollbar-thumb{background-image: linear-gradient(45deg, #6D31F9, #515977); border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;}

#printer{display: none;}

/* Loading spinner */
.loading-dual-ring{display: inline-block; width: 80px; height: 80px; margin: 50px auto;}
.loading-dual-ring:after{content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: loading-dual-ring 1.2s linear infinite; }
.hidden{display: none !important;}
@keyframes loading-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.errorText{color: #ff3535;}

/* --- Entrance --- */
#entrance{width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center;}
#entrance .wrapper{max-width: 260px; width: 96%;}
#entrance .title{font-size: 22px; text-align: center;}
#entrance .element{width: 100%; text-align: center; padding: 7px 0 9px; margin: 5px 0; letter-spacing: 0.5px;}
#entrance .input{line-height: 16px; font-size: 18px; outline: none; background: none; color: #fff; border: 1px solid white; border-radius: 25px; }
#entrance .button{background: #393956; padding: 12px 0 13px; font-weight: 500; font-size: 16px; cursor: pointer; color: #fff; border-radius: 25px; margin-top: 15px; }

#instantMG{display: flex; z-index: 1000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #24262e; justify-content: center; align-items: center;}
#instantMG p{color: #fff; font-size: 42px; text-align: center;}

/* --- Fixedbar --- */
#fixedbar{ background: #393956; color: #fff; display: flex; flex-flow: column; width: 16vw; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; border-right: 1px solid #515977;}
#fixedbar .container{width: 100%; margin: 15px 0; text-align: center; }
#fixedbar .avatar{width: 100px; height: auto; border-radius: 50%; margin: 15px auto 0; border: 6px solid #24262e;}
#fixedbar .name{font-weight: 200; text-transform: initial; margin: 5px 0;}
#fixedbar .position{margin: 5px 0; font-weight: 500;}
#fixedbar .list{list-style-type: none; text-align: left; padding: 0; margin: 0 auto; width: 100%;  }
#fixedbar .list .item{margin: 2px 0; padding: 0;}
#fixedbar .list .item .selected{color: #f58700;}
#fixedbar .list .item a{text-decoration: none; color: #fff; width:100%; display: inline-block; padding: 7px 20px 10px;  box-sizing: border-box; font-weight: 500; transition: 0.3s all;}
#fixedbar .list .item:hover > a{background: #f58700; /*  #515977 */}
#fixedbar .list .item.active > a{background: #f58700; /*  #515977 */}
#fixedbar .list .item .fa{color: #fff; padding-right: 15px;  width:20px; text-align: center;}
#fixedbar .submenu{display: none; margin: 0; padding: 0; list-style-type: none; background: #24262e;}
#fixedbar .active .submenu{display: block;}
#fixedbar .submenu .entry{padding: 0;}
#fixedbar .submenu .entry a{padding-left: 25px; font-size: 14px; padding: 4px 20px 7px; color: #aaa; transition: 0.3s all;}
#fixedbar .submenu .entry a:hover{color: #fff;}

/* Mobile menu */
#menuToggle{display: none; flex-direction: column; justify-content: center; position: absolute; -webkit-user-select: none; user-select: none; width: 40px; height: 40px; z-index: 11;}
#menuToggle .visuallyhidden{font-size: 0;}
#menuToggle input {display: flex; width: 40px; height: 40px; position: absolute; cursor: pointer; opacity: 0;box-sizing: content-box; resize: auto; padding: 0; margin: 0; top: 0; left: 0; z-index: 12;}
#menuToggle span {display: flex; width: 29px; height: 4px; margin-bottom: 5px; position: relative; background: #fff; border-radius: 3px; transform-origin: 5px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;}
#menuToggle input:checked ~ span {opacity: 1; transform: rotate(45deg) translate(-3px, -16px);}
#menuToggle input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2) {transform: rotate(-45deg) translate(0, 16px);}

/* --- Content --- */
#content{width: 80vw; min-height: 80vh; margin-left: 18vw; padding-top: calc(60px + 2vw); display: flex; flex-flow: row wrap; justify-content: center; align-items: center; position: relative;}
#content .topbar{position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px solid #515977; height: 60px; display: flex; align-items: center; justify-content: space-between;}
#content .topbar .topic{margin: 0;}
#content .topbar .exit{z-index: 12;}
#content .topbar .exit .fa{color: #fff; transition: 0.2s all;}
#content .topbar .exit .fa:hover{color: #ff3535;}
#content .elements{width: 100%; min-height: 80vh; align-self: flex-start; font-size: 1em;}

/* --- Filtering & Queries --- */
#filtering, #queryParam, #content .printContainer{display: flex; flex-flow: row wrap; align-items: center; gap: 50px; width: 100%; padding-bottom: 30px;}
#filtering .filter, #queryParam .refInput{background: #24262e;}
#filtering .filter, #queryParam .container, .printContainer .container{flex: 0 0 30%;}
#queryParam{align-items: flex-end;}
#queryParam .button{margin: 10px 0;}

	/* Dashboard */
		/* Tasks */
.dashBoxesRow{display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-gap: 20px; grid-auto-rows: 1fr; margin: 40px 0;}
.box{display: flex; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; padding: 22px; border-radius: 5px;}
.coloredBox.allTasks{background: #6D31F9;}
.coloredBox.inProcess{background: #edc229;}
.coloredBox.done{background: #02BC77;}
.coloredBox.expired{background: #FF2366;}
.coloredBox .icon{height: fit-content; background: rgba(256,256,256,0.3); padding: 10px 15px; border-radius: 10px;}
.coloredBox .icon img{height: 32px; width: auto; object-fit: contain;}
.coloredBox .text{margin-left: 10px; display: flex; flex-flow: column; justify-content: space-between;}
.box .text .title{text-transform: unset; font-weight: 400; font-size: 14px; margin: 0;}
.box .text .number{font-size: 28px; font-weight: 500; margin: 0;}

	/* Info */
.infoBox{background: #393956; position: relative;}
.infoBox .text .title{font-weight: 500; letter-spacing: 0.7px;}
.infoBox .text .title:after{content: ''; left: 0; top: auto; height: 1px; width: 100%; position: absolute; display: block; background: #6E769E; margin-top: 15px;}
.infoBox .text .number{margin-top: 35px;}

/* Content all */
#content .elements.grid{display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-auto-rows: 1fr; overflow: hidden;}
#content .elements .panel{background: #3a3d4a; border-radius: 2px; box-sizing: border-box; padding: 1.7rem; color: #fff; display: flex; flex-flow: column; max-height: 88vh;}
#content .elements.tasks .panel{max-height: 100%;}
#content .elements .panel .label{margin: 0 0 1rem 0; padding: 0; color: #cfcfcf; font-weight: 400; text-transform: initial;}
#content .elements .panel .buttons{display: flex; flex-flow: row wrap; gap: 0 50px;}

#content .elements .panel .buttons .validateError {color: #ff3535; flex: 0 0 100%; display: none;}

.buttons .formSubmit, .button{border: none; border-radius: 4px; padding: 14px 5px; text-transform: uppercase; font-weight: 400; font-size: 14px; text-align: center; transition: 0.2s all; cursor: pointer; font: inherit;}
#content .elements .panel .buttons .formSubmit{flex: 1 0 auto;}
#content .elements .panel .buttons .formSubmit.save{background: #179817; box-shadow: 1px 1px 3px 1px #213e21;}
#content .elements .panel .buttons .formSubmit.save:hover{background: #02BC77;}
#content .elements .panel .buttons .formSubmit.delete{background: #ff3535; box-shadow: 1px 1px 3px 1px #462525;}
#content .elements .panel .buttons .formSubmit.delete:hover{background: #ff5f5f;}
#content .elements p input{ width: 100%; text-align: left; border: none; outline: none; background: none; color: #fff; padding:0 5px;}
#content .elements p a{ text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; background: #1fcd34; color: #fff; width: 100%; padding: 12px 0 14px; display: block;}
#content .elements select{width: 100%;}
#content .elements select option{background: #24262e;}
select .disabled{color: #a9a9a9 !important;}

#content .list{list-style-type: none; margin: 10px 0; padding: 0; overflow-y: auto;}
#content .list .item{padding: 0; margin: 3px 0; width: 100%;}
#content .list .item span{text-decoration: none; color: #fff; background: #515977; display: block; padding: 10px 20px 11px; border-radius: 2px; transition: 0.2s all;}
#content .elements.role .list .item span{text-transform: capitalize;}
#content .list .item span:hover{background: #f58700; cursor: pointer; /* #667096 */}

#entSummary .panel .form{border: 0;}
#entSummary .panel .form input{border-radius: 0; position: relative;}
.form .input.tModUser, .form .input.mUser{-webkit-appearance: none; -moz-appearance: none;}

/* --- Finance --- */
#content .elements.finance{min-height: 68vh;}
#content .elements.finance .panel{max-height: 68vh;}
#content .elements.finance .panel .button.archive{color: #fff; background: #f58700;}
#content .elements.finance .panel .button.archive:hover{background: #ff991c;}
#content .total{width: 100%; display: flex; gap: 15px; position: relative; background: #02BC77; align-items: center; padding: 1.7rem; margin: 30px 0 0;}
#content .total .text{text-transform: capitalize; font-weight: 500; margin: 0;}
#content .total .line{flex: 1 0 auto; height: 2px; background: #fff;}
#content .total .amount{font-size: 1.5em; font-weight: 500; margin: 0;}

/* --- Reference --- */
#content .reference .panel{overflow-x: auto;}
.table{width: 100%; margin: 20px auto 20px 0; text-align: center;}
.table thead tr{background: #2e3345;}
.table thead th{padding: 10px; font-weight: 500;}
.table tbody tr{background: #515977;}
.table tbody tr td{padding: 10px; border-bottom: 1px solid #2e3345; font-size: 14px; transition: opacity 0.3s;}
.table tbody:hover > tr td{opacity: 0.4;}
.table tbody:hover > tr:hover td{background: #F7992B; color: #fff; text-shadow: none; opacity: 1.0;}
#content .elements.reference .panel{max-height: 100%;}

/* --- Response --- */
#response{position: fixed; top: 100px; left: -350px; padding: 6px 24px; background: #ccc; border-radius: 4px; color: #fff; box-shadow: 1px 1px 3px 1px #213e21; max-width: 220px; font-size: 17px; text-align: right; z-index: 1000; }
#response.success{ background: #179817; }
#response.error{ background: #F44336; }
#message p{padding: 7px 12px; margin: 0;}

/* --- Footer --- */

@media only screen and (max-width: 1200px) {
	#menuToggle{display: flex; align-items: center; top: 7px; left: 50%; transform: translateX(-50%);}
	#fixedbar{width: 45vw; transform: translateX(-200%); transition: transform 0.5s ease-in-out;}
	#fixedbar.active{transform: translateX(0);}
	#fixedbar .avatar{margin: 50px auto 0;}
	#content{width: 96vw; margin-left: 2vw;}
}

@media only screen and (max-width: 1080px) {
	#filtering, #queryParam, #content .printContainer{gap: 30px;}
	#filtering .filter, #queryParam .container, .printContainer .container{flex: 1 0 47%;}
}

@media only screen and (max-width: 568px) {
	#fixedbar{width: 100vw;}
	#menuToggle{left: 77%;}
}

@media print {
	@page {size: landscape}
	#fixedbar, #content .topbar .exit, button{display: none;}
	#content{width: 96vw; margin-left: 0;}
	#content .elements{min-height: auto;}
	table, th, td{border: 1px solid black; color: black;}
    tr{page-break-inside: avoid;}
}