/* -- RULESET -- */

img,
svg,
video {
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
}

/* -- Change -- */

/* Index */
#indexMessageType ul:not(.list-simple) li {
    list-style-type: "✧ ";
}
/* End */
/* Header Search */
.header__masthead__search .search__expand .list .list__item i {
    min-width: 20px !important;
}
/* End */
/* Navbar Override */
.js-navbar-list-items {
    gap: 3rem;
}

.navbar > ul > li {
    flex-grow: 0 !important;
    max-width: 23rem !important;
    padding: 0 2rem !important;
}
/* End */

#btn-copy span:hover {
    color: #4F6CAB;
    text-decoration: none;
}

#btn-back span:hover {
    color: #4F6CAB;
    text-decoration: none;
}
/* End */

#btn-link span
{
   width: 2.8rem;
   height: 2.8rem;
   border-radius: 5px; 
   border: 1px solid #4f6cab;
}

#btn-link i
{
   transform: rotate(135deg);
}
/* Button text link */
#btn-text-link span {
    width: 15rem;
    height: 2.8rem;
    border-radius: 5px;
    border: 1px solid #dcdee3;
}
#btn-text-link:hover p {
    color: white;
}
/* End */

a {
    cursor:pointer;
}

/* Input */
.form-group--label-top {
    margin-top: 10px;
}

.form-group:not(.form--checkbox).form-group--label-top label ~ .valid-field__tooltip {
    top: 5px;
}
.valid-field__tooltip {
    top: 5px;
}

.form-group.form-with-addon.addon-append .addon-append {
    border-left: 1px solid #dcdee3 !important;
}
/* End*/

/* Combobox */
.dropdown__header {
    border-radius: 0.5rem !important;
}

#sortByFilter .dropdown__header {
    border: none;
}

/* End */
/* Datagrid */
#tableContainer p,
#tableContainerVersions p,
#tableContainerSubscribers p {
    line-height: 1.15rem;
    font-weight: 400;
    font-size: 0.9rem;
}
/* End*/
/* Pagination */
.pagination {
    display: inline-flex;
    list-style: none;
    padding: 0;
}

.pagination > ul {
    display: flex;
}

.pagination > ul li + li {
    margin-top: 0;
    margin-left: 5px;
}

.pagination > ul li {
    list-style: none;
    border-radius: 0.5rem !important;
    user-select: none;
    cursor: pointer;
}

.pagination > ul li:hover {
    background: #ccd8ff;
    transition: .3s;
}

.pagination > ul li.active:hover {
    background: #ccd8ff;
    transition: .3s;
}

.pagination > ul li a:hover {
    color: #4f6cab !important;
    transition: .3s;
    text-decoration: none;
    border-radius: 0.5rem;
}

.pagination > ul li > a {
    color: #1c1c1c;
    padding: 7px 8px 8px;
    display: flex;
}

.pagination > ul li > a:focus-visible {
    border-radius: 0.5rem;
}

.pagination > ul li > a:focus {
    outline: #4f6cab solid 2px;
}

.pagination > ul li.rest:hover {
    background: unset;
}

.pagination > ul li.active {
    background: #4f6cab;
    border-radius: 0.5rem;
}

.pagination > ul li.active > a {
    color: #fff;
}
/* End */
/* Progress bar */
.progress-bar {
    background-color: #DCDEE3;
    width: 25%;
    min-width: 5rem;
    max-width: 7rem;
    border-radius: 0.25rem;
    margin-top: 0.25rem;
}

.pb-skill {
    background-color: #21d6ad;
    color: #1c1c1c;
    padding: 1% 5%;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    text-align: right;
}

.text-ellipsis {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.multiline-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; 
}

.bar-text {
    font-weight: 500;
}
/* End */
/* Sidebar progress bar */
#sidebarProgressBarContainer {
    list-style: none;
    margin-top: 1rem;
}

#sidebarProgressBarContainer ul {
    padding-left: 0;
}
.title-progress-bar {
    list-style: none !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.title-progress-bar a {
    font-weight: 400;
    text-decoration: none;
    color: #1c1c1c;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}
.title-progress-bar a:hover {
    color: #4f6cab;
}
.titleBarAnchorImg {
    width: 14px;
    height: 14px;   
}
.sidebar-progress-bar {
    background-color: #edeef2;
    border: solid 1px #edeef2;
    border-radius: 0.25rem;
    position: relative;
    width: 100%;
    min-height: 2.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    list-style: none !important;
    overflow: hidden;
    z-index: -1;
}
.sidebar-progress-bar-container {
    margin-top: 0.25rem;
}
.sidebar-progress-bar-container label {
    font-size: 0.9rem;
    color: #6e7681;
}
.sidebar-progress {
    display: flex;
    padding: 1.75rem 0.1rem;
    color: #1c1c1c;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    text-align: right;
    position: absolute;
    height: auto;
}
.sidebar-progress-size {
    background-color: #21d6ad;
    width: 0;
    z-index: 1;
}
.sidebar-progress-count {
    background-color: #21d6ad;
    width: 0;
    z-index: 1;
}
.sidebar-progress-in {
    background-color: #396FE5;
    width: 0;
    z-index: 1;
}
.sidebar-progress-out {
    background-color: #4f6cab;
    width: 0;
    z-index: 2;
}
.legend-progress-bar {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.legend-progress-bar .legend {
    display: flex;
    align-items: center;
    list-style: none !important;
    margin-top: 0;
    color: #6e7681;
    font-size: 0.9rem;
}
.legend-progress-bar li::before {
    content: "• ";
    font-size: 2rem;
    padding-right: 0.5rem;
    
}
.legend-progress-bar .takeColor::before {
    color: #21d6ad;
}
.legend-progress-bar .takeColorOver::before {
    color: orange;
}
.legend-progress-bar .takeColorBlock::before {
    color: #DC3545;
}
.legend-progress-bar .inColor::before {
    color: #396FE5;
}
.legend-progress-bar .outColor::before {
    color: #4f6cab;
}
.legend-progress-bar .freeColor::before {
    color: #edeef2;
}
/* End */
/* Popup Styles */
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.popup-content {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
}

.popup-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Message link buttons */
.btn-hover-gray:hover {
    background: #DCDEE3;
    border-radius: 5px;
    transition: .3s;
}
/* End */


/* -- Custom -- */
.justify-self-end {
    justify-self: end;
}

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fs-05 {
    font-size: 0.5rem;
}

.fs-075 {
    font-size: 0.75rem;
}

.fs-078 {
    font-size: 0.78rem
}

.fs-095 {
    font-size: 0.95rem;
}

.fs-1 {
    font-size: 1rem;
}

.fs-2 {
    font-size: 2rem;
}

.text-uppercase {
    text-transform: uppercase;
}

.mw-75 {
    max-width: 75%;
}

.w-17 {
    width: 17% !important;
}

.icon-wh-30{
    width: 30px;
    height: 30px;
}

.col-15 {
    max-width: 15% !important;
}

.ml-80 {
    margin-left: 80px !important;
}

.pl-40 {
    padding-left: 40px !important;
}

.bg-white-border {
    background: #FFF !important;
    border: 1px solid #d0d5dc;
    border-radius: 5px;
}

.min-h-0{
    min-height: 0;
}
.min-h-25 {
    min-height: 25%;
}
.min-h-50 {
    min-height: 50%;
}
.min-h-75 {
    min-height: 75%;
}
.min-h-100 {
    min-height: 100%;
}

.min-w-5 {
    min-width: 5rem;
}
.min-w-10 {
    min-width: 10rem;
}

.max-w-55 {
    max-width: 55%;
}

.max-w-0 {
    max-width: 0;
}

.max-w-25 {
    max-width: 25%;
}

.max-w-50 {
    max-width: 50%;
}

.max-w-75 {
    max-width: 75%;
}

.max-w-100 {
    max-width: 100%;
}


.border-r-0 {
    border-radius: 0;
}
.border-r-5px {
    border-radius: 5px;
}
.border-r-05 {
    border-radius: 0.5rem;
}
.border-r-1 {
    border-radius: 1rem;
}
.border-r-15 {
    border-radius: 1.5rem;
}

.border-left {
    border-left: 1px solid #dcdee3 !important;
}

.border-line {
    border-top: 1px solid #dcdee3;
    border-bottom: 1px solid #dcdee3
}
.border-line-t {
    border-top: 1px solid #dcdee3;
}
.border-line-b {
    border-bottom: 1px solid #dcdee3;
}

:root {
    --angle: 45deg;
    --opacity: 1;
}

.validation-border-invalid {
    --border-size: 1px;
    border: var(--border-size) dotted transparent !important;
    background-image: linear-gradient( to right, rgb(255 255 255 / var(--opacity)), rgb(255 255 255 / var(--opacity)) ), conic-gradient( from var(--angle),
/*        #DC3545 0deg 90deg, 
    #dcdee3 90deg 180deg,
    #DC3545 180deg 270deg, 
    #dcdee3 270deg 360deg*/
        #DC3545 0deg 165deg, 
    #dcdee3 165deg 180deg,
    #DC3545 180deg 345deg, 
    #dcdee3 345deg 360deg 
/*    #DC3545 0deg 325deg, 
    #dcdee3 325deg 360deg*/
/*        #DC3545 0deg 235deg, 
    #dcdee3 235deg 270deg,
    #DC3545 270deg 360deg*/
    ) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: rotate 10s linear infinite;
}

.validation-border-valid {
    --border-size: 1px;
    border: var(--border-size) dotted transparent !important;
    background-image: linear-gradient( to right, rgb(255 255 255 / var(--opacity)), rgb(255 255 255 / var(--opacity)) ), conic-gradient( from var(--angle),
    #21D6AD 0deg 345deg,
    #dcdee3 345deg 360deg
    ) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: rotate 4s linear infinite;
}

@property --opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes opacityChange {
    to {
        --opacity: 1;
    }
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}


.timer-circle {
    position: relative;
    width: 200px;
    height: 200px;
}

.timer-circle svg {
    transform: rotate(-90deg);
}

.timer-circle circle {
    fill: none;
    stroke-width: 12;
}

.timer-circle .background {
    stroke: #e6e6e6;
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 700;
    color: #4C5059;
}