/* OTOBO is a web-based ticketing system for service organisations.

Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
Copyright (C) 2019-2024 Rother OSS GmbH, https://otobo.io/

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

/** 
 * @subsection Fallback Color Definitions 
 */

 :root {
    --colMainDark: #00023c;
    --colMainLight: #001bff;
    --colMainHover: #000099;
    --colBGLight: #f7f7f9;
    --colBGDark: #bfbfce;
    --colTextLight: #7f809d;
    --colTextDark: #00023c;
    --colHighlight: #fef235;
    --colNotifyOK: #c4cdfa;
    --colNotifyWarn: #fffccc;
    --colNotifyErr: #f9bcb2;
    --colHoverLight: #c4cdfa;
    --colHoverDark: #6d83f2;
    --colShadowMain: rgba(0,27,255,0.24);
    --colShadowDark: rgba(0, 2, 71, 0.16);
}

/**
 * @subsection CKEditorResizeHandle
 */

div.ui-resizable-s {
    position: relative;
    bottom: 0px;
    width: 50px;
    box-sizing: border-box;
    height: 5px;
    margin: auto;
    margin-top: -2px;
    border-radius: 5px;
    background-color: var(--colBGDark);
    cursor: s-resize;
    overflow: hidden;

    i {
        display: block;
        margin: auto;
        color: var(--colTextLight);
        text-align: center;
        font-size: 10px;
        margin-top: -2.5px;
    }
}

/**
 * end @subsection CKEditorResizeHandle
 */

body {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.35px;
    color: #00023c;
    color: var(--colTextDark);
}

p,
span,
h1,
h3 {
    color: inherit;
}

@media only screen and (max-width: 767px) {

    h1 {
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.58px;
    }

}

@media only screen and (min-width: 768px) {

    h1 {
        font-size: 32px;
        font-weight: 500;
        letter-spacing: 0.64px;
    }

}

h2 {
    font-size: 20px;
    font-weight: 500;
	letter-spacing: 0.5px;
}

h3 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.ooo10 {
    font-size: 10px;
    letter-spacing: 0.25px;
}
.ooo10g {
    font-size: 10px;
    letter-spacing: 0.25px;
    color: #7f809d;
    color: var(--colTextLight);
}

.ooo12 {
    font-size: 12px;
    letter-spacing: 0.3px;
}
.ooo12g {
    font-size: 12px;
    letter-spacing: 0.3px;
    color: #7f809d;
    color: var(--colTextLight);
}

.ooog {
    color: #7f809d;
    color: var(--colTextLight);
}

.oool {
    color: #2626bf;
}

button {
    background-color: #001bff;
    background-color: var(--colMainLight);
    text-align: center;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
-webkit-transition: width 0.3s ease;
   -moz-transition: width 0.3s ease;
     -o-transition: width 0.3s ease;
        transition: width 0.3s ease;
}

button:hover,
button:focus {
    background-color: #000099;
    background-color: var(--colMainHover);
}

button,
button.oooL {
    width: 180px;
    height: 48px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.4px;
}

button.oooM {
    width: 162px;
    height: 40px;
    border-radius: 20px;
}

button.oooS {
    width: 151px;
    height: 36px;
    border-radius: 18px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

button.oooXS {
    width: 106px;
    height: 36px;
    border-radius: 18px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/**
 * @subsection  Text
 */
.Center {
    text-align: center;
}

.Hidden {
    display: none;
}

/**
 * @subsection jQuery autocomplete
 */
ul.ui-autocomplete {
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    overflow-x: hidden;
    overflow-y: none;
}

.ui-autocomplete .ui-widget-content,
.ui-autocomplete .ui-menu-item {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.35px;
    color: #00023c;
    color: var(--colTextDark);
}

.ui-autocomplete .ui-menu-item {
    padding: 4px 0px 4px 24px !important;
}

.ui-autocomplete .ui-menu-item:first-child {
    padding-top: 8px !important;
}

.ui-autocomplete .ui-menu-item:last-child {
    padding-bottom: 8px !important;
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding: 4px 8px 4px 8px;
    border-radius: 5px;
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item:focus,
.ui-autocomplete .ui-menu-item:active {
    background: #fff;
    border: none;
    margin: 0;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: #f7f7f9;
    background: var(--colBGLight);
    border: none;
    margin: 0;
}

/* WebKit Scrollbar for fixing ugly scrollbars in Chrome */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
  
::-webkit-scrollbar-thumb {
    background-color: #c9c9c9;
    border-radius: 4px;
}
  
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}