/***********************************************************************************/
/*                                                                                 */
/*                                  c4s.css  V1 at 29-06-2022                      */
/*                                                                                 */
/***********************************************************************************/

/*.box{
    width:clamp(220px, 55%, 300px);
}*/

/***********************************************************************************/
/*                                                                                 */
/*                                  c4s.css  V1 at 29-06-2022                      */
/*                                                                                 */
/***********************************************************************************/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

html {
    scroll-behavior: smooth;
}

body {
    scroll-behavior: smooth;
    margin: 0;
}

a {
    display: inline-block;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

ul {
    list-style: none;
    padding: 0;
}

datalist {
    display: none;
}
 
::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background-color: white;
}

::-webkit-scrollbar-thumb {
    background-color: var(--cfs-theme-background-color);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--cfs-theme-background-color);
    }

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1 {
}

h2 {
}

h3 {
}

h4 {
}

h5 {
}

/***********************************************************************************/
/*                                                                                 */
/*                               cfs framwork start                                */
/*                                                                                 */
/***********************************************************************************/

/***********************************************************************************/
/*                                                                                 */
/*                                  Table start                                    */
/*                                                                                 */
/***********************************************************************************/
 
.cfs-table {
    width: 100%;
    text-align:center;
    border: 5px solid var(--cfs-theme-background-color);
    border-radius: 5px;
    border-spacing:1px;
    margin:0;
}
.cfs-table thead {

}
    .cfs-table thead tr {
        background-color: var(--cfs-theme-background-color);
        color: var(--cfs-theme-text-color);
    }
.cfs-table thead tr th{

}
.cfs-table tbody tr {

}
    .cfs-table tbody tr:hover {
        background-color: var(--cfs-theme-background-color);
        color: var(--cfs-theme-text-color);
    }
    .cfs-table tbody tr td {
        border: 1px solid var(--cfs-theme-background-color);
    }
.cfs-table tfoot tr {

}
    .cfs-table tfoot tr:hover {
        background-color: var(--cfs-theme-background-color);
        color: var(--cfs-theme-text-color);
    }
.cfs-table tfoot tr td {

}
/***********************************************************************************/
.cfs-table-theme1 {
    width: 100%;
    text-align: center;
    border: 5px solid var(--cfs-theme-background-color);
    border-radius: 5px;
    border-spacing: 1px;
}

    .cfs-table-theme1 thead {
    }

        .cfs-table-theme1 thead tr {
            color: black;
        }

            .cfs-table-theme1 thead tr th {
            }

    .cfs-table-theme1 tbody tr {
    }

        .cfs-table-theme1 tbody tr:hover {
            background-color: var(--cfs-theme-background-color);
            color: var(--cfs-theme-text-color);
        }

        .cfs-table-theme1 tbody tr td {
            
        }

    .cfs-table-theme1 tfoot tr {
    }

        .cfs-table-theme1 tfoot tr:hover {
            background-color: var(--cfs-theme-background-color);
            color: var(--cfs-theme-text-color);
        }

        .cfs-table-theme1 tfoot tr td {
        }
/*****************/
/*  margin start */
/*****************/
 
.cfs-m-0 {
    margin: 0px;
}

.cfs-m-5 {
    margin: 5px;
}

.cfs-m-10 {
    margin: 10px;
}

.cfs-m-15 {
    margin: 15px;
}

.cfs-m-20 {
    margin: 20px;
}

.cfs-m-25 {
    margin: 25px;
}

.cfs-m-30 {
    margin: 30px;
}

/****************/
/*  margin top  */
/****************/

.cfs-mt-0 {
    margin-top: 0px;
}

.cfs-mt-5 {
    margin-top: 5px;
}

.cfs-mt-10 {
    margin-top: 10px;
}

.cfs-mt-15 {
    margin-top: 15px;
}

.cfs-mt-20 {
    margin-top: 20px;
}

.cfs-mt-25 {
    margin-top: 25px;
}

.cfs-mt-30 {
    margin-top: 30px;
}

/*******************/
/*  margin bottom  */
/*******************/

.cfs-mb-0 {
    margin-bottom: 0px;
}

.cfs-mb-5 {
    margin-bottom: 5px;
}

.cfs-mb-10 {
    margin-bottom: 10px;
}

.cfs-mb-15 {
    margin-bottom: 15px;
}

.cfs-mb-20 {
    margin-bottom: 20px;
}

.cfs-mb-25 {
    margin-bottom: 25px;
}

.cfs-mb-30 {
    margin-bottom: 30px;
}

/*******************/
/*  margin right   */
/*******************/

.cfs-mr-0 {
    margin-right: 0px;
}

.cfs-mr-5 {
    margin-right: 5px;
}

.cfs-mr-10 {
    margin-right: 10px;
}

.cfs-mr-15 {
    margin-right: 15px;
}

.cfs-mr-20 {
    margin-right: 20px;
}

.cfs-mr-25 {
    margin-right: 25px;
}

.cfs-mr-30 {
    margin-right: 30px;
}

/*******************/
/*  margin left    */
/*******************/

.cfs-ml-0 {
    margin-left: 0px;
}

.cfs-ml-5 {
    margin-left: 5px;
}

.cfs-ml-10 {
    margin-left: 10px;
}

.cfs-ml-15 {
    margin-left: 15px;
}

.cfs-ml-20 {
    margin-left: 20px;
}

.cfs-ml-25 {
    margin-left: 25px;
}

.cfs-ml-30 {
    margin-left: 30px;
}

/*****************/
/*  margin end   */
/*****************/

/*****************/
/*  padding start */
/*****************/

.cfs-p-5 {
    padding: 5px;
}

.cfs-p-10 {
    padding: 10px;
}

.cfs-p-15 {
    padding: 15px;
}

.cfs-p-20 {
    padding: 20px;
}

.cfs-p-25 {
    padding: 25px;
}

.cfs-p-30 {
    padding: 30px;
}

/****************/
/*  padding top  */
/****************/

.cfs-pt-5 {
    padding-top: 5px;
}

.cfs-pt-10 {
    padding-top: 10px;
}

.cfs-pt-15 {
    padding-top: 15px;
}

.cfs-pt-20 {
    padding-top: 20px;
}

.cfs-pt-25 {
    padding-top: 25px;
}

.cfs-pt-30 {
    padding-top: 30px;
}

/*******************/
/*  padding bottom  */
/*******************/

.cfs-pb-5 {
    padding-bottom: 5px;
}

.cfs-pb-10 {
    padding-bottom: 10px;
}

.cfs-pb-15 {
    padding-bottom: 15px;
}

.cfs-pb-20 {
    padding-bottom: 20px;
}

.cfs-pb-25 {
    padding-bottom: 25px;
}

.cfs-pb-30 {
    padding-bottom: 30px;
}

/*******************/
/*  padding right   */
/*******************/

.cfs-pr-5 {
    padding-right: 5px;
}

.cfs-pr-10 {
    padding-right: 10px;
}

.cfs-pr-15 {
    padding-right: 15px;
}

.cfs-pr-20 {
    padding-right: 20px;
}

.cfs-pr-25 {
    padding-right: 25px;
}

.cfs-pr-30 {
    padding-right: 30px;
}

/*******************/
/*  padding left    */
/*******************/

.cfs-pl-5 {
    padding-left: 5px;
}

.cfs-pl-10 {
    padding-left: 10px;
}

.cfs-pl-15 {
    padding-left: 15px;
}

.cfs-pl-20 {
    padding-left: 20px;
}

.cfs-pl-25 {
    padding-left: 25px;
}

.cfs-pl-30 {
    padding-left: 30px;
}

/*****************/
/*  padding end   */
/*****************/

/**************************/
/*  border-radius start   */
/**************************/

.cfs-br-circle {
    border-radius: 50%;
}

.cfs-br-1 {
    border-radius: 1px;
}

.cfs-br-2 {
    border-radius: 2px;
}

.cfs-br-3 {
    border-radius: 3px;
}

.cfs-br-4 {
    border-radius: 4px;
}

.cfs-br-5 {
    border-radius: 5px;
}

.cfs-br-6 {
    border-radius: 6px;
}

.cfs-br-7 {
    border-radius: 7px;
}

.cfs-br-8 {
    border-radius: 8px;
}

.cfs-br-9 {
    border-radius: 9px;
}

.cfs-br-10 {
    border-radius: 10px;
}

.cfs-br-11 {
    border-radius: 11px;
}

.cfs-br-12 {
    border-radius: 12px;
}

.cfs-br-13 {
    border-radius: 13px;
}

.cfs-br-14 {
    border-radius: 14px;
}

.cfs-br-15 {
    border-radius: 15px;
}

.cfs-br-16 {
    border-radius: 16px;
}

.cfs-br-17 {
    border-radius: 17px;
}

.cfs-br-18 {
    border-radius: 18px;
}

.cfs-br-19 {
    border-radius: 19px;
}

.cfs-br-20 {
    border-radius: 20px;
}

.cfs-br-21 {
    border-radius: 21px;
}

.cfs-br-22 {
    border-radius: 22px;
}

.cfs-br-23 {
    border-radius: 23px;
}

.cfs-br-24 {
    border-radius: 24px;
}

.cfs-br-25 {
    border-radius: 25px;
}

.cfs-br-26 {
    border-radius: 26px;
}

.cfs-br-27 {
    border-radius: 27px;
}

.cfs-br-28 {
    border-radius: 28px;
}

.cfs-br-29 {
    border-radius: 29px;
}

.cfs-br-30 {
    border-radius: 30px;
}

/**************************/
/*  border-radius end     */
/**************************/

/**************************/
/*        width start     */
/**************************/

.cfs-w-full {
    width: 100% !important;
}

.cfs-full-width { /*Old Class needs to be replaced at the whole system with the new class  cfs-w-full*/
    width: 100%;
}

.cfs-w-fit {
    width: fit-content;
}

.cfs-w-stretch {
    width: stretch;
}

/**************************/
/*        width end       */
/**************************/

/**************************/
/*       height start     */
/**************************/

.cfs-h-full {
    height: 100%;
}

.cfs-h-full-v {
    height: 100vh;
}

/**************************/
/*       height end       */
/**************************/

/**************************/
/*       display start    */
/**************************/

.cfs-d-block {
    display: block;
}

.cfs-d-flex {
    display: flex;
}

.cfs-d-flex-d-r {
    flex-direction: row;
}

.cfs-d-flex-d-c {
    flex-direction: column;
}

.cfs-ac-flex {
    align-items: center;
}

.cfs-jc-flex {
    justify-content: center;
}

.cfs-bw-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cfs-d-flex-c {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cfs-d-grid {
    display: grid;
}

/**************************/
/*       display end      */
/**************************/

/**************************/
/*      position start    */
/**************************/

.cfs-p-relative {
    position: relative;
}

.cfs-p-absolute {
    position: absolute;
}

.cfs-p-fixed {
    position: fixed;
}

.cfs-p-sticky {
    position: sticky;
}

/**************************/
/*      position end      */
/**************************/

/**************************/
/*     font-size start    */
/**************************/
.cfs-fs-1 {
    font-size: 1px;
}

.cfs-fs-2 {
    font-size: 2px;
}

.cfs-fs-3 {
    font-size: 3px;
}

.cfs-fs-4 {
    font-size: 4px;
}

.cfs-fs-5 {
    font-size: 5px;
}

.cfs-fs-6 {
    font-size: 6px;
}

.cfs-fs-7 {
    font-size: 7px;
}

.cfs-fs-8 {
    font-size: 8px;
}

.cfs-fs-9 {
    font-size: 9px;
}

.cfs-fs-10 {
    font-size: 10px;
}

.cfs-fs-11 {
    font-size: 11px;
}

.cfs-fs-12 {
    font-size: 12px;
}

.cfs-fs-13 {
    font-size: 13px;
}

.cfs-fs-14 {
    font-size: 14px;
}

.cfs-fs-15 {
    font-size: 15px;
}

.cfs-fs-16 {
    font-size: 16px;
}

.cfs-fs-17 {
    font-size: 17px;
}

.cfs-fs-18 {
    font-size: 18px;
}

.cfs-fs-19 {
    font-size: 19px;
}

.cfs-fs-20 {
    font-size: 20px;
}

/**************************/
/*     font-size end      */
/**************************/



/**************************/
/*        h start         */
/**************************/

.cfs-h1{

}

.cfs-h2 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    background-color: var(--cfs-theme-background-color) !important;
    text-align: center;
    padding: 10px;
    margin: 20px;
    border-radius: 8px !important;
}
 
.cfs-h3{

}
 
.cfs-h4{

}
 
.cfs-h5{

}
 
.cfs-h6{

}
 
/**************************/
/*        h end           */
/**************************/



/**************************/
/*        gap start       */
/**************************/
.cfs-gap-1 {
    gap: 1px;
}

.cfs-gap-2 {
    gap: 2px;
}

.cfs-gap-3 {
    gap: 3px;
}

.cfs-gap-4 {
    gap: 4px;
}

.cfs-gap-5 {
    gap: 5px;
}

.cfs-gap-6 {
    gap: 6px;
}

.cfs-gap-7 {
    gap: 7px;
}

.cfs-gap-8 {
    gap: 8px;
}

.cfs-gap-9 {
    gap: 9px;
}

.cfs-gap-10 {
    gap: 10px;
}

.cfs-gap-11 {
    gap: 11px;
}

.cfs-gap-12 {
    gap: 12px;
}

.cfs-gap-13 {
    gap: 13px;
}

.cfs-gap-14 {
    gap: 14px;
}

.cfs-gap-15 {
    gap: 15px;
}

.cfs-gap-16 {
    gap: 16px;
}

.cfs-gap-17 {
    gap: 17px;
}

.cfs-gap-18 {
    gap: 18px;
}

.cfs-gap-19 {
    gap: 19px;
}

.cfs-gap-20 {
    gap: 20px;
}

.cfs-gap-21 {
    gap: 21px;
}

.cfs-gap-22 {
    gap: 22px;
}

.cfs-gap-23 {
    gap: 23px;
}

.cfs-gap-24 {
    gap: 24px;
}

.cfs-gap-25 {
    gap: 25px;
}

.cfs-gap-26 {
    gap: 26px;
}

.cfs-gap-27 {
    gap: 27px;
}

.cfs-gap-28 {
    gap: 28px;
}

.cfs-gap-29 {
    gap: 29px;
}

.cfs-gap-30 {
    gap: 30px;
}

/**************************/
/*     font-size end      */
/**************************/

/**************************/
/*   font-weight start    */
/**************************/

.cfs-fw-b {
    font-weight: bold;
}

.cfs-fw-100 {
    font-weight: 100;
}

.cfs-fw-200 {
    font-weight: 200;
}

.cfs-fw-300 {
    font-weight: 300;
}

.cfs-fw-400 {
    font-weight: 400;
}

.cfs-fw-500 {
    font-weight: 500;
}

.cfs-fw-600 {
    font-weight: 600;
}

.cfs-fw-700 {
    font-weight: 700;
}

.cfs-fw-800 {
    font-weight: 800;
}

.cfs-fw-900 {
    font-weight: 900;
}

/**************************/
/*   font-weight end      */
/**************************/

/**************************/
/*      border start      */
/**************************/

.cfs-b-none {
    border: none;
}

.cfs-b-1 {
    border: 1px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-2 {
    border: 2px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-3 {
    border: 3px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-4 {
    border: 4px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-5 {
    border: 5px solid var(--cfs-theme-background-color) !important;
}



.cfs-b-1-theme {
    border: 1px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-2-theme {
    border: 2px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-3-theme {
    border: 3px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-4-theme {
    border: 4px solid var(--cfs-theme-background-color) !important;
}

.cfs-b-5-theme {
    border: 5px solid var(--cfs-theme-background-color) !important;
}



.cfs-b-1-codelogo-green {
    border: 1px solid #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-b-2-codelogo-green {
    border: 2px solid #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-b-3-codelogo-green {
    border: 3px solid #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-b-4-codelogo-green {
    border: 4px solid #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-b-5-codelogo-green {
    border: 5px solid #4DA391 !important; /*code logo green tefany #4DA391*/
}



.cfs-b-1-codelogo-lightblue {
    border: 1px solid #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-b-2-codelogo-lightblue {
    border: 2px solid #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-b-3-codelogo-lightblue {
    border: 3px solid #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-b-4-codelogo-lightblue {
    border: 4px solid #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-b-5-codelogo-lightblue {
    border: 5px solid #0094D9 !important; /*code logo light blue #0094D9*/
}



.cfs-b-1-codelogo-red {
    border: 1px solid #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-b-2-codelogo-red {
    border: 2px solid #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-b-3-codelogo-red {
    border: 3px solid #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-b-4-codelogo-red {
    border: 4px solid #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-b-5-codelogo-red {
    border: 5px solid #E61A22 !important; /*code logo red #E61A22*/
}



.cfs-b-1-codelogo-purple {
    border: 1px solid #475E88 !important; /*code logo purple #475E88*/
}

.cfs-b-2-codelogo-purple {
    border: 2px solid #475E88 !important; /*code logo purple #475E88*/
}

.cfs-b-3-codelogo-purple {
    border: 3px solid #475E88 !important; /*code logo purple #475E88*/
}

.cfs-b-4-codelogo-purple {
    border: 4px solid #475E88 !important; /*code logo purple #475E88*/
}

.cfs-b-5-codelogo-purple {
    border: 5px solid #475E88 !important; /*code logo purple #475E88*/
}



.cfs-b-1-eee {
    border: 1px solid #eee;
}

.cfs-b-2-eee {
    border: 2px solid #eee !important;
}

.cfs-b-3-eee {
    border: 3px solid #eee !important;
}

.cfs-b-4-eee {
    border: 4px solid #eee !important;
}

.cfs-b-5-eee {
    border: 5px solid #eee !important;
}


/****************************************/
/* Border Light color Start*/
.cfs-b-1-Light-color {
    border: 1px solid rgba(255,255,255,0.1);
}

.cfs-b-2-eee {
    border: 2px solid rgba(255,255,255,0.1);
}

.cfs-b-3-eee {
    border: 3px solid rgba(255,255,255,0.1);
}

.cfs-b-4-eee {
    border: 4px solid rgba(255,255,255,0.1);
}

.cfs-b-5-eee {
    border: 5px solid rgba(255,255,255,0.1);
}
/* Border Light color Start*/
/****************************************/

/**************************/
/*      border end        */
/**************************/

/***************************/
/*  background-color start */
/***************************/
.cfs-c-theme {
    color: var(--cfs-theme-background-color) !important;
}

.cfs-c-theme-green-logo-success {
    color: #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-c-theme-lightblue-logo-info {
    color: #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-c-theme-red-logo-danger {
    color: #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-c-theme-purple-logo {
    color: #475E88 !important; /*code logo purple #475E88*/
}

.cfs-c-theme-orange-ajmal-warning {
    color: #F89A35 !important; /*ajmal  #F89A35*/
}

.cfs-c-theme-eee {
    color: #eee !important;
}

.cfs-c-theme-gray {
    color: gray !important;
}

.cfs-c-theme-blue {
    color: blue !important;
}

.cfs-c-theme-yellow {
    color: yellow !important;
}

.cfs-c-codelogo-green {
    color: #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-c-codelogo-lightblue {
    color: #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-c-codelogo-red {
    color: #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-c-codelogo-purple {
    color: #475E88 !important; /*code logo purple #475E88*/
}



.cfs-c-eee {
    color: #eee !important;
}

.cfs-c-gray {
    color: gray !important; /*light*/
}

.cfs-c-grey {
    color: grey !important; /*dark*/
}

.cfs-c-blue {
    color: blue !important;
}

.cfs-c-yellow {
    color: yellow !important;
}

.cfs-c-orange {
    color: orange !important;
}

.cfs-c-green {
    color: green !important;
}

.cfs-c-purple {
    color: purple !important;
}

.cfs-c-red {
    color: red !important;
}

.cfs-c-darkred {
    color: darkred !important;
}

.cfs-c-white {
    color: white !important;
}


/***************************/
/*  background-color end   */
/***************************/

/***************************/
/*  background-color start */
/***************************/
.cfs-bg-theme {
    background-color: var(--cfs-theme-background-color);
}

.cfs-bg-theme-green-logo-success {
    background-color: #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-bg-theme-lightblue-logo-info {
    background-color: #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-bg-theme-red-logo-danger {
    background-color: #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-bg-theme-purple-logo {
    background-color: #475E88 !important; /*code logo purple #475E88*/
}

.cfs-bg-theme-orange-ajmal-warning {
    background-color: #F89A35 !important; /*ajmal  #F89A35*/
}

.cfs-bg-theme-eee {
    background-color: #eee !important;
}

.cfs-bg-theme-gray {
    background-color: gray !important;
}

.cfs-bg-theme-blue {
    background-color: blue !important;
}

.cfs-bg-theme-yellow {
    background-color: yellow !important;
}



.cfs-bg-codelogo-green {
    background-color: #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-bg-codelogo-lightblue {
    background-color: #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-bg-codelogo-red {
    background-color: #E61A22 !important; /*code logo red #E61A22*/
}

.cfs-bg-codelogo-purple {
    background-color: #475E88 !important; /*code logo purple #475E88*/
}


/*************/
/* White Start*/
.cfs-bg-white {
    background-color: white !important;
}
.cfs-bg-white-2025 {
    background-color: #f9f9f9 !important; /*Broken white*/
}
/* White End*/
/*************/


.cfs-bg-yellow {
    background-color: yellow !important;
}


/*************/
/* Blue Start*/
.cfs-bg-blue {
    background-color: blue !important;
}
.cfs-bg-blue-2025 {
    background-color: #1e2143 !important;
}
/* Blue End*/
/*************/


/*************/
/* Grey Start*/
.cfs-bg-grey {
    background-color: grey !important; /*dark*/
}
.cfs-bg-eee {
    background-color: #eee !important;
}
.cfs-bg-grey-2025 {
    background-color: #bababa !important; /*dark*/
}
/* Grey End*/
/*************/


/*************/
/* Orange Start*/
.cfs-bg-orange {
    background-color: orange !important;
}
.cfs-bg-orange-2025 {
    background-color: #f07f12 !important;
}
.cfs-bg-orange-hover-2025 {
    background-color: #8f4d0a !important;
}
/* Orange End*/
/*************/


.cfs-bg-purple {
    background-color: purple !important;
}

.cfs-bg-green {
    background-color: green !important;
}

.cfs-bg-darkred {
    background-color: red !important;
}

.cfs-bg-red {
    background-color: darkred !important;
}

/***************************/
/*  background-color end   */
/***************************/

/***************************/
/*     text-align start    */
/***************************/

.cfs-txt-center {
    text-align: center;
}

.cfs-txt-left {
    text-align: left;
}

.cfs-txt-right {
    text-align: right;
}

@media(max-width:767px) {
    .cfs-txt-center-mobile {
        text-align: center;
    }

    .cfs-txt-left-mobile {
        text-align: left;
    }

    .cfs-txt-right-mobile {
        text-align: right;
    }
}
/***************************/
/*     text-align end      */
/***************************/

/***************************/
/*         mobile start    */
/***************************/


/***************************/
/*         mobile end      */
/***************************/


/***********************************************************************************/
/*                                                                                 */
/*                               cfs framwork end                                  */
/*                                                                                 */
/***********************************************************************************/



/***********************************************************************************/
/*                                                                                 */
/*                               theme root start                                  */
/*                                                                                 */
/***********************************************************************************/
/*code logo light blue #0094D9*/
/*2024-12-26*/
:root {
    --cfs-theme-background-color: #0094D9; /*light blue*/
    --cfs-theme-text-color: #000;
    --cfs-theme-border-color: #eee;
}
/*2024-11-05 code logo purble #0094D9*/
/*:root {
    --cfs-theme-background-color: #A84499;*/ /*purble*/
    /*--cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #949494;
}*/
/*code logo green tefany #4DA391*/
/*:root {
    --cfs-theme-background-color: #4DA391;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #4DA391;
}*/
/*code logo red #E61A22*/
/*:root {
    --cfs-theme-background-color: #E61A22;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #E61A22;
}*/
/*code logo purple #475E88*/
/*:root {
    --cfs-theme-background-color: #475E88;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #475E88;
}*/
/*Pink #FFE8F3*/
/*:root {
    --cfs-theme-background-color: #F5DEE9;
    --cfs-theme-text-color: #000;
    --cfs-theme-border-color: #F5DEE9;
}*/
/*Metallic Blue #3E4E7A*/
/*:root {
    --cfs-theme-background-color: #3E4E7A;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #3E4E7A;
}*/
/*Pacific Blue #16A8CC*/
/*:root {
    --cfs-theme-background-color: #16A8CC;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #16A8CC;
}*/
/*Royalty #4d1635*/
/*:root {
    --cfs-theme-background-color: #4d1635;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #4d1635;
}*/
/*AlMawed*/
/*Bertal*/
/*:root {
    --cfs-theme-background-color: #89CFF0;
    --cfs-theme-text-color: #000;
    --cfs-theme-border-color: #E61A22;
}*/
/*medart*/
/*:root {
    --cfs-theme-background-color: #82c762;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #82c762;
}*/
/*ajmal New*/
/*:root {
    --cfs-theme-background-color: #E8E9EB;
    --cfs-theme-text-color: #000;
    --cfs-theme-border-color: #E8E9EB;
}*/
/*ajmal Old*/
/*:root {
    --cfs-theme-background-color: #F89A35;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #F89A35;
}*/

/*Skn Clinics  logo light blue #067bc0*/ 
/*Pioneers  logo light blue #067bc0*/
/*AlQurany  logo light blue #067bc0*/
/*Simah ElKazaz  logo light blue #067bc0*/
/*HatemAman logo purple #475E88*/
/*:root {
    --cfs-theme-background-color: #067bc0;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #067bc0;
}*/

/*HatemAman logo purple #475E88*/
/*:root {
    --cfs-theme-background-color: #475E88;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #475E88;
}*/


/*Alinma Bank logo brown #755750*/
/*:root {
    --cfs-theme-background-color: #755750;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #755750;
}*/

/*Creative Minds*/
/*:root {
    --cfs-theme-background-color: #cd0a0a;
    --cfs-theme-text-color: #fff;
    --cfs-theme-border-color: #cd0a0a;
}*/
 
/***********************************************************************************/
/*                                                                                 */
/*                               theme root end                                    */
/*                                                                                 */
/***********************************************************************************/




/***********************************************************************************/
/*                                                                                 */
/*                               theme colors Start                                */
/*                                                                                 */
/***********************************************************************************/
.cfs-theme {
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
}

.cfs-theme-dark {
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
}

.cfs-theme-d1 {
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
}




.cfs-theme-green-logo-success {
    background-color: #4DA391 !important; /*code logo green tefany #4DA391*/
}

.cfs-theme-lightblue-logo-info {
    background-color: #0094D9 !important; /*code logo light blue #0094D9*/
}

.cfs-theme-red-logo-danger {
    background-color: #E61A22 !important; /*code logo red #E61A22*/
    color:white;
}

.cfs-theme-purple-logo {
    background-color: #475E88 !important; /*code logo purple #475E88*/
}


.cfs-theme-orange-ajmal-warning {
    background-color: #F89A35 !important; /*ajmal  #F89A35*/
}

/***********************************************************************************/
/*                                                                                 */
/*                                 theme colors end                                */
/*                                                                                 */
/***********************************************************************************/



/***********************************************************************************/
/*                                                                                 */
/*                                 Printing Start                                  */
/*                                                                                 */
/***********************************************************************************/
.cfs-print {
    display: none;
}

/*@media print {

    html, body {
        margin: 0;
        padding:0;
    }*/

    /*@page {
        size: auto;*/ /* Let the browser determine the initial size */
    /*}

    body {
        width: auto;*/ /* Allow the content to determine the width */
    /*}

    @page {
        size: landscape;*/ /* If the content exceeds page width, force landscape */
    /*}*/

/*        @page {
        size: A4 landscape;
    }*/
/*        @page {
        margin:0;
    }*/

    /*.cfs-print {
        display: inline !important;
    }

    .cfs-dont-print {
        display: none !important;
    }

    * {
        -webkit-print-color-adjust: exact;*/ /* Chrome, Safari 6 – 15.3, Edge */
        /*color-adjust: exact !important;*/ /* Firefox 48 – 96 */
        /*print-color-adjust: exact;*/ /* Firefox 97+, Safari 15.4+ */
/*        font-size:8px;
        margin:0px;
        padding:1px;
        background-color:transparent;*/
    /*}*/

     /* @media print */
    /*.main[class="cfs-main"] {
        background-color: white;
        width: 100%;
        min-height: 100vh;
        display: flex;
        font-size: 8px;
        padding:0px;
        margin:0px;
    }*/
    /* @media print */
    /*.cfs-main .cfs-body {
        color: #000;
        background-color: #fff;
        font-size: 8px;
        width: 99%;
        min-height: 85vh;
        margin: auto;
        border-radius: 10px;
        padding: 1px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    }*/
        /* @media print */
        /*.cfs-main .cfs-body header {
            display: none;
        }*/
    /* @media print */
    /*.cfs-page-title-name {
        
    }*/
    /* @media print */
    /*.cfs-records-counter {
        display: none !important;
    }
}*/

.cfs-hide {
    display: none;
}

.cfs-show {
    display: initial;
}

/***********************************************************************************/
/*                                                                                 */
/*                                 Printing End                                    */
/*                                                                                 */
/***********************************************************************************/

::selection {
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
}

::placeholder {
}

/*button {
    padding: 10px;
    margin: 2px;
    font-family: sans-serif;
    font-size: 15px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    border: none;
    width: 100%;
}*/

#chartdiv {
    width: 100%;
    height: 500px;
}

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}

/***********************************************************************************/
/*                                                                                 */
/*                                 Pages h3 headers start                          */
/*                                                                                 */
/***********************************************************************************/

.cfs-page-header-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}

.cfs-page-title-name {
    margin: 10px auto;
    padding: 10px 20px;
    font-size: 30px;
    width: fit-content;
    position: relative;
    z-index: 1;
    transition: 0.5s linear;
}
 
    .cfs-page-title-name::before, .cfs-page-title-name::after {
        content: "";
        width: 12px;
        height: 12px;
        background-color: var(--cfs-theme-background-color);
        color: var(--cfs-theme-text-color);
        position: absolute;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
    }

    .cfs-page-title-name::before {
        left: -30px;
    }

    .cfs-page-title-name::after {
        right: -30px;
    }

    .cfs-page-title-name:hover::before {
        z-index: -1;
        animation: cfs-page-title-name-animation-left-move 0.5s linear forwards;
    }

    .cfs-page-title-name:hover::after {
        z-index: -1;
        animation: cfs-page-title-name-animation-right-move 0.5s linear forwards;
    }

.cfs-page-title-name:hover {
    color: white;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
    animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
}
 
/***********************************************************************************/
/*                                                                                 */
/*                                 Pages h3 headers end                            */
/*                                                                                 */
/***********************************************************************************/
.cfs-records-counter {
    background-color: var(--cfs-theme-background-color);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
}

.cfs-page-screenlastupdated-details {
    bottom: 0;
    background-color: var(--cfs-theme-background-color);
    color: whitesmoke;
    text-align: left;
    padding: 10px;
    border-radius: 5px;
}

/***********************************************************************************/
/*                                                                                 */
/*                          page basic design Start                                */
/*                                                                                 */
/***********************************************************************************/
main[class="cfs-main"] {
    background-color: var(--cfs-theme-background-color);
    width: 100%;
    min-height: 100vh;
    display: flex;
    font-size: 0.9rem;
    font-family: 'Tangerine', serif;
    padding:0;
    margin:0;
}

.cfs-main .cfs-body {
    color: #000;
    background-color: #fff;
    width: 98%;
    min-height: 85vh;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
}

    .cfs-main .cfs-body header {
        font-weight: 300;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        padding: 5px;
        margin-top: 5px;
        text-decoration: none;
        font-size: 0.9rem;
    }
    
@media(max-width:700px) {
    .cfs-main .cfs-body header {
        font-weight: 300;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
}


.cfs-main header menu {
    display: flex;
    justify-content:space-around;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    position: fixed;
    margin-top: 10px;
    height: 6vh;
    background-color: var(--cfs-theme-background-color);
    width: 100%;
    padding: 5px;
    top: -10px;
    z-index: 999;
}

    .cfs-main header menu a {
        color: white;
        border-radius: 5px;
        padding: 5px;
        align-items: center;
        font-size:1rem;
    }

    .cfs-main .cfs-body header menu a:hover {
        background-color: #8f4d0a;
        color: #f9f9f9;
        border-radius: 5px;
        padding: 5px;
        transform: scale(1.1);
        transition: 0.7s ease-in-out;
    }
 
.cfs-main .cfs-body header a img {
    width: 100%;
    transition: 0.7s ease;
}
 
@media(max-width:700px) {
    .cfs-main .cfs-body header a img {
        margin: auto;
    }
}


.cfs-main .cfs-body header a img:hover {
    transform: scale(1.1);
}

.cfs-main .cfs-body header nav {
    display: flex;
    justify-content: space-evenly;
    gap: 1px;
}
/***********************************************************************************/
/*                                                                                 */
/*                                  main end                                       */
/*                                                                                 */
/***********************************************************************************/

/***********************************************************************************/
/*                                                                                 */
/*                 cfs-img start (Example Report 0046  DoctorPhoto)                */
/*                                                                                 */
/***********************************************************************************/


.cfs-img-table-td-50px {
    max-width: 50px;
    border-radius: 50%;
}


.cfs-img-table-td-100px {
    max-width: 100px;
    border-radius: 50%;
}

.cfs-image-Attachment {
    margin: auto;
    max-width: 90%;
    max-height: 80vh;
}

.cfs-iframe-Attachment {
    margin: auto;
    height:80vh;
    width:100%;
}

/***********************************************************************************/
/*                                                                                 */
/*                                  cfs-img end                                    */
/*                                                                                 */
/***********************************************************************************/


.cfs-round-small {
    border-radius: 2px !important
}

.cfs-round, .cfs-round-medium {
    border-radius: 4px !important
}

.cfs-round-large {
    border-radius: 8px !important
}

.cfs-round-xlarge {
    border-radius: 16px !important
}

.cfs-round-xxlarge {
    border-radius: 32px !important
}

.cfs-round-jumbo {
    border-radius: 64px !important
}
 
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/*                                                                                 */
/*                                  Cards Start                                    */
/*                                                                                 */
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/


.cfs-card {
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
}
.cfs-card, .cfs-card-2, .cfs-example {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important
}

.cfs-card-4, .cfs-hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important
}

.cfs-card-8 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important
}

.cfs-card-12 {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important
}

.cfs-card-16 {
    box-shadow: 0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21) !important
}

.cfs-card-24 {
    box-shadow: 0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22) !important
}

/***********************************************************************************/
/*                                                                                 */
/*                                  Cards Start                                    */
/*                                                                                 */
/***********************************************************************************/
.cfs-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    gap: 50px;
}

    .cfs-cards figure a {
        color: var(--cfs-theme-text-color);
        width: 250px;
        height: 350px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 5px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transition: 0.7s ease;
        border: 2px solid var(--cfs-theme-border-color);
        overflow: hidden;
    }



        .cfs-cards figure a:hover, a:focus {
            transform: scale(1.2);
            text-decoration: none;
            border: 5px solid rgba(0,0,0,.2);
        }

        .cfs-cards figure a img {
            width: 150px;
            animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
            animation-delay: 0s;
        }

    .cfs-cards figure:nth-child(2) a img {
        width: 150px;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
        animation-delay: 0.5s;
    }

    .cfs-cards figure:nth-child(3) a img {
        width: 150px;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
        animation-delay: 1s;
    }

    .cfs-cards figure:nth-child(4) a img {
        width: 150px;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
        animation-delay: 1.5s;
    }

    .cfs-cards figure a figcaption {
        padding: 10px;
        border-radius: 10px;
        border: 2px solid var(--cfs-theme-background-color);
    }

    .cfs-cards figure a figcaption {
        font-weight: 900;
    }

/***********************************************************************************/
/*                                                                                 */
/*                                  Cards Start                                    */
/*                                                                                 */
/***********************************************************************************/
.cfs-cards-offers {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 80px;
    gap: 50px;
}

    .cfs-cards-offers figure a {
        color: #000;
        width: 250px;
        height: 500px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 5px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transition: 0.7s ease;
        border: 2px solid var(--cfs-theme-background-color);
    }

        .cfs-cards-offers figure a:hover, a:focus {
            transform: scale(1.2);
            text-decoration: none;
            border: 2px solid rgba(0,0,0,.2);
        }

        .cfs-cards-offers figure a img {
            width: 100%;
            padding: 1rem;
            border-radius: 2rem 2rem 0 0;
            animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
            animation-delay: 0s;
        }

/***********************************************************************************/
/*                                                                                 */
/*                         cfs-cards-link-snapchat-size Start                      */
/*                                                                                 */
/***********************************************************************************/
.cfs-cards-link-snapchat-size {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 80px;
    gap: 50px;
}

    .cfs-cards-link-snapchat-size figure a {
        color: #000;
        width: 250px;
        height: 500px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 5px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transition: 0.7s ease;
        border: 2px solid var(--cfs-theme-background-color);
    }

        .cfs-cards-link-snapchat-size figure a:hover, a:focus {
            transform: scale(1.2);
            text-decoration: none;
            border: 2px solid rgba(0,0,0,.2);
        }

        .cfs-cards-link-snapchat-size figure a img {
            width: 100%;
            padding: 1rem;
            border-radius: 2rem 2rem 0 0;
            animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
            animation-delay: 0s;
        }

/***********************************************************************************/
/*                                                                                 */
/*                         cfs-cards-snapchat-size Start                           */
/*                                                                                 */
/***********************************************************************************/
.cfs-cards-snapchat-size {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 80px;
    gap: 70px;
}

    .cfs-cards-snapchat-size figure {
        color: #000;
        width: 250px;
        height: 500px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 5px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transition: 0.7s ease;
        border: 2px solid var(--cfs-theme-background-color);
    }

        .cfs-cards-snapchat-size figure:hover, figure:focus {
            transform: scale(1.2);
            text-decoration: none;
            border: 2px solid rgba(0,0,0,.2);
        }

        .cfs-cards-snapchat-size figure img {
            width: 100%;
            padding: 1rem;
            border-radius: 2rem 2rem 0 0;
            animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
            animation-delay: 0s;
        }

        .cfs-cards-snapchat-size figure figcaption {
            background-color: var(--cfs-theme-background-color);
            color: var(--cfs-theme-text-color);
            font-weight: 900;
            padding: 10px;
            border-radius: 10px;
        }

/***********************************************************************************/
/*                                                                                 */
/*                             cfs-cards-data Start                                */
/*                                                                                 */
/***********************************************************************************/
.cfs-Main-card-data {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    border: 1px solid var(--cfs-theme-background-color);
    padding: 30px;
    font-size: 0.9rem;
    margin: 20px;
    border-radius: 10px;
    width: auto;
}

.cfs-Sub-card-data {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: #000;
    width: 250px;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    padding: 5px;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    transition: 0.7s ease;
    border: 2px solid var(--cfs-theme-background-color);
    gap: 5px;
}
 
.cfs-Sub-card-data-150px {
    width: 150px;
}
 
    .cfs-Sub-card-data:hover {
        transform: scale(1.1);
    }

.cfs-Sub-card-data-label {
    font-weight: 500;
    background-color: var(--cfs-theme-background-color);
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    width: 100%;
}

.cfs-Sub-card-data-details {
    text-align: center;
    width: 100%;
}

/***********************************************************************************/
/*                                                                                 */
/*                                  cfs-login Start                                */
/*                                                                                 */
/***********************************************************************************/
.cfs-login {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    border: 1px solid var(--cfs-theme-background-color);
    padding: 30px;
    font-size: 0.9rem;
    margin: auto;
    border-radius: 10px;
    width: fit-content;
}

    .cfs-login .cfs-login-group {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        color: #000;
        width: 250px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 10px;
        border-radius: 10px;
        justify-content: space-between;
        align-items: center;
        transition: 0.7s ease;
        border: 2px solid var(--cfs-theme-background-color);
        margin:10px;
    }

        .cfs-login .cfs-login-group .cfs-login-group-control {
            text-align: center;
            width: 100%;
        }

        .cfs-login .cfs-login-group .cfs-login-group-label {
            font-weight: 500;
            text-align: center;
            padding: 5px;
            border-radius: 5px;
            width: 100%;
        }

        .cfs-login .cfs-login-group .cfs-login-button {
            padding: 5px;
            background-color: var(--cfs-theme-background-color);
            color: var(--cfs-theme-text-color);
            display: inline-block;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            text-align: center;
            width: 200px;
            transition: 0.5s ease;
        }

            .cfs-login .cfs-login-group .cfs-login-button::first-letter {
                font-size: 1.2rem;
            }

            .cfs-login .cfs-login-group .cfs-login-button:hover, .cfs-login .cfs-login-group .cfs-login-button:focus {
                transform: scale(1.1);
                background-color: var(--cfs-theme-background-color);
                color: var(--cfs-theme-text-color);
                /*animation: cfs-keyframes-animation-up-and-down 2s ease-in-out infinite;*/
            }

    /***********************************************************************************/
    /*                                                                                 */
    /*                             cfs-cards-ol Start  (example 3097)                  */
    /*                                                                                 */
    /***********************************************************************************/
    .cfs-Main-card-ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    border: 1px solid var(--cfs-theme-background-color);
    padding: 10px;
    font-size: 0.9rem;
}

.cfs-Sub-card-ol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: #000;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    padding: 5px;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    transition: 0.7s ease;
    border: 2px solid var(--cfs-theme-background-color);
    gap: 5px;
    font-size: 1rem;
}

    .cfs-Sub-card-ol:hover {
        transform: scale(1.1);
    }

.cfs-Sub-card-ol-li {
    text-align: center;
    width: 100%;
}



/***********************************************************************************/
/*                                                                                 */
/*              cfs-cards-Patients-Badges Start  (example Patient Search)          */
/*                                                                                 */
/***********************************************************************************/
.cfs-cards-Patients-Badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    gap: 50px;
}

    .cfs-cards-Patients-Badges figure {
        color: #000;
        width: 250px;
        height: 300px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 5px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transition: 0.7s ease;
        border: 2px solid var(--cfs-theme-background-color);
        overflow: hidden;
        font-weight: 900;
    }

    .cfs-cards-Patients-Badges .figure-1 {
        background-color: yellow;
    }

    .cfs-cards-Patients-Badges .figure-2 {
        background-color: lightgreen;
    }

    .cfs-cards-Patients-Badges .figure-3 {
        background-color: lightblue;
    }

    .cfs-cards-Patients-Badges figure:hover, figure:focus {
        transform: scale(1.2);
        text-decoration: none;
        border: 5px solid rgba(0,0,0,.2);
    }

    .cfs-cards-Patients-Badges figure:nth-child(1) img {
        width: 150px;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
        animation-delay: 0.5s;
    }

    .cfs-cards-Patients-Badges figure:nth-child(2) img {
        width: 150px;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
        animation-delay: 1s;
    }

    .cfs-cards-Patients-Badges figure:nth-child(3) img {
        width: 150px;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
        animation-delay: 1.5s;
    }

    .cfs-cards-Patients-Badges figure img {
        width: 150px;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
        animation-delay: 0s;
    }

    .cfs-cards-Patients-Badges figure figcaption {
        padding: 10px;
        border-radius: 10px;
        border: 2px solid var(--cfs-theme-background-color);
    }

/***********************************************************************************/
/*                                                                                 */
/*                        cfs-cards article Start  (example 3097)                  */
/*                                                                                 */
/***********************************************************************************/
.cfs-cards article {
    display: flex;
    flex-direction: column;
}

    .cfs-cards article h1 {
        font-family: 'Amiri', serif;
        box-sizing: border-box;
        text-align: center;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 1rem;
        color: #000;
        transition: 0.7s ease;
        margin: 2.5rem;
        border-radius: 1rem;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
    }

        .cfs-cards article h1:hover {
            transform: scale(1.05);
        }

    .cfs-cards article .Paragraphs p {
        box-sizing: border-box;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        padding: 2rem;
        direction: rtl;
        font-size: 1.2rem;
        text-align: center;
        transition: 0.5s ease;
        margin: 2.5rem;
        animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
    }

        .cfs-cards article .Paragraphs p:nth-child(odd) {
            box-sizing: border-box;
            box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
            padding: 2rem;
            direction: rtl;
            font-size: 1.2rem;
            text-align: center;
            transition: 0.5s ease;
            margin: 2.5rem;
            animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
            animation-delay: 0.5s;
        }

        .cfs-cards article .Paragraphs p:nth-child(even) {
            box-sizing: border-box;
            box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
            padding: 2rem;
            direction: rtl;
            font-size: 1.2rem;
            text-align: center;
            transition: 0.5s ease;
            margin: 2.5rem;
            animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;
            animation-delay: 1s;
        }

        .cfs-cards article .Paragraphs p:hover {
            transform: scale(1.05);
        }

        .cfs-cards article .Paragraphs p:first-child {
            border-radius: 2rem 2rem 0 0;
        }

        .cfs-cards article .Paragraphs p:last-child {
            border-radius: 0 0 2rem 2rem;
        }

/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/*                                                                                 */
/*                                  Cards End                                      */
/*                                                                                 */
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/

.cfs-Notes {
    width: 100%;
    height: 100px;
    resize: none;
}

/***********************************************************************************/
/*                                                                                 */
/*                                  To Go Back Up                                  */
/*                                                                                 */
/***********************************************************************************/

.up {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    background-color: var(--cfs-theme-background-color);
    padding: 1rem;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    text-decoration: none;
}

.floatwhatsapp {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--cfs-theme-background-color);
    padding: 1rem;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
}

    .floatwhatsapp img {
        width: 100%;
    }

/***********************************************************************************/
/*                                                                                 */
/*                                         Wrap Start                              */
/*                                                                                 */
/***********************************************************************************/
.cfs-nowrap{
    white-space:nowrap;
}
/***********************************************************************************/
/*                                                                                 */
/*                                         Wrap End                                */
/*                                                                                 */
/***********************************************************************************/
 

/***********************************************************************************/
/*                                                                                 */
/*                                         Footer                                  */
/*                                                                                 */
/***********************************************************************************/
 
footer[class="cfs-sticky-footer"] {
    position: sticky;
    bottom: 5px;
    width: 90%;
    background-color: var(--cfs-theme-background-color);
    margin: 2%;
    text-align: center;
    align-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 10px;
}

/***********************************************************************************/
/*                                                                                 */
/*                              float whats app start                              */
/*                                                                                 */
/***********************************************************************************/


/***********************************************************************************/
/*                                                                                 */
/*                                  checkbox Start                                 */
/*                                                                                 */
/***********************************************************************************/
.checkbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*InputText*/
input[type="text"] {
    caret-color:var(--cfs-theme-background-color);
}

/*InputNumber*/
input[type="number"] {
    caret-color: var(--cfs-theme-background-color);
}
 
/*input[type="checkbox"] {
    position: relative;
    width: 120px;
    height: 20px;
    -webkit-appearance: none;
    background: linear-gradient(0deg, #333, #000);
    outline: none;
    border-radius: 20px;
    box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5),inset 0 0 15px rgba(0,0,0,.2);
}

input:checked[type="checkbox"] {
    background: linear-gradient(0deg, var(--cfs-theme-background-color), var(--cfs-theme-background-color));
    box-shadow: 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5),inset 0 0 15px rgba(0,0,0,.2);
}

input[type="checkbox"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 20px;
    background: linear-gradient(0deg, #000, #6b6b6b);
    border-radius: 20px;
    box-shadow: 0 0 0 1px #232323;
    transform: scale(.98, .96);
    transition: .5s;
}

input:checked[type="checkbox"]:before {
    left: 40px;
}



input[type="checkbox"]:after {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 65px;
    width: 4px;
    height: 4px;
    background: linear-gradient(0deg, #6b6b6b, #000);
    border-radius: 50%;
    transition: .5s;
}

input:checked[type="checkbox"]:after {
    background: var(--cfs-theme-background-color);
    left: 105px;
    box-shadow: 0 0 5px #13b3ff, 0 0 15px #13b3ff;
}*/
 
/***********************************************************************************/


input[type="checkbox"].cfs-checkbox {
    position: relative;
    width: 120px;
    height: 20px;
    -webkit-appearance: none;
    background: linear-gradient(0deg, #333, #000);
    outline: none;
    border-radius: 20px;
    box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5),inset 0 0 15px rgba(0,0,0,.2);
}

input:checked[type="checkbox"].cfs-checkbox {
    background: linear-gradient(0deg, var(--cfs-theme-background-color), var(--cfs-theme-background-color));
    box-shadow: 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5),inset 0 0 15px rgba(0,0,0,.2);
}

input[type="checkbox"].cfs-checkbox:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 20px;
    background: linear-gradient(0deg, #000, #6b6b6b);
    border-radius: 20px;
    box-shadow: 0 0 0 1px #232323;
    transform: scale(.98, .96);
    transition: .5s;
}

input:checked[type="checkbox"].cfs-checkbox:before {
    left: 40px;
}



input[type="checkbox"].cfs-checkbox:after {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 65px;
    width: 4px;
    height: 4px;
    background: linear-gradient(0deg, #6b6b6b, #000);
    border-radius: 50%;
    transition: .5s;
}

input:checked[type="checkbox"].cfs-checkbox:after {
    background: var(--cfs-theme-background-color);
    left: 105px;
    box-shadow: 0 0 5px #13b3ff, 0 0 15px #13b3ff;
}
 

/***********************************************************************************/
/*                                                                                 */
/*                                  checkbox end                                   */
/*                                                                                 */
/***********************************************************************************/
  
/***********************************************************************************/
/*                                                                                 */
/*                                      a Start                                    */
/*                                                                                 */
/***********************************************************************************/
.cfs-a-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    transition: 0.7s ease;
    border: 2px solid var(--cfs-theme-background-color);
}

.cfs-a {
    padding: 10px;
    margin: 2px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: stretch;
    transition: 0.7s ease;
    text-decoration: none;
}

    .cfs-a::after {
        content: " >>";
        background-color: white;
        color: var(--cfs-theme-background-color);
        font-weight: 900;
        padding: 5px;
        border-radius: 5px;
        margin: 10px;
        text-decoration: none;
    }


    .cfs-a:hover, .cfs-a:focus {
        transform: scale(0.9);
        text-decoration: none;
    }

    .cfs-a:active {
        transform: scale(0.9);
        border: 5px solid orange;
        background-color: #0094D9;
        text-decoration: none;
    }

    .cfs-a:visited {
        transform: scale(0.9);
        border: 5px solid orange;
        background-color: #0094D9;
    }

/***********************************************************************************/
/*                                                                                 */
/*                                       a End                                     */
/*                                                                                 */
/***********************************************************************************/
/***********************************************************************************/
/*                                                                                 */
/*                                     button Start  DESIGN 1                      */
/*                                                                                 */
/***********************************************************************************/
.cfs-button-main-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    padding: 1px;
    margin: 1px;
    margin-bottom: 20px;
    border-radius: 10px;
    transition: 0.7s ease;
    border: 2px solid var(--cfs-theme-background-color);
    gap: 10px;
    padding: 10px;
}

.cfs-button-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
    padding: 1px;
    margin: 1px;
    border-radius: 10px;
    transition: 0.7s ease;
    gap: 10px;
    padding: 10px;
    border: 2px solid var(--cfs-theme-background-color);
}

.cfs-button-sm {
    padding: 3px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    display: inline-block;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}
 
.cfs-button {
    padding: 5px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}

.cfs-btn {
    padding: 5px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}

.cfs-btn-new {
    padding: 5px;
    background-color: #4DA391;
    color: white;
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}

.cfs-btn-Edit {
    padding: 5px;
    background-color: #F89A35;
    color: white;
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}

.cfs-btn-details {
    padding: 5px;
    background-color: #0094D9;
    color: white;
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}

.cfs-btn-delete {
    padding: 5px;
    background-color: darkred;
    color: white;
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}

.cfs-btn-undelete {
    padding: 5px;
    background-color: #475E88;
    color: white;
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}

.cfs-btn-duplicate {
    padding: 5px;
    background-color: darkred;
    color: white;
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
}
  
.cfs-button-xl {
    padding: 5px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: 50%;
    transition: 0.5s ease;
}
  
.cfs-button-xxl {
    font-size:20px;
    padding: 10px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    display: inline-block;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: 50%;
    transition: 0.5s ease;
}
 
.cfs-btn-shape {
    padding: 4px 10px;
    border-radius: 6px;
}

/*.cfs-button::first-letter {
    font-size: 1.2rem;
}*/

.cfs-button:hover, .cfs-button:focus {
    transform: scale(1.1);
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    /*animation: cfs-keyframes-animation-up-and-down 2s ease-in-out infinite;*/
}

.cfs-button-active {
    padding: 5px;
    background-color: transparent;
    color: #000;
    display: inline-block;
    border-bottom: 5px solid black;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    transition: 0.5s ease;
    font-weight: bold;
}
    /***********************************************************************************/
    /*.cfs-button-orange {
    padding: 10px 20px;
    margin: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background-color: #f79f1f !important;*/ /*Orange*/
    /*color: #fff !important;
    display: inline-block;
    border-radius: 5%;
    text-decoration: none !important;
    text-align: center;
    width: stretch;
    border: none;
}

    .cfs-button-orange:hover {
        padding: 10px 20px;
        margin: 10px;
        font-family: sans-serif;
        font-size: 20px;
        background-color: #f79f1f !important;*/ /*Orange*/
    /*color: #fff !important;
        display: inline-block;
        border-radius: 5%;
        text-decoration: none !important;
        text-align: center;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        transition: .5s;
        width: stretch;
    }*/
    /***********************************************************************************/
    /*.cfs-button-turquoise {
    padding: 10px 20px;
    margin: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background-color: #12cbc4 !important;*/ /*turquoise*/
    /*color: #fff !important;
    display: inline-block;
    border-radius: 5%;
    text-decoration: none !important;
    text-align: center;
    width: stretch;
    border: none;
}

    .cfs-button-turquoise:hover {
        padding: 10px 20px;
        margin: 10px;
        font-family: sans-serif;
        font-size: 20px;
        background-color: #12cbc4 !important;*/ /*turquoise*/
    /*color: #fff !important;
        display: inline-block;
        border-radius: 5%;
        text-decoration: none !important;
        text-align: center;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        transition: .5s;
        width: 100%;
    }*/
    /***********************************************************************************/
    /*.cfs-button-red {
    padding: 10px 20px;
    margin: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background-color: #ed4c67 !important;*/ /*red*/
    /*color: #fff !important;
    display: inline-block;
    border-radius: 5%;
    text-decoration: none !important;
    text-align: center;
    width: stretch;
    border: none;
}

    .cfs-button-red:hover {
        padding: 10px 20px;
        margin: 10px;
        font-family: sans-serif;
        font-size: 20px;
        background-color: #ed4c67 !important;*/ /*red*/
    /*color: #fff !important;
        display: inline-block;
        border-radius: 5%;
        text-decoration: none !important;
        text-align: center;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        transition: .5s;
        width: stretch;
    }*/
    /***********************************************************************************/
    /*.cfs-button-lime {
    padding: 10px 20px;
    margin: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background-color: #a3cb38 !important;*/ /*lime*/
    /*color: #fff !important;
    display: inline-block;
    border-radius: 5%;
    text-decoration: none !important;
    text-align: center;
    width: stretch;
    border: none;
}

    .cfs-button-lime:hover {
        padding: 10px 20px;
        margin: 10px;
        font-family: sans-serif;
        font-size: 20px;
        background-color: #a3cb38 !important;*/ /*lime*/
    /*color: #fff !important;
        display: inline-block;
        border-radius: 5%;
        text-decoration: none !important;
        text-align: center;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        transition: .5s;
        width: stretch;
    }*/
    /***********************************************************************************/
    /*.cfs-button-light-blue {
    padding: 10px 20px;
    margin: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background-color: #cff4fc !important;*/ /*light-blue*/
    /*color: #055160 !important;
    display: inline-block;
    border-radius: 5%;
    text-decoration: none !important;
    text-align: center;
    width: stretch;
    border: none;
}

    .cfs-button-light-blue:hover {
        padding: 10px 20px;
        margin: 10px;
        font-family: sans-serif;
        font-size: 20px;
        background-color: #cff4fc !important;*/ /*light-blue*/
    /*color: #055160 !important;
        display: inline-block;
        border-radius: 5%;
        text-decoration: none !important;
        text-align: center;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        transition: .5s;
        width: stretch;
    }*/
    /***********************************************************************************/
    /*.cfs-button-blue-grey {
    padding: 10px 20px;
    margin: 10px;
    font-family: sans-serif;
    font-size: 15px;
    background-color: #607d8b !important;*/ /*blue-grey*/
    /*color: #fff !important;
    display: inline-block;
    border-radius: 5%;
    text-decoration: none !important;
    text-align: center;
    width: stretch;
    border: none;
}

    .cfs-button-blue-grey:hover {
        padding: 10px 20px;
        margin: 10px;
        font-family: sans-serif;
        font-size: 20px;
        background-color: #607d8b !important;*/ /*blue-grey*/
    /*color: #fff !important;
        display: inline-block;
        border-radius: 5%;
        text-decoration: none !important;
        text-align: center;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        transition: .5s;
        width: stretch;
    }*/
    /***********************************************************************************/
    /*                                                                                 */
    /*                                     button End  DESIGN 1                        */
    /*                                                                                 */
    /***********************************************************************************/
    /***********************************************************************************/
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                       How To Create a Flip Card  Start                          */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /*                                                                                 */
    /***********************************************************************************/
    /*

<div class="flip-card" >
<div class="flip-card-inner" >
<div class="flip-card-front" >
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;" >
</div >
<div class="flip-card-back" >
<h1 > John Doe</h1 >
<p > Architect & Engineer</p >
<p > We love that guy</p >
</div >
</div >
</div >

*/
    /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
    .flip-card {
        background-color: transparent;
        width: 300px;
        height: 200px;
        border: 1px solid #f1f1f1;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
    }

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
}

/* Style the back side */
.flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}

/***********************************************************************************/

/*<div class="cfs-flip-card-container-style-1" >
<div class="cfs-flip-card-box-style-1" >
<div class="cfs-flip-card-face-style-1 cfs-flip-card-front-style-1" > Front</div >
<div class="cfs-flip-card-face-style-1 cfs-flip-card-back-style-1" > Back</div >
</div >
</div >*/

.cfs-flip-card-container-style-1 {
    margin: 40px auto;
    width: 200px;
    perspective: 600px;
}

.cfs-flip-card-box-style-1 {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transition: transform 1s;
}

    .cfs-flip-card-box-style-1:hover {
        transform: rotateY(-180deg);
    }

    .cfs-flip-card-box-style-1 .cfs-flip-card-face-style-1 {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 30px;
        color: white;
        backface-visibility: hidden;
    }

    .cfs-flip-card-box-style-1 .cfs-flip-card-front-style-1 {
        background-color: red;
    }

    .cfs-flip-card-box-style-1 .cfs-flip-card-back-style-1 {
        background-color: green;
        transform: rotateY(180deg);
    }

/***********************************************************************************/

/*

    <div class="cfs-flip-card-container-style-2" >
<div class="cfs-flip-card-box-style-2" >
<div class="cfs-flip-card-face-style-2 cfs-flip-card-front-style-2" > Front</div >
<div class="cfs-flip-card-face-style-2 cfs-flip-card-back-style-2" > Back</div >
</div >
</div >

*/

.cfs-flip-card-container-style-2 {
    margin: 40px auto;
    width: 200px;
    perspective: 600px;
}

.cfs-flip-card-box-style-2 {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transition: transform 1s;
    transform-origin: right center;
}

    .cfs-flip-card-box-style-2:hover {
        transform: translateX(-100%) rotateY(-180deg);
    }

    .cfs-flip-card-box-style-2 .cfs-flip-card-face-style-2 {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 30px;
        color: white;
        backface-visibility: hidden;
    }

    .cfs-flip-card-box-style-2 .cfs-flip-card-front-style-2 {
        background-color: red;
    }

    .cfs-flip-card-box-style-2 .cfs-flip-card-back-style-2 {
        background-color: green;
        transform: rotateY(180deg);
    }





/***********************************************************************************/
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                    How To Create a Flip Product  End                            */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/*                                                                                 */
/***********************************************************************************/

/***********************************************************************************/
/*                                                                                 */
/*                                  cfs-cards-nav Start                            */
/*                                                                                 */
/***********************************************************************************/
.cfs-cards-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 80px;
    gap: 40px;
    /*    background-image: url('../images/codeforsoftware/logo/CodeForSoftwareLogo1080x1080.png');
    background-size: contain;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;*/
}

    .cfs-cards-nav figure {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding: 20px;
        gap: 10px;
        border-radius: 10px;
        box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        transition: 0.7s ease;
        border: 2px solid var(--cfs-theme-background-color);
    }

        .cfs-cards-nav figure:hover {
            transform: scale(1.2);
            border: 3px solid var(--cfs-theme-background-color);
        }

        .cfs-cards-nav figure h3 {
            text-decoration: none;
            width: 100%;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 5px 50px rgba(1 1 1 / 15%);
        }

        .cfs-cards-nav figure a {
            text-decoration: none;
            width: 100%;
            text-align: center;
            transition: 0.7s ease;
        }

            .cfs-cards-nav figure a:hover {
                text-decoration: none;
                width: 100%;
                text-align: center;
                transform: scale(1.2);
            }

            .cfs-cards-nav figure a figcaption {
/*                background-color: var(--cfs-theme-background-color);
                color: var(--cfs-theme-text-color);*/
                font-weight: 900;
                padding: 10px;
                border-radius: 2px;
            }





/***********************************************************************************/
/*                                  loginDisplay.razor                             */
/*                                                                                 */
/*                                  cfs-profile start                              */
/*                                                                                 */
/***********************************************************************************/

.cfs-profile-img {
    width: 50px;
    border-radius: 50%;
    margin: 20px;
    transition: 0.7s ease;
}

    .cfs-profile-img:hover {
        width: 50px;
        border-radius: 50%;
        margin: 20px;
        transform: scale(5);
    }

/***********************************************************************************/
/*                                                                                 */
/*                                  Menue start                                    */
/*                                                                                 */
/***********************************************************************************/

.cfs-header-nav-template-1 {
}

    .cfs-header-nav-template-1 .cfs-links {
        position: relative;
    }

        .cfs-header-nav-template-1 .cfs-links:hover ul {
            display: block;
        }

        .cfs-header-nav-template-1 .cfs-links:hover .cfs-icon span:nth-child(2) {
            width: 100%;
        }

        .cfs-header-nav-template-1 .cfs-links .cfs-icon {
            width: 30px;
            display: flex;
            flex-wrap: wrap;
            /*justify-content: flex-end;*/
        }

            .cfs-header-nav-template-1 .cfs-links .cfs-icon span {
                background-color: #333;
                margin-bottom: 5px;
                height: 2px;
            }

                .cfs-header-nav-template-1 .cfs-links .cfs-icon span:first-child {
                    width: 100%;
                }

                .cfs-header-nav-template-1 .cfs-links .cfs-icon span:nth-child(2) {
                    width: 60%;
                    transition: 0.3s ease;
                }

                .cfs-header-nav-template-1 .cfs-links .cfs-icon span:last-child {
                    width: 100%;
                }

        .cfs-header-nav-template-1 .cfs-links ul {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            background-color: var(--cfs-theme-background-color);
            right: 0;
            min-width: 50px;
            top: calc(100% + 25px);
            display: none;
            z-index: 1;
        }

            .cfs-header-nav-template-1 .cfs-links ul:before {
                content: '';
                border-width: 20px;
                border-style: solid;
                border-color: transparent transparent var(--cfs-theme-background-color) transparent;
                position: absolute;
                right: 5px;
                top: -40px;
            }

            .cfs-header-nav-template-1 .cfs-links ul li:not(:last-child) a {
                border-bottom: 1px solid var(--cfs-theme-text-color);
            }

            .cfs-header-nav-template-1 .cfs-links ul li a {
                display: block;
                padding: 15px;
                text-decoration: none;
                color: var(--cfs-theme-text-color);
                transition: 0.3s ease;
                font-weight: 900;
            }

                .cfs-header-nav-template-1 .cfs-links ul li a:hover {
                    padding-left: 25px;
                }

/***********************************************************************************/
/*                                                                                 */
/*                                  Menue end                                      */
/*                                                                                 */
/***********************************************************************************/

/***********************************************************************************/
/*                                                                                 */
/*                                    c4s ElZeroDash start                         */
/*                                                                                 */
/***********************************************************************************/
:root {
    --ElZeroDash-blue-color: #0075ff;
    --ElZeroDash-blue-alt-color: #0d69d5;
    --ElZeroDash-orange-color: #f59e0b;
    --ElZeroDash-green-color: #22c55e;
    --ElZeroDash-red-color: #f44336;
    --ElZeroDash-grey-color: #888;
    --ElZeroDash-eee-color: #eee;
}

.cfs-ElZeroDash-bg-blue {
    background-color: var(--ElZeroDash-blue-color);
}

.cfs-ElZeroDash-bg-orange {
    background-color: var(--ElZeroDash-orange-color);
}

.cfs-ElZeroDash-bg-green {
    background-color: var(--ElZeroDash-green-color);
}


.cfs-ElZeroDash-body {
    width: 100%;
    min-height: 100vh;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page {
        display: flex;
        min-height: 100vh;
        /*background-color: #f1f5f9;*/
        background-color: var(--cfs-theme-background-color);
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar {
            position: relative;
            background-color: white;
            padding: 20px;
            width: 250px;
            box-shadow: 0 0 10px #ddd;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar > h3 {
                position: relative;
                text-align: center;
                margin-top: 0;
                margin-bottom: 50px;
                font-weight: bold;
            }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar > h3::before,
                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar > h3::after {
                    content: "";
                    background-color: black;
                    left: 50%;
                    transform: translateX(-50%);
                    position: absolute;
                }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar > h3::before {
                    width: 80px;
                    height: 2px;
                    bottom: -20px;
                }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar > h3::after {
                    width: 20px;
                    height: 20px;
                    bottom: -29px;
                    border: 4px solid white;
                    border-radius: 50%;
                }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul {
                list-style: none;
                padding: 0;
            }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li {
                }

                    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li a {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        color: black;
                        border-radius: 6px;
                        padding: 10px;
                        transition: 0.3s;
                        margin-bottom: 5px;
                    }

                        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li a:hover,
                        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li a:active {
                            background-color: #f6f6f6;
                        }

                        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li a.cfs-ElZeroDash-active {
                            display: flex;
                            align-items: center;
                            font-size: 14px;
                            color: var(--cfs-theme-text-color);
                            border-radius: 6px;
                            padding: 10px;
                            background-color: var(--cfs-theme-background-color);
                        }

                        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li a span {
                            font-size: 14px;
                            margin-left: 10px;
                        }

                            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li a span span {
                            }

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar {
        width: 50px;
        padding: 10px;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar h3 {
            font-size: 13px;
            margin-bottom: 15px;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar h3:before,
            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar h3:after {
                display: none;
            }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-sidebar ul li a span {
            display: none;
        }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content {
    width: 100%;
    overflow: hidden;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head {
        /*background-color: white;*/
        background-color: var(--cfs-theme-background-color);
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-search {
            position: relative;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-search::before {
                font-family: "Font Awesome 6 Free";
                position: absolute;
                content: "\f002";
                font-weight: 900;
                left: 15px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--ElZeroDash-grey-color);
                font-size: 14px;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-search input[type="search"] {
                padding: 10px;
                border: 1px solid #CCC;
                border-radius: 10px;
                margin-left: 5px;
                padding-left: 30px;
                width: 160px;
                transition: width 0.3s;
            }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-search input[type="search"]:focus {
                    outline-color: red;
                    width: 200px;
                }

                    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-search input[type="search"]:focus::placeholder {
                        opacity: 0;
                    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-icons {
            display: flex;
            align-items: center;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-icons .cfs-ElZeroDash-Notifications {
                position: relative;
            }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-icons .cfs-ElZeroDash-Notifications::before {
                    content: "";
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background-color: var(--ElZeroDash-red-color);
                    border-radius: 50%;
                    right: -5px;
                    top: -5px;
                }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-head .cfs-ElZeroDash-icons img {
                width: 32px;
                height: 32px;
                margin-left: 15px;
                margin-top: -10px;
            }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content h1 {
        margin: 20px 20px 40px;
        position: relative;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content h1::before,
        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content h1::after {
            content: "";
            height: 3px;
            position: absolute;
            bottom: -10px;
            left: 0;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content h1::before {
            background-color: white;
            width: 120px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content h1::after {
            background-color: black;
            width: 40px;
        }




    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: 20px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper {
        display: grid;
        grid-template-columns: minmax(200px, 1fr);
        gap: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome {
    background-color: white;
    border-radius: 10px;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-welcome {
        text-align: center;
        display: block;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-intro {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    background-color: #eee;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-intro h2 {
        margin: 0;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-intro p {
        color: var(--ElZeroDash-grey-color);
        margin-top: 5px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-intro img {
        width: 200px;
        margin-bottom: -10px;
    }

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-intro img {
        /*display:none;*/
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-avatar {
    width: 64px;
    height: 64px;
    border: 2px solid white;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 0 5px #ddd;
    margin-left: 20px;
    margin-top: -32px;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-avatar {
        margin-left: 0;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-welcome-body {
    text-align: center;
    display: flex;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-welcome-body {
        display: block;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-welcome-body > div {
    flex: 1;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-welcome-body > div:not(:last-child) {
        margin-bottom: 20px;
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-welcome-body span {
    display: block;
    color: var(--ElZeroDash-grey-color);
    font-size: 14px;
    margin-top: 10px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-visit {
    display: block;
    font-size: 14px;
    background-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-text-color);
    width: fit-content;
    margin: 0 15px 15px auto;
    transition: 0.3s;
    padding: 4px 10px;
    border-radius: 6px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-visit:hover {
        background-color: var(--ElZeroDash-blue-alt-color);
    }

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-welcome .cfs-ElZeroDash-intro {
        padding-bottom: 30px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft h2 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft p {
        margin-top: 0;
        margin-bottom: 20px;
        color: var(--ElZeroDash-grey-color);
        font-size: 15px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft form {
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft form input[type="text"] {
            display: block;
            margin-bottom: 20px;
            width: 100%;
            padding: 10px;
            border: none;
            background-color: #eee;
            border-radius: 6px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft form textarea {
            resize: none;
            display: block;
            margin-bottom: 20px;
            width: 100%;
            height: 200px;
            padding: 10px;
            border: none;
            background-color: #eee;
            border-radius: 6px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft form input[type="submit"] {
            display: block;
            border: none;
            font-size: 14px;
            background-color: var(--ElZeroDash-blue-color);
            color: white;
            width: fit-content;
            padding: 4px 10px;
            border-radius: 6px;
            margin-left: auto;
            transition: 0.3s;
            cursor: pointer;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-quick-draft form input[type="submit"]:hover {
                background-color: var(--ElZeroDash-blue-alt-color);
            }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets h2 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets p {
        margin-top: 0;
        margin-bottom: 20px;
        color: var(--ElZeroDash-grey-color);
        font-size: 15px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            margin-right: 15px;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-icon i {
            }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details {
            flex: 1;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details > span:first-child {
                font-size: 14px;
                color: gray;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details > span:nth-child(2) {
                display: block;
                margin-top: 5px;
                margin-bottom: 10px;
                font-weight: bold;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details .cfs-ElZeroDash-targets-row-details-progress {
                position: relative;
                height: 4px;
            }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details .cfs-ElZeroDash-targets-row-details-progress > span {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                }

                    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details .cfs-ElZeroDash-targets-row-details-progress > span span {
                        position: absolute;
                        bottom: 16px;
                        right: -16px;
                        color: white;
                        padding: 2px 5px;
                        border-radius: 6px;
                        font-size: 13px;
                    }

                        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details .cfs-ElZeroDash-targets-row-details-progress > span span::after {
                            content: "";
                            border-color: transparent;
                            border-width: 5px;
                            border-style: solid;
                            position: absolute;
                            bottom: -10px;
                            left: 50%;
                            transform: translateX(-50%);
                        }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details .cfs-ElZeroDash-targets-row-details-progress > .cfs-ElZeroDash-blue span::after {
                    border-top-color: var(--ElZeroDash-blue-color);
                }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details .cfs-ElZeroDash-targets-row-details-progress > .cfs-ElZeroDash-orange span::after {
                    border-top-color: var(--ElZeroDash-orange-color);
                }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-targets .cfs-ElZeroDash-targets-row .cfs-ElZeroDash-targets-row-details .cfs-ElZeroDash-targets-row-details-progress > .cfs-ElZeroDash-green span::after {
                    border-top-color: var(--ElZeroDash-green-color);
                }

.cfs-ElZeroDash-blue .cfs-ElZeroDash-targets-row-icon,
.cfs-ElZeroDash-blue .cfs-ElZeroDash-targets-row-details-progress {
    color: var(--ElZeroDash-blue-color);
    background-color: rgb(0 117 255 / 20%);
}

.cfs-ElZeroDash-orange .cfs-ElZeroDash-targets-row-icon,
.cfs-ElZeroDash-orange .cfs-ElZeroDash-targets-row-details-progress {
    color: var(--ElZeroDash-orange-color);
    background-color: rgb(245 158 11 / 20%);
}

.cfs-ElZeroDash-green .cfs-ElZeroDash-targets-row-icon,
.cfs-ElZeroDash-green .cfs-ElZeroDash-targets-row-details-progress {
    color: var(--ElZeroDash-green-color);
    background-color: rgb(34 197 94 / 20%);
}



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets h2 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets p {
        margin-top: 0;
        margin-bottom: 20px;
        color: var(--ElZeroDash-grey-color);
        font-size: 15px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div {
        display: flex;
        text-align: center;
        gap: 20px;
        flex-wrap: wrap;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box {
            padding: 20px;
            border-radius: 10px;
            font-size: 13px;
            color: var(--ElZeroDash-grey-color);
            border: 1px solid #CCC;
            width: calc(50% - 10px);
        }

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box {
        width: 100%;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box i {
    margin-bottom: 10px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box:first-child i {
    color: var(--ElZeroDash-orange-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box:nth-child(2) i {
    color: var(--ElZeroDash-blue-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box:nth-child(3) i {
    color: var(--ElZeroDash-green-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box:last-child i {
    color: var(--ElZeroDash-red-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tickets > div .cfs-ElZeroDash-box span {
    display: block;
    color: black;
    font-weight: bold;
    font-size: 25px;
    margin-bottom: 5px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

@media (max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news {
        text-align: center;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div {
    display: flex;
    align-items: center;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div:not(:last-of-type) {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div img {
        width: 100px;
        border-radius: 6px;
        margin-right: 15px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div div {
        flex-grow: 1;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div div h3 {
            margin: 0 0 6px;
            font-size: 16px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div div p {
            margin: 0;
            font-size: 14px;
            color: var(--ElZeroDash-grey-color);
        }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div span {
        display: block;
        border: none;
        font-size: 13px;
        background-color: var(--ElZeroDash-eee-color);
        color: black;
        width: fit-content;
        padding: 4px 10px;
        border-radius: 6px;
        margin-left: auto;
        transition: 0.3s;
        cursor: pointer;
    }

@media (max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-news > div span {
            margin: 10px auto;
            width: fit-content;
        }
}




.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks h2 {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div:not(:last-of-type) {
            border-bottom: 1px solid #eee;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div div {
            flex: 1;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div div h3 {
                margin-top: 0;
                margin-bottom: 5px;
                font-size: 15px;
            }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div:first-of-type div h3 {
            opacity: 0.3;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div:first-of-type div h3 {
            text-decoration: line-through;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div div p {
            margin: 0;
            color: var(--ElZeroDash-grey-color);
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div i {
            cursor: pointer;
            transition: 0.3s;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-tasks > div i:hover {
                color: var(--ElZeroDash-red-color);
            }



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items h2 {
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items .cfs-ElZeroDash-items-head {
        display: flex;
        justify-content: space-between;
        color: var(--ElZeroDash-grey-color);
        margin-bottom: 10px;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items .cfs-ElZeroDash-items-head div {
        }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items .cfs-ElZeroDash-items {
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        padding-bottom: 15px;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items .cfs-ElZeroDash-items span {
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items .cfs-ElZeroDash-items span span {
                background-color: var(--ElZeroDash-eee-color);
                font-size: 13px;
                display: block;
                border: none;
                color: white;
                width: fit-content;
                padding: 4px 10px;
                border-radius: 6px;
                margin-left: auto;
                transition: 0.3s;
                cursor: pointer;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Search-items .cfs-ElZeroDash-items span span {
                background-color: var(--ElZeroDash-eee-color);
                font-size: 13px;
                display: block;
                border: none;
                color: white;
                width: fit-content;
                padding: 4px 10px;
                border-radius: 6px;
                margin-left: auto;
                transition: 0.3s;
                cursor: pointer;
            }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads h2 {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul li:not(:last-child) {
                border-bottom: 1px solid #eee;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul li div {
                display: flex;
                align-items: center;
            }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul li div img {
                    width: 40px;
                    height: 40px;
                    margin-right: 10px;
                }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul li div div span:first-of-type {
                    display: block;
                }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul li div div span:last-of-type {
                    display: block;
                    font-size: 15px;
                    color: var(--ElZeroDash-grey-color);
                }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-uploads ul li > div:last-of-type {
                background-color: var(--ElZeroDash-eee-color);
                font-size: 13px;
                display: block;
                border: none;
                color: black;
                width: fit-content;
                padding: 4px 10px;
                border-radius: 6px;
                margin-left: auto;
                transition: 0.3s;
                cursor: pointer;
            }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    position: relative;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project h2 {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project ul {
        margin: 0;
        position: relative;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project ul::before {
            content: "";
            position: absolute;
            left: 11px;
            width: 2px;
            height: 100%;
            background-color: var(--ElZeroDash-blue-color);
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project ul li {
            margin-top: 25px;
            display: flex;
            align-items: center;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project ul li::before {
                content: "";
                width: 20px;
                height: 20px;
                display: block;
                border-radius: 50%;
                background-color: white;
                border: 2px solid white;
                outline: 2px solid var(--ElZeroDash-blue-color);
                margin-right: 15px;
                left: 50%;
                transform: translateX(10%);
                z-index: 1;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project ul li.cfs-ElZeroDash-last-project-done::before {
                background-color: var(--ElZeroDash-blue-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project ul li.cfs-ElZeroDash-last-project-current::before {
                animation: cfs-keyframes-animation-change-color 0.8s infinite alternate;
            }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-last-project img {
    position: absolute;
    width: 140px;
    right: 0;
    bottom: 0;
    opacity: 0.1;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    position: relative;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders h2 {
        margin-top: 0;
        margin-bottom: 25px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul {
        margin: 0;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li {
            margin-top: 0;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            margin-top: 15px;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li .cfs-ElZeroDash-Key {
                width: 15px;
                height: 15px;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li .cfs-ElZeroDash-Key {
                background-color: var(--ElZeroDash-blue-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li:nth-child(2) .cfs-ElZeroDash-Key {
                background-color: var(--ElZeroDash-green-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li:nth-child(3) .cfs-ElZeroDash-Key {
                background-color: var(--ElZeroDash-orange-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li:last-child .cfs-ElZeroDash-Key {
                background-color: var(--ElZeroDash-red-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > .cfs-ElZeroDash-Reminders-blue {
                border-left: 2px solid var(--ElZeroDash-blue-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > .cfs-ElZeroDash-Reminders-green {
                border-left: 2px solid var(--ElZeroDash-green-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > .cfs-ElZeroDash-Reminders-orange {
                border-left: 2px solid var(--ElZeroDash-orange-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > .cfs-ElZeroDash-Reminders-red {
                border-left: 2px solid var(--ElZeroDash-red-color);
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > span {
                background-color: var(--ElZeroDash-blue-color);
                margin-right: 15px;
                display: block;
                border-radius: 50%;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > div {
                padding-left: 15px;
            }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > div p {
                    font-size: 14px;
                    font-weight: bold;
                    margin-top: 0;
                    margin-bottom: 5px;
                }

                .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-Reminders ul li > div span {
                    font-size: 13px;
                    color: var(--ElZeroDash-grey-color);
                }



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    position: relative;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post > h2 {
        margin-top: 0;
        margin-bottom: 25px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post > div {
        display: flex;
        align-items: center;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post > div img {
            margin-right: 15px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post > div .cfs-ElZeroDash-latest-post-avatar {
            width: 48px;
            height: 48px;
        }


        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post > div div {
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post > div div.cfs-ElZeroDash-latest-post-info span:first-child {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
            }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post > div div.cfs-ElZeroDash-latest-post-info span:nth-child(2) {
                color: var(--ElZeroDash-grey-color);
            }



    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post .cfs-ElZeroDash-latest-post-top {
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post .cfs-ElZeroDash-latest-post-content {
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        text-transform: capitalize;
        line-height: 1.8;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        min-height: 140px;
    }

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post .cfs-ElZeroDash-latest-post-content {
        text-align: center;
    }
}



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-latest-post .cfs-ElZeroDash-latest-post-stats {
    display: flex;
    justify-content: space-between;
    color: var(--ElZeroDash-grey-color);
}


.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    position: relative;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media h2 {
        margin-top: 0;
        margin-bottom: 25px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-box {
        padding: 15px;
        position: relative;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 70px;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-box i {
            color: white;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            top: 0;
            width: 52px;
            transition: 0.3s;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-box i:hover {
                transform: rotate(5deg);
            }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-twitter {
        background-color: rgb(29 161 242 / 20%);
        color: #1da1f2;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-twitter i,
        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-twitter a {
            background-color: #1da1f2;
        }




    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-facebook {
        background-color: rgb(24 119 242 / 20%);
        color: #1da1f2;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-facebook i,
        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-facebook a {
            background-color: #1877f2;
        }





    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-youtube {
        background-color: rgb(255 0 0 / 20%);
        color: #ff0000;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-youtube i,
        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-youtube a {
            background-color: #ff0000;
        }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-instagram {
        background-color: rgb(29 161 242 / 20%);
        color: #1da1f2;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-instagram i,
        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-instagram a {
            background-color: #1da1f2;
        }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-snabchat {
        background-color: rgb(29 161 242 / 20%);
        color: #1da1f2;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-snabchat i,
        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-snabchat a {
            background-color: #1da1f2;
        }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-wrapper .cfs-ElZeroDash-social-media .cfs-ElZeroDash-social-media-box a {
        font-size: 13px;
        color: white;
        font-size: 13px;
        display: block;
        border: none;
        width: fit-content;
        padding: 4px 10px;
        border-radius: 6px;
        margin-left: auto;
        transition: 0.3s;
        cursor: pointer;
    }







.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    margin: 20px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects h2 {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects .cfs-ElZeroDash-Projects-responsive-table {
        overflow-x: auto; /*To Show the Scroll*/
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table {
        font-size: 15px;
        width: 100%; /*To Show the Scroll*/
        min-width: 1000px; /*To Show the Scroll*/
        border-spacing: 0;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table td {
            padding: 15px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table thead td {
            background-color: #eee;
            font-weight: bold;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table tbody td {
            border-bottom: 1px solid #eee;
            border-left: 1px solid #eee;
            transition: 0.3s;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table tbody tr td:last-child {
            border-right: 1px solid #eee;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table tbody tr:hover td {
            background-color: #faf7f7;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            padding: 2px;
            background-color: white;
            display: inline;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table img:not(:first-child) {
                margin-left: -20px;
            }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Projects table span {
            background-color: var(--ElZeroDash-orange-color);
            color: white;
            font-size: 13px;
            color: white;
            font-size: 13px;
            display: block;
            border: none;
            width: fit-content;
            padding: 4px 10px;
            border-radius: 6px;
            margin-left: auto;
            transition: 0.3s;
            cursor: pointer;
        }










.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page {
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 20px;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page {
        grid-template-columns: minmax(100px, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page input[type="checkbox"].cfs-ElZeroDash-toggle-checkbox {
    -webkit-appearance: none;
    appearance: none;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-toggle-switch {
    background-color: #ccc;
    width: 78px;
    height: 32px;
    border-radius: 16px;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-toggle-switch::before {
        content: "\f00d";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        background-color: white;
        width: 24px;
        height: 24px;
        position: absolute;
        border-radius: 50%;
        top: 4px;
        left: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #AAA;
        transition: 0.3s;
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-toggle-checkbox:checked + .cfs-ElZeroDash-toggle-switch {
    background-color: var(--cfs-theme-background-color);
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-toggle-checkbox:checked + .cfs-ElZeroDash-toggle-switch::before {
        content: "\f00c";
        left: 50px;
        color: var(--ElZeroDash-blue-color);
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}


.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page :disabled {
    cursor: no-drop;
    background-color: #f0f4f8;
    color: #bbb;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div p {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--ElZeroDash-grey-color);
    font-size: 15px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div div {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div div div {
        display: flex;
        flex-direction: column;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div div div span {
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div div div p {
            color: var(--ElZeroDash-grey-color);
            margin-top: 5px;
            margin-bottom: 0;
            font-size: 13px;
            display: block;
        }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div div div {
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page > div textarea {
    width: 100%;
    min-height: 150px;
    resize: none;
    border: 1px solid var(--cfs-theme-background-color);
    outline: none;
    padding: 10px;
    border-radius: 6px;
}





.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-email {
    display: inline-flex;
    width: calc(100% - 80px);
}


.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-sec-box {
    padding-bottom: 15px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-sec-box:not(:last-of-type) {
        border-bottom: 1px solid #eee;
    }



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-social-media-boxes i {
    width: 40px;
    height: 40px;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 6px 0 0 6px;
    transition: 0.3s;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-social-media-boxes input[type="text"] {
    height: 40px;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    padding-left: 10px;
    border-radius: 0 6px 6px 0;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-social-media-boxes > div:focus-within i {
    color: black;
}








.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-widgets-control {
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-widgets-control .cfs-ElZeroDash-Settings-page-widgets-control-control {
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-widgets-control .cfs-ElZeroDash-Settings-page-widgets-control-control label {
            padding-left: 30px;
        }






.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-date {
    display: flex;
    justify-content: left;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-date label {
    padding-left: 30px;
    cursor: pointer;
    position: relative;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-date label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -11px;
        width: 18px;
        height: 18px;
        border: 2px solid var(--ElZeroDash-grey-color);
        border-radius: 50%;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-date label::after {
        content: "";
        position: absolute;
        left: 3px;
        top: 4px;
        width: 12px;
        height: 12px;
        background-color: var(--ElZeroDash-blue-color);
        border-radius: 50%;
        transition: 0.3s;
        transform: scale(0);
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-date input[type="radio"]:checked + label::before {
    border-color: var(--ElZeroDash-blue-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-date input[type="radio"]:checked + label::after {
    transform: scale(1);
}





.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-servers {
    border-top: 1px solid #eee;
    padding-top: 20px;
}



@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-servers {
        flex-wrap: wrap;
    }
}



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-servers .server {
    border: 2px solid #eee;
    position: relative;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-servers .server label {
        cursor: pointer;
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-Settings-page .cfs-ElZeroDash-Settings-page-backup-control .cfs-ElZeroDash-Settings-page-backup-control-servers input[type="radio"]:checked + .server {
    border-color: var(--cfs-theme-background-color);
    color: var(--cfs-theme-background-color);
}









.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page {
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .overview {
    }

@media(max-width:767px) {

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .overview {
        flex-direction: column;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .overview .avatar-box {
    width: 300px;
}

@media(min-width:767px) {

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .overview .avatar-box {
        border-right: 1px solid #eee;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .overview .avatar-box > img {
    width: 120px;
    height: 120px;
    margin: auto;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .overview .avatar-box .level {
    height: 6px;
    overflow: hidden;
    margin: auto;
    width: 70%;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .overview .avatar-box .level span {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background-color: var(--cfs-theme-background-color);
        border-radius: 6px;
    }


@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .info-box {
        text-align: center;
    }
}


.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .info-box .box {
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    transition: 0.3s;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .info-box .box:hover {
        background-color: var(--cfs-theme-background-color);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .info-box .box > div {
        min-width: 250px;
        padding: 10px 0 0;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .info-box .box h4 {
        font-weight: normal;
    }


@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .other-data {
        flex-direction: column;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .skills-card {
    flex-grow: 1;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .skills-card ul li {
        padding: 15px 0;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .skills-card ul li:not(:last-child) {
            border-bottom: 1px solid #eee;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .skills-card ul li span {
            display: inline-flex;
            padding: 4px 10px;
            background-color: #eee;
            border-radius: 6px;
            font-size: 14px;
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .skills-card ul li span:not(:last-child) {
                margin-right: 5px;
            }

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .skills-card {
        text-align: center;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .activities {
    flex-grow: 2;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .activity:not(:last-of-type) {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page img {
    width: 64px;
    height: 64px;
    margin-right: 10px;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .activity {
        flex-direction: column;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .activity img {
            margin-right: 0;
            margin-bottom: 15px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .activity .date {
            margin-top: 15px;
        }
}

@media(min-width:768px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-profile-page .date {
        margin-left: auto;
        text-align: right;
    }
}



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page {
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page {
        grid-template-columns: minmax(200px, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }
}


.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .date {
    position: absolute;
    right: 10px;
    top: 10px;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project h4 {
    font-weight: normal;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team {
    position: relative;
    min-height: 80px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team a {
        position: absolute;
        left: 0;
        bottom: 0;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team a:nth-child(2) {
            left: 25px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team a:nth-child(3) {
            left: 50px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team a:nth-child(4) {
            left: 75px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team a:nth-child(5) {
            left: 100px;
        }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team a:hover {
            z-index: 1000;
        }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .team img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid white;
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .do {
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 15px;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .do {
        flex-direction: column;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .do span {
    padding: 3px 8px;
    margin-left: 5px;
    width: fit-content;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .do span:not(:last-child) {
        margin-bottom: 15px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .info {
    border-top: 1px solid #eee;
    margin-top: 15px;
    padding-top: 15px;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .info {
        flex-direction: column;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .prog {
    height: 8px;
    width: 260px;
    position: relative;
    border-radius: 6px;
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .prog {
        margin-bottom: 15px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-projects-page .project .prog span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 6px;
}






.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page {
        grid-template-columns: minmax(200px, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page .course {
    overflow: hidden;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page .course .cover {
        width: 200px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page .course .instructor {
        position: absolute;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        top: 20px;
        left: 20px;
        border: 2px solid white;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page .course .description {
        line-height: 1.6;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page .course .info {
        border-top: 1px solid #eee;
        font-size: 13px;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-courses-page .course .info .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 13px;
            top: -13px;
        }



.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page {
        grid-template-columns: minmax(200px, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page .contact {
    position: absolute;
    left: 10px;
    top: 10px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page .contact i {
        background-color: #eee;
        padding: 10px;
        border-radius: 50%;
        color: #666;
        font-size: 13px;
        cursor: pointer;
        transition: 0.3s;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page .contact i:hover {
            background-color: var(--ElZeroDash-blue-color);
            color: white;
        }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page .friends .icons {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page .friends .icons i {
        margin-right: 5px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-friends-page .friends .icons .vip {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40px;
        opacity: 0.2;
    }







.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats {
    min-width: 260px;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .size {
        margin-left: auto;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .blue {
        background-color: rgb(0 117 255 / 20%);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .green {
        background-color: rgb(34 197 94 / 20%);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .red {
        background-color: rgb(244 67 54 / 20%);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .orange {
        background-color: rgb(245 158 11 / 20%);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .upload {
        margin: 15px auto 0;
        padding: 10px 15px;
        transition: 0.3s;
    }

        .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .upload:hover {
            background-color: var(--ElZeroDash-blue-alt-color);
        }

            .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-stats .upload:hover i {
                animation: cfs-keyframes-animation-go-up 0.8s infinite;
            }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page {
    flex-direction: row-reverse;
    align-items: flex-start;
}

@media(max-width: 767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page {
        flex-direction: column;
        align-items: normal;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-content {
    flex: 1;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-content img {
        width: 64px;
        height: 64px;
        transition: 0.3s;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-content .file:hover img {
        transform: rotate(5deg);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-files-page .files-content .info {
        border-top: 1px solid #eee;
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page {
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

@media(max-width:767px) {
    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page {
        grid-template-columns: minmax(250px, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan .top {
    border: 3px solid white;
    outline: 3px solid transparent;
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan.green .top {
    outline-color: var(--ElZeroDash-green-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan.blue .top {
    outline-color: var(--ElZeroDash-blue-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan.orange .top {
    outline-color: var(--ElZeroDash-orange-color);
}

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan .price {
    position: relative;
    font-size: 40px;
    width: fit-content;
    margin: auto;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan .price span {
        position: absolute;
        left: -20px;
        top: 0;
        font-size: 25px;
    }

.cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan ul li {
    padding: 15px 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    border-bottom: 1px solid #eee;
}

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan ul li .yes {
        color: var(--ElZeroDash-green-color);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan ul li i:not(.yes, .help) {
        color: var(--ElZeroDash-red-color);
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan ul li i:first-child {
        font-size: 18px;
        margin-right: 5px;
    }

    .cfs-ElZeroDash-body .cfs-ElZeroDash-page .cfs-ElZeroDash-content .cfs-ElZeroDash-plans-page .plan ul li .help {
        color: var(--ElZeroDash-grey-color);
        margin-left: auto;
        cursor: pointer;
    }

/***********************************************************************************/
/*                                                                                 */
/*                                    c4s ElZeroDash end                           */
/*                                                                                 */
/***********************************************************************************/



/***********************************************************************************/
/*                                                                                 */
/*                                 Dropdown Menu Start                             */
/*                                                                                 */
/***********************************************************************************/

.dropbtn {
/*    background-color: #4CAF50;
    color: white;*/
/*    padding: 16px;
    font-size: 16px;
    border: none;*/
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--cfs-theme-background-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

/*
    <div class="dropdown" >
        <button class="dropbtn" > Dropdown</button >
        <div class="dropdown-content" >
        <a href="#" > Link 1</a >
        <a href="#" > Link 2</a >
        <a href="#" > Link 3</a >
        </div >
    </div >
*/
/***********************************************************************************/
/*                                                                                 */
/*                                 Dropdown Menu End                               */
/*                                                                                 */
/***********************************************************************************/
/***********************************************************************************/
/*                                                                                 */
/*                          cfs-dialog-confirmation Start                          */
/*                                                                                 */
/***********************************************************************************/
/*.cfs-dialog-confirmation {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    border: 5px solid #0b5ed7;
    width: 600px;
    margin-right: auto;
    flex-direction:row;
    text-align:center;
    
    border: 10px solid var(--cfs-theme-background-color);
    border-radius: 20px;

}*/
.cfs-dialog-confirmation {
    border: 5px solid var(--cfs-theme-background-color);
    border-radius: 20px;
    min-width: 300px;
    padding: 100px;
}

.cfs-dialog-confirmation p{
    font-weight:900;
}

    .cfs-dialog-confirmation button {
        margin:20px;
        width:100%;
    }

/***********************************************************************************/
/*                                                                                 */
/*                          cfs-dialog-confirmation End                            */
/*                                                                                 */
/***********************************************************************************/


/***********************************************************************************/
/*                                                                                 */
/*                              cfs-mainlogo Start                                 */
/*                                                                                 */
/***********************************************************************************/

.cfs-mainlogo-c-25x25 {
    width: 25px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
}
 
.cfs-mainlogo-c-50x50 {
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
}
 
.cfs-mainlogo-c-75x75 {
    width:75px;
    height:75px;
    margin-left:auto;
    margin-right:auto;
}
 
.cfs-mainlogo-c-100x100 {
    width:100px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
}
 
.cfs-mainlogo-c-200x200 {
    width:200px;
    height:200px;
    margin-left:auto;
    margin-right:auto;
}
 
/***********************************************************************************/
/*                                                                                 */
/*                              cfs-mainlogo End                                   */
/*                                                                                 */
/***********************************************************************************/









/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/*                                                                                                                                                                           */
/*                                                                   @keyframes Animations start                                                                             */
/*                                                                                                                                                                           */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/


/****************************************************************************************************/
/****************************************************************************************************/

/*animation: cfs-keyframes-animation-rotate 4s linear infinite;*/

@keyframes cfs-keyframes-animation-rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

/****************************************************************************************************/
/****************************************************************************************************/

/*animation: cfs-keyframes-animation-floatImage-up-down 4s ease-in-out infinite;*/

@keyframes cfs-keyframes-animation-floatImage-up-down {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.4rem);
    }

    100% {
        transform: translateY(0);
    }
}

/****************************************************************************************************/
/****************************************************************************************************/

/*animation: cfs-keyframes-animation-up-and-down 4s ease-in-out infinite;*/

@keyframes cfs-keyframes-animation-up-and-down {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.4rem);
    }

    100% {
        transform: translateY(0);
    }
}

/****************************************************************************************************/
/****************************************************************************************************/

/*animation: cfs-keyframes-animation-scale 4s ease-in-out infinite;*/

@keyframes cfs-keyframes-animation-scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/****************************************************************************************************/
/****************************************************************************************************/
 
/*<div class="cfs-keyframes-animation-Square"></div>*/

.cfs-keyframes-animation-Square {
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;
    animation: cfs-keyframes-animation-Square 10s ease-in-out infinite;
}

@keyframes cfs-keyframes-animation-Square {
    0% {
        translate: 0 0;
    }

    25% {
        translate: 0 95vh;
    }

    50% {
        translate: 90% 95vh;
    }

    75% {
        translate: 90% 0;
    }

    100% {
        translate: 0 0;
    }
}

/****************************************************************************************************/
/****************************************************************************************************/
 
@keyframes cfs-page-title-name-animation-left-move {
    50% {
        left: 0;
        width: 12px;
        height: 12px;
    }

    100% {
        left: 0;
        border-radius: 20px 0 0 20px;
        width: 50%;
        height: 100%;
    }
}

/****************************************************************************************************/
/****************************************************************************************************/
 
@keyframes cfs-page-title-name-animation-right-move {
    50% {
        right: 0;
        width: 12px;
        height: 12px;
    }

    100% {
        right: 0;
        border-radius: 0 20px 20px 0;
        width: 50%;
        height: 100%;
    }
}

/****************************************************************************************************/
/****************************************************************************************************/
 
/*
<div class="cfs-loader-Box" >
<span > </span >
<span > </span >
<span > </span >
<span > </span >
</div >
*/


.cfs-loader-Box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 100px;
    height: 100px;
    animation: animate 1s linear infinite;
}

    .cfs-loader-Box span {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #f00;
        border-radius: 10px;
        animation: rotate 1s linear infinite;
        font-size: 1.5rem;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cfs-loader-Box span:nth-child(1) {
            top: 0;
            left: 0;
            background-color: #0094D9; /*code logo light blue*/
        }

        .cfs-loader-Box span:nth-child(2) {
            top: 0;
            right: 0;
            background-color: #4DA391; /*code logo green tefany*/
        }

        .cfs-loader-Box span:nth-child(3) {
            bottom: 0;
            left: 0;
            background-color: #E61A22; /*code logo red*/
        }

        .cfs-loader-Box span:nth-child(4) {
            bottom: 0;
            right: 0;
            background-color: #475E88; /*code logo purple*/
        }


.myInput-search {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    font-size: 16px;
    transition: all 0.3s ease;
}

    .myInput-search:focus {
        border-color: #555;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }


@keyframes animate {
    0% {
        width: 100px;
        height: 100px;
    }

    10% {
        width: 100px;
        height: 100px;
    }

    50% {
        width: 150px;
        height: 150px;
    }

    90% {
        width: 100px;
        height: 100px;
    }

    100% {
        width: 100px;
        height: 100px;
    }
}

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

    10% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(90deg);
    }

    90% {
        transform: rotate(90deg);
    }

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

/****************************************************************************************************/
/****************************************************************************************************/
 
@keyframes cfs-keyframes-animation-change-color {
    from {
        background-color: var(--ElZeroDash-blue-alt-color);
    }

    to {
        background-color: white;
    }
}

/****************************************************************************************************/
/****************************************************************************************************/

@keyframes cfs-keyframes-animation-go-up {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/****************************************************************************************************/
/****************************************************************************************************/
@media (min-width: 768px){
    .cfs-container{
        width:750px;
    }
}   
@media (min-width: 992px){
    .cfs-container{
        width:970px;
    }
}   
@media (min-width: 1200px){
    .cfs-container{
        width:1170px;
    }
}   
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/*                                                                                                                                                                           */
/*                                                                   @keyframes Animations End                                                                               */
/*                                                                                                                                                                           */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************/