/*
STYLE FOR BLUE THEME

Author : Ahmad Wahyudin 
Company : Peranti Digital Solusindo 
Date : 2022-06-09
Location : Jakarta Selatan, Lebak Bulus, Haji Banih
*/

@import url('../modules/style.modules.css');
@import url('../modules/style.list.css');
@import url('../modules/style.card.css');
@import url('../modules/omni/style.conversation.css');

:root {

    /*color gradients*/
    --linear-to-bottom : linear-gradient(to bottom, #2374b5, #2270af, #226da9, #2169a4, #21669e, #20649b, #206299, #1f6096, #1e5f95, #1d5e94, #1b5d93, #1a5c92);
    --linear-to-right : linear-gradient(to right, #2374b5, #2270af, #226da9, #2169a4, #21669e, #20649b, #206299, #1f6096, #1e5f95, #1d5e94, #1b5d93, #1a5c92);
    --basic-color : #2374b5;
    --linear-to-right-secondary : linear-gradient(to right, #2884cd, #2787d4, #268bdb, #258ee2, #2591e9, #2794ed, #2896f1, #2a99f5, #2d9cf8, #309efa, #33a1fd, #36a4ff);
    --gradient-grey : linear-gradient(170deg, rgba(2, 2, 2,0.02) 0%, rgba(2, 2, 2,0.02) 51%,transparent 51%, transparent 100%),linear-gradient(212deg, rgba(82, 82, 82,0.01) 0%, rgba(82, 82, 82,0.01) 39%,transparent 39%, transparent 100%),linear-gradient(95deg, rgba(73, 73, 73,0.01) 0%, rgba(73, 73, 73,0.01) 66%,transparent 66%, transparent 100%),linear-gradient(119deg, rgba(174, 174, 174,0.01) 0%, rgba(174, 174, 174,0.01) 67%,transparent 67%, transparent 100%),linear-gradient(43deg, rgba(237, 237, 237,0.03) 0%, rgba(237, 237, 237,0.03) 13%,transparent 13%, transparent 100%),linear-gradient(148deg, rgba(11, 11, 11,0.01) 0%, rgba(11, 11, 11,0.01) 9%,transparent 9%, transparent 100%),linear-gradient(17deg, rgba(233, 233, 233,0.02) 0%, rgba(233, 233, 233,0.02) 13%,transparent 13%, transparent 100%),linear-gradient(198deg, rgba(248, 248, 248,0.02) 0%, rgba(248, 248, 248,0.02) 43%,transparent 43%, transparent 100%),linear-gradient(199deg, rgba(125, 125, 125,0.01) 0%, rgba(125, 125, 125,0.01) 39%,transparent 39%, transparent 100%),linear-gradient(12deg, rgba(2, 2, 2,0.02) 0%, rgba(2, 2, 2,0.02) 46%,transparent 46%, transparent 100%),linear-gradient(341deg, rgba(227, 227, 227,0.02) 0%, rgba(227, 227, 227,0.02) 13%,transparent 13%, transparent 100%),linear-gradient(215deg, rgba(201, 201, 201,0.03) 0%, rgba(201, 201, 201,0.03) 56%,transparent 56%, transparent 100%),linear-gradient(199deg, rgba(189, 189, 189,0.02) 0%, rgba(189, 189, 189,0.02) 2%,transparent 2%, transparent 100%),linear-gradient(34deg, rgba(116, 116, 116,0.03) 0%, rgba(116, 116, 116,0.03) 63%,transparent 63%, transparent 100%),linear-gradient(50deg, rgba(230, 230, 230,0.01) 0%, rgba(230, 230, 230,0.01) 30%,transparent 30%, transparent 100%),linear-gradient(162deg, rgba(10, 10, 10,0.02) 0%, rgba(10, 10, 10,0.02) 58%,transparent 58%, transparent 100%),linear-gradient(327deg, rgba(35, 35, 35,0.01) 0%, rgba(35, 35, 35,0.01) 15%,transparent 15%, transparent 100%),linear-gradient(255deg, rgba(191, 191, 191,0.03) 0%, rgba(191, 191, 191,0.03) 74%,transparent 74%, transparent 100%),linear-gradient(311deg, rgba(210, 210, 210,0.03) 0%, rgba(210, 210, 210,0.03) 46%,transparent 46%, transparent 100%),linear-gradient(272deg, rgba(212, 212, 212,0.01) 0%, rgba(212, 212, 212,0.01) 19%,transparent 19%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
    --gradient-blue: linear-gradient(56deg, rgba(254, 254, 254, 0.05) 0%, rgba(254, 254, 254, 0.05) 69%,rgba(160, 160, 160, 0.05) 69%, rgba(160, 160, 160, 0.05) 100%),linear-gradient(194deg, rgba(102, 102, 102, 0.02) 0%, rgba(102, 102, 102, 0.02) 60%,rgba(67, 67, 67, 0.02) 60%, rgba(67, 67, 67, 0.02) 100%),linear-gradient(76deg, rgba(169, 169, 169, 0.06) 0%, rgba(169, 169, 169, 0.06) 89%,rgba(189, 189, 189, 0.06) 89%, rgba(189, 189, 189, 0.06) 100%),linear-gradient(326deg, rgba(213, 213, 213, 0.04) 0%, rgba(213, 213, 213, 0.04) 45%,rgba(66, 66, 66, 0.04) 45%, rgba(66, 66, 66, 0.04) 100%),linear-gradient(183deg, rgba(223, 223, 223, 0.01) 0%, rgba(223, 223, 223, 0.01) 82%,rgba(28, 28, 28, 0.01) 82%, rgba(28, 28, 28, 0.01) 100%),linear-gradient(3deg, rgba(20, 20, 20, 0.06) 0%, rgba(20, 20, 20, 0.06) 62%,rgba(136, 136, 136, 0.06) 62%, rgba(136, 136, 136, 0.06) 100%),linear-gradient(200deg, rgba(206, 206, 206, 0.09) 0%, rgba(206, 206, 206, 0.09) 58%,rgba(6, 6, 6, 0.09) 58%, rgba(6, 6, 6, 0.09) 100%),linear-gradient(304deg, rgba(162, 162, 162, 0.07) 0%, rgba(162, 162, 162, 0.07) 27%,rgba(24, 24, 24, 0.07) 27%, rgba(24, 24, 24, 0.07) 100%),linear-gradient(186deg, rgba(166, 166, 166, 0.04) 0%, rgba(166, 166, 166, 0.04) 5%,rgba(210, 210, 210, 0.04) 5%, rgba(210, 210, 210, 0.04) 100%),linear-gradient(90deg, rgb(26,60,118),rgb(32,129,207),rgb(7,128,191));
    --gradient-black: linear-gradient(17deg, rgba(41, 41, 41, 0.02) 0%, rgba(41, 41, 41, 0.02) 48%,rgba(10, 10, 10, 0.02) 48%, rgba(10, 10, 10, 0.02) 59%,rgba(164, 164, 164, 0.02) 59%, rgba(164, 164, 164, 0.02) 73%,rgba(79, 79, 79, 0.02) 73%, rgba(79, 79, 79, 0.02) 93%,rgba(42, 42, 42, 0.02) 93%, rgba(42, 42, 42, 0.02) 100%),linear-gradient(42deg, rgba(124, 124, 124, 0.02) 0%, rgba(124, 124, 124, 0.02) 15%,rgba(116, 116, 116, 0.02) 15%, rgba(116, 116, 116, 0.02) 23%,rgba(41, 41, 41, 0.02) 23%, rgba(41, 41, 41, 0.02) 44%,rgba(196, 196, 196, 0.02) 44%, rgba(196, 196, 196, 0.02) 54%,rgba(145, 145, 145, 0.02) 54%, rgba(145, 145, 145, 0.02) 100%),linear-gradient(151deg, rgba(85, 85, 85, 0.02) 0%, rgba(85, 85, 85, 0.02) 12%,rgba(72, 72, 72, 0.02) 12%, rgba(72, 72, 72, 0.02) 28%,rgba(156, 156, 156, 0.02) 28%, rgba(156, 156, 156, 0.02) 33%,rgba(230, 230, 230, 0.02) 33%, rgba(230, 230, 230, 0.02) 50%,rgba(13, 13, 13, 0.02) 50%, rgba(13, 13, 13, 0.02) 100%),linear-gradient(76deg, rgba(25, 25, 25, 0.02) 0%, rgba(25, 25, 25, 0.02) 9%,rgba(183, 183, 183, 0.02) 9%, rgba(183, 183, 183, 0.02) 32%,rgba(19, 19, 19, 0.02) 32%, rgba(19, 19, 19, 0.02) 86%,rgba(129, 129, 129, 0.02) 86%, rgba(129, 129, 129, 0.02) 88%,rgba(174, 174, 174, 0.02) 88%, rgba(174, 174, 174, 0.02) 100%),linear-gradient(90deg, rgb(41, 41, 41),rgb(8, 8, 8));
    --gradient-blue-2: linear-gradient(135deg, rgb(62, 62, 62),rgb(179, 179, 179)),linear-gradient(135deg, rgba(84, 137, 228,0.5) 0%, rgba(84, 137, 228,0.5) 51%,rgba(69, 113, 204,0.5) 51%, rgba(69, 113, 204,0.5) 58%,rgba(54, 88, 180,0.5) 58%, rgba(54, 88, 180,0.5) 61%,rgba(38, 64, 157,0.5) 61%, rgba(38, 64, 157,0.5) 63%,rgba(23, 39, 133,0.5) 63%, rgba(23, 39, 133,0.5) 75%,rgba(8, 15, 109,0.5) 75%, rgba(8, 15, 109,0.5) 100%),linear-gradient(90deg, rgb(84, 137, 228) 0%, rgb(84, 137, 228) 51%,rgb(69, 113, 204) 51%, rgb(69, 113, 204) 58%,rgb(54, 88, 180) 58%, rgb(54, 88, 180) 61%,rgb(38, 64, 157) 61%, rgb(38, 64, 157) 63%,rgb(23, 39, 133) 63%, rgb(23, 39, 133) 75%,rgb(8, 15, 109) 75%, rgb(8, 15, 109) 100%); background-blend-mode:overlay, overlay, normal;
    --gradient-blue-3: repeating-linear-gradient(45deg, rgba(0,0,0,0.08),transparent,rgba(0,0,0,0.02),rgba(0,0,0,0.05),rgba(0,0,0,0.01),rgba(0,0,0,0.07),rgba(0,0,0,0.05),rgba(0,0,0,0.02),rgba(0,0,0,0.04),rgba(0,0,0,0.04),rgba(0,0,0,0.02),rgba(0,0,0,0.1),rgba(0,0,0,0.07),rgba(0,0,0,0.02),rgba(0,0,0,0.07) 3px),linear-gradient(135deg, rgb(42, 160, 254),rgb(47, 73, 131));
    --gradient-white:repeating-linear-gradient(135deg, rgba(189,189,189,0.1) 0px, rgba(189,189,189,0.1) 2px,transparent 2px, transparent 4px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
    --gradient-light: linear-gradient(0deg, transparent 0%, transparent 58%,rgba(104, 104, 104,0.05) 58%, rgba(104, 104, 104,0.05) 92%,transparent 92%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 34%,rgba(104, 104, 104,0.05) 34%, rgba(104, 104, 104,0.05) 77%,transparent 77%, transparent 100%),linear-gradient(0deg, transparent 0%, transparent 33%,rgba(104, 104, 104,0.05) 33%, rgba(104, 104, 104,0.05) 53%,transparent 53%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
    --gradient-light-2: radial-gradient(circle at 69% 86%, rgba(165, 165, 165,0.06) 0%, rgba(165, 165, 165,0.06) 25%,rgba(193, 193, 193,0.06) 25%, rgba(193, 193, 193,0.06) 50%,rgba(221, 221, 221,0.06) 50%, rgba(221, 221, 221,0.06) 75%,rgba(249, 249, 249,0.06) 75%, rgba(249, 249, 249,0.06) 100%),radial-gradient(circle at 49% 76%, rgba(129, 129, 129,0.06) 0%, rgba(129, 129, 129,0.06) 25%,rgba(164, 164, 164,0.06) 25%, rgba(164, 164, 164,0.06) 50%,rgba(200, 200, 200,0.06) 50%, rgba(200, 200, 200,0.06) 75%,rgba(235, 235, 235,0.06) 75%, rgba(235, 235, 235,0.06) 100%),radial-gradient(circle at 22% 64%, rgba(173, 173, 173,0.06) 0%, rgba(173, 173, 173,0.06) 25%,rgba(119, 119, 119,0.06) 25%, rgba(119, 119, 119,0.06) 50%,rgba(64, 64, 64,0.06) 50%, rgba(64, 64, 64,0.06) 75%,rgba(10, 10, 10,0.06) 75%, rgba(10, 10, 10,0.06) 100%),linear-gradient(307deg, rgb(255,255,255),rgb(255,255,255));
    
    --gradient-stripes: linear-gradient(90deg, rgb(55, 38, 87) 0%, rgb(55, 38, 87) 14.286%,rgb(58, 56, 115) 14.286%, rgb(58, 56, 115) 28.572%,rgb(60, 74, 143) 28.572%, rgb(60, 74, 143) 42.858%,rgb(63, 93, 171) 42.858%, rgb(63, 93, 171) 57.144%,rgb(65, 111, 198) 57.144%, rgb(65, 111, 198) 71.43%,rgb(68, 129, 226) 71.43%, rgb(68, 129, 226) 85.716%,rgb(70, 147, 254) 85.716%, rgb(70, 147, 254) 100.002%);
    --gradient-stripes-2: repeating-linear-gradient(45deg, rgba(38, 38, 38, 0.04) 0px, rgba(38, 38, 38, 0.04) 104px,rgba(106, 106, 106, 0.04) 104px, rgba(106, 106, 106, 0.04) 208px),repeating-linear-gradient(45deg, rgba(41, 41, 41, 0.14) 0px, rgba(41, 41, 41, 0.14) 99px,rgba(197, 197, 197, 0.14) 99px, rgba(197, 197, 197, 0.14) 198px),linear-gradient(90deg, rgb(94, 165, 255),rgb(8, 75, 110));

    /*transition*/
    --cubic-fade-in : cubic-bezier(.79,.14,.15,.86) all .3s;

}

.aside-background {
    background-image: var(--linear-to-bottom);
}

#aside-primary[data-pds-maximize-apps-list=on] {
    width:200px;
    transition:0.2s;
}

#pds_aside_logo {
    cursor: pointer;
}

#aside-primary {
    transition: 0.2s;
}

#aside-primary[data-pds-maximize-apps-list=on] .btn {
    justify-content: left !important;
    padding-left:10px;
}

#aside-primary .btn .navbar-text {
    display:none;
}

#aside-primary .btn .pin-menu {
    display:none;
}

#aside-primary[data-pds-maximize-apps-list=on] .navbar-text {
    display:block;
    padding-left:10px;
    font-size:0.9rem;
}

#aside-primary[data-pds-maximize-apps-list=on] .pin-menu {
    display:block;
}

.pin-menu {
    float: right;
    display: block;
    position: absolute;
    left: 175px;
    z-index: 9999;
}

.pin-menu:hover {
    color:black;
}

/* Overlay settings layout */

.overlay-settings {
    position: fixed;
    background: white;
    z-index: 999;
    right: 0;
    transform: translateX(110%);
    width:100%;
    height:100%;
    transition: 0.2s;
}

.overlay-settings[opened=true] {
    display:flex;
    flex-direction: column;
    transition:var(--cubic-fade-in);
    transform: translateX(0px);
    transition: 0.2s;
}

.ovs-header {
    height:44px;
    display:flex;
    background-image: var(--gradient-blue);
    width:inherit;
    display:flex;
}

.ovs-header-close {
    background: rgb(210, 21, 21);
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.ovs-header-close:hover {
    background:rgb(240, 23, 23);
    transition: 0.2s;
}

.ovs-header-label {
    display: flex;
    flex-direction: column;
    padding: 5px;
    color:white;
    margin-left:10px;
}

.ovs-header-spoiler {
    font-size: 10px;
}   

.ovs-header-title {
    font-size: 14px;
    font-weight: bold;
    text-transform: capitalize;
}

.ovs-container {
    width:inherit;
    padding-right:10px;
    height:100%;
    display:flex;
    background:#EDF0F4FF;
}

.ovs-content {
    width: 100%;
    padding: 10px;
    border-radius: 12px !important;
    border: 1px solid rgb(217, 224, 235);
    margin: 10px;
    padding-left: 37px !important;
    background:rgb(255, 255, 255);
}

.ovs-navbar-section {
    transition:0.2s;
}

.ovs-section-title {
    font-size: 1rem;
    font-weight: bold;
    padding: 10px;
    padding-left: 20px !important;
    border-bottom: 1px solid #f1f1f1;
}

.ovs-navbar-section[data-pds-section-opened=true] > ul {
    display:flex;
    transition:0.2s;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.ovs-navbar {
    display: flex;
    height: 100%;
    width: 30%;
    max-width: 250px;
    min-width: 210px;
    flex-direction: column;
    padding-top: 30px;
    border-top-right-radius: 10px;
    margin-top: 10px;
    background:#FFFFFFFF;
    border:1px solid rgb(212 216 221);
    box-shadow: 1px 3px 3px #e7e7e7;
    padding-bottom:80px;
}

.ovs-navbar ul {
    transition:1s;
    list-style: none;
    overflow: hidden;
    flex-direction: column;
    padding: 0;
}

.ovs-navbar ul li:before {
    content:"\f105";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size:10px;
    margin-right:10px;
}

.ovs-navbar ul li {
    padding: 10px;
    cursor: pointer;
    padding-left: 15px !important;
    width: 100%;
    font-weight: 500;
    color: #8B93BDFF;
}

.ovs-navbar ul li:hover {
    background: #f9f9f9;
    transition: 0.2s;
    color: #6c6c6c;
}

.ovs-navbar ul .active {
    font-weight: bold;
    background: #f9f9f9;
}

.ovs-navbar ul .active::before {
    margin-right: 5px;
    transition: 0.2s;
}

.ovs-footer {
    display: flex;
    width:inherit;
    height:50px;
    background-image: var(--linear-to-right);
    color:white;
    justify-content: center;
    align-items: center;
}

/* End Overlay layout */

/* Applications list modal */

.oal-container {
    position: fixed;
    flex-direction: column;
    background: #fff;
    z-index: 110;
    box-shadow: 0px 1px 7px #ccc;
    border-right: 1px solid #ccc;
    display: flex;
    transition: 0.5s;
    width: 40%;
    height: calc(100% - 35px);
    transform: translateX(-1000px);
}

.oal-container[opened=true] {
    transition: 0.5s;
    transform: translateX(0px);
}

.oal-header {
    padding: 20px;
    background-image: var(--gradient-grey);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

.oal-search-header {
    width:90%;
}

.oal-input-group {
    width: 80%;
    display: flex;
    background: lightgrey;
    padding: 5px;
    border-radius: 100px;
}

.oal-input-form {
    width:100%;
}

.oal-input-form input {
    width: 100%;
    border: none;
    border-radius: 100px;
    padding: 10px;
    padding-left:20px !important;
    transition: 0.2s;
}

.oal-input-form input:focus {
    border: 0;
    outline: none;
    box-shadow: 0px 0px 4px #bbb;
    transition: 0.2s;
}

.oal-input-icon {
    padding: 10px;
    cursor: pointer;
}

.oal-close {
    background: lightgrey;
    border-radius: 50%;
    padding: 5px;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    transition: 0.3s;
}

.oal-close:hover {
    box-shadow: 0px 3px 3px #ccc;
    background: #b5b5b5;
    transition: 0.2s;
}

.oal-content {
    padding:10px;
}

.oal-list-apps {
    display:flex;
    flex-wrap: wrap;
}

.oal-list-row {
    display: flex;
    flex-direction: column;
}

.oal-label-row {
    padding: 5px;
    padding-left: 15px !important;
    margin-bottom: 15px;
    font-weight: bold;
    display: flex;
    border-bottom: 2px solid var(--fc-event-border-color);
}

.oal-item-row {
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding: 10px;
    margin-bottom: 4px;
}

.oal-item-row:hover {
    box-shadow: 7px 8px 1px 0px #f1f1f1;
    transition: 0.3s;
    background: whitesmoke;
}

.oal-item-row-icon {
    padding: 5px;
}

.oal-item-content {
    width: 60%;
}

.oal-item-title {
    font-weight: bold;
}
 
.oal-item-spoiler {
    display: block;
}

.oal-item-label-spoiler {
    display: block;
}

.oal-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}


.oal-apps-item {
    display: flex;
    flex-direction: column;
    width: max-content;
    justify-content: center;
    min-width: 100px;
    height: 80px;
    align-items: center;
    margin: 5px;
    cursor: pointer;
    border-radius: 10px;
    border:1px solid #f5f5f5;
    transition: 0.3s;
}

.oal-apps-item:hover {
    box-shadow: 7px 3px 5px 0px #f1f1f1;
    transition: 0.3s;
}

.oal-item-icon {

}

.oal-item-label {
    margin-top: 10px;
}

/* end for applications list modal */

/*module input search*/

.find-module-container {
    display: flex;
    align-items: center;
}

.find-module-icon {
    padding: 5px;
    cursor: pointer;
}

.find-module-input {
    width: 100%;
    margin-left: 8px;
}

.find-module-input input:focus {
    outline: none;
}

.find-module-input input {
    border:none;
    font-size:14px;
}

/*end for :: module input search*/

/*overlay*/

.custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 109;
    background-color: rgba(0, 0, 0, 0.2);
    animation: animation-drawer-fade-in 0.3s ease-in-out 1;
}

/*end for overlay*/




/*
Footer section
*/

.sticky-footer {
    width: 100%;
    height: 36px;
    position: fixed;
    bottom:0px;
    overflow: hidden;
    z-index:999;
}

.sticky-footer-background {
    background-image: var(--linear-to-right);
}

.dot:before {
    content:"•";
}

/*
Tooltip section
*/

.titletip {
    position:relative;
}

.titletip:before {
    content: attr(title); /* here's the magic */
    position:absolute;

    margin-left:15px; /* and add a small left margin */
    
    /* basic styles */
    width:150px;
    padding:5px;
    border-radius:8px;
    background:#000;
    color: #fff;
    text-align:center;
  
    transition:opacity 0.2s, display 0.2s ease-in;
    font-weight: 500;
    display: none;
    opacity: 0.9;
}

.titletip:after {
    content: "";
    border:15px solid #000;
    display:none;
    position:absolute;
    opacity: 0.9;
}

.titletip.right:after {
    content: "";
    border-color: transparent black transparent transparent;
}

.titletip.top:after {
    content: "";
    border-color: black transparent transparent transparent;
}

.titletip:hover:before {
    display: block;
}

.titletip.right:before {
    left:100%;
    margin-right:15px;
}

.titletip.top:before {
    bottom: 100%;
    margin-bottom: 15px;
}


.titletip.top:after {
    margin-left: -5px;
    bottom: 50%;
    transform: translateY(-50%);
}

.titletip.right:after {
    left:100%;
    margin-left:-5px;
   
    top:50%;
    transform:translateY(-50%);
}

.titletip.right {
    /* vertically center */
    top:50%;
    transform:translateY(-50%);
    
    /* move to right */
    left:100%;
}

.titletip:hover:before, .titletip:hover:after {
    display:block;
}

/*
Custom drawer
*/

.simple-drawer {
    position: fixed;
    z-index: 999;
    height: 100%;
    background: white;
    right: 0;
    top: 0;
    box-shadow: 5px 0px 5px 3px #a5a5a5;
    transform: translateX(120%);
    transition: transform 0.3s ease-out;
}

.simple-drawer[data-simple-drawer="on"] {
    transform: translateX(10px);
}

@media (max-width:1000px) {
    .simple-drawer-80 {
        width:90%;
    }
    
    .simple-drawer-50 {
        width:60%;
    }
    
    .simple-drawer-60 {
        width:70%;
    }
    
    .simple-drawer-40 {
        width:50%;
    }
}

.simple-drawer-80 {
    width:80%;
}

.simple-drawer-50 {
    width:50%;
}

.simple-drawer-60 {
    width:60%;
}

.simple-drawer-40 {
    width:40%;
}

.simple-drawer-close {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    box-shadow: 2px 2px 3px 1px #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -41px;
    top: 20px;
    cursor: pointer;
    transition: background 0.2s, all 0.2s;
}

.simple-drawer-close:hover >  i {
    color:white;
}

.simple-drawer-close:hover {
    background:#D45B5BFF ;
    box-shadow: 2px 2px 3px 1px #C45555FF;
}

.simple-drawer-footer {
    height: 100px;
    margin-top: auto;
    position: absolute;
    width: 100%;
    bottom: 0;
    border-top:1px solid #EFF2F5;
    background: white;
}

/*
Custom tabs 
*/

/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}
  
.tabset .tab-panel {
    display: none;
}
  
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 15px 15px 25px;
    border: 1px solid transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
}

.tabset > label::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: #8d8d8d;
}

.tabset > label:hover,
.tabset > input:focus + label {
    color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: #06c;
}

.tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    padding: 30px 0;
    border-top: 1px solid #ccc;
}

.tabset {
    margin-top: 10px;
    margin-left: 10px;
}

/*
Button styling
*/

.button-with-icon {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.button-with-icon i {
    font-size: 18px !important;
    color: var(--bs-gray-400) !important;
}

.button-with-icon:hover {
    background: #f6f6f6;
    transition: 0.20s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
Div textarea editable
*/
.div-textarea {
    min-height: 150px;
    padding: 10px 20px;
    margin: 0;
    background-color: #FFFFFF;
    font-size: 16px;
    line-height: 22px;
    border: none;
    outline: none;
    box-shadow: none;
    resize: none;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-y: auto;
    word-break: break-word;
    max-height: 200px;
    overflow-y: scroll;
}

.div-textarea[placeholder]:empty:before {
    color: var(--bs-gray-500);
    content: attr(placeholder);
    font-style: italic;
    cursor:text;
}

/*
Input with emoji
*/


.input-with-emoji {
    background: #F0F2F5FF;
    border-radius: 15px;
}

.input-with-emoji textarea {
    border:none; 
    background:none;
    font-size:14px;
    resize: none;
    
}

.input-with-emoji textarea:focus {
    outline: none;
}

/*header drawer*/

.header-drawer {
    box-shadow: 4px 2px 6px #dbdbdb;
    position: fixed;
    width: 100%;
    background: white;
    top: 0;
    z-index: 1;
    padding:10px;
    transition: transform 0.2s;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.header-drawer[data-pds-toggle='on'] {
    padding-top:50px;
    height: 300px;
    transform: translateY(0px);
}

.header-drawer[data-pds-toggle='off'] {
    transition: transform 0.2s;
    transform: translateY(-200px);
}

.hdraw-toggle {
    z-index: -1;
    background: white;
    height: 30px;
    padding-bottom: 35px;
    transition:0.2s;
    box-shadow: 0px 1px 2px #d5d5d5;
}

.hdraw-toggle:hover i {
    color:var(--bs-active-primary);
}

.hdraw-toggle:hover {
    box-shadow: 0px 3px 2px #acacac;
}


/*Social media thumbnail*/

.thumb-wa, .thumb-whatsapp {
    width:20px;
    height: 20px;
    background-image:url("/public/media/images/svg/brand-logos/whatsapp.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.thumb-ig, .thumb-instagram {
    width:20px;
    height: 20px;
    background-image:url("/public/media/images/svg/social-logos/instagram.svg");  
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}

.thumb-telegram, .thumb-telegram {
    width:20px;
    height: 20px;
    background-image:url("/public/media/images/svg/brand-logos/telegram.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}

.thumb-fb, .thumb-facebook {
    width:20px;
    height: 20px;
    background-image:url("/public/media/images/svg/brand-logos/facebook-3.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}

.thumb-fb, .thumb-messenger {
    width:20px;
    height: 20px;
    background-image:url("/public/media/images/svg/social-logos/messenger.svg");  
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}