/* latin-ext */
 @font-face {
     font-family: 'Urbanist';
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x4DF02iFML4hGCyMqgXSFsjlC0V7q7Ag.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

 /* latin */
 @font-face {
     font-family: 'Urbanist';
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x4DF02iFML4hGCyMqgXS9sjlC0V7o.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

 /* latin-ext */
 @font-face {
     font-family: 'Urbanist';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqrbS1miXK2Z7s.woff2) format('woff2');
     unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

 /* latin */
 @font-face {
     font-family: 'Urbanist';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqlbS1miXK2.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }



 * {
     transition: 0.5s all ease !important;

     --animate-duration: 0.3s;
 }

 body {
     /* overflow-y: hidden; */
     overflow-x: hidden;
     /* zoom: 90%; */
 }


 .jiffy-container {
     margin: 0;
     padding: 0;
     width: 100%;
     display: flex;
     margin: 0 auto;
     right: 0;
     left: 0;
     max-width: var(--global-max-width);
     align-items: center;
     justify-content: center;

     height: 100%;
     flex-direction: column;
     background-color: var(--color-dark-primary);
     position: fixed;
 }

 .jiffy-container-inner {
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     width: 100%;
     background-color: var(--color-dark-primary);


 }



 .jiffy-navbar-container {

     margin: 0px;
     padding: 0px;
     display: flex;
     width: 100%;
     align-items: center;
     background-color: transparent;
     top: 16px;
 }

 .jiffy-navbar-container-inner {
     margin: 0px;
     padding: 0px;
     width: var(--global-width);
     display: flex;
     margin: var(--dim-16px) auto;
     align-items: center;
     margin-bottom: var(--dim-32px);




 }

 .jiffy-navabr-logo-container {
     display: flex;
     flex-direction: column;
     width: 50%;


 }

 .jiffy-navbar-logo-sub-container {
     display: flex;
     align-items: center;
 }

 .jiffy-navbar-logo-sub-container>p {
     margin: 0px;
     padding: 0px;
     color: var(--color-white);
     font-size: var(--font-large-extra);
     font-weight: 900;
     text-transform: uppercase;
     -webkit-text-stroke: 1px var(--color-white);
     width: fit-content;


 }

 .jiffy-navbar-logo-sub-container>img {
     width: fit-content;
     height: 40px;
     margin-right: var(--dim-8px);
     object-fit: contain;
 }

 .jiffy-navabr-poweredby {
     display: flex;
     align-items: center;
     width: 100%;

 }

 .jiffy-navabr-poweredby>p {
     margin: 0px;
     padding: 0px;
     color: var(--color-white);
     font-size: var(--font-small);
     display: flex;

 }

 .jiffy-navabr-poweredby>img {

     height: 18px;
     margin-left: var(--dim-4px);
     cursor: pointer;
     object-fit: contain;
 }

 .jiffy-content-container {
     display: grid;
     width: var(--global-width);
     margin: var(--dim-16px) auto;
     height: 100%;
     grid-template-columns: 40% 1fr;
     grid-template-rows: 280px auto;
     height: 100vh;
     gap: var(--dim-16px);
 }

 .jiffy-input-container {
     display: flex;
     flex-direction: column;
     position: relative;
     border-radius: var(--roundness);
     grid-column: 1 / 2;
     grid-row: 1 / 2;
     background-color: var(--color-dark-secondary);
     border: 1px solid var(--color-dark-stroke);
 }

 .jiffy-data-container {

     display: flex;
     flex-direction: column;
     border-radius: var(--roundness);
     background-color: var(--color-dark-secondary);
     border: 1px solid var(--color-dark-stroke);


     grid-row: 1 / 3;
     grid-column: 2 / 2;

     overflow: hidden !important;
     height: 100% !important;

 }

 .jiffy-ads-container {

     display: flex;
     border-radius: var(--roundness);
     background-color: var(--color-dark-secondary);
     border: 1px solid var(--color-dark-stroke);

     grid-row: 2 / 3;
     grid-column: 1 / 1;
     flex-direction: column;
     position: relative;

 }




 /* INPUT STARTED */



 .jiffy-input-title {
     display: flex;
     color: var(--color-brand);
     font-size: var(--font-medium);
     position: absolute;
     background-color: var(--color-dark-secondary);
     border: 1px solid var(--color-dark-stroke);
     padding: var(--dim-8px);
     border-radius: var(--roundness-full);
     right: 0%;
     margin-right: var(--dim-16px);
     margin-top: -20px;


 }

 .jiffy-input-textarea {
     display: flex;
     margin: 0 auto;
     margin: var(--dim-16px);
     margin-top: var(--dim-24px);
     box-sizing: border-box;
     background-color: transparent;
     border: none;
     color: var(--color-white);
     height: 180px;
     outline: none;
     resize: none;
     overflow: auto;

 }

 .jiffy-separator {
     height: 1px;
     width: 100%;
     display: flex;
     background-color: var(--color-dark-stroke);

 }

 .jiffy-input-btn-container {
     display: flex;
     margin: var(--dim-16px) 0px;
     margin-left: auto;

 }

 .jiffy-input-password-container {
     display: flex;
     align-items: center;
     border-radius: var(--roundness-full);
     margin-right: var(--dim-16px);
     background-color: var(--color-dark-primary);

 }

 .jiffy-input-password-icon {
     display: flex;
     width: 20px;
     height: 20px;
     margin-left: var(--dim-16px);
 }

 .jiffy-input-password-input {
     margin: 0;
     padding: 0;
     font-size: var(--font-medium);
     color: var(--color-white);
     display: flex;
     margin-left: var(--dim-8px);
     margin-right: var(--dim-16px);
     width: fit-content;
     height: 40px;
     align-items: center;
     overflow: hidden;
     background-color: transparent;
     outline: none;
     border: none;

 }


 .jiffy-send-btn {
     margin: 0px;
     padding: 0px;
     display: flex;
     color: var(--color-white);
     font-size: var(--font-medium);
     text-align: center;
     border-radius: var(--roundness-full);
     padding: var(--dim-16px);
     cursor: pointer;
     outline: 0px;
     border: none;
     width: fit-content;
     height: fit-content;
     background-color: var(--color-brand);
     margin: 0 auto;
     margin-top: auto;
     align-items: center;
     margin-right: var(--dim-16px);

 }

 .jiffy-send-btn>img {
     display: flex;
     width: fit-content;
     height: 20px;
     width: 20px;
     object-fit: contain;
     margin-right: var(--dim-8px);
 }

 .jiffy-send-btn:hover {
     color: var(--color-black);
     background-color: var(--color-white);
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }

 .jiffy-send-btn:hover img {
     filter: invert(1);
 }

 .jiff-loader {
     display: flex;
     border: 4px solid var(--color-white);
     border-top: 4px solid var(--color-brand);
     border-radius: 50%;
     width: 12px;
     height: 12px;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .jiffy-message {
     display: flex;

     position: sticky !important;
     top: 0%;
 }

 .jiffy-red-message {

     z-index: 4;
     top: var(--dim-32px);
     position: absolute;
     margin: 0px;
     padding: 0px;
     font-size: var(--font-medium);
     display: flex;
     background-color: var(--color-red);
     width: fit-content;
     justify-content: center;
     border-radius: var(--roundness-full);
     padding: var(--dim-8px);
     color: var(--color-white);
     box-sizing: border-box;

 }

 .jiffy-green-message {

     z-index: 4;
     top: var(--dim-32px);
     position: absolute;
     margin: 0px;
     padding: 0px;
     font-size: var(--font-medium);
     display: flex;
     background-color: var(--color-white);
     width: fit-content;
     justify-content: center;
     border-radius: var(--roundness-full);
     padding: var(--dim-8px);
     color: var(--color-black);
     box-sizing: border-box;
 }



 /* DATA STARTED */
 .jiffy-data-info-search-container {
     display: flex;
     height: fit-content;
     align-items: center;
     width: 100%;

     box-sizing: border-box;
     padding-top: var(--dim-16px);
     padding-bottom: var(--dim-32px);


 }

 .jiffy-data-messages-icon {
     display: flex;
     width: fit-content;
     height: 20px;
     width: 20px;
     object-fit: contain;
     margin-right: var(--dim-8px);
     margin-left: var(--dim-16px);

 }

 .jiffy-data-messages-count {
     display: flex;
     font-size: var(--font-large);
     height: fit-content;
     color: var(--color-white);
     font-weight: 900;
 }

 .jiffy-data-router-container {
     height: 35px;
     width: 35px;
     display: flex;
     margin-left: auto;
     justify-content: center;
     align-items: center;
     margin-right: var(--dim-8px);
     border-radius: var(--roundness-full);
     border: 1px solid var(--color-dark-stroke);
 }

 .jiffy-data-router {
     display: flex;
     width: fit-content;
     height: 18px;
     width: 18px;
     object-fit: contain;

 }

 .jiffy-data-router-container:hover {
     cursor: pointer;
     background-color: var(--color-dark-primary);
 }

 .jiffy-data-router-container-active {
     background-color: var(--color-yellow);
     border: 1px solid var(--color-yellow-dark);

 }

 .jiffy-data-router-container-active:hover {
     background-color: var(--color-yellow-dark) !important;

 }

 .jiffy-data-router-container-active>img {
     filter: invert(1);

 }

 .jiffy-data-search-container {
     display: flex;
     align-items: center;

     margin-right: var(--dim-16px);
     border-radius: var(--roundness-full);
     background-color: var(--color-dark-primary);
 }

 .jiffy-data-search-icon {
     display: flex;
     width: 20px;
     height: 20px;
     margin-left: var(--dim-8px);
 }

 .jiffy-data-search-input {
     margin: 0;
     padding: 0;
     font-size: var(--font-medium);
     color: var(--color-white);
     display: flex;
     margin-left: var(--dim-8px);
     margin-right: var(--dim-8px);
     width: fit-content;
     height: 40px;
     align-items: center;
     overflow: hidden;
     background-color: transparent;
     outline: none;
     border: none;
 }

 .jiffy-data-content {

     display: flex;
     flex-direction: column;
     width: 100%;
     justify-content: center;
     align-items: center;

     overflow: scroll;
     /* Hides overflowing content */
     box-sizing: border-box;
     /* Includes border in the element's width and height */

     overflow-x: hidden !important;


 }

 .jiffy-data-not-found-container {

     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .jiffy-data-not-found-container>img {
     width: 100px;
     height: fit-content;
     object-fit: contain;

 }

 .jiffy-data-not-found-container>p {
     display: flex;
     font-size: var(--font-medium);
     height: fit-content;
     color: var(--color-white);
     margin-top: var(--dim-16px);
     text-align: center;
 }


 .jiffy-data-itself {
     display: flex;
     width: 100%;
     padding-left: var(--dim-16px);
     padding-right: var(--dim-16px);
     flex-direction: column;
     position: relative;
     height: fit-content;
     box-sizing: border-box;
     justify-content: center;

     padding-top: var(--dim-8px);
     padding-bottom: var(--dim-8px);

 }


 .jiff-data-itself-text {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-medium);
     color: var(--color-white);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 80%;
 }

 .jiff-data-itself-metadata-container {
     display: flex;
     margin-top: var(--dim-2px);
     align-items: center;
     box-sizing: border-box;

 }

 .jiff-data-itself-id {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-small);
     color: var(--color-dark-lightgray);
 }

 .jiff-data-itself-time {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-small);
     color: var(--color-dark-lightgray);
 }

 .jiff-data-itself-copied {
     margin: 0px;
     padding: 0px;
     font-size: var(--font-small);
     color: var(--color-dark-lightgray);
 }

 .jiffy-cirle {
     color: var(--color-dark-lightgray);
     margin-right: var(--dim-8px);
     margin-left: var(--dim-8px);
 }


 .jiff-data-itself-btns-container {
     display: flex;
     position: absolute;
     right: 0%;
     top: 50%;
     transform: translate(0%, -50%);
     box-sizing: border-box;
     align-items: center;


 }

 .jiffy-data-itself-password-container {
     display: flex;
     align-items: center;
     border-radius: var(--roundness-full);
     margin-right: var(--dim-16px);
     background-color: var(--color-dark-primary);
     display: none;
 }

 .jiffy-data-itself-password-icon {
     display: flex;
     width: 20px;
     height: 20px;
     margin-left: var(--dim-8px);
 }

 .jiffy-data-itself-password-input {
     margin: 0;
     padding: 0;
     font-size: var(--font-medium);
     color: var(--color-white);
     display: flex;
     margin-left: var(--dim-8px);
     margin-right: var(--dim-8px);
     width: 120px;
     height: 40px;
     align-items: center;
     overflow: hidden;
     background-color: transparent;
     outline: none;
     border: none;
 }


 .jiffy-data-itself-lockcopy-container {
     height: 35px;
     width: 35px;
     display: flex;
     margin-left: auto;
     justify-content: center;
     align-items: center;
     border-radius: var(--roundness-full);
     border: 1px solid var(--color-dark-stroke);
     box-sizing: border-box;
     margin-right: var(--dim-16px);
 }

 .jiffy-data-itself-lockcopy-container>img {
     display: flex;
     width: fit-content;
     height: 18px;
     width: 18px;
     object-fit: contain;

 }

 .jiffy-data-itself-lockcopy-container:hover {
     cursor: pointer;
     background-color: var(--color-dark-primary);
 }

 .jiffy-data-itself-lock-container {
     border: 1px solid var(--color-brand) !important;
 }

 .jiffy-data-itself-lock-container-2px-border {
     border: 1px solid var(--color-dark-stroke) !important;

 }

 .jiffy-data-itself-done-container {
     display: none;
     border: 1px solid var(--color-brand) !important;


 }

 .jiffy-data-itself-unlock-copy-container {
     display: none;
     border: 1px solid var(--color-dark-stroke);


 }

 .jiffy-data-itself-separator {

     width: 100%;
     display: flex;
     background-color: var(--color-dark-stroke);

     border: 1px solid var(--color-dark-stroke);
 }

 .jiffy-data-itself-same-router {
     background-color: var(--color-yellow);
     color: var(--color-black) !important;
 }

 .jiffy-data-itself-same-router-btns {
     color: var(--color-black) !important;
 }

 .jiffy-data-itself-same-router-btns>div {

     background-color: var(--color-black);
     border: 1px solid var(--color-black) !important;
 }

 .jiffy-data-itself-same-router-btns-inner {
     background-color: var(--color-black);
     border: 1px solid var(--color-black) !important;

 }

 .jiffy-data-itself-same-router-btns-inner>img {
     filter: invert(0) !important;
 }

 /* ADVERTISEMENT */
 .jiffy-ads-title {

     position: absolute;
     margin: 0px;
     padding: 0px;
     font-size: var(--font-medium);
     color: var(--color-black);
     background-color: var(--color-yellow);
     padding: var(--dim-8px);
     box-sizing: border-box;
     height: fit-content;
     display: flex;
     margin: 0 auto;
     margin-top: var(--dim-16px);
     border-radius: var(--roundness-full);
     left: 3%;
     border: 1px solid var(--color-yellow-dark);
 }

 .jiffy-ads-image {
     width: 96%;
     height: 96%;
     /* height: calc(100% - 80px);  */
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: auto;
     border-radius: var(--roundness);
     cursor: pointer;


     background-image: url("../img/ads_jiffy.png");
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     background-color: var(--color-white);

 }

 .jiffy-ads-image:hover {
     transform: scale(1.02);
     animation: pulse-shadow 3s infinite;
 }

 @keyframes pulse-shadow {
     0% {


         box-shadow: 0px 0px 28px 12px rgba(0, 124, 58, 0);
         -webkit-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0);
         -moz-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0);
     }

     25% {


         box-shadow: 0px 0px 28px 12px rgba(0, 124, 58, 0.23);
         -webkit-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0.23);
         -moz-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0.23);
     }

     50% {

         box-shadow: 0px 0px 28px 12px rgba(0, 124, 58, 0.23);
         -webkit-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0.43);
         -moz-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0.43);
     }

     75% {

         box-shadow: 0px 0px 28px 12px rgba(0, 124, 58, 0.23);
         -webkit-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0.23);
         -moz-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0.23);

     }

     100% {

         box-shadow: 0px 0px 28px 12px rgba(0, 124, 58, 0);
         -webkit-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0);
         -moz-box-shadow: 0px 0px 128px 12px rgba(0, 124, 58, 0);

     }

 }

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

     .jiffy-content-container {
         grid-template-columns: 50% 1fr;
     }

 }

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

     .jiffy-content-container {
         grid-template-columns: 100%;
         grid-template-rows: 280px auto auto;
     }

     .jiffy-data-container {

         grid-row: 3;
         grid-column: 1 / 1;
         height: fit-content !important;
         padding-bottom: var(--dim-16px) !important;

     }

     .jiffy-ads-container {

         grid-row: 2 / 3;
         grid-column: 1 / 1;
         height: 200px !important;
         background-position: center;

     }

     .jiffy-ads-image {
         width: 100%;
         height: 100%;
     }

     .jiffy-container {
         position: relative !important;
         height: fit-content !important;
     }

     .jiffy-container-inner {

         height: fit-content !important;


     }

     .jiffy-content-container {

         height: fit-content !important;
     }

     .jiffy-ads-title {

         position: absolute;
         margin: 0px;
         padding: 0px;
         font-size: var(--font-small);
         color: var(--color-black);
         background-color: var(--color-yellow);
         padding: var(--dim-8px);
         box-sizing: border-box;
         height: fit-content;
         display: flex;
         margin: 0 auto;
         border-radius: var(--roundness-full);
         left: 3%;
         bottom: var(--dim-16px);
         border: 1px solid var(--color-yellow-dark);
     }


 }

 @media only screen and (max-width: 420px) {
     .jiffy-input-btn-container {}

     .jiffy-input-password-container {
         width: 180px;

     }

     .jiffy-data-router-container {
         display: none;
     }

     .jiffy-data-search-container {
         margin-left: auto;
     }
 }