/* ===== OSTICKET RESET ===== */

   /* Estä vaakascroll */
    html, body{
        overflow-x:hidden;
        
    }

    body,
    button,
    input,
    select,
    textarea{
        color: #354052 !important;
    font-family:'Open Sans',sans-serif !important;
    }

    

    html, body, div, span, p,
    table, tr, td, th,
    input, select, textarea, button{
    font-family:'Open Sans', sans-serif !important;
    /*    color: #354052 !important;*/

    }

    body{
        color: #354052 !important;
        font-family: 'Open Sans', sans-serif !important;
        background: #F5F5F5 !important;
    }


#container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.eleCent{
    text-align: center !important;
}
#nav {
    margin: 0 !important;
    padding: 15px 10px 10px 0px;
    height: auto !important;
 /*   background: none !important;*/
    border: none !important;
    box-shadow: none !important;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    z-index: 1000;
    padding-left: 240px;
}

#nav {
    position: fixed;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 240px;
    background: #354052;
    overflow-y: auto;
}

/* menu pystyy */
#nav li {
    display: block;
}

#nav li a {
    display: block;
    padding: 14px 18px;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#nav li a:hover {
    background: #374151;
}

.valign-helper {
    display:none;
}

#logo {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 81px;
    background: #354052;
}

#header #logo img {
    max-height: 48px !important;
    margin-top: 6px;
    padding:10px;
}

/* TÄMÄ KORJAA FOOTERIN LOPULLISESTI */
#content {
    margin-left: 240px;
    margin-top: 80px;
    margin-right: 0px !important;
    padding: 30px;
    background: #f5f5f5;

    min-height: calc(100vh - 231px);
}

#landing_page {
    min-height: inherit;
}

#footer {
    margin-left: 240px;
    background: #f5f5f5;
    border-top: 1px solid #e5e7eb;
    padding: 32px 0;
    text-align: center;
    clear: both;
}

/* tappaa osTicketin aktiivinapin ulkoasun */
#nav li a,
#nav li a.active,
#nav li a:hover {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* valmistellaan linkki */
#nav li a {
    position: relative;
    padding-left: 22px;
}

/* poista pill-napin tyyli mutta pidä ikoni */
#nav li a {
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

#nav li a:hover {
  /*  background: rgba(255,255,255,0.06); */
}

#nav li a.active {
 /*   background: rgba(59,130,246,0.10);*/
    color: #ffffff;
    font-weight: 600;
}

/* ikonien oikea paikka pystymenussa */
#nav li a.home,
#nav li a.new,
#nav li a.status {
    background-repeat: no-repeat;
    background-position: 14px center !important;
    padding-left: 44px !important;
    background-image: none !important;
}

#nav li a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    background: #faa141;
    border-radius: 2px;
}

#nav li a {
    filter: brightness(1.2);
}

/* estä theme.css:n hover-background rikkomasta ikonia */
#nav li a:hover {
    background-color: transparent !important;
     color: white !important;
}

#nav li a:hover {
    background-color: rgba(255,255,255,0.06) !important;
}

/* PAKOTA ikonit myös hover-tilaan */
#nav li a.home:hover {
    background-image: url('../images/icons/home.png') !important;
}

#nav li a.new:hover {
    background-image: url('../images/icons/new.png') !important;
}

#nav li a.status:hover {
    background-image: url('../images/icons/status.png') !important;
}

#nav li a {
    position: relative;
    padding-left: 44px !important;
}

/* HOME */
#nav li a.home::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: url('/assets/default/images/icons/home.png') no-repeat center;
    background-size: contain;
}

/* NEW TICKET */
#nav li a.new::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: url('/assets/default/images/icons/new.png') no-repeat center;
    background-size: contain;
}

/* STATUS */
#nav li a.status::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: url('/assets/default/images/icons/status.png') no-repeat center;
    background-size: contain;
}

/* ===== MOBILE ===== */
#mobile-menu-toggle{
    display:none;
    position:fixed;
    left:200px;
    top:22px;
    font-size:26px;
    cursor:pointer;
    z-index:1200;
}


/* oletuksena piilotettu */
#mobile-user-info{
    display:none;
}

/* mobiilissa */
@media (max-width: 900px){

    /* näytä hamburger */
    #mobile-menu-toggle{
         position:absolute;
        left:16px;
        top:50%;
        transform:translateY(-50%);
        font-size:26px;
        z-index:1200;
    }

    /* header korjaus */
    #header{
        padding-left:0;
        color: white;
        background: #354052;
    }

     /* header flexiksi */
    #header{
        display:flex;
        align-items:center;
        justify-content:center;
        padding-left:0 !important;
        height:70px;
    }

    /* poista vanhat floatit */
    #header .pull-left,
    #header .pull-right{
        float:none !important;
    }


    /* sidebar piiloon */
    #nav{
        transform:translateX(-100%);
        transition:transform .25s ease;
        box-shadow:0 0 20px rgba(0,0,0,.35);
        z-index:1100;
    }

    /* kun avattu */
    body.menu-open #nav{
        transform:translateX(0);
    }

    /* sisältö koko leveys */
    #content{
        margin-left:0 !important;
        padding:20px;
    }

    #footer{
        margin-left:0 !important;
    }

    /* hamburger näkyviin varmasti */
    #mobile-menu-toggle{
        display:block !important;
        position:absolute;
        left:16px;
        top:50%;
        transform:translateY(-50%);
        font-size:26px;
        z-index:2000; /* suurempi kuin logo */
    }

     #logo{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:auto !important;
        height:auto !important;
        background:transparent !important;
        margin:0 auto;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /* logo keskelle */
    #logo{
        left: 190px;
        height: 80px;
        top:20px;
        transform:translateX(-50%);
        background:transparent;
    }

    #header #logo img {
        max-height: 32px !important;
    }

    /* piilota headerin oikea lohko */
    #header .pull-right{
        display:none !important;
    }

    #mobile-user-info a{
        color:#e5e7eb;
        display:inline-block;
        margin:4px 6px 4px 0;
        text-decoration:none;
    }

    #mobile-user-info a:hover{
        text-decoration:underline;
    }

    /* liput pienemmiksi */
    #mobile-user-info .flag{
        margin-top:8px;
    }


    #mobile-user-info{
        display:block;
        padding:15px;
        border-bottom:1px solid rgba(255,255,255,0.08);
        font-size:14px;
        color: #ffffff;
    }

    #mobile-user-info{
        display:block;
        padding:15px;
        border-bottom:1px solid rgba(255,255,255,0.08);
        color:#e5e7eb;
    }

    .mobile-flags{
        margin-bottom:10px;
    }

    .mobile-flags .flag{
        margin-right:6px;
    }

    .mobile-user-links a{
        display:block;
        margin:6px 0;
        color:#e5e7eb !important;
        text-decoration:none;
    }

    .mobile-user-links a:hover{
        text-decoration:underline;
    }
    
    #logo{
        position:static !important;
        transform:none !important;
        margin:0 auto;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    #header #logo img{
        max-height:50px !important;
        height:auto;
    }

    /* Piilota erotinmerkit */
    .mobile-user-links{
        font-size:14px;
    }

    /* Poista | ja - visuaalisesti */
    .mobile-user-links{
        text-align:left;
    }

    .mobile-user-links a{
        display:block;
        margin:6px 0;
        color:#e5e7eb !important;
        text-decoration:none;
    }

    /* käyttäjän nimi omalle riville */
    .mobile-user-links{
        line-height:1.6;
    }

    /* erotetaan nimi */
    .mobile-user-links{
        white-space:normal;
    }

    /* tämä piilottaa "|" ja "-" merkit */

    .mobile-user-links a{
        font-size:14px;
    }

    .mobile-username{
        font-weight:600;
        margin-bottom:10px;
        font-size:15px;
    }

/* käyttäjän nimi omalle riville */
    #mobile-user-info p{
        display:block;
        margin:0 0 10px 0;
        color:#e5e7eb;
    }

    /* tee kaikista linkeistä omat rivit */
    #mobile-user-info a{
        display:block;
        margin:6px 0;
        color:#e5e7eb !important;
        text-decoration:none;
    }

    /* piilota erotinmerkit | ja - */
    #mobile-user-info p{
        line-height:1.6;
    }

    #mobile-user-info p::after{
        content:"";
    }



    
/* =========================
   GLOBAL MOBILE FIX
========================= */


 
    /* Kaikki leveydet max 100% */
    #content,
    #container,
    .main-content,
    .thread-body,
    .login-box,
    .content{
        max-width:100% !important;
        width:100% !important;
    }

    /* Kaikki taulukot responsiivisiksi */
    table{
        width:100% !important;
        display:block;
        overflow-x:auto;
    }

    /* inputit ja selectit täysleveiksi */
    input,
    select,
    textarea,
    .search,
    .text{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
        height: 40px !important;
    }

    /* lomakkeiden rivit blokkimuotoon */
    .form-row,
    .row,
    .form-group{
        display:block !important;
        width:100% !important;
    }

    /* nappien skaalaus */
    .button,
    button{
        width:100%;
        box-sizing:border-box;
    }

}



/* ===== PORTAL HOME ===== */

#portal-home{
    text-align:center;
    padding:60px 20px;
}

.portal-title{
    font-size:34px;
    font-weight:300;
    margin-bottom:10px;
    color: black;
}

.portal-sub{
    color:#6b7280;
    margin-bottom:50px;
}

/* kortit */
.portal-cards{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

.portal-card{
    width:360px;
    height:200px;
    border:3px solid #f59e0b;
    color:#f59e0b;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:.2s;
}

.portal-card:hover{
    background:#fff7ed;
    transform:translateY(-4px);
}

.portal-icon{
    font-size:48px;
    margin-bottom:20px;
}

.portal-text{
    font-size:20px;
    font-weight:600;
}

/* poista osTicket default etusivu */
#landing_page .sidebar{
    display:none !important;
}

/* myös tickets linkki saa saman offsetin */
#nav li a.tickets{
    background-repeat: no-repeat;
    background-position: 14px center !important;
    padding-left: 44px !important;
}

#nav li a.tickets::after{
    content:"";
    position:absolute;
    left:14px;
    top:50%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    background:url('/assets/default/images/icons/tickets.png') no-repeat center;
    background-size:contain;
}


#nav li a.tickets:hover {
    background-image: url('/assets/default/images/icons/tix.png') !important;
}

/* estä teemaa piilottamasta pseudo-ikoneita */
#nav li a::after{
    opacity:1 !important;
    display:block !important;
}

/* override osTicket hover */
#nav li a:hover::after{
    opacity:1 !important;
    filter:brightness(1.3);
}
#nav li a{
    line-height: 20px;
    padding-top: 13px;
    padding-bottom: 13px;
    vertical-align: middle;

}

/* =====================================
   CLEAN MOBILE LAYOUT
===================================== */

@media (max-width:900px){

    html, body{
        overflow-x:hidden;
    }

    /* ----- HEADER ----- */
    #header{
        display:flex;
        align-items:center;
        justify-content:center;
        height:70px;
        background:#354052;
        padding-left:0 !important;
    }

    #mobile-menu-toggle{
        display:block !important;
        position:absolute;
        left:16px;
        top:50%;
        transform:translateY(-50%);
        font-size:26px;
        z-index:2000;
    }

    #logo{
        position:static !important;
        background:none !important;
        width:auto !important;
        height:auto !important;
        margin:0 auto;
    }

    #header #logo img{
        max-height:40px !important;
    }

    #header .pull-right{
        display:none !important;
    }

    /* ----- SIDEBAR ----- */

    #nav{
        width:240px;                 /* EI 100% */
        transform:translateX(-100%);
        transition:.25s ease;
        box-shadow:0 0 20px rgba(0,0,0,.35);
        z-index:1100;
    }

    body.menu-open #nav{
        transform:translateX(0);
    }

    #nav li a{
        line-height: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        vertical-align: middle;
    }

    /* ----- CONTENT ----- */

    #content{
        margin-left:0 !important;
        margin-top:70px !important;
        padding:20px;
        width:100%;
        max-width:520px;     /* tärkeä */
        margin-right:auto;
        margin-left:auto;
        box-sizing:border-box;
    }

    #footer{
        margin-left:0 !important;
    }

 

    input,
    select,
    textarea{
        width:100% !important;
        box-sizing:border-box;
    }

    .button,
    button{
        width:100%;
        box-sizing:border-box;
    }

    #content{
        margin-left:0 !important;
        margin-top:70px !important;
        padding:20px;
        max-width:100%;
        box-sizing:border-box;
    }

}

#footer #poweredBy {
    display: none !important;
}




/** FROM OLD **/


  .elinkf{
    background-color: #F9A140;
    border-color: #F9A140;
    color: white !important;
    margin-top: 1.6rem;
  }
  .elinkf:hover{    
    background-color: #cd6e06;
    border: 2px solid #cd6e06;
  }





  /* =====================================
   LOGIN PAGE LAYOUT
===================================== */

/* keskitetään sivun sisältö */
#content{
    text-align:center;
}

/* otsikko */
#content h1{
    font-size:32px;
    font-weight:300;
    margin-top:40px;
    color: #354052 !important;
    font-family: 'Open Sans', sans-serif !important;
    background: #F5F5F5 !important;
}

/* kuvausteksti */
#content h1 + p{
    color:#6b7280;
    margin-bottom:40px;
    
}





/* ---------------------------------
   ALAREUNAN TEKSTI
--------------------------------- */

#content form + br + p{
    text-align:center;
    margin-top:40px;
}




/* =========================
   LOGIN PAGE
========================= */

#clientLogin{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* container */

#clientLogin .wellr1{
    max-width:460px;
    margin:60px auto;
    padding:40px;
    background:#f3f4f6;
    border:1px solid #e5e7eb;
    border-radius:10px;
}

/* login form */

.login-box{
    display:block !important;
    width:100% !important;
    padding:0;
    background:transparent;
    box-shadow: none !important;
}

/* labels */

.login-box label{
    display:block;
    font-size:14px;
    margin-bottom:6px;
    color:#374151;
    text-align: left !important;
}

/* inputs */
/*
.login-box input[type=text],
.login-box input[type=password]{
    width:100% !important;
    height: 22px !important;
    padding:12px !important;
    border:1px solid #d1d5db !important;
    border-radius:6px !important;
    margin-bottom:15px !important;
    box-sizing:border-box !important;
}*/

/* button */

.login-box input[type=submit]{
    width:100% !important;
    padding:12px !important;
    background:#f59e0b !important;
    border:none !important;
    border-radius:6px !important;
    color:white !important;
    font-weight:600 !important;
    cursor:pointer !important;
}

.login-box input[type=submit]:hover{
    background:#ea8c00 !important;
}

/* links */

#clientLogin .wellr1 > div:last-child{
    text-align:left !important;
    margin-top:20px !important;
}

.well a, .breadcrumb a,
.linkCol > a {
    color: #F9A140 !important;
}


/* =========================
   MOBILE
========================= */



@media (max-width:900px){

    .search.well{
        height: 210px !important;
}
}





/* =====================================
   TICKETS PAGE
===================================== */

/* hakuboksi */
.search.well{
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    padding:25px !important;
    border-radius:8px !important;
    margin-bottom:30px !important;
}

/* form layout */
#ticketSearchForm{
    display:flex !important;
    gap:20px !important;
    align-items:center !important;
    flex-wrap:wrap !important;
}

/* input */
#ticketSearchForm input[type=text]{
    width:100% !important;
    padding:10px !important;
    border:1px solid #d1d5db !important;
    border-radius:6px !important;
}

/* select */
#ticketSearchForm select{
    width:330px !important;
    padding:10px !important;
    border:1px solid #d1d5db !important;
    border-radius:6px !important;
}




/* =====================================
   PAGE TITLE
===================================== */

#content h1{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    font-size:26px !important;
    margin:20px 0 !important;
}

/* =====================================
   TICKET TABLE
===================================== */

#ticketTable{
    width:100% !important ;
    border-collapse:collapse !important;
    background:white !important;
    border:1px solid #e5e7eb !important;
}

/* caption */
#ticketTable caption{
    text-align:left !important;
    padding:12px !important;
    font-size:14px !important;
    color:#6b7280 !important;
    background:white !important;
    border-bottom:1px solid #e5e7eb !important;
}

/* header */
#ticketTable th{
    background:#f9fafb !important;
    color:#f59e0b !important;
    font-weight:600 !important;
    padding:12px !important;
    border-bottom:1px solid #e5e7eb !important;
}

/* rows */
#ticketTable td{
    padding:12px !important;
    border-bottom:1px solid #f3f4f6 !important;
    text-align: left !important;
}

#ticketTable tr:hover{
    background:#fafafa !important;
}


/* ticket link */
#ticketTable a{
    color:#f59e0b !important;
    font-weight:600 !important;
    text-decoration:none !important;
}


/* pagination */
#ticketTable + div{
    margin-top:15px !important;
    color:#6b7280 !important;
}

/* =========================
   SEARCH BAR FIX
========================= */


/* siirretään aihe select keskelle */
#ticketSearchForm .pull-right{
    order:2 !important;
}


/* etsi nappi viimeiseksi */
#ticketSearchForm input[type=submit]{
    order:3 !important;
    padding:10px 28px !important;
    background:#f59e0b !important;
    border:none !important;
    border-radius:6px !important;
    color:white !important;
    font-weight:600 !important;
}

/* hakukenttä ensimmäinen */
#ticketSearchForm input[type=text]{
    order:1 !important;
}

/* =========================
   OPEN BUTTON ICON
========================= */

/* piilota vanha icon */
.states i{
    display:none !important;
}


/* nappi */
.states a{
    background:#f59e0b !important;
    color:white !important;
    padding:10px 18px 10px 40px !important;
    border-radius:6px !important;
    font-weight:600 !important;
    position:relative !important;
    text-decoration:none !important;
}


.states a:hover{
    background:#ea8c00 !important;
}

/* icon napin sisään */
.states a::before{
    content:"📄" !important;
    position:absolute !important;
    left:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    font-size:14px !important;
}

i.refresh {
    color: #f59e0b !important;
    font-size: 80% !important;
    vertical-align: middle !important;
}

#ticketTable > tbody > tr > td > .link{
    color: #f59e0b !important;
}

/* =========================
   PAGE TITLE ICON ALIGN
========================= */

#content h1 a{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    color:#f59e0b ;
}

/* icon koko ja väri */
#content h1 i{
    font-size:18px !important;
    color:#f59e0b !important;
    line-height:1 !important;
}


/* search layout */

#ticketSearchForm{
display:flex !important;
gap:20px !important;
align-items:flex-end !important;
flex-wrap:wrap !important;
}

.search-field,
.topic-field{
position:relative !important;
}

.topic-field{
    margin-left: 10px;
}

.search-field label,
.topic-field label{
position:absolute !important;
top:-17px !important;
left:0px !important;
background:#f3f4f6 !important;
padding:0 6px !important;
font-size:12px !important;
color:#6b7280 !important;
}

.search-field input,
.topic-field select{
padding:14px 12px !important;
border:1px solid #d1d5db !important;
border-radius:6px !important;
min-width:260px !important;
background:white !important;
}

.search-btn{
padding:12px 24px !important;
background:#f59e0b !important;
color:white !important;
border:none !important;
border-radius:6px !important;
font-weight:600 !important;
cursor:pointer !important;
}

.search-btn:hover{
background:#ea8c00 !important;
}

/* ei aktiivinen */
.states .state:not(.active){
background:white !important;
color:#f59e0b !important;
}

/* hover */
.states .state:not(.active):hover{
background:#fff7ed !important;
}

.states{
display:flex!important;
align-items:center!important;
gap:10px!important;
}

/* varmistetaan että linkit eivät veny blokiksi */
.states .state{
display:inline-flex!important;
align-items:center!important;
}

/* states container */
.states small{
display:flex !important;
gap:10px !important;
align-items:center !important;
}

/* poista separator */
.states small span{
display:none !important;
}

/* button layout */
.states .state{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:7px 18px 7px 40px !important;
border-radius:6px !important;
border:2px solid #f59e0b !important;
}

/* aktiivinen */
.states .state.active{
background:#f59e0b !important;
color:white !important;
}

/* ei aktiivinen */
.states .state:not(.active){
background:white !important;
color:#f59e0b !important;
}


/* =====================================
   TICKET HEADER (OPENED TICKET)
===================================== */

/* otsikkorivi layout */
#ticketInfo h1{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    font-size:26px !important;
}

/* vasen osa */
#ticketInfo h1 b{
    font-weight:600;
}

/* ticket number */
#ticketInfo h1 small{
    margin-left:6px;
    font-weight:400;
    color:#6b7280;
}

/* subject link */
#ticketInfo h1 b{
    color:#f59e0b;
}

/* refresh icon */
#ticketInfo h1 .refresh{
    color:#f59e0b !important;
    font-size:18px !important;
}

/* oikea action area */
#ticketInfo h1 .pull-right{
    display:flex !important;
    gap:14px !important;
    align-items:center !important;
}

/* poista button ulkoasu */
#ticketInfo .action-button{
    border:none !important;
    background:none !important;
    padding:0 !important;
    box-shadow:none !important;
}

/* piilota teksti */
#ticketInfo .action-button{
    font-size:0 !important;
}

/* näytä vain icon */
#ticketInfo .action-button i{
    font-size:18px !important;
    color:#f59e0b !important;
}

/* hover */
#ticketInfo .action-button i:hover{
    color:#ea8c00 !important;
}


/* ===================================
   TICKET HEADER (VIEW PAGE)
=================================== */

#ticketInfo h1.ticket-header{
display:flex;
align-items:center;
gap:10px;
font-size:24px;
}

/* refresh icon */

.ticket-refresh i{
color:#f59e0b;
font-size:18px;
}

/* label */

.ticket-label{
color:#6b7280;
font-weight:500;
}

/* number */

.ticket-number{
color:#6b7280;
}

/* subject */

.ticket-subject{
color:#f59e0b;
font-weight:600;
}

/* right icon group */

#ticketInfo .pull-right{
margin-left:auto;
display:flex;
gap:16px;
align-items:center;
}

/* remove button style */

#ticketInfo .action-button{
background:none !important;
border:none !important;
padding:0 !important;
font-size:0 !important;
box-shadow:none !important;
}

/* icons */

#ticketInfo .action-button i{
font-size:18px;
color:#f59e0b;
}

/* hover */

#ticketInfo .action-button i:hover{
color:#ea8c00;
}

.maxwcenter{
    max-width: 1100px;
    margin:auto;
}

/* ========================================
   OPEN TICKET PAGE
======================================== */

/* keskitetty otsikko */

#content h1{
text-align:center;
margin-bottom:10px;
}

#content h1 + p{
text-align:center;
color:#6b7280;
margin-bottom:40px;
}

/* user info box */

#content table.infoTable{
width:100%;
border:1px solid #e5e7eb;
border-radius:6px;
border-collapse:collapse;
margin-bottom:30px;
}

#content table.infoTable th{
background:#f3f4f6;
text-align:left;
padding:12px;
width:180px;
}

#content table.infoTable td{
padding:12px;
}

/* topic field */

#content select[name="topicId"]{
width:100%;
max-width:800px;
height:42px;
border:1px solid #cbd5e1;
border-radius:6px;
padding:0 10px;
font-size:15px;
}

/* label */

#content label{
display:block;
font-weight:600;
margin-bottom:8px;
}

/* button layout */

#content form p{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:30px;
}

/* secondary buttons */

#content input[type="reset"],
#content input[value="Cancel"],
#content input[value="Tyhjennä"],
#content input[value="Peruuta"]{

background:#9ca3af;
border:none;
color:white !important;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
margin-right:10px;
}

/* main submit */

#content input[type="submit"]{

background:#f59e0b;
border:none;
color:white;
padding:12px 22px;
border-radius:6px;
font-weight:600;
cursor:pointer;
}

/* hover */

#content input[type="submit"]:hover{
background:#ea8c00;
}
/* =====================================
   OPEN TICKET PAGE CLEAN FIX
===================================== */

/* container keskelle */

#ticketForm{
max-width:700px;
margin:40px auto;
}

/* topic field */

#ticketForm select{
width:100%;
height:44px;
border:1px solid #d1d5db;
border-radius:6px;
padding:10px;
font-size:15px;
}

/* label */

#ticketForm label{
display:block;
font-weight:600;
margin-bottom:8px;
text-align:left;
}

/* required star */

#ticketForm .required{
/*color:#ef4444;
margin-left:4px;*/
}

/* button row */

#ticketForm p{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:30px;
}

/* left buttons */

#ticketForm input[type=reset],
#ticketForm input[value="Tyhjennä"],
#ticketForm input[value="Peruuta"]{
background:#9ca3af;
border:none;
color:white !important;
padding:10px 16px;
border-radius:6px;
margin-right:10px;
}

/* submit button */

#ticketForm input[type=submit]{
background:#f59e0b;
border:none;
color:white;
padding:12px 22px;
border-radius:6px;
font-weight:600;
margin-left:auto;
}

#ticketForm input[type=submit]:hover{
background:#ea8c00;
}

#ticketForm {
    margin: auto !important;
    max-width: 800px
}

#content form p{
display:flex;
align-items:center;
gap:12px;
}

#content form p input[type="submit"]{
margin-left:auto;
color: #ffffff !important;
}

#content label{
text-align:left;
display:block;
max-width:800px;
margin:0 auto 8px auto;
}

#content select[name="topicId"]{
display:block;
margin:0 auto;
}

/* =====================================
   MOBILE
===================================== */

@media (max-width:900px){

    #ticketSearchForm{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    #ticketSearchForm input,
    #ticketSearchForm select,
    #ticketSearchForm input[type=submit]{
        width:100% !important;
    }

    #content h1{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:12px !important;
    }

    /* siirretään napit otsikon yläpuolelle */
    #content h1 .states{
        order:-1 !important;
        width:100% !important;
        display:flex !important;
        gap:10px !important;
        max-width:200px !important;
    }

    #content h1 .states small{
        display:flex !important;
        gap:10px !important;
        width:100% !important;
    }

    #content h1 .states .state{
        flex:1 !important;
        text-align:center !important;
        justify-content:center !important;
    }

    #ticketInfo h1.ticket-header{
        flex-wrap:wrap;
        gap:6px;
        font-size:20px;
    }

    /* subject omalle riville */
    .ticket-subject{
        width:100%;
        order:3;
        font-size:18px;
    }

    /* label + number */
    .ticket-label{
        order:1;
    }

    .ticket-number{
        order:2;
    }

    /* refresh vasemmalle */
    .ticket-refresh{
        order:0;
    }

    /* icon group */
    #ticketInfo .pull-right{
        order:4;
        width:100%;
        justify-content:flex-end;
        margin-top:6px;
        gap:16px;
    }


    /* container leveys */

    #ticketInfo{
    width:100% !important;
    display:block;
    }

    /* header */

    #ticketInfo h1.ticket-header{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    }

    .ticket-refresh{
    margin-bottom:6px;
    }

    .ticket-label,
    .ticket-number{
    font-size:18px;
    }

    .ticket-subject{
    font-size:20px;
    }

    /* icon group */

    #ticketInfo .pull-right{
    width:100%;
    display:flex;
    justify-content:flex-end;
    gap:14px;
    margin-top:8px;
    }

    /* info tables stacked */

    #ticketInfo > tbody > tr:nth-child(2){
    display:block;
    }

    #ticketInfo > tbody > tr:nth-child(2) > td{
    width:100% !important;
    display:block;
    margin-bottom:15px;
    }

    /* remove 800px layout */

    #ticketInfo table{
    width:100% !important;
    }

    /* headline spacing */

    .infoTable .headline{
    font-size:16px;
    }

    /* custom fields */

    .custom-data{
    width:100% !important;
    }

    /* thread */

    .thread-entry{
    margin-bottom:20px;
    }

    .thread-entry .header{
    font-size:14px;
    }

    /* reply editor */

    #reply textarea{
    width:100% !important;
    }

    /* attachments */

    .filedrop{
    width:100% !important;
    }

    #ticketForm input[type=reset], #ticketForm input[value="Tyhjennä"], #ticketForm input[value="Peruuta"] {
        padding: 7px 7px !important;
        color:white !important;
    }
    #ticketForm input[type=submit] {
        padding: 7px 7px !important;
    }

    #ticketForm .buttons {
    gap: 0px !important;
}

}




/* ===== OPEN TICKET FIX ===== */

/* aihe label vasemmalle */
#ticketForm .form-header{
    text-align:left !important;
    max-width:800px;
    margin:0 auto 8px auto;
}

/* select keskelle oikein */
#ticketForm select{
    display:block;
    width:100%;
    max-width:700px;
    margin:0 auto;
}

/* required tähti inputin viereen */
#ticketForm font.error{
    display:inline-block;
    margin-left:6px;
    vertical-align:middle;
    color:#ef4444;
}

/* nappirivi */
#ticketForm .buttons{
    display:flex;
    align-items:center;
    max-width:800px;
    margin:30px auto 0 auto;
    gap:12px;
}

/* reset + cancel vasemmalle */
#ticketForm input[type="reset"],
#ticketForm input[value="Peruuta"]{
    order:1;
}

/* submit oikealle */
#ticketForm input[type="submit"]{
    order:2;
    margin-left:auto;
}

#ticketForm td{
    position:relative;
}

#ticketForm font.error{
    position:absolute;
    right:8px;
    top:6px;
    color:#ef4444;
    font-weight:600;
}

.topic-label{
display:block;
max-width:700px;
margin:0 auto 8px auto;
font-weight:600;
text-align:left;
}

.topic-label .required{
color:#ef4444;
margin-left:4px;
}

#ticketForm select{
display:block;
width:100%;
max-width:800px;
margin:0 auto;
}


input[type=text],
input[type=email],
input[type=password],
input[type=tel]

{
    height: 22px;
    width: 100% !important;
    padding: 8px 12px !important;
    max-width: 770px !important;
    font-family: Lato, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.467 !important;
    color: #34495e !important;
    border: 2px solid #bdc3c7 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    -webkit-transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear !important;
    transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear !important;
}

.redactor-placeholder{
    text-align: left !important;
}


.thread-entry .thread-body,
.thread-entry.message .header,
#reply h2
{
    text-align: left !important;
}

.firstTD{
    font-weight: 700;
}
.secondTD,
.firstTD{

    border: 1px solid #ddd;
    padding: 8px !important;
    line-height: 1.42857143;
    vertical-align: top;
    text-align: left;
}

#ticketForm > table td{    
    color: #354052 !important;
    font-family:'Open Sans',sans-serif !important;
}

a.portal-card:hover{
    border-bottom: 3px solid #f59e0b !important;
}

#ticketInfo h1{
    border-bottom: unset !important;
}



/* =========================
   TICKET HEADER MOBILE FIX
========================= */

@media (max-width:900px){

    .ticket-header{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    }

    /* otsikkorivi */
    .ticket-header .mobi{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    font-size:18px;
    }

    /* subject omalle riville */
    .ticket-subject{
    width:100%;
    font-size:20px;
    font-weight:600;
    color:#f59e0b;
    }

    /* ikonit oikealle */
    .ticket-header .mob2{
    width:100%;
    display:flex;
    justify-content:flex-end;
    margin-top:6px;
    }

    .ticket-header .pull-right{
    display:flex;
    gap:14px;
    align-items:center;
    }

    .ticket-header{
    align-items:flex-start !important;
    text-align:left !important;
    }

    .ticket-header .mobi{
    width:100%;
    text-align:left !important;
    }

    .ticket-subject{
    width:100%;
    text-align:left !important;
    }



}

/* =====================================
   CHECK TICKET STATUS PAGE
===================================== */

.ticket-check-wrapper{
max-width:400px;
margin:40px auto;
display:flex;
flex-direction:column;
gap:20px;
}

/* kortti */

.ticket-check-wrapper .login-box{
background:#f3f4f6;
border:1px solid #e5e7eb;
border-radius:10px;
padding:30px;
box-shadow:none;
}

/* label */

.ticket-check-wrapper label{
display:block;
font-weight:600;
margin-bottom:6px;
text-align:left;
}

/* input */

.ticket-check-wrapper input[type=text]{
width:100%;
height:42px;
border:1px solid #cbd5e1;
border-radius:6px;
padding:10px;
margin-bottom:18px;
}

/* button */

.ticket-check-wrapper input[type=submit]{
width:100%;
height:44px;
background:#f59e0b;
border:none;
border-radius:6px;
color:white;
font-weight:600;
cursor:pointer;
}

.ticket-check-wrapper input[type=submit]:hover{
background:#ea8c00;
}

/* extra box */

.ticket-check-extra{
background:#f3f4f6;
border:1px solid #e5e7eb;
border-radius:10px;
padding:20px;
width: 420px;
text-align:left;
}

.ticket-check-extra a{
color:#f59e0b;
font-weight:500;
}



/* =========================
   CHECK TICKET STATUS FIX
========================= */

.ticket-check-wrapper{
max-width:460px;
margin:40px auto;
padding:0 20px;
box-sizing:border-box;
}

/* kortti */
.ticket-check-wrapper .login-box{
background:#f3f4f6;
border:1px solid #e5e7eb;
border-radius:10px;
padding:30px;
box-sizing:border-box;
}

/* inputien leveys korjaus */
.ticket-check-wrapper input[type=text]{
width:100% !important;
max-width:100% !important;
box-sizing:border-box;
}

/* submit nappi */
.ticket-check-wrapper input[type=submit]{
width:100% !important;
}

/* alempi info box */
.ticket-check-extra{
max-width:460px;
margin:20px auto;
padding:20px;
background:#f3f4f6;
border:1px solid #e5e7eb;
border-radius:10px;
box-sizing:border-box;
}

/* mobiili */
@media (max-width:600px){

.ticket-check-wrapper{
margin:20px auto;
padding:0 15px;
}

.ticket-check-wrapper .login-box{
padding:20px;
}

.ticket-check-extra{
    max-width: 290px;
}

}


/* =========================
   SIDEBAR ICON ALIGN FIX
========================= */

#nav li a{
display:flex;
align-items:center;
gap:12px;
padding:14px 18px 14px 44px !important;
line-height:1.2 !important;
}

/* icon container */
#nav li a::after{
top:50% !important;
transform:translateY(-50%) !important;
}

/* estää tekstin hyppimisen */
#nav li a span{
display:inline-block;
}

@media (max-width:1000px){

.topic-field{
    margin-left: 0px;
}
}


@media (max-width:900px){


/* tee form-table responsiiviseksi */
#ticketForm table,
#ticketForm tbody,
#ticketForm tr,
#ticketForm td{
display:block !important;
width:100% !important;
}

/* input kentät täysleveiksi */
#ticketForm input,
#ticketForm select,
#ticketForm textarea{
width:100% !important;
max-width:100% !important;
box-sizing:border-box;
}

/* label spacing */
#ticketForm label{
margin-bottom:6px;
display:block;
}

/* form group spacing */
#ticketForm td{
margin-bottom:16px;
}

    button,
    input[type=submit],
    input[type=button],
    input[type=reset]{
    max-width:100%;
    }

    /* Hae nappi koko leveys */
    .search-btn,
    #ticketSearchForm input[type=submit]{
    width:100% !important;
    }


}