@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
:root {
    --color-primary: #7380ec;
    --color-danger: #ff7782;
    --color-success: #41f1b6;
    --color-warning: #ffbb55;
    --color-white: #fff;
    --color-info-dark: #7d8da1;
    --color-info-light: #dce1eb;
    --color-dark: #363949;
    --color-light: rgba(132, 139, 200, 0.18);
    --color-primary-variant: #111e88;
    --color-dark-variant: #677483;
    --color-background: #f6f689;

    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;

    --card-padding: 1.8rem;
    --padding-1: 1.2rem;

    --box-shadow: 0 2rem 3rem var(--color-light);
}

/*-----------DARK THEME VARIABLES----------*/
/*----We are basically overriding some of the variables above----------*/
.dark-theme-variables {
    --color-background: #181a1e;
    --color-white: #202528;
    --color-dark: #edeffd;
    --color-dark-variant: #a3bdcc;
    --color-light: rgba(0, 0, 0, 0.4);
    --box-shadow: 0 2rem 3rem var(--color-light);
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: none;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    font-size: 14px;
}



body {
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #fff;
    font-size: 14px !important;
}

#detailsLeftBox {
    background-color: #DDF1F9;
}

#detailsLeftBox td {
    padding-left:10px;
    border-bottom: solid 0.5px lightskyblue;
}

#detailsLeftBoxTable {
    width:100%;
    background-color:#fff;
    padding:10px;
}

#detailsRightBox {
    background-color: #DDF1F9;
}

#detailsRightBox td {
    padding-left:10px;
    border-bottom: solid 0.5px lightskyblue;
}

 #detailsRightBoxTable {
     width:100%;
     background-color:#fff;
     padding:10px;
     padding-bottom:50px !important;
 }

#detailsActionBox {
    background-color: #DDF1F9;
}

.detailsBoxLeftTd {
    border-right:solid 1px lightgray;
    width:30%;
}

#descriptionDiv #descriptionHeading {
    text-align: center;
    border-radius: 3px;
    font-weight:bold;
    font-size:16px;
}

#descriptionDiv #descriptionBody {
    background-color: #DDF1F9;
    padding: 10px;
    font-size:16px;
    white-space: pre-wrap;
    /*font-family:monospace;*/
    line-height: 1em;
}

/*-------spinner styling----------*/
.spinner::after {
    content: "";
    width: 40px;
    height: 40px;
    border: 10px solid #dddddd;
    border-top-color: #19A5D4;
    border-bottom-color: #19A5D4;
    border-radius: 50%;
    animation: loading 1s linear infinite;
}

@keyframes loading {
    to {
        transform: rotate(1turn);
    }
}
/*-------end spinner styling----------*/

.modal-content  {
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
}

#composed_cc {
    background: none;
}

#loadingGifTarget {
    display: none;
    position: absolute;
    left: 40%;
    z-index: 100;
}

#loadingGifTarget p {
    margin-top: 20px;
    text-align: center;
    color: #19A5D4;
    font-weight: bold;
    font-size: 16px;
}

/*--------- REPORT/FLAG SELLER MODAL ----------*/

#reportSellerBtn {
    color: var(--color-white) !important; 
    font-weight: bold;
    text-align: center;
    background-color: var(--color-danger);
    display: inline-block;
    padding: 0.5em;
    border-radius: var(--border-radius-2) !important;
    margin-left:3rem;
}

.reportSellerModal {
    display: none;
    /*margin-top: 10%;*/
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    border-radius: 6px !important;
}

.reportSellerModal-content {
    /*background-color: #f4f4f4;*/
    margin: 10% auto;
    width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
    animation-name:reportSellerModal-open;
    animation-duration:2s;
}

.reportSellerModal-header h2, .reportSellerModal-header h3 {
    padding: 0;
    border-radius: 5px;
    text-align: center;
}

.reportSellerModal-header {
    background: var(--color-primary);
    padding: 15px;
    color: var(--color-white);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;

    background: var(--color-primary);
}

.reportSellerModal-body {
    padding: 100px 20px;
    min-height: 30rem;
    background-color: white;
    color: black;
    line-height: 2em;
    font-size:18px;
}
.reportSellerModal-body h3 {
    font-size: 18px;
    font-weight: bold;
    color: cornflowerblue;
}

.reportSellerModal-footer {
    background-color: var(--color-primary);
    padding: 10px;
    color: white;
    text-align: center;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 1rem 0.5rem;
}

.reportSellerModal-closeBtn {
    /*color: #ccc;*/
    float: right;
    font-size: 30px;
    color: red;
}

.reportSellerModal-closeBtn:hover, .reportSellerModal-closeBtn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@keyframes reportSellerModal-open {
    from { opacity: 0}
    to {opacity: 1}
}

/*.modal-footer-closeBtn {
    color: #000;
    font-weight: bold;
    text-align: center;
    background-color: var(--color-white);
    display: inline-block;
    padding: 0.5em;
    border-radius: var(--border-radius-1);
    min-width: 4rem;
}
.modal-footer-closeBtn:hover {
    opacity: 90%;
    cursor: pointer;
}*/
/*--------- END REPORT/FLAG SELLER MODAL ----------*/