.cc-container-form {
            width: 95%;
            margin: 0 auto;
            padding: 0;
            text-align: center;
            direction: rtl;
        }

        .color-blue {
            color: #185ee0;
        }

        .color-red {
            color: #e01818;
        }


        .cc-hide {
            display: none;
        }

        .cc-profile-avatar {
            width: 150px;
            margin: 0 auto;
            overflow: hidden;
        }

        .cc-profile-avatar img {
            border-radius: 10px;
            width: 150px;
            height: 150px;
        }

        .cc-profile-upload-btn {
            background-color: #c2c5ca;
            color: #fff;
            border-radius: 5px;
            padding: 7px 0;
            font-weight: 100;
            cursor: pointer;
        }

        .cc-row-form {
            margin: 15px 0 0 0;
            padding: 0;
            text-align: right;
        }

        .cc-input-half-box {
            width: 47.5%;
            margin: 0 1% 0 1%;
            padding: 0;
            display: inline-block;
            vertical-align: top;
        }

        .cc-input-third-box,
        .cc-input-date-box {
            width: 30%;
            margin: 0 1% 0 1%;
            padding: 0;
            display: inline-block;
            vertical-align: top;
        }

        .cc-input-sixth-box {
            width: 14.5%;
            margin: 0 0.7% 0 0.7%;
            padding: 0;
            display: inline-block;
            vertical-align: top;
        }

        .cc-textarea-box {
            margin: 0 1% 0 1%;
            padding: 0;
            display: block;
        }

        .cc-input-label {
            display: block;
            font-size: 11pt;
            font-weight: 300;
            color: #111;
            padding: 0 0 5px 0;
        }

        .cc-input {
            display: block;
            width: 100%;
            margin: 0;
            border: 1px solid #ddd;
            border-radius: 7px;
            padding: 10px 0;
            font-family: 'IRANSans';
            font-size: 12pt;
            text-indent: 10px;
        }

        .cc-textarea {
            display: block;
            width: 95%;
            margin: 0;
            border: 1px solid #ddd;
            border-radius: 7px;
            padding: 10px 1%;
            font-family: 'IRANSans';
            font-size: 12pt;
        }

        .cc-select {
            -webkit-appearance: none;
            appearance: none;
            background-image: url("../img/arrow.png");
            background-size: 14px;
            background-repeat: no-repeat;
            background-position: calc(8px) center;
        }


        .cc-select::picker(select) {
            appearance: base-select;
            color: #000;
            background-color: #185ee0;
            margin: 0 10px;
        }

        .cc-hr {
            width: 100%;
            height: 1px;
            overflow: hidden;
            background-color: #ddd;
            margin: 40px 0;
        }

        .cc-title-form-section {
            text-align: right;
            font-size: 15pt;
            font-weight: 500;
        }

        .cc-savabegh-box,
        .cc-kar-box {
            margin: 0 0 10px 0;
            padding: 10px 0 15px 0;
            background-color: #f9f9f9;
            border: 1px solid #f0f0f0;
            border-radius: 10px;
            position: relative;
        }

        .cc-remove-row {
            position: absolute;
            left: 0;
            top: 0;
            background-color: #f12c2c;
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            text-align: center;
            overflow: hidden;
            line-height: 2.5;
        }

        .cc-kar-box:first-child .cc-remove-row,
        .cc-savabegh-box:first-child .cc-remove-row {
            display: none;
        }

        .cc-btn-add-savabegh,
        .cc-btn-add-kar {
            float: left;
            background-color: #eee;
            border-radius: 7px;
            text-align: center;
            padding: 5px 10px;
            margin: 0;
            font-size: 10pt;
            cursor: pointer;
        }

        .cc-send-rezome {
            display: block;
            padding: 5px 15px;
            margin: 30px auto 30px auto;
            text-align: center;
            font-family: 'IRANSans';
            background-color: #185ee0;
            color: #fff;
            border-radius: 5px;
            border: none;
            font-size: 14pt;
            cursor: pointer;
            /* float: left; */
        }


        .cc-send-rezome:hover {
            background: #005177;
        }

        .cc-send-rezome:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .cc-form-message {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .cc-form-message.success {
            background: #d4edda;
            color: #155724;
            font-weight: bold;
            font-size: 14pt;
            border: 1px solid #c3e6cb;
        }

        .cc-form-message.error {
            background: #f8d7da;
            color: #721c24;
            font-weight: bold;
            font-size: 14pt;
            border: 1px solid #f5c6cb;
        }

        .cc-form-single-data td {
            /* font-weight: bold; */
        }

        .cc-row-tr {
            border-bottom: 1px solid #ddd;
        }

        table.cc-list-job {
            width: 100%;
            border-collapse: collapse;
            text-align: right;
            direction: rtl;
        }

        table.cc-list-job th,
        table.cc-list-job td {
            padding: 10px 12px;
            border: 1px solid #ddd;
            text-align: right;
        }

        table.cc-list-job th {
            background: #f4f4f4;
            font-weight: bold;
        }

        table.cc-list-job tr:nth-child(even) {
            background: #fafafa;
        }

        table.cc-list-job tr:hover {
            background: #f1f1f1;
        }


        .button-reg-rezome {
            background-color: #305aff;
            color: #fff !important;
            font-weight: bold;
            border-radius: 7px;
            padding: 5px 10px;
            transition: all 0.5s;
        }

        .button-reg-rezome:hover {
            background-color: #280183;
            transition: all 0.5s;
        }


        .cc-table-message {
            width: 100%;
            border-collapse: collapse;
            /* remove double borders */
        }

        /* border & padding for cells */
        .cc-table-message th,
        .cc-table-message td {
            border: 1px solid #ddd;
            padding: 8px 12px;
        }

        /* header style */
        .cc-table-message thead th {
            background-color: #333;
            color: #fff;
            text-align: left;
        }

        /* zebra rows */
        .cc-table-message tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        /* hover effect */
        .cc-table-message tbody tr:hover {
            background-color: #eaeaea;
        }

        /* optional: narrow columns or align text */
        .cc-table-message td:nth-child(2) {
            text-align: center;
            /* age column */
            width: 80px;
        }


        .cc-clear {
            clear: both;
        }

        @media screen and (max-width: 800px) {
            .cc-input-date-box {
                width: 29%;
            }

            .cc-input-sixth-box {
                width: 45%;
                margin: 2px 2%;
            }

            .cc-row-full-import {
                width: 100% !important;
                margin: 0;
            }

            .cc-row-half-import {
                width: 46% !important;
                margin: 2px 1.5%;
            }

            .cc-textarea {
                width: 99%;
            }

            table {
                width: 100%;
                border-collapse: collapse;
            }

            table thead {
                display: none;
            }

            table,
            table tbody,
            table tr,
            table td {
                display: block;
                width: 100%;
            }

            table tr {
                margin-bottom: 1rem;
                border: 1px solid #ddd;
                padding: 10px;
            }

            table td {
                text-align: right;
                padding-left: 50%;
                position: relative;
            }

            table td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                text-align: left;
                font-weight: bold;
            }


        }



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

            .cc-textarea,
            .cc-input-half-box,
            .cc-input-third-box {
                width: 100%;
                margin: 5px 0 0 0;
            }

            .cc-input-sixth-box {
                width: 85%;
                margin: 5px auto;
                display: block;
            }

            .cc-row-half-import {
                width: 100% !important;
                margin: 2px 0;
            }

            .cc-send-rezome {
                width: 100%;
            }

        }