@charset "utf-8";
@import url("fontawesome-free/css/fontawesome-all.min.css");
@import url("framework.css");


/* Header
--------------------------------------------------------------------------------------------------------------- */


#header #logo{margin:22px 0 0 0;}


/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:100px 0 140px;}

#pageintro article, #pageintro article p{display:block; max-width:75%; margin:0 auto; text-align:center;}
#pageintro article p{max-width:65%; line-height:2rem;}
#pageintro .heading{margin-bottom:20px; font-size:4rem;}
#pageintro footer{margin-top:50px;}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:80px 0;}

/* Content */
.new-title{color: white;font-size: 30px;font-weight: bold;}

.sectiontitle{display:block; max-width:55%; margin:0 auto 80px; text-align:center;}
.sectiontitle *{margin:0;}

.elements-three li, .elements-four li{margin-bottom:50px;}
.elements-three li:nth-last-child(-n+3), .elements-four li:nth-last-child(-n+4){margin-bottom:0;}
.elements-three li:nth-child(3n+1), .elements-four li:nth-child(4n+1){margin-left:0; clear:left;}
.elements article{display:block; padding:30px 15px; border-radius:50px 0; text-align:center;}
.elements article *{margin:0 0 15px 0; padding:0; line-height:1;}
.elements article i{width:60px; height:60px; line-height:60px; margin-bottom:30px; font-size:1.6rem; text-align:center; border-radius:50%;}
.elements article .heading{font-size:1.2rem; font-weight:700;}
.elements article p{margin:0; line-height:normal;}

/* Shout */
.shout figure{display:block; max-width:546px;}
.shout figure figcaption{display:block; position:relative;}
.shout figure figcaption a{display:block; position:relative; padding:15px; border:solid; border-width:0 1px 1px 1px;}
.shout figure figcaption a::after{position:absolute; top:12px; right:15px; width:30px; height:30px; line-height:30px; font-family:"Font Awesome\ 5 Free"; font-weight:900; content:"\f105";/* fa-angle-right */ text-align:center; border-radius:50%;}

/* Team Members */
.team li:last-child{margin-bottom:0;}
.team figure{display:block; text-align:center;}
.team figure *{margin:0; padding:0;}
.team figure figcaption{padding:20px 10px; line-height:1; border:solid; border-width:0 1px 1px 1px;}
.team figure strong{display:block; margin-bottom:8px; font-size:1.4rem; font-weight:400;}
.team figure em{display:block; font-style:normal; font-size:.8rem;}

/* info content */
#testimonials article{text-align:center;}
#testimonials article *{margin:0; padding:0;}
#testimonials article figure{display:inline-block; margin-bottom:20px;}
#testimonials article figure img{float:left; margin-right:15px; border-radius:50%;}
#testimonials article figure figcaption{float:left; margin-top:30px; font-size:1.4rem; text-align:left;}
#testimonials article figure figcaption .heading{font-size:1.4rem;}
#testimonials article figure figcaption em{display:block; margin-top:-5px; font-size:.8rem; font-style:normal;}
#testimonials article blockquote{margin-bottom:20px; padding:20px; border-radius:25px 0;}
#testimonials article blockquote::before{top:15px; left:15px; font-size:30px; line-height:30px;}

/* Latest */
#latest > li:last-child{margin-bottom:0;}
#latest article .meta{display:block; margin:0 0 15px 0; padding:5px 10px;}
#latest article .meta li{display:block; float:left; width:50%; font-size:.8rem;}
#latest article .meta li:last-child{text-align:right;}
#latest article .meta li i{margin-right:5px;}
#latest article .excerpt{display:block; max-width:85%; margin:0 auto; padding:15px 0 15px 15px; border-left:1px solid;}
#latest article .excerpt time{display:block; margin-bottom:8px; text-transform:uppercase; font-size:.8rem; font-style:normal; line-height:1;}
#latest article .excerpt .heading{margin:0; padding:0; font-size:1.2rem;}


/* Sidebar */

.sidebar .sdb_holder{margin-bottom:50px;}
.sidebar .sdb_holder:last-child{margin-bottom:0;}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}

/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:10px; line-height:10px;}

/* Top Navigation */
#mainav ul{text-transform:uppercase;}
#mainav ul ul{position:absolute; width:180px; text-transform:none; z-index:9999;}
#mainav ul ul ul{left:180px; top:0;}
#mainav li{display:inline-block; position:relative; margin:0 15px 0 0; padding:0;}
#mainav li:last-child{margin-right:0;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:30px 0;}
#mainav li li a{border:solid; border-width:0 0 1px 0;}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:35px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

#mainav form{display:none; width:100%; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:none;}
#mainav form select option{margin:5px; padding:0; border:none;}

/* Breadcrumb */
#breadcrumb{padding:4px 0 2px;}
#breadcrumb ul{margin:0; padding:0; list-style:none; text-transform:uppercase;}
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}
#breadcrumb li a::after{top:4px; right:0; content:"\f0da";}
#breadcrumb li:last-child a{margin:0; padding:0;}
#breadcrumb li:last-child a::after{display:none;}
#breadcrumb .heading{margin:0; font-size:2rem;}

/* Sidebar Navigation */
.sidebar nav{display:block; width:100%;}
.sidebar nav li{margin:0 0 3px 0; padding:0;}
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
.sidebar nav a::after{top:10px; left:5px; content:"\f0da";}
.sidebar nav ul ul a{padding-left:35px;}
.sidebar nav ul ul a::after{left:25px;}
.sidebar nav ul ul ul a{padding-left:55px;}
.sidebar nav ul ul ul a::after{left:45px;}

/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Colors
--------------------------------------------------------------------------------------------------------------- */
body{color:#A5A6AA; background-color:#282E39;}
a{color:black;}
a:active, a:focus{background:transparent !important;}
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#97A9BD !important;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay.light::after{background-color:rgba(151,169,189,.7);/* #97A9BD */}

.gradient{color:#474747; background:linear-gradient(to bottom, #F4F4F4 55%, #FFFFFF 50%, #FFFFFF 100%);}/* Overlap dark to make a hard transition */
@media screen and (max-width:750px){/* Only the colours height has been changed */
	.gradient{background:linear-gradient(to bottom, #F4F4F4 24%, #FFFFFF 19%, #FFFFFF 100%);}
}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#97A9BD; border-color:#97A9BD;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

.imgover:hover::before{background-color:rgba(151,169,189,.5);/* #97A9BD */}
.imgover, .imgover:hover::after{color:#FFFFFF;}

.logoname img {display: block;max-width: 20%;height: auto;cursor: pointer;margin-bottom: 25px;}
@media (max-width: 1024px){.logoname img {max-width: 17%;}}
@media (max-width: 768px){.logoname img {max-width: 15%;}}
@media (max-width: 480px){.logoname img {max-width: 12;}}


/* Rows */
.row1{color:#FFFFFF; background-color:#000000;}
.row2{color:#474747; background: linear-gradient(180deg, #4a78a6, #6b9ccd, #8fbbe5);}
.row3{color:#474747; background: linear-gradient(180deg, #4a78a6, #6b9ccd, #8fbbe5);}
.row4{color:#A5A6AA; background-color:#000000;}
.row5, .row5 a{color:#A5A6AA; background: linear-gradient(180deg, #2e3b4e, #3c4f64, #566b82);
}
.coloured{color:#FFFFFF; background-color:#97A9BD;}


/* Header */
#header #logo a{color:inherit;}


/* Page Intro */
#pageintro{color:#FFFFFF;}


/* Content Area */
.elements article{color:#474747; background-color:#FFFFFF; box-shadow:0px 0px 15px rgba(0,0,0,.3);}
.elements article:hover{color:#FFFFFF; background-color:#97A9BD;}/* Default */
.elements article a i{color:#FFFFFF; background-color:#97A9BD;}/* Default */
.elements article:hover a i{color:#97A9BD; background-color:#FFFFFF;}/* Default */

.shout figure figcaption a{color:inherit; background-color:inherit; border-color:#D7D7D7;}
.shout figure:hover figcaption a, .shout figure figcaption a::after{color:#FFFFFF; background-color:#97A9BD; border-color:#97A9BD;}
.shout figure:hover figcaption a::after{color:#97A9BD; background-color:#FFFFFF;}

.team figure figcaption{color:#474747; background-color:#FFFFFF; border-color:#D7D7D7;}

#testimonials article blockquote{color:#474747; background-color:#FFFFFF;}
#testimonials article blockquote::before{color:rgba(0,0,0,.05);}
#testimonials article blockquote::after{border-top-color:#FFFFFF;}

#latest article .meta, #latest article .meta *{color:#FFFFFF; background-color:#282E39;}
#latest article .excerpt{border-color:#D7D7D7;}

/* Footer
--------------------------------------------------------------------------------------------------------------- */

#footer{display:flex;justify-content:center;align-items:center;gap:10px;padding:30px 0;flex-wrap:wrap;text-align:center;}
#footer .one_quarter{flex:0 0 auto;display:flex;justify-content:center;align-items:center;margin:0;}
#footer .logosomos{display:flex;justify-content:center;align-items:flex-start;margin-top:40px;}
#footer .logosomos span{font-size:70px;font-weight:bold;color:#FFF;font-family:'Poppins',sans-serif;margin:0;}
#footer img{max-width:180px;height:auto;margin:0;}
#footer .one_quarter img[src*="tkm_logo.png"]{max-width:250px;}
@media(max-width:768px){#footer{flex-direction:column;gap:10px;}
#footer .logosomos span{font-size:45px;}
#footer img{max-width:120px;}
#footer .one_quarter img[src*="tkm_logo.png"]{max-width:200px;}}



/* Navigation
--------------------------------------------------------------------------------------------------------------- */
#mainav li a{color:inherit;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#97A9BD; background-color:inherit;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(151,169,189,.9); border-color:rgba(151,169,189,.5);/* #97A9BD */}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#97A9BD;}
#mainav form select{color:#474747; background-color:#FFFFFF;}




#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:#97A9BD;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#97A9BD;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#97A9BD;}

#backtotop{color:#FFFFFF; background-color:#97A9BD;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1140px){
	.hoc{max-width:1140px;}
}

@media screen and (min-width:978px) and (max-width:1140px){
	.hoc{max-width:95%;}
}


/* Mobile
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
.hoc{max-width:90%;}

#header{padding:30px 0;}
#header #logo{margin-top:0;}

#mainav ul{display:none;}
#mainav form{display:block; margin-top:2px;}

#comments input[type="reset"]{margin-top:10px;}
#script input[type="reset"]{margin-top:10px;}
.pagination li{display:inline-block; margin:0 5px 5px 0;}

#copyright p:first-of-type{margin-bottom:10px;}}

@media screen and (max-width:750px){
.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
.fl_left, .fl_right{display:block; float:none;}
.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
.one_half, .one_third, .two_third, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0;}

#header{text-align:center;}
#header #logo{margin:0 0 15px 0;}

#pageintro article, #pageintro article p{max-width:none;}
#pageintro .heading{font-size:2rem;}

.sectiontitle{max-width:none;}
.shout figure, .team li, #latest > li{margin:0 auto 50px;}
.team li, #latest li{max-width:348px;}/* Restrict the width to the one_third grid element */
.elements-three li:nth-last-child(-n+3), .elements-four li:nth-last-child(-n+4){margin-bottom:50px;}
.elements-three li:last-child, .elements-four li:last-child, .shout figure:last-child{margin-bottom:0;}

#footer{padding-bottom:50px;}/* Not needed - just looks better */
#footer .latestimg > li, #footer .latestimg > li:nth-last-child(-n+3){display:inline-block; float:none; width:auto; margin:0 5% 5% 0;}
#footer .latestimg > li:last-child{margin-bottom:0;}}
#footer .latestimg > li img{width:auto;}

@media screen and (min-width:451px) and (max-width:900px){
.pr-charts .pr-chart-ctrl{width:50%; margin-bottom:50px;}
.pr-charts .pr-chart-ctrl:nth-child(n+3){margin-bottom:0;}}

@media screen and (max-width:450px){
.pr-charts .pr-chart-ctrl{width:100%; margin-bottom:50px;}
.pr-charts .pr-chart-ctrl:last-child{margin-bottom:0;}

#testimonials article figure img{float:none; margin:0 0 20px 0;}
#testimonials article figure figcaption{float:none; margin:0; text-align:center;}}


/* Others
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
.scrollable table{margin:0; padding:0; white-space:nowrap;}

.inline li{display:block; margin-bottom:10px;}
.pushright li{margin-right:0;}

.font-x2{font-size:1.6rem;}
.font-x3{font-size:1.8rem;}}
html {scroll-behavior: smooth;}

.redtext {color: red; font-weight: bold;}
.bluetext {color: blue; font-weight: bold;}


/* Zoom Elements
--------------------------------------------------------------------------------------------------------------- */

.zoom-in {animation: zoomEffect 5s forwards;top: 20px;}

@keyframes zoomEffect {from {transform: scale(1);}to {transform: scale(2.5);}}

#gif {mix-blend-mode: multiply;}
.enlargeable-image {width: 200px; height: 200px; cursor: pointer; transition: transform 0.3s ease; object-fit: cover; border-radius: 5px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.enlargeable-image:hover { transform: scale(1.2); box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); z-index: 1;}


/* Lector/Search/Status
--------------------------------------------------------------------------------------------------------------- */

.container-flex{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;gap:20px;padding:20px;background-color:#f0f4f8;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.1);position:relative;background-image:url('https://www.transparenttextures.com/patterns/asfalt-dark.png');background-repeat:repeat;background-size:auto;}
.container-flex::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.1);pointer-events:none;}
.file-selection{display:flex;align-items:center;background-color:#fff;border:1px solid #ccc;border-radius:5px;padding:4px 6px;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.file-selection select{border:none;outline:none;padding:2px;font-size:14px;width:240px;}
.search-box{display:flex;align-items:center;background-color:#ffffff;border:1px solid #ccc;border-radius:5px;padding:4px 6px;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.excel-container{width:100%;margin:20px auto;max-height:500px;overflow-y:auto;overflow-x:auto;background-color:#f4f4f4;padding:20px;border:none;border-radius:15px;box-shadow:0 6px 12px rgba(0,0,0,0.15);font-family:'Arial',sans-serif;font-size:15px;color:#333;font-weight:bold;position:relative;}
.table-wrapper{overflow-x:auto;width:100%;}
table{width:100%;border-collapse:collapse;}
th,td{padding:12px 15px;border:1px solid #ddd;text-align:left;}
th{background-color:#007BFF;color:white;font-weight:bold;}
tr:nth-child(even){background-color:#f9f9f9;}
tr:hover{background-color:#f1f1f1;}
td{background-color:#fff;font-size:14px;color:#333;}
tr:nth-child(odd) td{background-color:#f4f4f4;}
.highlight{background-color:yellow;font-weight:bold;}
.not-found{color:red;text-align:center;}
@media(max-width:600px){.excel-container{padding:10px;}table{font-size:12px;}th,td{padding:8px 10px;}}


/* Menu-index
--------------------------------------------------------------------------------------------------------------- */
#menu-index>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
.list-index {background:linear-gradient(180deg,rgba(30,60,90,0.95),rgba(37,69,110,0.9),rgba(50,80,120,0.95));border-radius:8px;padding:15px;box-shadow:0 4px 8px rgba(0,0,0,0.3);text-align:start;min-width:250px}
.list-index h2{margin-bottom:10px;font-size:18px;color:white;border-bottom:2px solid white;padding-bottom:5px;text-align:center}
.list-index ul li a{text-decoration:none;color:white;font-weight:bold}
.list-index ul li span{color:white}@media(max-width:768px){#menu-index>div{flex-direction:column;align-items:center}
.list-index {width:90%;margin-bottom:20px}}
@media(max-width:480px){.list-index h2{font-size:16px}
.list-index ul li{margin-bottom:8px}}
.list-index {background: linear-gradient(180deg, rgba(30, 60, 90, 0.95), rgba(37, 69, 110, 0.9), rgba(50, 80, 120, 0.95)); border-radius: 8px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);flex: 1; min-width: 200px; text-align: start;}
.list-index h2 {margin-bottom: 10px; font-size: 23px; color: white; border-bottom: 2px solid white; padding-bottom: 5px;text-align: center; font-weight: bold;}
.list-index ul {list-style: none; padding: 0;}
.list-index ul li a {text-decoration: none; color: white; font-weight: bold;}
.list-index ul li span {color: #99b7d9; font-weight: bold; text-decoration: underline;}

/* Menu+list
--------------------------------------------------------------------------------------------------------------- */

#menu>div{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.list-menu{background:linear-gradient(180deg,rgba(30,60,90,0.95),rgba(37,69,110,0.9),rgba(50,80,120,0.95));border-radius:8px;padding:15px;box-shadow:0 4px 8px rgba(0,0,0,0.3);flex:1;min-width:200px;text-align:start}
.list-menu h2{margin-bottom:10px;font-size:23px;color:white;border-bottom:2px solid white;padding-bottom:5px;text-align:center;font-weight:bold}
.list-menu ul{list-style:none;padding:0}
.list-menu ul li{margin-bottom:10px;color:black;font-weight:bold}
.list-menu ul li a{text-decoration:none;color:white;font-weight:bold}
.list-menu ul li span{color:#99b7d9;font-weight:bold;text-decoration:underline}
.list-menu ul li a p{color:#4bc02e;font-weight:bold;}
@media(max-width:768px){#menu>div{flex-direction:column;align-items:center}.list-menu{width:90%;margin-bottom:20px}}
@media(max-width:480px){.list-menu h2{font-size:16px}.list-menu ul li{margin-bottom:8px}}


/* Btns S.O
--------------------------------------------------------------------------------------------------------------- */

.button-container{display:flex;justify-content:center;margin:20px 0}
.image-button{background:none;border:none;cursor:pointer;margin:0 10px}
.image-button img{width:500px;height:auto}
@keyframes a{0%{transform:scale(0.7,1.3)}25%{transform:scale(1.3,0.7)}50%{transform:scale(0.7,1.3)}75%{transform:scale(1.3,0.7)}100%{transform:scale(1,1)}}
button:hover{animation:a 0.5s 1 linear}
@media(max-width:768px){.image-button img{width:300px}}
@media(max-width:480px){.image-button img{width:250px}}

/* Images StepByStep
--------------------------------------------------------------------------------------------------------------- */

.image-container{margin-right:20px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;height:80vh}
.fade-image{opacity:1;transition:transform 0.3s,z-index 0s 0.3s;margin:0 10px;width:120px;height:auto;max-width:100%;position:relative;z-index:1}
.fade-image.selected{transform:translate(-50%,-50%) scale(2.5);z-index:10;box-shadow:0 4px 15px rgba(0,0,0,0.5);position:fixed;top:50%;left:50%;max-width:90vw;max-height:90vh;object-fit:contain;image-rendering:auto;transition:transform 0.3s ease-in-out}
.fade-image.selected ~ .fade-image{opacity:0.5;transition:opacity 0.3s}
@media(max-width:768px){.fade-image{width:100px}}
@media(max-width:480px){.fade-image{width:80px}}

/* Recharges/Charges/Recurring/Billing/Chech
--------------------------------------------------------------------------------------------------------------- */

#info>div{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.space-info{background: #99b7d9;border-radius:8px;padding:15px;box-shadow:0 4px 8px rgba(0,0,0,0.2);flex:1;min-width:200px;text-align:start}
.space-info h2 {margin-bottom:10px;font-size:18px;color:black;border-bottom:2px solid white;padding-bottom:5px;text-align:center}
.space-info h3 {margin-bottom:10px; color: black; font-weight: bold;font-size: 22px;}
.space-info ul li {margin-bottom:10px; color: black; font-weight: bold;font-size: 17px;}
.space-info ul li a{text-decoration:none;color:blue; text-decoration: underline; font-weight:bold}
.space-info ul li span{color:blue}
.space-info li {margin-bottom:10px; color: black;font-size: 17px;}
.space-info ul {margin-bottom:10px; color: black;font-size: 15px;}
.space-info ol {margin-bottom:10px; color: black; font-weight: bold;font-size: 17px;}
.space-info ul a{text-decoration:none;color:blue; text-decoration: underline; font-weight:bold}
.space-info ul span{color:blue; font-weight: bold;}
.space-info li span{color:blue;font-weight: bold;}
.space-info h2 {margin-bottom: 10px; font-size: 23px; color: black; border-bottom: 2px solid white; padding-bottom: 5px;text-align: center; font-weight: bold;}
.space-info ul li {margin-bottom: 10px;}
.space-info ul li a {text-decoration: none; color: blue;text-decoration:underline; font-weight: bold;}
.space-info li a {text-decoration: none; color: blue;text-decoration:underline; font-weight: bold;}
.space-info ul li span {color: blue;}
.space-info ul {margin-bottom: 10px;}
.space-info ul a {text-decoration: none; color: blue;text-decoration:underline; font-weight: bold;}
.space-info ul span {color: blue;}
.space-info img {width: 400px;}
.space-info p {color: red; font-size: 22px;}
.space-info ol li{margin-bottom:10px; color: black; font-weight: bold;font-size: 17px;}
.space-info ol li {margin-bottom: 10px;}
@media(max-width:768px){#menu>div{flex-direction:column;align-items:center}.space-info {width:90%;margin-bottom:20px}}
@media(max-width:480px){.space-info h2{font-size:16px}.space-info ul li{margin-bottom:8px}}
.space-info dd {font-weight: bold;background: linear-gradient(90deg,#ff0000,#ffff00,#ff00f3, #0033ff,#ff00c4, #ff0000); font-size: 22px;background-size: 400%;font-family: "Arial", sans-serif;word-spacing: 5px;-webkit-text-fill-color: transparent;background-clip: text;animation: animate 10s linear infinite;}
@keyframes animate {0% {background-position: 0%;}100% {background-position: 400%;}}
.space-img {justify-self:center;}

/* Templates
--------------------------------------------------------------------------------------------------------------- */

#templates>div{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.list-templates {background:rgba(37,69,110,255);border-radius:8px;padding:15px;box-shadow:0 4px 8px rgba(0,0,0,0.2);flex:1;min-width:370px;text-align:start}
.list-templates h2{margin-bottom:10px;font-size:18px;color:white;border-bottom:2px solid white;padding-bottom:5px;text-align:center}
.list-templates ul{list-style:none;padding:0}
.list-templates ul li a{text-decoration:none;color:white;}
.list-templates{width:90%;margin-bottom:20px}
@media(max-width:480px){.list-templates h2{font-size:16px}.list-templates ul li{margin-bottom:8px}}
.list-templates {background: rgba(37, 69, 110, 255); border-radius: 8px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); flex: 1; min-width: 370px; text-align: start;font-size: 17px;}
.list-templates h2 {margin-bottom: 10px; font-size: 23px; color: white; border-bottom: 2px solid white; padding-bottom: 5px;text-align: center; font-weight: bold;}
.list-templates ul {list-style: none; padding: 0;}
.list-templates ul li {margin-bottom: 10px; color: white;}
.list-templates ul li a {text-decoration: none; color: white;}
.incidencia-message {margin-top: 5px;color: #a52b06;}

/* Forms
--------------------------------------------------------------------------------------------------------------- */

.form-content {display: flex;justify-content: center;align-items: center;min-height: 100vh;padding: 20px;}
.form-settings{background-color:rgba(255,255,255,0.8);padding:20px;margin:20px;border-radius:10px;width:100%;max-width:800px;}
.form-settings h2{color:red; font-weight: bold;}
.form-group{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:-20px;gap:2px;}
.form-settings p {color: red; font-size: 22px;}
.form-group label{flex:1;margin-right:10px;font-size:16px;color:black;font-weight:bold;}
.form-group input {border-radius: 10px; flex: 2;padding: 6px;width: 100%;max-width: 250px;max-height: 35px;font-size: 14px;}
.form-group textarea {border-radius: 10px; flex: 2;padding: 8px;width: 100%;max-width: 100%;height: 80px;font-size: 14px;resize: none;}
.copy-button,.reset-button{background-color:#002c74;color:white;padding:10px;border:none;cursor:pointer;width:100px;border-radius:5px;margin-top:10px;}
.copy-button {margin-right:75px;}
.reset-button{background-color:#f44336;}
.reset-button:hover{background-color:#d32f2f;}
.typification{font-weight:bold;background:linear-gradient(90deg,#ff0000,#ffff00,#ff00f3,#0033ff,#ff00c4,#ff0000);font-size:22px;background-size:400%;font-family:"Arial",sans-serif;word-spacing:5px;-webkit-text-fill-color:transparent;background-clip:text;animation:animate 10s linear infinite;}@keyframes animate{0%{background-position:0%;}100%{background-position:400%;}}
.checkbox-group {gap: 2px;margin-bottom: 10px;}
.checkbox-group label {display: flex;align-items: center;gap: 2px;}
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
#comments div{margin-bottom:15px;}
#comments {width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}


/* categories dropdown
--------------------------------------------------------------------------------------------------------------- */

.form-hashtag{display:flex;flex-direction:column;margin-bottom:20px;font-family:'Poppins',sans-serif;}
.form-hashtag label{font-size:14px;font-weight:700;color:#333;margin-bottom:5px;}
.form-hashtag select{width:100%;max-width:100px;padding:8px 12px;font-size:14px;border:1px solid #ccc;border-radius:4px;margin-bottom:10px;transition:border-color 0.3s ease;}
#category1,#category2,#category3{width:100%;max-width:300px;padding:8px 12px;font-size:14px;border:1px solid #ccc;border-radius:4px;}
.route-guide{font-family:'Poppins',sans-serif;margin-top:20px;padding:10px;background-color:#f9f9f9;border-radius:5px;border:1px solid #ccc;}
.route-guide p{font-size:17px;font-weight:700;color:#333;}

/* Scripts
--------------------------------------------------------------------------------------------------------------- */

#script li{margin:0;padding:25px;display:flex;align-items:flex-start;gap:10px;position:relative;flex-direction:row-reverse;}
#script img{width:250px;flex-shrink:0;align-self:flex-start;margin-top:17px;}
#script .speech-bubble{position:relative;background:white;color:black;border:2px solid rgba(0,0,0,0.1);border-radius:10px;padding:20px;max-width:70%;font-size:18px;font-weight:bold;box-shadow:0 4px 8px rgba(0,0,0,0.2);margin-right:100px;}
#script .speech-bubble::after{content:'';position:absolute;bottom:-25px;left:100px;border-width:10px;border-style:solid;border-color:white transparent transparent transparent;}
@media(max-width:768px){#script .speech-bubble{font-size:14px;padding:8px;max-width:80%;margin-right:40px;}#script img{width:150px;}}
@media(max-width:480px){#script li{flex-direction:column;align-items:flex-start;}#script img{width:120px;margin-bottom:10px;}#script .speech-bubble{font-size:12px;padding:6px;max-width:100%;margin-right:0;}}

/* SearchNavbar
--------------------------------------------------------------------------------------------------------------- */

.search-container {display: flex; align-items: center; gap: 5px;} 
#search-input {padding: 5px; border: 1px solid #ccc; border-radius: 4px; outline: none; font-size: 14px; width: 200px;} 
#search-icon {font-size: 16px; color: white; cursor: pointer;} 
.search-results {position: absolute; top: 55px; right: 20px; width: 200px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-height: 300px; overflow-y: auto; display: none; z-index: 1000;} 
.search-results a {color: #007BFF; padding: 5px; display: block; text-decoration: none;} 
.search-results a:hover {background-color: #f1f1f1;} 
@media (max-width: 768px) {#search-input {width: 150px;} .search-results {width: 150px;}} 
@media (max-width: 480px) {#search-input {width: 120px;} .search-results {width: 120px;}}

/* Phones
--------------------------------------------------------------------------------------------------------------- */


#phones>div{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.list-phones{background:linear-gradient(180deg,rgba(30,60,90,.95),rgba(37,69,110,.9),rgba(50,80,120,.95));border-radius:8px;padding:15px;box-shadow:0 4px 8px rgba(0,0,0,.3);flex:1;min-width:200px;text-align:center}
.list-phones h2{margin-bottom:10px;font-size:18px;color:white;border-bottom:2px solid white;padding-bottom:5px;text-align:center}
.list-phones ul{list-style:none;padding:0;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.list-phones ul li{text-align:center;margin-bottom:20px}
.list-phones ul li a{text-decoration:none;color:white}
.list-phones ul li h3{font-size:16px;margin-bottom:10px;color:white;font-weight:bold}
.list-phones ul li img{width:80%;height:auto;max-width:200px;border-radius:5px;transition:transform .3s ease}
.list-phones ul li img:hover{transform:scale(1.3)}
@media(max-width:768px){#phones>div{flex-direction:column;align-items:center}.list-phones{width:90%;margin-bottom:20px}.list-phones ul{flex-direction:column}}
@media(max-width:480px){.list-phones h2{font-size:16px}.list-phones ul li h3{font-size:14px}.list-phones ul li img{max-width:150px}}


/* DN
--------------------------------------------------------------------------------------------------------------- */

.search-interface{display:flex;flex-direction:column;align-items:center;margin-top:20px}
#searchNumber{width:150px;padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:5px;font-size:16px}
#loading{font-size:17px;color:blue; font-weight: bold; margin-bottom:10px}
.hidden{display:none}
#searchResult{width:100%;max-width:900px;margin-top:20px}
.result-card{color: #000000; font-weight: bold;border:1px solid #ddd;border-radius:8px;padding:15px;box-shadow:0 4px 8px rgba(0,0,0,0.1);margin-bottom:10px}
.result-card p{margin:5px 0;font-size:22px}
.result-card.success{color:#28a745;font-weight:bold}.result-card.not-found{color:#dc3545;font-weight:bold}


/* frases
--------------------------------------------------------------------------------------------------------------- */

.motivation-text {color: white;font-weight: bold;text-align: center;font-size: 20px;}

/* e-SIM
--------------------------------------------------------------------------------------------------------------- */

#esim, #esim textarea {border-color: #D7D7D7;}  
#esim h2 {color: #000000; font-weight: bold; font-size: 27px;}
#esim li {color: #000000; font-weight: bold; font-size: 17px;  border-radius: 7px;} 
#esim li span {color: red; font-weight: bold;} 
#esim li strong {color: blue; font-weight: bold;} 
#esim a {color: blue; font-weight: bold; text-decoration: underline;}
#esim .comcont {display: block; margin: 0; padding: 0; color: black; font-weight: bold;} 
#esim .comcont p {margin: 10px 5px 10px 0; padding: 0;}
#esim .imgesim {width: 200px}
.toggle-section {font-size: 25px; cursor: pointer; color: black; text-decoration: none;} 
.toggle-section:hover {text-decoration: underline;}
@media (max-width: 768px) {#esim li {font-size: 15px;} .toggle-section {font-size: 20px;}} 
@media (max-width: 480px) {#esim li {font-size: 14px; padding: 10px;} .toggle-section {font-size: 18px;} #esim .comcont p {margin: 8px 4px 8px 0;}}

/* security-section
--------------------------------------------------------------------------------------------------------------- */

#security-section.security-container {background-color:#f8d7da;border:2px solid #f5c6cb;border-radius:10px;padding:20px;margin:20px 0;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
#security-section.security-container h2 {color:#721c24;font-size:2.5rem;text-align:center;margin-bottom:15px;}
#security-section.security-container ol {list-style-type:decimal;padding-left:20px;}
#security-section.security-container li {font-size:1rem;line-height:1.6;margin-bottom:10px;color:#333;}
#security-section.security-container li strong {font-weight:bold;}
#security-section.security-container li span {font-weight:normal;color:#555;}
#security-section.security-container li:hover {color:#721c24;transition:color 0.3s ease;}
.info-section {margin-top:20px;font-size:1rem;line-height:1.6;color:#333;}
.info-section p {margin-bottom:10px;}
.info-section strong {color:#721c24;}
.consumption-section {margin-top:20px;padding:15px;background-color:#fff3cd;border:1px solid #ffeeba;border-radius:5px;}
.consumption-section h3 {color:#856404;font-size:1.2rem;margin-bottom:10px;}
.consumption-section p {font-size:1rem;line-height:1.6;color:#333;}
@media (max-width:768px) {#security-section.security-container li {font-size:0.9rem;} .consumption-section h3 {font-size:1rem;}}
@media (max-width:480px) {#security-section.security-container li {font-size:0.8rem;padding:8px;} .consumption-section h3 {font-size:0.9rem;} .info-section p {margin:8px 4px;}}

/* error notifications
--------------------------------------------------------------------------------------------------------------- */


.notification {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);background-color: #333;color: white;padding: 10px 20px;border-radius: 5px;font-size: 14px;opacity: 0.9;transition: opacity 0.5s ease-in-out;}
.notification.success {background-color: #4CAF50;z-index:9999}
.notification.error {background-color: #f44336;z-index:9999}

/* version
--------------------------------------------------------------------------------------------------------------- */

.version-label {position: absolute;top: 10px;right: 10px;color: white;padding: 5px 10px;border-radius: 5px;font-size: 12px;font-family: Arial, sans-serif;}  

/* nodisponible
--------------------------------------------------------------------------------------------------------------- */

.snd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.5s ease-out;
}

.snd-contenedor {
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
    text-align: center;
    max-width: 800px;
    animation: pulse 2s infinite ease-in-out;
    transform-origin: center;
    transition: transform 0.3s;
}

.snd-contenedor:hover {
    animation-play-state: paused;
    transform: scale(1.02);
}

.snd-imagen {
    width: 100%;
    margin: 0 auto 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    animation: float 3s ease-in-out infinite;
}

.snd-imagen img {
    width: 100%;
    object-fit: contain;
    transition: transform 0.3s;
}

.snd-texto {
    color: #ff4444;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: textGlow 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes textGlow {
    0% { opacity: 0.9; }
    50% { opacity: 1; color: #ff6666; }
    100% { opacity: 0.9; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}